From 019104f46007b1aa6463db3efa9d933788cffba6 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 8 Oct 2024 12:42:38 +0800
Subject: [PATCH 001/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E4=BF=AE=E6=94=B9=E3=80=91-=20=E6=96=B0=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E7=95=8C=E9=9D=A2=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |  2 +-
 .../detail/ProcessInstanceTimeline.vue        | 17 ++--
 .../bpm/processInstance/detail/index_new.vue  | 89 ++++++++++++-------
 3 files changed, 70 insertions(+), 38 deletions(-)

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index 3d6330a8..86928816 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -47,7 +47,7 @@ export type ApprovalNodeInfo = {
   status: number
   startTime?: Date
   endTime?: Date
-  candidateUserList?: User[]
+  candidateUsers?: User[]
   tasks: ApprovalTaskInfo[]
 }
 
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index afb778c4..d201db12 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -14,7 +14,7 @@
         <div class="flex items-center mt-1">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
-            <div class="flex items-center flex-col pr-2">
+            <div class="flex flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                 <!-- 信息：头像 -->
                 <el-avatar
@@ -47,7 +47,7 @@
                 <!-- 信息：昵称 -->
                 <div
                   v-if="task.assigneeUser && task.assigneeUser.nickname"
-                  class="text-10px text-align-center"
+                  class="text-12px text-align-center"
                 >
                   {{ task.assigneeUser.nickname }}
                 </div>
@@ -57,14 +57,20 @@
                 >
                   {{ task.ownerUser.nickname }}
                 </div>
-                <!-- TODO @jason：审批意见，要展示哈。 -->
-                <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
+                <div v-if="task.reason" class="text-#a5a5a5 my-4px text-12px flex items-center w-100%">
+                  <div
+                    :title="task.reason"
+                    class="text-truncate w-200px border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
+                  >
+                    {{ task.reason }}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div
-            v-for="(user, idx1) in activity.candidateUserList"
+            v-for="(user, idx1) in activity.candidateUsers"
             :key="idx1"
             class="flex items-center"
           >
@@ -91,7 +97,6 @@
                 <div v-if="user.nickname" class="text-10px text-align-center">
                   {{ user.nickname }}
                 </div>
-                <!-- <div v-if="task.reason" :title="task.reason" class="text-13px text-truncate w-150px mt-1"> 审批意见: {{ task.reason }}</div> -->
               </div>
             </div>
           </div>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index b2035a19..54880487 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -12,25 +12,37 @@
         <el-divider class="!my-8px" />
         <div class="flex items-center gap-5 mb-10px h-40px">
           <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
-          <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="processInstance.status" />
+          <dict-tag
+            v-if="processInstance.status"
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="processInstance.status"
+          />
         </div>
 
         <div class="flex items-center gap-5 mb-10px text-13px h-35px">
           <div
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
           >
-            <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" />
+            <!-- <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" /> -->
+            <el-avatar
+              :size="28"
+              v-if="processInstance?.startUser?.avatar"
+              :src="processInstance?.startUser?.avatar"
+            />
+            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
+              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+            </el-avatar>
             {{ processInstance?.startUser?.nickname }}
           </div>
           <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
         </div>
 
-        <el-tabs v-model="activeTab">
+        <el-tabs v-model="activeTab" @tab-change="onTabChange">
           <!-- 表单信息 -->
           <el-tab-pane label="审批详情" name="form">
             <div class="form-scroll-area">
               <el-scrollbar>
-                <el-row :gutter="10">
+                <el-row>
                   <el-col :span="18" class="!flex !flex-col formCol">
                     <!-- 表单信息 -->
                     <div
@@ -38,11 +50,7 @@
                       class="form-box flex flex-col mb-30px flex-1"
                     >
                       <!-- 情况一：流程表单 -->
-                      <el-col
-                        v-if="processInstance?.processDefinition?.formType === 10"
-                        :offset="6"
-                        :span="16"
-                      >
+                      <el-col v-if="processInstance?.processDefinition?.formType === 10">
                         <form-create
                           v-model="detailForm.value"
                           v-model:api="fApi"
@@ -64,33 +72,44 @@
               </el-scrollbar>
             </div>
           </el-tab-pane>
+
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
-            <ProcessInstanceBpmnViewer
-              :id="`${id}`"
-              :bpmn-xml="bpmnXml"
-              :loading="processInstanceLoading"
-              :process-instance="processInstance"
-              :tasks="tasks"
-            />
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceBpmnViewer
+                  :id="`${id}`"
+                  :bpmn-xml="bpmnXml"
+                  :loading="processInstanceLoading"
+                  :process-instance="processInstance"
+                  :tasks="tasks"
+                />
+              </el-scrollbar>
+            </div>
           </el-tab-pane>
+
           <!-- 流转记录 -->
           <el-tab-pane label="流转记录" name="record">
-            <ProcessInstanceTaskList
-              :loading="tasksLoad"
-              :process-instance="processInstance"
-              :tasks="tasks"
-              @refresh="getTaskList"
-            />
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceTaskList
+                  :loading="tasksLoad"
+                  :process-instance="processInstance"
+                  :tasks="tasks"
+                />
+              </el-scrollbar>
+            </div>
           </el-tab-pane>
+
           <!-- 流转评论 TODO 待开发 -->
-          <el-tab-pane label="流转评论" name="comment"> 流转评论 </el-tab-pane>
+          <el-tab-pane label="流转评论" name="comment">
+            <div class="form-scroll-area">
+              <el-scrollbar> 流转评论 </el-scrollbar>
+            </div>
+          </el-tab-pane>
         </el-tabs>
 
-        <div
-          class="b-t-solid border-t-1px border-[var(--el-border-color)]"
-          v-if="activeTab === 'form'"
-        >
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
             ref="operationButtonRef"
@@ -131,6 +150,7 @@ const props = defineProps<{
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
+let processDefinitionId = undefined // 流程定义 Id
 const operationButtonRef = ref()
 const timelineRef = ref()
 const bpmnXml = ref('') // BPMN XML
@@ -151,10 +171,10 @@ const detailForm = ref({
 }) // 流程实例的表单详情
 
 /** 获得详情 */
-const getDetail = () => {
+const getDetail = async () => {
   // 1. 获得流程实例相关
   getProcessInstance()
-  // 2. 获得流程任务列表（审批记录）
+  // 2. 获得流程任务列表
   getTaskList()
 }
 
@@ -202,9 +222,9 @@ const getProcessInstance = async () => {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
-
+    processDefinitionId = processDefinition.id
     // 加载流程图
-    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
+    // bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
   } finally {
     processInstanceLoading.value = false
   }
@@ -273,6 +293,13 @@ const refresh = () => {
 /** 当前的Tab */
 const activeTab = ref('form')
 
+/** Tab 切换 加载流程图，直接加载显示不出来，不知道啥原因，所以切换以后在加载 */
+const onTabChange = async (tabName: string) => {
+  if (tabName === 'diagram' && processDefinitionId && !bpmnXml.value) {
+    //加载流程图
+    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinitionId))?.bpmnXml
+  }
+}
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {

From 753a32aecc7562dacd33294d282479119f49d492 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 8 Oct 2024 17:26:32 +0800
Subject: [PATCH 002/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index.vue     | 403 ++++++++++++++---------------
 src/views/bpm/model/index_old.vue | 404 ++++++++++++++++++++++++++++++
 2 files changed, 599 insertions(+), 208 deletions(-)
 create mode 100644 src/views/bpm/model/index_old.vue

diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 4534ec61..fda20c04 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,211 +1,189 @@
 <template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
+    <div class="flex justify-between pl-20px items-center">
+      <h3>表单管理</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px flex"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item align="right" prop="key" class="ml-auto">
+          <el-input
+            v-model="queryParams.key"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
           >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
-                </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
-                </el-dropdown-item>
-              </el-dropdown-menu>
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
             </template>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-button type="info" plain>
+            <Icon icon="ep:setting" />
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-divider />
+
+    <!-- 分类卡片组 -->
+    <div class="px-30px">
+      <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
+        <h3 class="ml-20px">{{ title }}</h3>
+        <el-table v-loading="loading" :data="list">
+          <el-table-column label="流程名" align="center" prop="name" min-width="200">
+            <template #default="scope">
+              <div class="flex items-center justify-center">
+                <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
+                {{ scope.row.name }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+            <template #default="scope">
+              <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+                全部可见
+              </el-text>
+              <el-text v-else-if="scope.row.startUsers.length == 1">
+                {{ scope.row.startUsers[0].nickname }}
+              </el-text>
+              <el-text v-else>
+                <el-tooltip
+                  class="box-item"
+                  effect="dark"
+                  placement="top"
+                  :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+                >
+                  {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+                </el-tooltip>
+              </el-text>
+            </template>
+          </el-table-column>
+          <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+          <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+            <template #default="scope">
+              <el-button
+                v-if="scope.row.formType === 10"
+                type="primary"
+                link
+                @click="handleFormDetail(scope.row)"
+              >
+                <span>{{ scope.row.formName }}</span>
+              </el-button>
+              <el-button
+                v-else-if="scope.row.formType === 20"
+                type="primary"
+                link
+                @click="handleFormDetail(scope.row)"
+              >
+                <span>{{ scope.row.formCustomCreatePath }}</span>
+              </el-button>
+              <label v-else>暂无表单</label>
+            </template>
+          </el-table-column>
+          <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+            <template #default="scope">
+              <span v-if="scope.row.processDefinition">
+                {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+              </span>
+              <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+                v{{ scope.row.processDefinition.version }}
+              </el-tag>
+              <el-tag v-else type="warning">未部署</el-tag>
+              <el-tag
+                v-if="scope.row.processDefinition?.suspensionState === 2"
+                type="warning"
+                class="ml-10px"
+              >
+                已停用
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="200" fixed="right">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['bpm:model:update']"
+                :disabled="!isManagerUser(scope.row)"
+              >
+                修改
+              </el-button>
+              <el-button
+                link
+                class="!ml-5px"
+                type="primary"
+                @click="handleDesign(scope.row)"
+                v-hasPermi="['bpm:model:update']"
+                :disabled="!isManagerUser(scope.row)"
+              >
+                设计
+              </el-button>
+              <el-button
+                link
+                class="!ml-5px"
+                type="primary"
+                @click="handleDeploy(scope.row)"
+                v-hasPermi="['bpm:model:deploy']"
+                :disabled="!isManagerUser(scope.row)"
+              >
+                发布
+              </el-button>
+              <el-dropdown
+                class="!align-middle ml-5px"
+                @command="(command) => handleCommand(command, scope.row)"
+                v-hasPermi="[
+                  'bpm:process-definition:query',
+                  'bpm:model:update',
+                  'bpm:model:delete'
+                ]"
+              >
+                <el-button type="primary" link>更多</el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item
+                      command="handleDefinitionList"
+                      v-if="checkPermi(['bpm:process-definition:query'])"
+                    >
+                      历史
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      command="handleChangeState"
+                      v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                      :disabled="!isManagerUser(scope.row)"
+                    >
+                      {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                    </el-dropdown-item>
+                    <el-dropdown-item
+                      type="danger"
+                      command="handleDelete"
+                      v-if="checkPermi(['bpm:model:delete'])"
+                      :disabled="!isManagerUser(scope.row)"
+                    >
+                      删除
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+          </el-table-column>
+        </el-table>
+      </ContentWrap>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
@@ -227,6 +205,7 @@ import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -236,8 +215,6 @@ const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
 
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -247,14 +224,15 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref([]) // 流程分类列表
+const categoryGroup = ref({}) // 按照category分组的数据
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
     const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    categoryGroup.value = groupBy(data.list, 'categoryName')
   } finally {
     loading.value = false
   }
@@ -402,3 +380,12 @@ onMounted(async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep(.el-form--inline .el-form-item) {
+  margin-right: 10px;
+}
+:deep(.el-divider--horizontal) {
+  margin-top: 10px;
+}
+</style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
new file mode 100644
index 00000000..4534ec61
--- /dev/null
+++ b/src/views/bpm/model/index_old.vue
@@ -0,0 +1,404 @@
+<template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>

From a69dc3a187134c5c8eee4eb292fdd26d0b2bce96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Fri, 20 Sep 2024 20:23:44 +0800
Subject: [PATCH 003/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E3=80=91?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=89=AB=E6=8F=8F=E6=9E=AA=E6=A0=B8=E9=94=80?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E3=80=81=E6=A0=B9=E6=8D=AE=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E4=BA=BA=E6=9F=A5=E8=AF=A2=E8=87=AA=E6=8F=90?=
 =?UTF-8?q?=E7=82=B9=E5=8A=9F=E8=83=BD=E5=92=8C=E7=BB=91=E5=AE=9A=E8=87=AA?=
 =?UTF-8?q?=E6=8F=90=E5=91=98=E5=B7=A5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/trade/delivery/pickUpStore/index.ts  |  10 +
 .../trade/delivery/pickUpStoreStaff/index.ts  |   6 +
 .../mall/trade/delivery/pickUpOrder/index.vue | 108 ++++++-
 .../DeliveryPickUpStoreBindForm.vue           | 161 +++++++++++
 .../components/StoreStaffTableSelect.vue      | 270 ++++++++++++++++++
 .../mall/trade/delivery/pickUpStore/index.vue |  16 ++
 .../mall/trade/order/form/OrderPickUpForm.vue |  20 +-
 7 files changed, 579 insertions(+), 12 deletions(-)
 create mode 100644 src/api/mall/trade/delivery/pickUpStoreStaff/index.ts
 create mode 100644 src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
 create mode 100644 src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue

diff --git a/src/api/mall/trade/delivery/pickUpStore/index.ts b/src/api/mall/trade/delivery/pickUpStore/index.ts
index c3175021..01e59522 100644
--- a/src/api/mall/trade/delivery/pickUpStore/index.ts
+++ b/src/api/mall/trade/delivery/pickUpStore/index.ts
@@ -44,3 +44,13 @@ export const updateDeliveryPickUpStore = async (data: DeliveryPickUpStoreVO) =>
 export const deleteDeliveryPickUpStore = async (id: number) => {
   return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
 }
+
+//绑定自提店员
+export const bindStoreStaffId = async (data: any) => {
+  return await request.post({ url: '/trade/delivery/pick-up-store/bind', data })
+}
+
+//查询门店绑定情况
+export const getDeliveryPickUpStoreStaff = async (id: number) => {
+  return await request.get({ url: '/trade/delivery/pick-up-store/get-store-staff?id=' + id })
+}
diff --git a/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts b/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts
new file mode 100644
index 00000000..eb969615
--- /dev/null
+++ b/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts
@@ -0,0 +1,6 @@
+import request from '@/config/axios'
+
+// 删除自提门店
+export const deleteDeliveryPickUpStoreStaff = async (userId: number,storeId: number) => {
+  return await request.delete({ url: '/trade/delivery/pick-up-store-staff/delete?userId=' + userId +'&storeId=' + storeId})
+}
diff --git a/src/views/mall/trade/delivery/pickUpOrder/index.vue b/src/views/mall/trade/delivery/pickUpOrder/index.vue
index e52a3e3f..06ec835b 100644
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -26,9 +26,8 @@
         <el-select
           v-model="queryParams.pickUpStoreId"
           class="!w-280px"
-          clearable
-          multiple
           placeholder="全部"
+          @change="handleQuery"
         >
           <el-option
             v-for="item in pickUpStoreList"
@@ -73,10 +72,16 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']">
+        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']" :disabled="isUse">
           <Icon class="mr-5px" icon="ep:check" />
           核销
         </el-button>
+        <el-button type="primary" @click="connectToSerialPort" :disabled="serialPort || isUse">
+          连接扫描枪
+        </el-button>
+        <el-button type="danger" @click="cutPort" :disabled="!serialPort || isUse">
+          断开扫描枪
+        </el-button>
       </el-form-item>
     </el-form>
   </ContentWrap>
@@ -216,6 +221,12 @@ import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
 import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 import OrderPickUpForm from '@/views/mall/trade/order/form/OrderPickUpForm.vue'
+import { ref, onMounted } from "vue";
+const message = useMessage() // 消息弹窗
+
+const port = ref("");
+const ports = ref([]);
+const reader = ref("");
 
 defineOptions({ name: 'PickUpOrder' })
 
@@ -227,6 +238,8 @@ const total = ref(2)
 const list = ref<TradeOrderApi.OrderVO[]>([])
 // 搜索的表单
 const queryFormRef = ref<FormInstance>()
+const serialPort = ref(false)
+const isUse = ref(true)
 // 初始表单参数
 const INIT_QUERY_PARAMS = {
   // 页数
@@ -240,6 +253,7 @@ const INIT_QUERY_PARAMS = {
   // 自提门店
   pickUpStoreId: undefined
 }
+
 // 表单搜索
 const queryParams = ref({ ...INIT_QUERY_PARAMS })
 // 订单搜索类型 queryParam
@@ -294,6 +308,9 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = { ...INIT_QUERY_PARAMS }
+  if(pickUpStoreList.value.length > 0) {
+    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  }
   handleQuery()
 }
 
@@ -309,10 +326,89 @@ const handlePickup = () => {
   pickUpForm.value.open()
 }
 
+/** 连接扫码枪 */
+const connectToSerialPort = async () => {
+  try {
+    // 判断浏览器支持串口通信
+    if ("serial" in navigator && navigator.serial != null && typeof navigator.serial === 'object' && "requestPort" in navigator.serial) {
+      // 提示用户选择一个串口
+      port.value = await navigator.serial.requestPort();
+    } else {
+      message.error("浏览器不支持扫码枪连接，请更换浏览器重试")
+      return
+    }
+
+    // 获取用户之前授予该网站访问权限的所有串口。
+    ports.value = await navigator.serial.getPorts();
+
+    // console.log(port.value, ports.value);
+    console.log(port.value);
+    // 等待串口打开
+    await port.value.open({ baudRate: 9600 , dataBits: 8 , stopBits: 2});
+
+    // console.log(typeof port.value);
+    message.success("成功连接扫码枪")
+    serialPort.value = true;
+    // readData(port.value);
+    readData();
+  } catch (error) {
+    // 处理连接串口出错的情况
+    console.log("Error connecting to serial port:", error);
+  }
+};
+
+/** 监听扫码枪输入 */
+const readData = async () => {
+  reader.value = port.value.readable.getReader();
+  let data = ""; //扫码数据
+  // 监听来自串口的数据
+  while (true) {
+    const { value, done } = await reader.value.read();
+    if (done) {
+      // 允许稍后关闭串口
+      reader.value.releaseLock();
+      break;
+    }
+    // 获取发送的数据
+    const serialData = new TextDecoder().decode(value);
+    data = `${data}${serialData}`;
+    if (serialData.includes("\r")) {
+      //读取结束
+      let codeData = data.replace("\r","");
+      data = ""; //清空下次读取不会叠加
+      console.log(`二维码数据:${codeData}`);
+      //处理拿到数据逻辑
+      pickUpForm.value.open(codeData)
+    }
+  }
+};
+
+/** 断开扫码枪 */
+const cutPort = async () => {
+  if (port.value !== "") {
+    await reader.value.cancel();
+    await port.value.close();
+    port.value = "";
+    console.log("断开扫码枪连接");
+    message.success("已成功断开扫码枪连接")
+    serialPort.value = false;
+  } else {
+    message.warning("请先连接或打开扫码枪")
+  }
+};
+
 /** 初始化 **/
-onMounted(() => {
-  getList()
-  getPickUpStoreList()
+onMounted(async () => {
+  await getPickUpStoreList()
+  if(pickUpStoreList.value.length > 0){
+    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+    isUse.value = false
+    await getList()
+  }else{
+    message.error("当前登录人没绑定任何自提点")
+    loading.value = false
+    isUse.value = true
+  }
 })
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
new file mode 100644
index 00000000..be855804
--- /dev/null
+++ b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
@@ -0,0 +1,161 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="20%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="120px"
+      v-loading="formLoading"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入门店名称" :disabled="true"/>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="门店店员" prop="storeStaffIds">
+            <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
+          </el-form-item>
+          <!-- 店员列表 -->
+          <ContentWrap v-if="usersList.length > 0">
+            <el-table :data="usersList">
+              <el-table-column label="编号" align="center" prop="id" />
+              <el-table-column
+                label="用户昵称"
+                align="center"
+                prop="nickname"
+                :show-overflow-tooltip="true"
+              />
+              <el-table-column label="状态" align="center" key="status">
+                <template #default="scope">
+                  <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+                </template>
+              </el-table-column>
+              <el-table-column align="center" label="操作">
+                <template #default="scope">
+                  <el-button
+                    v-hasPermi="['trade:delivery:pick-up-store:delete']"
+                    link
+                    type="danger"
+                    @click="handleDelete(scope.row.id)"
+                  >
+                    删除
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </ContentWrap>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="changeStoreStaff"/>
+</template>
+<script setup lang="ts">
+import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
+import StoreStaffTableSelect from './components/StoreStaffTableSelect.vue'
+import {DICT_TYPE} from "@/utils/dict";
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formData = ref({
+  id: undefined,
+  name: '',
+  storeStaffIds: [],
+  storeStaffs: [],
+})
+const formRules = reactive({
+  name: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+const storeStaffTableSelect = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (id: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = '绑定自提门店员工'
+  resetForm()
+  formLoading.value = true
+  try {
+    await getList(id)
+  } finally {
+    formLoading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const submitForm = async () => {
+  formData.value.storeStaffIds = usersList.value.map(item => item.id) as [];
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value
+    await DeliveryPickUpStoreApi.bindStoreStaffId(data)
+    message.success("绑定成功")
+    dialogVisible.value = false
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    const index = usersList.value.findIndex(item => {
+      if (item.id == id){
+        return true;
+      }
+    })
+    usersList.value.splice(index, 1);
+    //await DeliveryPickUpStoreStaffApi.deleteDeliveryPickUpStoreStaff(id,formData.value.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    //await getList(formData.value.id)
+  } catch {}
+}
+
+/**
+ * 查询自提点员工绑定关系
+ */
+const getList = async (id: number) => {
+  formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStoreStaff(id)
+  if(formData.value.storeStaffs){
+    usersList.value = formData.value.storeStaffs;
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    id: undefined,
+    name: '',
+    storeStaffIds: [],
+    storeStaffs: [],
+  }
+  formRef.value?.resetFields()
+}
+
+const usersList = ref([])
+const changeStoreStaff = (checkedUsers : []) => {
+  usersList.value = checkedUsers
+}
+</script>
diff --git a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
new file mode 100644
index 00000000..909aa2dc
--- /dev/null
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@@ -0,0 +1,270 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
+    <el-row :gutter="20">
+      <!-- 左侧部门树 -->
+      <el-col :span="4" :xs="24">
+        <ContentWrap class="h-1/1">
+          <DeptTree @node-click="handleDeptNodeClick" />
+        </ContentWrap>
+      </el-col>
+      <el-col :span="20" :xs="24">
+        <!-- 搜索 -->
+        <ContentWrap>
+          <el-form
+            class="-mb-15px"
+            :model="queryParams"
+            ref="queryFormRef"
+            :inline="true"
+            label-width="68px"
+          >
+            <el-form-item label="用户名称" prop="username">
+              <el-input
+                v-model="queryParams.username"
+                placeholder="请输入用户名称"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="手机号码" prop="mobile">
+              <el-input
+                v-model="queryParams.mobile"
+                placeholder="请输入手机号码"
+                clearable
+                @keyup.enter="handleQuery"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+              <el-select
+                v-model="queryParams.status"
+                placeholder="用户状态"
+                clearable
+                class="!w-240px"
+              >
+                <el-option
+                  v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="创建时间" prop="createTime">
+              <el-date-picker
+                v-model="queryParams.createTime"
+                value-format="YYYY-MM-DD HH:mm:ss"
+                type="datetimerange"
+                start-placeholder="开始日期"
+                end-placeholder="结束日期"
+                class="!w-240px"
+              />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
+              <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
+            </el-form-item>
+          </el-form>
+        </ContentWrap>
+        <ContentWrap>
+          <el-table v-loading="loading" :data="list">
+            <el-table-column width="55">
+              <template #header>
+                <el-checkbox
+                  v-model="isCheckAll"
+                  :indeterminate="isIndeterminate"
+                  @change="handleCheckAll"
+                />
+              </template>
+              <template #default="{ row }">
+                <el-checkbox
+                  v-model="checkedStatus[row.id]"
+                  @change="(checked: boolean) => handleCheckOne(checked, row, true)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="用户编号" align="center" key="id" prop="id" />
+            <el-table-column
+              label="用户名称"
+              align="center"
+              prop="username"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="用户昵称"
+              align="center"
+              prop="nickname"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column
+              label="部门"
+              align="center"
+              key="deptName"
+              prop="deptName"
+              :show-overflow-tooltip="true"
+            />
+            <el-table-column label="手机号码" align="center" prop="mobile" width="120" />
+            <el-table-column label="状态" key="status">
+              <template #default="scope">
+                <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+              </template>
+            </el-table-column>
+            <el-table-column
+              label="创建时间"
+              align="center"
+              prop="createTime"
+              :formatter="dateFormatter"
+              width="180"
+            />
+          </el-table>
+          <Pagination
+            :total="total"
+            v-model:page="queryParams.pageNo"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </ContentWrap>
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button type="primary" @click="handleEmitChange">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import * as UserApi from '@/api/system/user'
+import DeptTree from '@/views/system/user/DeptTree.vue'
+
+// 是否全选
+const isCheckAll = ref(false)
+// 全选框是否处于中间状态：不是全部选中 && 任意一个选中
+const isIndeterminate = ref(false)
+// 选中的活动
+const checkedUsers = ref([])
+// 选中状态：key为用户ID，value为是否选中
+const checkedStatus = ref<Record<string, boolean>>({})
+
+
+const dialogTitle = "选择店员"
+const dialogVisible = ref(false)
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  username: undefined,
+  mobile: undefined,
+  status: undefined,
+  deptId: undefined,
+  roleId: 4,
+  createTime: []
+})
+const queryFormRef = ref() // 搜索的表单
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await UserApi.getUserPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  handleQuery()
+}
+
+/** 处理部门被点击 */
+const handleDeptNodeClick = async (row) => {
+  queryParams.deptId = row.id
+  await getList()
+}
+
+/** 打开弹窗 */
+const open = async () => {
+  dialogVisible.value = true
+  loading.value = true
+  try {
+    await getList()
+  } finally {
+    loading.value = false
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 全选/全不选 */
+const handleCheckAll = (checked: boolean) => {
+  isCheckAll.value = checked
+  isIndeterminate.value = false
+
+  list.value.forEach((combinationActivity) => handleCheckOne(checked, combinationActivity, false))
+}
+
+/**
+ * 选中一行
+ * @param checked 是否选中
+ * @param combinationActivity 活动
+ * @param isCalcCheckAll 是否计算全选
+ */
+const handleCheckOne = (
+  checked: boolean,
+  combinationActivity,
+  isCalcCheckAll: boolean
+) => {
+  if (checked) {
+    checkedUsers.value.push(combinationActivity as never)
+    checkedStatus.value[combinationActivity.id] = true
+  } else {
+    const index = findCheckedIndex(combinationActivity)
+    if (index > -1) {
+      checkedUsers.value.splice(index, 1)
+      checkedStatus.value[combinationActivity.id] = false
+      isCheckAll.value = false
+    }
+  }
+
+  // 计算全选框状态
+  if (isCalcCheckAll) {
+    calculateIsCheckAll()
+  }
+}
+
+// 查找活动在已选中活动列表中的索引
+const findCheckedIndex = (user) =>
+  checkedUsers.value.findIndex((item) => item.id === user.id)
+
+// 计算全选框状态
+const calculateIsCheckAll = () => {
+  isCheckAll.value = list.value.every((user) => checkedStatus.value[user.id])
+  // 计算中间状态：不是全部选中 && 任意一个选中
+  isIndeterminate.value =
+    !isCheckAll.value && list.value.some((user) => checkedStatus.value[user.id])
+}
+
+/** 多选完成 */
+const handleEmitChange = () => {
+  // 关闭弹窗
+  dialogVisible.value = false
+  emits("change", [...checkedUsers.value])
+}
+
+/** 确认选择时的触发事件 */
+const emits = defineEmits<{
+  change: [CombinationActivityApi: any]
+}>()
+</script>
diff --git a/src/views/mall/trade/delivery/pickUpStore/index.vue b/src/views/mall/trade/delivery/pickUpStore/index.vue
index eddf64e9..28b8e454 100644
--- a/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -103,6 +103,14 @@
           >
             编辑
           </el-button>
+          <el-button
+            v-hasPermi="['trade:delivery:pick-up-store:bind']"
+            link
+            type="primary"
+            @click="openFormBind(scope.row.id)"
+          >
+            绑定店员
+          </el-button>
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:delete']"
             link
@@ -117,10 +125,13 @@
   </ContentWrap>
   <!-- 表单弹窗：添加/修改 -->
   <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
+  <!-- 表单弹窗：绑定店员 -->
+  <DeliveryPickUpStoreBindForm ref="formBindRef"/>
 </template>
 <script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import DeliveryPickUpStoreForm from './PickUpStoreForm.vue'
+import DeliveryPickUpStoreBindForm from './DeliveryPickUpStoreBindForm.vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter } from '@/utils/formatTime'
 
@@ -146,6 +157,11 @@ const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
 
+const formBindRef = ref()
+const openFormBind = (id?: number) => {
+  formBindRef.value.open(id)
+}
+
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
diff --git a/src/views/mall/trade/order/form/OrderPickUpForm.vue b/src/views/mall/trade/order/form/OrderPickUpForm.vue
index 529263c4..ccc6c1db 100644
--- a/src/views/mall/trade/order/form/OrderPickUpForm.vue
+++ b/src/views/mall/trade/order/form/OrderPickUpForm.vue
@@ -13,7 +13,7 @@
       </el-form-item>
     </el-form>
     <template #footer>
-      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCode">
+      <el-button type="primary" :disabled="formLoading" @click="getOrderByPickUpVerifyCodeClick">
         查询
       </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
@@ -52,9 +52,14 @@ const formRef = ref() // 表单 Ref
 const orderDetails = ref<OrderVO>({})
 
 /** 打开弹窗 */
-const open = async () => {
+const open = async (pickUpVerifyCode: string) => {
   resetForm()
-  dialogVisible.value = true
+  if(pickUpVerifyCode != null){
+    formData.value.pickUpVerifyCode = pickUpVerifyCode;
+    await getOrderByPickUpVerifyCode()
+  }else{
+    dialogVisible.value = true
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
@@ -83,18 +88,21 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 
-/** 查询核销码对应的订单 */
-const getOrderByPickUpVerifyCode = async () => {
+const getOrderByPickUpVerifyCodeClick = async () => {
   // 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
   if (!valid) return
+  await getOrderByPickUpVerifyCode()
+}
 
+/** 查询核销码对应的订单 */
+const getOrderByPickUpVerifyCode = async () => {
   formLoading.value = true
   const data = await TradeOrderApi.getOrderByPickUpVerifyCode(formData.value.pickUpVerifyCode)
   formLoading.value = false
   if (data?.deliveryType !== DeliveryTypeEnum.PICK_UP.type) {
-    message.error('请输入正确的核销码')
+    message.error('未查询到订单')
     return
   }
   if (data?.status !== TradeOrderStatusEnum.UNDELIVERED.status) {

From c6b6d2f4043232e9d3f6a93f3a33d5197d84588e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Tue, 8 Oct 2024 16:14:05 +0800
Subject: [PATCH 004/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E4=BC=98=E5=8C=96=E9=97=A8=E5=BA=97=E5=BA=97?=
 =?UTF-8?q?=E5=91=98=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/trade/delivery/pickUpStoreStaff/index.ts       | 6 ------
 .../pickUpStore/components/StoreStaffTableSelect.vue        | 2 +-
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 src/api/mall/trade/delivery/pickUpStoreStaff/index.ts

diff --git a/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts b/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts
deleted file mode 100644
index eb969615..00000000
--- a/src/api/mall/trade/delivery/pickUpStoreStaff/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import request from '@/config/axios'
-
-// 删除自提门店
-export const deleteDeliveryPickUpStoreStaff = async (userId: number,storeId: number) => {
-  return await request.delete({ url: '/trade/delivery/pick-up-store-staff/delete?userId=' + userId +'&storeId=' + storeId})
-}
diff --git a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
index 909aa2dc..63c0c0a0 100644
--- a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@@ -160,7 +160,7 @@ const queryParams = reactive({
   mobile: undefined,
   status: undefined,
   deptId: undefined,
-  roleId: 4,
+  roleId: 5,
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单

From b293f15779c8c8fb45ac479812b804fc969661ce Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Tue, 8 Oct 2024 20:39:28 +0800
Subject: [PATCH 005/109] =?UTF-8?q?chore:=20mock=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index.vue |  12 +-
 src/views/bpm/model/mock.js   | 202 ++++++++++++++++++++++++++++++++++
 2 files changed, 210 insertions(+), 4 deletions(-)
 create mode 100644 src/views/bpm/model/mock.js

diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index fda20c04..1b0677ac 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -42,11 +42,14 @@
     <!-- 分类卡片组 -->
     <div class="px-30px">
       <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
-        <h3 class="ml-20px">{{ title }}</h3>
+        <div class="flex items-center mb-20px">
+          <h3 class="ml-20px mr-8px">{{ title }}</h3>
+          <div class="text-[var(--el-text-color-placeholder)]">({{ list?.length || 0 }})</div>
+        </div>
         <el-table v-loading="loading" :data="list">
           <el-table-column label="流程名" align="center" prop="name" min-width="200">
             <template #default="scope">
-              <div class="flex items-center justify-center">
+              <div class="flex items-center">
                 <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
                 {{ scope.row.name }}
               </div>
@@ -206,6 +209,7 @@ import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { groupBy } from 'lodash-es'
+import { mockData } from './mock'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -213,7 +217,6 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
-
 const loading = ref(true) // 列表的加载中
 const queryParams = reactive({
   pageNo: 1,
@@ -224,7 +227,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref([]) // 流程分类列表
-const categoryGroup = ref({}) // 按照category分组的数据
+const categoryGroup = ref<any>({}) // 按照category分组的数据
 
 /** 查询列表 */
 const getList = async () => {
@@ -232,6 +235,7 @@ const getList = async () => {
   try {
     // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
     const data = await ModelApi.getModelPage(queryParams)
+    data.list = mockData
     categoryGroup.value = groupBy(data.list, 'categoryName')
   } finally {
     loading.value = false
diff --git a/src/views/bpm/model/mock.js b/src/views/bpm/model/mock.js
new file mode 100644
index 00000000..93c4b60b
--- /dev/null
+++ b/src/views/bpm/model/mock.js
@@ -0,0 +1,202 @@
+export const mockData = [
+  {
+    key: 'out_apply',
+    name: '外出申请',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/OA/goingOut/create',
+    formCustomViewPath: '/OA/goingOut/detail',
+    id: 'ff8f8bab-4d4e-11ef-8201-0242ac130002',
+    formName: null,
+    createTime: 1722218716216,
+    processDefinition: {
+      id: 'out_apply:4:7f56d464-4eec-11ef-8c3a-0242ac130002',
+      version: 4,
+      deploymentTime: 1722396312641,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'contract_change_history',
+    name: '合同变更申请',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/changeRecord/detail',
+    formCustomViewPath: '/project/changeRecord/detail',
+    id: '0c689067-3a92-11ef-b7f0-0242ac130002',
+    formName: null,
+    createTime: 1720158441959,
+    processDefinition: {
+      id: 'contract_change_history:1:f69fff4f-3a9a-11ef-b7f0-0242ac130002',
+      version: 1,
+      deploymentTime: 1720162270788,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'expenses_claim',
+    name: '费用报销申请',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/finance/reimbursement/detail',
+    formCustomViewPath: '/finance/reimbursement/detail',
+    id: '0310ad0c-351e-11ef-a653-0242ac130002',
+    formName: null,
+    createTime: 1719558848849,
+    processDefinition: {
+      id: 'expenses_claim:5:a043a1d8-4eec-11ef-8c3a-0242ac130002',
+      version: 5,
+      deploymentTime: 1722396367911,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'out_business_apply',
+    name: '申请单',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/finance/businessTripApply/detail',
+    formCustomViewPath: '/finance/businessTripApply/detail',
+    id: '279e27a4-3393-11ef-8401-0242ac130002',
+    formName: null,
+    createTime: 1719389258966,
+    processDefinition: {
+      id: 'out_business_apply:9:a7b2d4e2-430f-11ef-876f-0242ac130002',
+      version: 9,
+      deploymentTime: 1721091998780,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project_delay_application',
+    name: '项目延时申请',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/workHourDelay/create',
+    formCustomViewPath: '/project/workHourDelay/detail',
+    id: '46d87275-27c7-11ef-b258-0242ac130002',
+    formName: null,
+    createTime: 1718092231234,
+    processDefinition: {
+      id: 'b7ed308a-430f-11ef-876f-0242ac130002',
+      version: 5,
+      deploymentTime: 1721092026059,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project_result_approval',
+    name: '项目成果审核',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/projectTaskResult/detail',
+    formCustomViewPath: '/project/projectTaskResult/detail',
+    id: '4a15d4f8-23cc-11ef-8dd0-0242ac130002',
+    formName: null,
+    createTime: 1717654579502,
+    processDefinition: {
+      id: 'dd3cc360-4eec-11ef-8c3a-0242ac130002',
+      version: 6,
+      deploymentTime: 1722396470232,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_contract',
+    name: '合同管理',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/sales/contract/create',
+    formCustomViewPath: '/sales/contract/detail',
+    id: '8317cb71-0d1a-11ef-8445-70b5e844a623',
+    formName: null,
+    createTime: 1715159299146,
+    processDefinition: {
+      id: 'pms_contract:5:c7d6012a-29f2-11ef-a08d-0242ac130002',
+      version: 5,
+      deploymentTime: 1718330818270,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_consult_task_act',
+    name: '咨询任务书',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/consultTask/create',
+    formCustomViewPath: '/consultTask/detail',
+    id: '47fad8e4-0b91-11ef-b841-70b5e844a623',
+    formName: null,
+    createTime: 1714990407756,
+    processDefinition: {
+      id: 'pms_consult_task_act:1:67c2ae59-0b91-11ef-b841-70b5e844a623',
+      version: 1,
+      deploymentTime: 1714990460960,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project',
+    name: '立项管理',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/applyProject/create',
+    formCustomViewPath: '/project/applyProject/detail',
+    id: 'f0ba6bde-0b90-11ef-b841-70b5e844a623',
+    formName: null,
+    createTime: 1714990261372,
+    processDefinition: {
+      id: 'pms_project:6:b9e4e33b-2c6c-11ef-8386-0242ac130002',
+      version: 6,
+      deploymentTime: 1718603095738,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'invoice_apply_manage',
+    name: '开票申请',
+    description: 'asdas',
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/sales/invoice/create',
+    formCustomViewPath: '/sales/invoice/detail',
+    id: '7ec07575-0605-11ef-ab76-cc96e508c010',
+    formName: null,
+    createTime: 1714380614292,
+    processDefinition: {
+      id: 'invoice_apply_manage:8:665a8c40-44c9-11ef-9813-0242ac130002',
+      version: 8,
+      deploymentTime: 1721281726671,
+      suspensionState: 1
+    }
+  }
+]

From 9ec660817cc9bf469bde8eed6c5e0ae12da3743e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=97=B4=E8=B4=A7?= <252048765@qq.com>
Date: Fri, 4 Oct 2024 10:22:31 +0800
Subject: [PATCH 006/109] =?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=A2=9E=E5=8A=A0=E8=BD=AC=E8=B4=A6=E5=9B=9E?=
 =?UTF-8?q?=E8=B0=83=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/pay/app/index.ts                 |  2 ++
 src/views/pay/app/components/AppForm.vue | 10 ++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/api/pay/app/index.ts b/src/api/pay/app/index.ts
index b1a2d0dd..d6fa83cf 100644
--- a/src/api/pay/app/index.ts
+++ b/src/api/pay/app/index.ts
@@ -8,6 +8,7 @@ export interface AppVO {
   remark: string
   payNotifyUrl: string
   refundNotifyUrl: string
+  transferNotifyUrl: string
   merchantId: number
   merchantName: string
   createTime: Date
@@ -19,6 +20,7 @@ export interface AppPageReqVO extends PageParam {
   remark?: string
   payNotifyUrl?: string
   refundNotifyUrl?: string
+  transferNotifyUrl?: string
   merchantName?: string
   createTime?: Date[]
 }
diff --git a/src/views/pay/app/components/AppForm.vue b/src/views/pay/app/components/AppForm.vue
index 11480de0..0d42f998 100644
--- a/src/views/pay/app/components/AppForm.vue
+++ b/src/views/pay/app/components/AppForm.vue
@@ -30,6 +30,9 @@
       <el-form-item label="退款结果的回调地址" prop="refundNotifyUrl">
         <el-input v-model="formData.refundNotifyUrl" placeholder="请输入退款结果的回调地址" />
       </el-form-item>
+      <el-form-item label="转账结果的回调地址" prop="transferNotifyUrl">
+        <el-input v-model="formData.transferNotifyUrl" placeholder="请输入转账结果的回调地址" />
+      </el-form-item>
       <el-form-item label="备注" prop="remark">
         <el-input v-model="formData.remark" placeholder="请输入备注" />
       </el-form-item>
@@ -62,14 +65,16 @@ const formData = ref({
   status: CommonStatusEnum.ENABLE,
   remark: undefined,
   orderNotifyUrl: undefined,
-  refundNotifyUrl: undefined
+  refundNotifyUrl: undefined,
+  transferNotifyUrl: undefined
 })
 const formRules = reactive({
   name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
   appKey: [{ required: true, message: '应用标识不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
   orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
-  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
+  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }],
+  transferNotifyUrl: [{ required: true, message: '转账结果的回调地址不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 
@@ -126,6 +131,7 @@ const resetForm = () => {
     remark: undefined,
     orderNotifyUrl: undefined,
     refundNotifyUrl: undefined,
+    transferNotifyUrl: undefined,
     appKey: undefined
   }
   formRef.value?.resetFields()

From a4a4dcdfc2aa275394df47a5082a48d1bb24fa9a Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 8 Oct 2024 21:49:04 +0800
Subject: [PATCH 007/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=A4=9A=E4=BA=BA=E5=AE=A1=E6=89=B9=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E9=BB=98=E8=AE=A4=E4=B8=BA=E6=8C=89=E9=A1=BA=E5=BA=8F?=
 =?UTF-8?q?=E4=BE=9D=E6=AC=A1=E5=AE=A1=E6=89=B9=EF=BC=8C=E9=9A=8F=E6=9C=BA?=
 =?UTF-8?q?=E6=8C=91=E9=80=89=E4=B8=80=E4=BA=BA=E5=8A=9F=E8=83=BD=E5=8F=AF?=
 =?UTF-8?q?=E8=83=BD=E8=A2=AB=E5=8E=BB=E6=8E=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/UserTaskNodeConfig.vue   | 36 ++-----------------
 1 file changed, 2 insertions(+), 34 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 969cf48b..57b96654 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -139,7 +139,6 @@
                 clearable
                 multiple
                 style="width: 100%"
-                @change="changedCandidateUsers"
               >
                 <el-option
                   v-for="item in userOptions"
@@ -187,10 +186,6 @@
                     <el-radio
                       :value="item.value"
                       :label="item.value"
-                      :disabled="
-                        item.value !== ApproveMethodType.RANDOM_SELECT_ONE_APPROVE &&
-                        notAllowedMultiApprovers
-                      "
                     >
                       {{ item.label }}
                     </el-radio>
@@ -537,8 +532,7 @@ const {
   getShowText
 } = useNodeForm(NodeType.USER_TASK_NODE)
 const configForm = tempConfigForm as Ref<UserTaskFormType>
-// 不允许多人审批
-const notAllowedMultiApprovers = ref(false)
+
 // 改变审批人设置策略
 const changeCandidateStrategy = () => {
   configForm.value.userIds = []
@@ -548,29 +542,8 @@ const changeCandidateStrategy = () => {
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
-  if (
-    configForm.value.candidateStrategy === CandidateStrategy.START_USER ||
-    configForm.value.candidateStrategy === CandidateStrategy.USER
-  ) {
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
-  }
-}
-// 改变审批候选人
-const changedCandidateUsers = () => {
-  if (
-    configForm.value.userIds &&
-    configForm.value.userIds?.length <= 1 &&
-    configForm.value.candidateStrategy === CandidateStrategy.USER
-  ) {
-    configForm.value.approveMethod = ApproveMethodType.RANDOM_SELECT_ONE_APPROVE
-    configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
-  }
 }
+
 // 审批方式改变
 const approveMethodChanged = () => {
   configForm.value.rejectHandlerType = RejectHandlerType.FINISH_PROCESS
@@ -666,11 +639,6 @@ const showUserTaskNodeConfig = (node: SimpleFlowNode) => {
   configForm.value.candidateStrategy = node.candidateStrategy!
   // 解析候选人参数
   parseCandidateParam(node.candidateStrategy!, node?.candidateParam)
-  if (configForm.value.userIds && configForm.value.userIds.length > 1) {
-    notAllowedMultiApprovers.value = true
-  } else {
-    notAllowedMultiApprovers.value = false
-  }
   // 2.2 设置审批方式
   configForm.value.approveMethod = node.approveMethod!
   if (node.approveMethod == ApproveMethodType.APPROVE_BY_RATIO) {

From c49e8bd3f9466c4001118684eed05f7d3bdd8f57 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 9 Oct 2024 10:03:36 +0800
Subject: [PATCH 008/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=88=97=E8=A1=A8UI=E9=87=8D=E6=9E=84=E4=BB=A5?=
 =?UTF-8?q?=E5=8F=8A=E6=95=B0=E7=BB=84=E5=88=86=E7=B1=BB=E5=88=86=E7=BB=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index.vue     | 403 ++++++++++++++--------------
 src/views/bpm/model/index_new.vue | 432 ++++++++++++++++++++++++++++++
 src/views/bpm/model/index_old.vue | 404 ----------------------------
 src/views/bpm/model/mock.js       | 202 --------------
 4 files changed, 638 insertions(+), 803 deletions(-)
 create mode 100644 src/views/bpm/model/index_new.vue
 delete mode 100644 src/views/bpm/model/index_old.vue
 delete mode 100644 src/views/bpm/model/mock.js

diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 1b0677ac..4534ec61 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,192 +1,211 @@
 <template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
   <ContentWrap>
-    <div class="flex justify-between pl-20px items-center">
-      <h3>表单管理</h3>
-      <!-- 搜索工作栏 -->
-      <el-form
-        class="-mb-15px flex"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <el-form-item align="right" prop="key" class="ml-auto">
-          <el-input
-            v-model="queryParams.key"
-            placeholder="搜索流程"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
           >
-            <template #prefix>
-              <Icon icon="ep:search" class="mx-10px" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+            <span>{{ scope.row.formName }}</span>
           </el-button>
-        </el-form-item>
-
-        <el-form-item>
-          <el-button type="info" plain>
-            <Icon icon="ep:setting" />
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
           </el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <el-divider />
-
-    <!-- 分类卡片组 -->
-    <div class="px-30px">
-      <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
-        <div class="flex items-center mb-20px">
-          <h3 class="ml-20px mr-8px">{{ title }}</h3>
-          <div class="text-[var(--el-text-color-placeholder)]">({{ list?.length || 0 }})</div>
-        </div>
-        <el-table v-loading="loading" :data="list">
-          <el-table-column label="流程名" align="center" prop="name" min-width="200">
-            <template #default="scope">
-              <div class="flex items-center">
-                <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
-                {{ scope.row.name }}
-              </div>
-            </template>
-          </el-table-column>
-          <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-            <template #default="scope">
-              <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-                全部可见
-              </el-text>
-              <el-text v-else-if="scope.row.startUsers.length == 1">
-                {{ scope.row.startUsers[0].nickname }}
-              </el-text>
-              <el-text v-else>
-                <el-tooltip
-                  class="box-item"
-                  effect="dark"
-                  placement="top"
-                  :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
                 >
-                  {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-                </el-tooltip>
-              </el-text>
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
             </template>
-          </el-table-column>
-          <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-          <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-            <template #default="scope">
-              <el-button
-                v-if="scope.row.formType === 10"
-                type="primary"
-                link
-                @click="handleFormDetail(scope.row)"
-              >
-                <span>{{ scope.row.formName }}</span>
-              </el-button>
-              <el-button
-                v-else-if="scope.row.formType === 20"
-                type="primary"
-                link
-                @click="handleFormDetail(scope.row)"
-              >
-                <span>{{ scope.row.formCustomCreatePath }}</span>
-              </el-button>
-              <label v-else>暂无表单</label>
-            </template>
-          </el-table-column>
-          <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-            <template #default="scope">
-              <span v-if="scope.row.processDefinition">
-                {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-              </span>
-              <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-                v{{ scope.row.processDefinition.version }}
-              </el-tag>
-              <el-tag v-else type="warning">未部署</el-tag>
-              <el-tag
-                v-if="scope.row.processDefinition?.suspensionState === 2"
-                type="warning"
-                class="ml-10px"
-              >
-                已停用
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center" width="200" fixed="right">
-            <template #default="scope">
-              <el-button
-                link
-                type="primary"
-                @click="openForm('update', scope.row.id)"
-                v-hasPermi="['bpm:model:update']"
-                :disabled="!isManagerUser(scope.row)"
-              >
-                修改
-              </el-button>
-              <el-button
-                link
-                class="!ml-5px"
-                type="primary"
-                @click="handleDesign(scope.row)"
-                v-hasPermi="['bpm:model:update']"
-                :disabled="!isManagerUser(scope.row)"
-              >
-                设计
-              </el-button>
-              <el-button
-                link
-                class="!ml-5px"
-                type="primary"
-                @click="handleDeploy(scope.row)"
-                v-hasPermi="['bpm:model:deploy']"
-                :disabled="!isManagerUser(scope.row)"
-              >
-                发布
-              </el-button>
-              <el-dropdown
-                class="!align-middle ml-5px"
-                @command="(command) => handleCommand(command, scope.row)"
-                v-hasPermi="[
-                  'bpm:process-definition:query',
-                  'bpm:model:update',
-                  'bpm:model:delete'
-                ]"
-              >
-                <el-button type="primary" link>更多</el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item
-                      command="handleDefinitionList"
-                      v-if="checkPermi(['bpm:process-definition:query'])"
-                    >
-                      历史
-                    </el-dropdown-item>
-                    <el-dropdown-item
-                      command="handleChangeState"
-                      v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                      :disabled="!isManagerUser(scope.row)"
-                    >
-                      {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                    </el-dropdown-item>
-                    <el-dropdown-item
-                      type="danger"
-                      command="handleDelete"
-                      v-if="checkPermi(['bpm:model:delete'])"
-                      :disabled="!isManagerUser(scope.row)"
-                    >
-                      删除
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
-            </template>
-          </el-table-column>
-        </el-table>
-      </ContentWrap>
-    </div>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
@@ -208,8 +227,6 @@ import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
-import { groupBy } from 'lodash-es'
-import { mockData } from './mock'
 
 defineOptions({ name: 'BpmModel' })
 
@@ -217,7 +234,10 @@ const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
+
 const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -227,16 +247,14 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const categoryList = ref([]) // 流程分类列表
-const categoryGroup = ref<any>({}) // 按照category分组的数据
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
     const data = await ModelApi.getModelPage(queryParams)
-    data.list = mockData
-    categoryGroup.value = groupBy(data.list, 'categoryName')
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
@@ -384,12 +402,3 @@ onMounted(async () => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
-
-<style lang="scss" scoped>
-:deep(.el-form--inline .el-form-item) {
-  margin-right: 10px;
-}
-:deep(.el-divider--horizontal) {
-  margin-top: 10px;
-}
-</style>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
new file mode 100644
index 00000000..91e30dce
--- /dev/null
+++ b/src/views/bpm/model/index_new.vue
@@ -0,0 +1,432 @@
+<template>
+  <ContentWrap>
+    <div class="flex justify-between pl-20px items-center">
+      <h3>表单管理</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px flex"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item align="right" prop="key" class="ml-auto">
+          <el-input
+            v-model="queryParams.key"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          >
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-dropdown placement="bottom-end">
+            <el-button type="info" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <Icon icon="ep:circle-plus" size="13" class="mr-5px" />
+                  新建分组
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <Icon icon="fa:sort-amount-desc" size="13" class="mr-5px" />
+                  分组排序
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-divider />
+
+    <!-- 分类卡片组 -->
+    <div class="px-15px">
+      <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
+        <!-- 默认使其全部展开 -->
+        <el-collapse :modelValue="title">
+          <el-collapse-item :name="title">
+            <template #icon="{ isActive }">
+              <div
+                class="ml-20px flex items-center"
+                :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+              >
+                <Icon icon="ep:arrow-down" />
+              </div>
+            </template>
+            <template #title>
+              <div class="flex items-center">
+                <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
+                <div class="text-[var(--el-text-color-placeholder)] text-16px">
+                  ({{ list?.length || 0 }})
+                </div>
+              </div>
+            </template>
+
+            <el-table v-loading="loading" :data="list">
+              <el-table-column label="流程名" prop="name" min-width="200">
+                <template #default="scope">
+                  <div class="flex items-center">
+                    <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
+                    {{ scope.row.name }}
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+                <template #default="scope">
+                  <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+                    全部可见
+                  </el-text>
+                  <el-text v-else-if="scope.row.startUsers.length == 1">
+                    {{ scope.row.startUsers[0].nickname }}
+                  </el-text>
+                  <el-text v-else>
+                    <el-tooltip
+                      class="box-item"
+                      effect="dark"
+                      placement="top"
+                      :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+                    >
+                      {{ scope.row.startUsers[0].nickname }}等
+                      {{ scope.row.startUsers.length }} 人可见
+                    </el-tooltip>
+                  </el-text>
+                </template>
+              </el-table-column>
+              <el-table-column label="表单信息" prop="formType" min-width="200">
+                <template #default="scope">
+                  <el-button
+                    v-if="scope.row.formType === 10"
+                    type="primary"
+                    link
+                    @click="handleFormDetail(scope.row)"
+                  >
+                    <span>{{ scope.row.formName }}</span>
+                  </el-button>
+                  <el-button
+                    v-else-if="scope.row.formType === 20"
+                    type="primary"
+                    link
+                    @click="handleFormDetail(scope.row)"
+                  >
+                    <span>{{ scope.row.formCustomCreatePath }}</span>
+                  </el-button>
+                  <label v-else>暂无表单</label>
+                </template>
+              </el-table-column>
+              <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
+                <template #default="scope">
+                  <span v-if="scope.row.processDefinition">
+                    {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+                  </span>
+                  <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+                    v{{ scope.row.processDefinition.version }}
+                  </el-tag>
+                  <el-tag v-else type="warning">未部署</el-tag>
+                  <el-tag
+                    v-if="scope.row.processDefinition?.suspensionState === 2"
+                    type="warning"
+                    class="ml-10px"
+                  >
+                    已停用
+                  </el-tag>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="200" fixed="right">
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    @click="openForm('update', scope.row.id)"
+                    v-hasPermi="['bpm:model:update']"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    修改
+                  </el-button>
+                  <el-button
+                    link
+                    class="!ml-5px"
+                    type="primary"
+                    @click="handleDesign(scope.row)"
+                    v-hasPermi="['bpm:model:update']"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    设计
+                  </el-button>
+                  <el-button
+                    link
+                    class="!ml-5px"
+                    type="primary"
+                    @click="handleDeploy(scope.row)"
+                    v-hasPermi="['bpm:model:deploy']"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    发布
+                  </el-button>
+                  <el-dropdown
+                    class="!align-middle ml-5px"
+                    @command="(command) => handleCommand(command, scope.row)"
+                    v-hasPermi="[
+                      'bpm:process-definition:query',
+                      'bpm:model:update',
+                      'bpm:model:delete'
+                    ]"
+                  >
+                    <el-button type="primary" link>更多</el-button>
+                    <template #dropdown>
+                      <el-dropdown-menu>
+                        <el-dropdown-item
+                          command="handleDefinitionList"
+                          v-if="checkPermi(['bpm:process-definition:query'])"
+                        >
+                          历史
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          command="handleChangeState"
+                          v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                          :disabled="!isManagerUser(scope.row)"
+                        >
+                          {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                        </el-dropdown-item>
+                        <el-dropdown-item
+                          type="danger"
+                          command="handleDelete"
+                          v-if="checkPermi(['bpm:model:delete'])"
+                          :disabled="!isManagerUser(scope.row)"
+                        >
+                          删除
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-collapse-item>
+        </el-collapse>
+      </ContentWrap>
+    </div>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { groupBy } from 'lodash-es'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const loading = ref(true) // 列表的加载中
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+const categoryGroup = ref<any>({}) // 按照category分组的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+    const data = await ModelApi.getModelPage(queryParams)
+    categoryGroup.value = groupBy(data.list, 'categoryName')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 10px;
+  }
+  .el-collapse,
+  .el-collapse-item__header,
+  .el-collapse-item__wrap {
+    border: none;
+  }
+  .el-collapse-item__arrow {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
deleted file mode 100644
index 4534ec61..00000000
--- a/src/views/bpm/model/index_old.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
-                </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-  </Dialog>
-</template>
-
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
-
-defineOptions({ name: 'BpmModel' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleWorkflowDesignEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
-  }
-}
-
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-})
-</script>
diff --git a/src/views/bpm/model/mock.js b/src/views/bpm/model/mock.js
deleted file mode 100644
index 93c4b60b..00000000
--- a/src/views/bpm/model/mock.js
+++ /dev/null
@@ -1,202 +0,0 @@
-export const mockData = [
-  {
-    key: 'out_apply',
-    name: '外出申请',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/OA/goingOut/create',
-    formCustomViewPath: '/OA/goingOut/detail',
-    id: 'ff8f8bab-4d4e-11ef-8201-0242ac130002',
-    formName: null,
-    createTime: 1722218716216,
-    processDefinition: {
-      id: 'out_apply:4:7f56d464-4eec-11ef-8c3a-0242ac130002',
-      version: 4,
-      deploymentTime: 1722396312641,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'contract_change_history',
-    name: '合同变更申请',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/changeRecord/detail',
-    formCustomViewPath: '/project/changeRecord/detail',
-    id: '0c689067-3a92-11ef-b7f0-0242ac130002',
-    formName: null,
-    createTime: 1720158441959,
-    processDefinition: {
-      id: 'contract_change_history:1:f69fff4f-3a9a-11ef-b7f0-0242ac130002',
-      version: 1,
-      deploymentTime: 1720162270788,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'expenses_claim',
-    name: '费用报销申请',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/finance/reimbursement/detail',
-    formCustomViewPath: '/finance/reimbursement/detail',
-    id: '0310ad0c-351e-11ef-a653-0242ac130002',
-    formName: null,
-    createTime: 1719558848849,
-    processDefinition: {
-      id: 'expenses_claim:5:a043a1d8-4eec-11ef-8c3a-0242ac130002',
-      version: 5,
-      deploymentTime: 1722396367911,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'out_business_apply',
-    name: '申请单',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/finance/businessTripApply/detail',
-    formCustomViewPath: '/finance/businessTripApply/detail',
-    id: '279e27a4-3393-11ef-8401-0242ac130002',
-    formName: null,
-    createTime: 1719389258966,
-    processDefinition: {
-      id: 'out_business_apply:9:a7b2d4e2-430f-11ef-876f-0242ac130002',
-      version: 9,
-      deploymentTime: 1721091998780,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project_delay_application',
-    name: '项目延时申请',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/workHourDelay/create',
-    formCustomViewPath: '/project/workHourDelay/detail',
-    id: '46d87275-27c7-11ef-b258-0242ac130002',
-    formName: null,
-    createTime: 1718092231234,
-    processDefinition: {
-      id: 'b7ed308a-430f-11ef-876f-0242ac130002',
-      version: 5,
-      deploymentTime: 1721092026059,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project_result_approval',
-    name: '项目成果审核',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/projectTaskResult/detail',
-    formCustomViewPath: '/project/projectTaskResult/detail',
-    id: '4a15d4f8-23cc-11ef-8dd0-0242ac130002',
-    formName: null,
-    createTime: 1717654579502,
-    processDefinition: {
-      id: 'dd3cc360-4eec-11ef-8c3a-0242ac130002',
-      version: 6,
-      deploymentTime: 1722396470232,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_contract',
-    name: '合同管理',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/sales/contract/create',
-    formCustomViewPath: '/sales/contract/detail',
-    id: '8317cb71-0d1a-11ef-8445-70b5e844a623',
-    formName: null,
-    createTime: 1715159299146,
-    processDefinition: {
-      id: 'pms_contract:5:c7d6012a-29f2-11ef-a08d-0242ac130002',
-      version: 5,
-      deploymentTime: 1718330818270,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_consult_task_act',
-    name: '咨询任务书',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/consultTask/create',
-    formCustomViewPath: '/consultTask/detail',
-    id: '47fad8e4-0b91-11ef-b841-70b5e844a623',
-    formName: null,
-    createTime: 1714990407756,
-    processDefinition: {
-      id: 'pms_consult_task_act:1:67c2ae59-0b91-11ef-b841-70b5e844a623',
-      version: 1,
-      deploymentTime: 1714990460960,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project',
-    name: '立项管理',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/applyProject/create',
-    formCustomViewPath: '/project/applyProject/detail',
-    id: 'f0ba6bde-0b90-11ef-b841-70b5e844a623',
-    formName: null,
-    createTime: 1714990261372,
-    processDefinition: {
-      id: 'pms_project:6:b9e4e33b-2c6c-11ef-8386-0242ac130002',
-      version: 6,
-      deploymentTime: 1718603095738,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'invoice_apply_manage',
-    name: '开票申请',
-    description: 'asdas',
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/sales/invoice/create',
-    formCustomViewPath: '/sales/invoice/detail',
-    id: '7ec07575-0605-11ef-ab76-cc96e508c010',
-    formName: null,
-    createTime: 1714380614292,
-    processDefinition: {
-      id: 'invoice_apply_manage:8:665a8c40-44c9-11ef-9813-0242ac130002',
-      version: 8,
-      deploymentTime: 1721281726671,
-      suspensionState: 1
-    }
-  }
-]

From 9dc268efb43720b4dbb687396588cc7445f86b02 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 9 Oct 2024 13:25:53 +0800
Subject: [PATCH 009/109] =?UTF-8?q?feat:=20=E6=A0=B7=E5=BC=8FUI=E7=BB=86?=
 =?UTF-8?q?=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/index_new.vue | 46 +++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 91e30dce..4f2ba3c3 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <div class="flex justify-between pl-20px items-center">
-      <h3>表单管理</h3>
+      <h3 class="font-extrabold">表单管理</h3>
       <!-- 搜索工作栏 -->
       <el-form
         class="-mb-15px flex"
@@ -31,7 +31,7 @@
 
         <el-form-item>
           <el-dropdown placement="bottom-end">
-            <el-button type="info" plain>
+            <el-button class="w-30px" plain>
               <Icon icon="ep:setting" />
             </el-button>
             <template #dropdown>
@@ -55,7 +55,7 @@
 
     <!-- 分类卡片组 -->
     <div class="px-15px">
-      <ContentWrap v-for="(list, title) in categoryGroup" :key="title">
+      <ContentWrap :body-style="{ padding: 0 }" v-for="(list, title) in categoryGroup" :key="title">
         <!-- 默认使其全部展开 -->
         <el-collapse :modelValue="title">
           <el-collapse-item :name="title">
@@ -64,20 +64,32 @@
                 class="ml-20px flex items-center"
                 :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
               >
-                <Icon icon="ep:arrow-down" />
+                <Icon icon="ep:arrow-down-bold" color="#999" />
+              </div>
+              <div class="ml-auto mr-30px">
+                <el-button link type="info" class="mr-10px" @click.stop="handleSort">
+                  <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+                  排序
+                </el-button>
+                <el-button link type="info" @click.stop="handleGroup">
+                  <Icon icon="ep:setting" class="mr-5px" />
+                  分组
+                </el-button>
               </div>
             </template>
             <template #title>
               <div class="flex items-center">
                 <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
-                <div class="text-[var(--el-text-color-placeholder)] text-16px">
-                  ({{ list?.length || 0 }})
-                </div>
+                <div class="color-gray-600 text-16px"> ({{ list?.length || 0 }}) </div>
               </div>
             </template>
 
-            <el-table v-loading="loading" :data="list">
-              <el-table-column label="流程名" prop="name" min-width="200">
+            <el-table
+              :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0' }"
+              v-loading="loading"
+              :data="list"
+            >
+              <el-table-column label="流程名" prop="name" min-width="150">
                 <template #default="scope">
                   <div class="flex items-center">
                     <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
@@ -240,11 +252,14 @@ import { CategoryApi } from '@/api/bpm/category'
 import { BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
+import { useAppStore } from '@/store/modules/app'
 import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
+const appStore = useAppStore()
 const message = useMessage() // 消息弹窗
+const isDark = computed(() => appStore.getIsDark)
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
@@ -278,7 +293,6 @@ const handleQuery = () => {
   getList()
 }
 
-
 /** '更多'操作按钮 */
 const handleCommand = (command: string, row: any) => {
   switch (command) {
@@ -402,6 +416,16 @@ const isManagerUser = (row: any) => {
   return row.managerUserIds && row.managerUserIds.includes(userId)
 }
 
+/* 排序 */
+const handleSort = () => {
+  console.log('排序')
+}
+
+/* 分组 */
+const handleGroup = () => {
+  console.log('分组')
+}
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()
@@ -416,7 +440,7 @@ onMounted(async () => {
     margin-right: 10px;
   }
   .el-divider--horizontal {
-    margin-top: 10px;
+    margin-top: 6px;
   }
   .el-collapse,
   .el-collapse-item__header,

From 4342c3ee056803195facf1542866dd9b52b02760 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 10 Oct 2024 23:09:05 +0800
Subject: [PATCH 010/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=96=B0=E5=AE=A1=E6=89=B9=E7=95=8C?=
 =?UTF-8?q?=E9=9D=A2=E6=B0=94=E6=B3=A1=E5=8D=A1=E6=8C=89=E9=92=AE=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/task/index.ts                     |   5 +
 .../SimpleProcessDesignerV2/src/consts.ts     |   7 +-
 .../detail/ProcessInstanceOperationButton.vue | 547 ++++++++++++++----
 .../bpm/processInstance/detail/index_new.vue  |  18 +-
 src/views/bpm/task/copy/index.vue             |   1 +
 5 files changed, 451 insertions(+), 127 deletions(-)

diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index d32b2e14..cf75bfa5 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -106,6 +106,11 @@ export const signDeleteTask = async (data: any) => {
   return await request.delete({ url: '/bpm/task/delete-sign', data })
 }
 
+// 抄送
+export const copyTask = async (data: any) => {
+  return await request.put({ url: '/bpm/task/copy', data })
+}
+
 // 获取减签任务列表
 export const getChildrenTaskList = async (id: string) => {
   return await request.get({ url: '/bpm/task/list-by-parent-task-id?parentTaskId=' + id })
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 0364c5e6..44fbf361 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -362,7 +362,11 @@ export enum OperationButtonType {
   /**
    * 回退
    */
-  RETURN = 6
+  RETURN = 6,
+  /**
+   * 抄送
+   */
+  COPY = 7
 }
 
 /**
@@ -504,6 +508,7 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
 OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
 OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
 OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
+OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
 
 // 默认的按钮权限设置
 export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 34ba2bbe..96d9739e 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -5,14 +5,14 @@
   >
     <!-- 【通过】按钮 -->
     <el-popover
-      :visible="passVisible"
+      :visible="popOverVisible.approve"
       placement="top-end"
-      :width="500"
+      :width="420"
       trigger="click"
       v-if="isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
-        <el-button plain type="success" @click="openPopover('1')">
+        <el-button plain type="success" @click="openPopover('approve')">
           <Icon icon="ep:select" />&nbsp; {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
         </el-button>
       </template>
@@ -22,16 +22,10 @@
           label-position="top"
           class="mb-auto"
           ref="formRef"
-          :model="auditForm"
-          :rules="auditRule"
+          :model="genericForm"
+          :rules="genericRule"
           label-width="100px"
         >
-          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance?.startUser.nickname }}
-            <el-tag size="small" type="info" class="ml-8px">
-              {{ processInstance?.startUser.deptName }}
-            </el-tag>
-          </el-form-item>
           <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
@@ -43,25 +37,14 @@
               :rule="approveForm.rule"
             />
           </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
           </el-form-item>
-          <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
-              <el-option
-                v-for="itemx in userOptions"
-                :key="itemx.id"
-                :label="itemx.nickname"
-                :value="itemx.id"
-              />
-            </el-select>
-          </el-form-item>
-
           <el-form-item>
             <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
               {{ getButtonDisplayName(OperationButtonType.APPROVE) }}
             </el-button>
-            <el-button @click="passVisible = false"> 取消 </el-button>
+            <el-button @click="popOverVisible.approve = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
@@ -69,14 +52,14 @@
 
     <!-- 【拒绝】按钮 -->
     <el-popover
-      :visible="rejectVisible"
+      :visible="popOverVisible.reject"
       placement="top-end"
-      :width="500"
+      :width="420"
       trigger="click"
       v-if="isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
-        <el-button class="mr-20px" plain type="danger" @click="openPopover('2')">
+        <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
           <Icon icon="ep:close" />&nbsp; {{ getButtonDisplayName(OperationButtonType.REJECT) }}
         </el-button>
       </template>
@@ -86,16 +69,10 @@
           label-position="top"
           class="mb-auto"
           ref="formRef"
-          :model="auditForm"
-          :rules="auditRule"
+          :model="genericForm"
+          :rules="genericRule"
           label-width="100px"
         >
-          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance?.startUser.nickname }}
-            <el-tag size="small" type="info" class="ml-8px">
-              {{ processInstance?.startUser.deptName }}
-            </el-tag>
-          </el-form-item>
           <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
@@ -107,80 +84,273 @@
               :rule="approveForm.rule"
             />
           </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input v-model="auditForm.reason" placeholder="请输入审批建议" type="textarea" />
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
           </el-form-item>
-          <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="auditForm.copyUserIds" multiple placeholder="请选择抄送人">
-              <el-option
-                v-for="itemx in userOptions"
-                :key="itemx.id"
-                :label="itemx.nickname"
-                :value="itemx.id"
-              />
-            </el-select>
-          </el-form-item>
-
           <el-form-item>
             <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
               {{ getButtonDisplayName(OperationButtonType.REJECT) }}
             </el-button>
-            <el-button @click="rejectVisible = false"> 取消 </el-button>
+            <el-button @click="popOverVisible.reject = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-popover>
 
     <!-- 【抄送】按钮 -->
-    <div @click="handleSend"> <Icon :size="14" icon="svg-icon:send" />&nbsp;抄送 </div>
+    <el-popover
+      :visible="popOverVisible.copy"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.COPY)"
+    >
+      <template #reference>
+        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="svg-icon:send" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.COPY) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+                
+          <el-form-item label="抄送人" prop="copyUserIds">
+            <el-select v-model="genericForm.copyUserIds" clearable style="width: 100%" multiple placeholder="请选择抄送人">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="抄送意见" prop="copyReason">
+            <el-input v-model="genericForm.copyReason" clearable placeholder="请输入抄送意见" type="textarea"  :rows="3" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCopy">
+              {{ getButtonDisplayName(OperationButtonType.COPY) }}
+            </el-button>
+            <el-button @click="popOverVisible.copy = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
 
     <!-- 【转交】按钮 -->
-    <div @click="openTaskUpdateAssigneeForm" v-if="isShowButton(OperationButtonType.TRANSFER)">
-      <Icon :size="14" icon="fa:share-square-o" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
-    </div>
+    <el-popover
+      :visible="popOverVisible.transfer"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.TRANSFER)"
+    >
+      <template #reference>
+        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="fa:share-square-o" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+                
+          <el-form-item label="新审批人" prop="assigneeUserId">
+            <el-select v-model="genericForm.assigneeUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>
 
-    <!-- 【委托】按钮 -->
-    <div @click="handleDelegate" v-if="isShowButton(OperationButtonType.DELEGATE)">
-      <Icon :size="14" icon="ep:position" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
-    </div>
 
-    <!-- 【加签】 -->
-    <div @click="handleSign" v-if="isShowButton(OperationButtonType.ADD_SIGN)">
-      <Icon :size="14" icon="ep:plus" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
-    </div>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary"  @click="handleTransfer()">
+              {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
+            </el-button>
+            <el-button @click="popOverVisible.transfer = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    
+    <!-- 【委派】按钮 -->
+    <el-popover
+      :visible="popOverVisible.delegate"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.DELEGATE)"
+    >
+      <template #reference>
+        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="ep:position" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+        </div>
+      </template>
+      
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="接收人" prop="delegateUserId">
+            <el-select v-model="genericForm.delegateUserId" clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+     
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
+              {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
+            </el-button>
+            <el-button @click="popOverVisible.delegate = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+    </el-popover>
+
+    <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
+    <el-popover
+      :visible="popOverVisible.addSign"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.ADD_SIGN)"
+    >
+      <template #reference>
+        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="ep:plus" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+        </div>
+      </template>
+
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="加签处理人" prop="addSignUserIds">
+            <el-select v-model="genericForm.addSignUserIds" multiple clearable style="width: 100%">
+              <el-option
+                v-for="item in userOptions"
+                :key="item.id"
+                :label="item.nickname"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+      
+          <el-form-item label="审批意见" prop="reason">
+            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('before')">
+              向前{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('after')">
+              向后{{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
+            </el-button>
+            <el-button @click="popOverVisible.addSign = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+
     <!-- TODO @jason：减签 -->
-
     <!-- 【退回】按钮 -->
-    <div @click="handleBack" v-if="isShowButton(OperationButtonType.RETURN)">
-      <Icon :size="14" icon="fa:mail-reply" />&nbsp;
-      {{ getButtonDisplayName(OperationButtonType.RETURN) }}
-    </div>
-
+    <el-popover
+      :visible="popOverVisible.return"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="isShowButton(OperationButtonType.RETURN)"
+    >
+      <template #reference>
+        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px" >
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+          {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
+              <el-select v-model="genericForm.targetTaskDefinitionKey" clearable style="width: 100%">
+                <el-option
+                  v-for="item in returnList"
+                  :key="item.taskDefinitionKey"
+                  :label="item.name"
+                  :value="item.taskDefinitionKey"
+                />
+              </el-select>
+          </el-form-item>
+          <el-form-item label="退回理由" prop="returnReason">
+            <el-input v-model="genericForm.returnReason" clearable placeholder="请输入退回理由" type="textarea"  :rows="3" />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary"  @click="handleReturn()">
+              {{ getButtonDisplayName(OperationButtonType.RETURN) }}
+            </el-button>
+            <el-button @click="popOverVisible.return = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+   
     <!--TODO @jason：撤回 -->
     <!--TODO @jason：再次发起 -->
   </div>
-
-  <!-- 弹窗：转派审批人 -->
-  <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-  <!-- 弹窗：回退节点 -->
-  <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
-  <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-  <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
-  <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-  <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
 </template>
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import { useUserStore } from '@/store/modules/user'
 import * as TaskApi from '@/api/bpm/task'
 import { propTypes } from '@/utils/propTypes'
-import TaskReturnForm from './dialog/TaskReturnForm.vue'
-import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
-import TaskTransferForm from './dialog/TaskTransferForm.vue'
-import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
 import { isEmpty } from '@/utils/is'
 import {
   OperationButtonType,
@@ -197,16 +367,32 @@ defineProps({
   userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
-const passVisible = ref(false) // 是否显示
-const rejectVisible = ref(false) // 是否显示
+/** 气泡卡是否展示 */
+const popOverVisible = ref({
+  approve: false,
+  reject: false,
+  transfer: false,
+  delegate: false,
+  addSign: false,
+  return : false,
+  copy: false
+})
+/** 退回节点 */
+const returnList = ref([] as any)
 // ========== 审批信息 ==========
 const runningTask = ref<any>({}) // 运行中的任务
-const auditForm = ref<any>({}) // 审批任务的表单
+const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 const formRef = ref()
-const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
+/** 表单校验规则 */
+const genericRule = reactive({
+  reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
+  returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
+  copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
+  assigneeUserId:[{ required: true, message: '新审批人不能为空', trigger: 'change' }],
+  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
+  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
 })
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -227,7 +413,7 @@ watch(
  */
 const loadRunningTask = (tasks: any[]) => {
   runningTask.value = {}
-  auditForm.value = {}
+  genericForm.value = {}
   approveForm.value = {}
   approveFormFApi.value = {}
   tasks.forEach((task: any) => {
@@ -244,7 +430,7 @@ const loadRunningTask = (tasks: any[]) => {
     }
     // 2.3 添加到处理任务
     runningTask.value = { ...task }
-    auditForm.value = {
+    genericForm.value = {
       reason: '',
       copyUserIds: []
     }
@@ -261,12 +447,12 @@ const loadRunningTask = (tasks: any[]) => {
 }
 
 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (pass: any) => {
+const handleAudit = async (pass: boolean) => {
   formLoading.value = true
   try {
-    const auditFormRef = proxy.$refs['formRef']
+    const genericFormRef = proxy.$refs['formRef']
     // 1.2 校验表单
-    const elForm = unref(auditFormRef)
+    const elForm = unref(genericFormRef)
     if (!elForm) return
     const valid = await elForm.validate()
     if (!valid) return
@@ -274,8 +460,7 @@ const handleAudit = async (pass: any) => {
     // 2.1 提交审批
     const data = {
       id: runningTask.value.id,
-      reason: auditForm.value.reason,
-      copyUserIds: auditForm.value.copyUserIds
+      reason: genericForm.value.reason
     }
     if (pass) {
       // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
@@ -286,9 +471,11 @@ const handleAudit = async (pass: any) => {
         data.variables = approveForm.value.value
       }
       await TaskApi.approveTask(data)
+      popOverVisible.value.approve = false
       message.success('审批通过成功')
     } else {
       await TaskApi.rejectTask(data)
+      popOverVisible.value.reject = false
       message.success('审批不通过成功')
     }
     // 2.2 加载最新数据
@@ -298,40 +485,160 @@ const handleAudit = async (pass: any) => {
   }
 }
 
-/* 抄送 TODO */
-const handleSend = () => {}
-
-// TODO 代码优化：这里 flag 改成 approve: boolean 。因为 flag 目前就只有 1 和 2
-const openPopover = (flag) => {
-  passVisible.value = false
-  rejectVisible.value = false
-  formRef.value.resetFields()
-  flag === '1' ? (passVisible.value = true) : (rejectVisible.value = true)
+/* 处理抄送 */
+const handleCopy = async () => {
+  formLoading.value = true
+  try {
+    const copyFormRef = proxy.$refs['formRef']
+    // 1. 校验表单
+    const elForm = unref(copyFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 2. 提交抄送
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.copyReason,
+      copyUserIds: genericForm.value.copyUserIds
+    }
+    await TaskApi.copyTask(data)
+    popOverVisible.value.copy = false
+    message.success('操作成功')
+  } finally {
+    formLoading.value = false
+  }
 }
 
-/** 转派审批人 */
-const taskTransferFormRef = ref()
-const openTaskUpdateAssigneeForm = () => {
-  taskTransferFormRef.value.open(runningTask.value.id)
+/** 处理转交 */
+const handleTransfer = async () => {
+   
+  formLoading.value = true
+  try {
+    const transferFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(transferFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交转交
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.reason,
+      assigneeUserId: genericForm.value.assigneeUserId
+    }
+  
+    await TaskApi.transferTask(data)
+    popOverVisible.value.transfer = false
+    message.success('操作成功')
+    // 2. 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }
 
-/** 处理审批退回的操作 */
-const taskDelegateForm = ref()
+/** 处理委派 */
 const handleDelegate = async () => {
-  taskDelegateForm.value.open(runningTask.value.id)
+   formLoading.value = true
+   try {
+     const deletegateFormRef = proxy.$refs['formRef']
+     // 1.1 校验表单
+     const elForm = unref(deletegateFormRef)
+     if (!elForm) return
+     const valid = await elForm.validate()
+     if (!valid) return
+     // 1.2 处理委派
+     const data = {
+       id: runningTask.value.id,
+       reason: genericForm.value.reason,
+       delegateUserId: genericForm.value.delegateUserId
+     }
+   
+     await TaskApi.delegateTask(data)
+     popOverVisible.value.delegate = false
+     message.success('操作成功')
+     // 2. 加载最新数据
+     getDetail()
+   } finally {
+     formLoading.value = false
+   }
+ }
+
+/** 处理加签 */
+const handlerAddSign = async (type: string) => {
+  formLoading.value = true
+  try {
+    const transferFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(transferFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交加签
+    const data = {
+      id: runningTask.value.id,
+      type,
+      reason: genericForm.value.reason,
+      userIds: genericForm.value.addSignUserIds
+    }
+    await TaskApi.signCreateTask(data)
+    message.success('操作成功')
+    popOverVisible.value.addSign = false
+    // 2 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }
 
-/** 处理审批退回的操作 */
-const taskReturnFormRef = ref()
-const handleBack = async () => {
-  taskReturnFormRef.value.open(runningTask.value.id)
+/** 处理退回 */
+const handleReturn = async () => {
+  formLoading.value = true
+  try {
+    const returnFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(returnFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交退回
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.returnReason,
+      targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey
+    }
+  
+    await TaskApi.returnTask(data)
+    popOverVisible.value.return = false
+    message.success('操作成功')
+    // 2 加载最新数据
+    getDetail()
+  } finally {
+    formLoading.value = false
+  }
 }
 
-/** 处理审批加签的操作 */
-const taskSignCreateFormRef = ref()
-const handleSign = async () => {
-  taskSignCreateFormRef.value.open(runningTask.value.id)
+/** 弹出退回气泡卡 */
+const openReturnPopover = async  () => {
+  returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
+  if (returnList.value.length === 0) {
+    message.warning('当前没有可退回的节点')
+    return
+  }
+  openPopover('return')
 }
+/** 弹出气泡卡 */
+const openPopover = (type: string ) => {
+  Object.keys(popOverVisible.value).forEach( item => {
+    if( item === type) {
+      popOverVisible.value[item] = true
+    } else {
+      popOverVisible.value[item] = false
+    }
+  })
+  formRef.value.resetFields()
+}
+
 /** 获得详情 */
 const getDetail = () => {
   emit('success')
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 54880487..0cb3d6e4 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -202,12 +202,18 @@ const getProcessInstance = async () => {
           activityId: props.activityId
         })
       }
-      setConfAndFields2(
-        detailForm,
-        processDefinition.formConf,
-        processDefinition.formFields,
-        data.formVariables
-      )
+
+      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 表单不显示
+        detailForm.value.value = data.formVariables
+      } else {
+        setConfAndFields2(
+          detailForm,
+          processDefinition.formConf,
+          processDefinition.formFields,
+          data.formVariables
+        )
+      }
+      
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
diff --git a/src/views/bpm/task/copy/index.vue b/src/views/bpm/task/copy/index.vue
index 045e2074..28911dca 100644
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -55,6 +55,7 @@
       />
       <el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
       <el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
+      <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
       <el-table-column
         align="center"
         label="抄送时间"

From 33f3bc0567097a6beb83db4585b9e5c2041ba203 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 12 Oct 2024 19:41:38 +0800
Subject: [PATCH 011/109] =?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=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9ABPMN=20?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E5=9B=BE=E9=AB=98=E4=BA=AE=E7=9A=84=E8=AE=A1?=
 =?UTF-8?q?=E7=AE=97=EF=BC=8C=E5=88=87=E6=8D=A2=E5=88=B0=E5=90=8E=E7=AB=AF?=
 =?UTF-8?q?=E4=B8=BA=E4=B8=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                | 240 ++---
 src/api/bpm/activity/index.ts                 |   8 -
 src/api/bpm/processInstance/index.ts          |  31 +-
 .../src/SimpleProcessDesigner.vue             |   9 +-
 .../package/designer/ProcessViewer.vue        | 954 ++++++------------
 .../package/theme/index.scss                  | 115 +++
 src/router/modules/remaining.ts               |  15 +-
 src/utils/constants.ts                        |   8 +
 .../detail/ProcessInstanceBpmnViewer.vue      |  35 +-
 .../bpm/processInstance/detail/index.vue      |   8 +-
 .../bpm/processInstance/detail/index_new.vue  |   8 +-
 12 files changed, 623 insertions(+), 810 deletions(-)
 delete mode 100644 src/api/bpm/activity/index.ts

diff --git a/package.json b/package.json
index 4ceb4b91..d987b98e 100644
--- a/package.json
+++ b/package.json
@@ -95,7 +95,7 @@
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "autoprefixer": "^10.4.17",
-    "bpmn-js": "8.9.0",
+    "bpmn-js": "8.10.0",
     "bpmn-js-properties-panel": "0.46.0",
     "consola": "^3.2.3",
     "eslint": "^8.57.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 637b8f0c..1511143f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -214,11 +214,11 @@ importers:
         specifier: ^10.4.17
         version: 10.4.19(postcss@8.4.38)
       bpmn-js:
-        specifier: 8.9.0
-        version: 8.9.0
+        specifier: 8.10.0
+        version: 8.10.0
       bpmn-js-properties-panel:
         specifier: 0.46.0
-        version: 0.46.0(bpmn-js@8.9.0)
+        version: 0.46.0(bpmn-js@8.10.0)
       consola:
         specifier: ^3.2.3
         version: 3.2.3
@@ -319,8 +319,8 @@ importers:
         specifier: ^2.0.1
         version: 2.0.1(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))
       vite-plugin-top-level-await:
-        specifier: ^1.3.1
-        version: 1.4.1(rollup@4.17.1)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))
+        specifier: ^1.4.4
+        version: 1.4.4(rollup@4.17.1)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))
       vue-eslint-parser:
         specifier: ^9.3.2
         version: 9.4.2(eslint@8.57.0)
@@ -1065,139 +1065,139 @@ packages:
       vue: ^3.2.0
 
   '@esbuild/aix-ppc64@0.19.12':
-    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==, tarball: https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
 
   '@esbuild/android-arm64@0.19.12':
-    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==, tarball: https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.19.12':
-    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==, tarball: https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.19.12':
-    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==, tarball: https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
 
   '@esbuild/darwin-arm64@0.19.12':
-    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==, tarball: https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.19.12':
-    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==, tarball: https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
 
   '@esbuild/freebsd-arm64@0.19.12':
-    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.19.12':
-    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
 
   '@esbuild/linux-arm64@0.19.12':
-    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.19.12':
-    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.19.12':
-    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==, tarball: https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.19.12':
-    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==, tarball: https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.19.12':
-    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.19.12':
-    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==, tarball: https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.19.12':
-    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==, tarball: https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.19.12':
-    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==, tarball: https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.19.12':
-    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==, tarball: https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
 
   '@esbuild/netbsd-x64@0.19.12':
-    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==, tarball: https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
 
   '@esbuild/openbsd-x64@0.19.12':
-    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==, tarball: https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
 
   '@esbuild/sunos-x64@0.19.12':
-    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==, tarball: https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
 
   '@esbuild/win32-arm64@0.19.12':
-    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==, tarball: https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.19.12':
-    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==, tarball: https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
 
   '@esbuild/win32-x64@0.19.12':
-    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==, tarball: https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1395,7 +1395,7 @@ packages:
     engines: {node: '>= 8'}
 
   '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==, tarball: https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz}
     engines: {node: '>=14'}
 
   '@pkgr/core@0.1.1':
@@ -1415,7 +1415,7 @@ packages:
     resolution: {integrity: sha512-s2t+1oVtGDV6KtqfCXtUOhxfeYvOdDF90IVm+nMs/6bUP0HeGZLslguuL/AibpwtfL4FA/oCsIu/RhwapgAdJw==}
 
   '@rollup/plugin-virtual@3.0.2':
-    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==, tarball: https://registry.npmmirror.com/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1437,178 +1437,178 @@ packages:
         optional: true
 
   '@rollup/rollup-android-arm-eabi@4.17.1':
-    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==}
+    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz}
     cpu: [arm]
     os: [android]
 
   '@rollup/rollup-android-arm64@4.17.1':
-    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==}
+    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.1.tgz}
     cpu: [arm64]
     os: [android]
 
   '@rollup/rollup-darwin-arm64@4.17.1':
-    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==}
+    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.1.tgz}
     cpu: [arm64]
     os: [darwin]
 
   '@rollup/rollup-darwin-x64@4.17.1':
-    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==}
+    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.1.tgz}
     cpu: [x64]
     os: [darwin]
 
   '@rollup/rollup-linux-arm-gnueabihf@4.17.1':
-    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==}
+    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.1.tgz}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.17.1':
-    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==}
+    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.1.tgz}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.17.1':
-    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==}
+    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.1.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.17.1':
-    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==}
+    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.1.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.17.1':
-    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==}
+    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.1.tgz}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.17.1':
-    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==}
+    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.1.tgz}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.17.1':
-    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==}
+    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.1.tgz}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.17.1':
-    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==}
+    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.1.tgz}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.17.1':
-    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==}
+    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.1.tgz}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.17.1':
-    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==}
+    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.1.tgz}
     cpu: [arm64]
     os: [win32]
 
   '@rollup/rollup-win32-ia32-msvc@4.17.1':
-    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==}
+    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.1.tgz}
     cpu: [ia32]
     os: [win32]
 
   '@rollup/rollup-win32-x64-msvc@4.17.1':
-    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==}
+    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.1.tgz}
     cpu: [x64]
     os: [win32]
 
   '@sinclair/typebox@0.27.8':
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
-  '@swc/core-darwin-arm64@1.4.17':
-    resolution: {integrity: sha512-HVl+W4LezoqHBAYg2JCqR+s9ife9yPfgWSj37iIawLWzOmuuJ7jVdIB7Ee2B75bEisSEKyxRlTl6Y1Oq3owBgw==}
+  '@swc/core-darwin-arm64@1.7.35':
+    resolution: {integrity: sha512-BQSSozVxjxS+SVQz6e3GC/+OBWGIK3jfe52pWdANmycdjF3ch7lrCKTHTU7eHwyoJ96mofszPf5AsiVJF34Fwg==, tarball: https://registry.npmmirror.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@swc/core-darwin-x64@1.4.17':
-    resolution: {integrity: sha512-WYRO9Fdzq4S/he8zjW5I95G1zcvyd9yyD3Tgi4/ic84P5XDlSMpBDpBLbr/dCPjmSg7aUXxNQqKqGkl6dQxYlA==}
+  '@swc/core-darwin-x64@1.7.35':
+    resolution: {integrity: sha512-44TYdKN/EWtkU88foXR7IGki9JzhEJzaFOoPevfi9Xe7hjAD/x2+AJOWWqQNzDPMz9+QewLdUVLyR6s5okRgtg==, tarball: https://registry.npmmirror.com/@swc/core-darwin-x64/-/core-darwin-x64-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
-  '@swc/core-linux-arm-gnueabihf@1.4.17':
-    resolution: {integrity: sha512-cgbvpWOvtMH0XFjvwppUCR+Y+nf6QPaGu6AQ5hqCP+5Lv2zO5PG0RfasC4zBIjF53xgwEaaWmGP5/361P30X8Q==}
+  '@swc/core-linux-arm-gnueabihf@1.7.35':
+    resolution: {integrity: sha512-ccfA5h3zxwioD+/z/AmYtkwtKz9m4rWTV7RoHq6Jfsb0cXHrd6tbcvgqRWXra1kASlE+cDWsMtEZygs9dJRtUQ==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
-  '@swc/core-linux-arm64-gnu@1.4.17':
-    resolution: {integrity: sha512-l7zHgaIY24cF9dyQ/FOWbmZDsEj2a9gRFbmgx2u19e3FzOPuOnaopFj0fRYXXKCmtdx+anD750iBIYnTR+pq/Q==}
+  '@swc/core-linux-arm64-gnu@1.7.35':
+    resolution: {integrity: sha512-hx65Qz+G4iG/IVtxJKewC5SJdki8PAPFGl6gC/57Jb0+jA4BIoGLD/J3Q3rCPeoHfdqpkCYpahtyUq8CKx41Jg==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-arm64-musl@1.4.17':
-    resolution: {integrity: sha512-qhH4gr9gAlVk8MBtzXbzTP3BJyqbAfUOATGkyUtohh85fPXQYuzVlbExix3FZXTwFHNidGHY8C+ocscI7uDaYw==}
+  '@swc/core-linux-arm64-musl@1.7.35':
+    resolution: {integrity: sha512-kL6tQL9No7UEoEvDRuPxzPTpxrvbwYteNRbdChSSP74j13/55G2/2hLmult5yFFaWuyoyU/2lvzjRL/i8OLZxg==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-linux-x64-gnu@1.4.17':
-    resolution: {integrity: sha512-vRDFATL1oN5oZMImkwbgSHEkp8xG1ofEASBypze01W1Tqto8t+yo6gsp69wzCZBlxldsvPpvFZW55Jq0Rn+UnA==}
+  '@swc/core-linux-x64-gnu@1.7.35':
+    resolution: {integrity: sha512-Ke4rcLQSwCQ2LHdJX1FtnqmYNQ3IX6BddKlUtS7mcK13IHkQzZWp0Dcu6MgNA3twzb/dBpKX5GLy07XdGgfmyw==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@swc/core-linux-x64-musl@1.4.17':
-    resolution: {integrity: sha512-zQNPXAXn3nmPqv54JVEN8k2JMEcMTQ6veVuU0p5O+A7KscJq+AGle/7ZQXzpXSfUCXlLMX4wvd+rwfGhh3J4cw==}
+  '@swc/core-linux-x64-musl@1.7.35':
+    resolution: {integrity: sha512-T30tlLnz0kYyDFyO5RQF5EQ4ENjW9+b56hEGgFUYmfhFhGA4E4V67iEx7KIG4u0whdPG7oy3qjyyIeTb7nElEw==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@swc/core-win32-arm64-msvc@1.4.17':
-    resolution: {integrity: sha512-z86n7EhOwyzxwm+DLE5NoLkxCTme2lq7QZlDjbQyfCxOt6isWz8rkW5QowTX8w9Rdmk34ncrjSLvnHOeLY17+w==}
+  '@swc/core-win32-arm64-msvc@1.7.35':
+    resolution: {integrity: sha512-CfM/k8mvtuMyX+okRhemfLt784PLS0KF7Q9djA8/Dtavk0L5Ghnq+XsGltO3d8B8+XZ7YOITsB14CrjehzeHsg==, tarball: https://registry.npmmirror.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
-  '@swc/core-win32-ia32-msvc@1.4.17':
-    resolution: {integrity: sha512-JBwuSTJIgiJJX6wtr4wmXbfvOswHFj223AumUrK544QV69k60FJ9q2adPW9Csk+a8wm1hLxq4HKa2K334UHJ/g==}
+  '@swc/core-win32-ia32-msvc@1.7.35':
+    resolution: {integrity: sha512-ATB3uuH8j/RmS64EXQZJSbo2WXfRNpTnQszHME/sGaexsuxeijrp3DTYSFAA3R2Bu6HbIIX6jempe1Au8I3j+A==, tarball: https://registry.npmmirror.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
-  '@swc/core-win32-x64-msvc@1.4.17':
-    resolution: {integrity: sha512-jFkOnGQamtVDBm3MF5Kq1lgW8vx4Rm1UvJWRUfg+0gx7Uc3Jp3QMFeMNw/rDNQYRDYPG3yunCC+2463ycd5+dg==}
+  '@swc/core-win32-x64-msvc@1.7.35':
+    resolution: {integrity: sha512-iDGfQO1571NqWUXtLYDhwIELA/wadH42ioGn+J9R336nWx40YICzy9UQyslWRhqzhQ5kT+QXAW/MoCWc058N6Q==, tarball: https://registry.npmmirror.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.35.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
-  '@swc/core@1.4.17':
-    resolution: {integrity: sha512-tq+mdWvodMBNBBZbwFIMTVGYHe9N7zvEaycVVjfvAx20k1XozHbHhRv+9pEVFJjwRxLdXmtvFZd3QZHRAOpoNQ==}
+  '@swc/core@1.7.35':
+    resolution: {integrity: sha512-3cUteCTbr2r5jqfgx0r091sfq5Mgh6F1SQh8XAOnSvtKzwv2bC31mvBHVAieD1uPa2kHJhLav20DQgXOhpEitw==, tarball: https://registry.npmmirror.com/@swc/core/-/core-1.7.35.tgz}
     engines: {node: '>=10'}
     peerDependencies:
-      '@swc/helpers': ^0.5.0
+      '@swc/helpers': '*'
     peerDependenciesMeta:
       '@swc/helpers':
         optional: true
 
   '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==, tarball: https://registry.npmmirror.com/@swc/counter/-/counter-0.1.3.tgz}
 
-  '@swc/types@0.1.6':
-    resolution: {integrity: sha512-/JLo/l2JsT/LRd80C3HfbmVpxOAJ11FO2RCEslFrgzLltoP9j8XIbsyDcfCt2WWyX+CM96rBoNM+IToAkFOugg==}
+  '@swc/types@0.1.13':
+    resolution: {integrity: sha512-JL7eeCk6zWCbiYQg2xQSdLXQJl8Qoc9rXmG2cEKvHe3CKwMHwHGpfOb8frzNLmbycOo6I51qxnLnn9ESf4I20Q==, tarball: https://registry.npmmirror.com/@swc/types/-/types-0.1.13.tgz}
 
   '@sxzz/popperjs-es@2.11.7':
-    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==, tarball: https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz}
 
   '@transloadit/prettier-bytes@0.0.7':
     resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
@@ -1756,7 +1756,7 @@ packages:
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
 
   '@types/video.js@7.3.58':
-    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==}
+    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==, tarball: https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz}
 
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
@@ -2410,11 +2410,11 @@ packages:
   bpmn-js-token-simulation@0.10.0:
     resolution: {integrity: sha512-QuZQ/KVXKt9Vl+XENyOBoTW2Aw+uKjuBlKdCJL6El7AyM7DkJ5bZkSYURshId1SkBDdYg2mJ1flSmsrhGuSfwg==}
 
-  bpmn-js@8.9.0:
-    resolution: {integrity: sha512-cthSxiJUpEHspiUKiL0YA8/mRCYngNKwALWieLKPtFo42n+vWTFgmxnASNRwhxpPEbSXjYuTah1lZ0lSyLWPpw==}
+  bpmn-js@8.10.0:
+    resolution: {integrity: sha512-NozeOi01qL0ZdVq8+5hWZcikyEvgrP1yzCBqlhSufJdHFsnEMBCwn2bJJ0B/6JgX+IBwy1sk/Uw+Ds8rQ8vfrw==, tarball: https://registry.npmmirror.com/bpmn-js/-/bpmn-js-8.10.0.tgz}
 
   bpmn-moddle@7.1.3:
-    resolution: {integrity: sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==}
+    resolution: {integrity: sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==, tarball: https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz}
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -2707,7 +2707,7 @@ packages:
     engines: {node: '>= 6'}
 
   css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==, tarball: https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz}
 
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -2942,7 +2942,7 @@ packages:
     resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
 
   diagram-js-direct-editing@1.8.0:
-    resolution: {integrity: sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==}
+    resolution: {integrity: sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==, tarball: https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-1.8.0.tgz}
     peerDependencies:
       diagram-js: '*'
 
@@ -2950,10 +2950,10 @@ packages:
     resolution: {integrity: sha512-LF9BiwjbOPpZd0ez5VSlYRbdbEA59YQX43bWvNDp1rLMv0xwZ5yIg4oaYDK82nIQ0kH1tjvoQRpNevMTCgQVyw==}
 
   diagram-js@7.9.0:
-    resolution: {integrity: sha512-o1yUtX5TXV1pmpevP55gxU/AEG6nCidOXGs/HLuxNXG0zMZ3jQta7kMqRxTK93rNw/XuHmP1eMOwdvdJ2RP5qA==}
+    resolution: {integrity: sha512-o1yUtX5TXV1pmpevP55gxU/AEG6nCidOXGs/HLuxNXG0zMZ3jQta7kMqRxTK93rNw/XuHmP1eMOwdvdJ2RP5qA==, tarball: https://registry.npmmirror.com/diagram-js/-/diagram-js-7.9.0.tgz}
 
   didi@5.2.1:
-    resolution: {integrity: sha512-IKNnajUlD4lWMy/Q9Emkk7H1qnzREgY4UyE3IhmOi/9IKua0JYtYldk928bOdt1yNxN8EiOy1sqtSozEYsmjCg==}
+    resolution: {integrity: sha512-IKNnajUlD4lWMy/Q9Emkk7H1qnzREgY4UyE3IhmOi/9IKua0JYtYldk928bOdt1yNxN8EiOy1sqtSozEYsmjCg==, tarball: https://registry.npmmirror.com/didi/-/didi-5.2.1.tgz}
 
   didi@9.0.2:
     resolution: {integrity: sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==}
@@ -3376,7 +3376,7 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
   fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
@@ -4231,10 +4231,10 @@ packages:
     resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
 
   moddle-xml@9.0.6:
-    resolution: {integrity: sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==}
+    resolution: {integrity: sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==, tarball: https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz}
 
   moddle@5.0.4:
-    resolution: {integrity: sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==}
+    resolution: {integrity: sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==, tarball: https://registry.npmmirror.com/moddle/-/moddle-5.0.4.tgz}
 
   mpd-parser@0.22.1:
     resolution: {integrity: sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==}
@@ -4816,7 +4816,7 @@ packages:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
   saxen@8.1.2:
-    resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==}
+    resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==, tarball: https://registry.npmmirror.com/saxen/-/saxen-8.1.2.tgz}
 
   scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
@@ -5127,7 +5127,7 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
   tiny-svg@2.2.4:
-    resolution: {integrity: sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==}
+    resolution: {integrity: sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==, tarball: https://registry.npmmirror.com/tiny-svg/-/tiny-svg-2.2.4.tgz}
 
   tiny-svg@3.0.1:
     resolution: {integrity: sha512-P8T4iwiW1t95vpHVHqrD36Brn7TqFYCPSHIWk9WLJtYK1X4aDd+5cgqcAADIWSjf1/i5idKnpCh9mim8hEdRBg==}
@@ -5335,8 +5335,8 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  uuid@9.0.1:
-    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+  uuid@10.0.0:
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==, tarball: https://registry.npmmirror.com/uuid/-/uuid-10.0.0.tgz}
     hasBin: true
 
   vary@1.1.2:
@@ -5385,8 +5385,8 @@ packages:
     peerDependencies:
       vite: '>=2.0.0'
 
-  vite-plugin-top-level-await@1.4.1:
-    resolution: {integrity: sha512-hogbZ6yT7+AqBaV6lK9JRNvJDn4/IJvHLu6ET06arNfo0t2IsyCaon7el9Xa8OumH+ESuq//SDf8xscZFE0rWw==}
+  vite-plugin-top-level-await@1.4.4:
+    resolution: {integrity: sha512-QyxQbvcMkgt+kDb12m2P8Ed35Sp6nXP+l8ptGrnHV9zgYDUpraO0CPdlqLSeBqvY2DToR52nutDG7mIHuysdiw==, tarball: https://registry.npmmirror.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.4.tgz}
     peerDependencies:
       vite: '>=2.8'
 
@@ -6929,55 +6929,55 @@ snapshots:
 
   '@sinclair/typebox@0.27.8': {}
 
-  '@swc/core-darwin-arm64@1.4.17':
+  '@swc/core-darwin-arm64@1.7.35':
     optional: true
 
-  '@swc/core-darwin-x64@1.4.17':
+  '@swc/core-darwin-x64@1.7.35':
     optional: true
 
-  '@swc/core-linux-arm-gnueabihf@1.4.17':
+  '@swc/core-linux-arm-gnueabihf@1.7.35':
     optional: true
 
-  '@swc/core-linux-arm64-gnu@1.4.17':
+  '@swc/core-linux-arm64-gnu@1.7.35':
     optional: true
 
-  '@swc/core-linux-arm64-musl@1.4.17':
+  '@swc/core-linux-arm64-musl@1.7.35':
     optional: true
 
-  '@swc/core-linux-x64-gnu@1.4.17':
+  '@swc/core-linux-x64-gnu@1.7.35':
     optional: true
 
-  '@swc/core-linux-x64-musl@1.4.17':
+  '@swc/core-linux-x64-musl@1.7.35':
     optional: true
 
-  '@swc/core-win32-arm64-msvc@1.4.17':
+  '@swc/core-win32-arm64-msvc@1.7.35':
     optional: true
 
-  '@swc/core-win32-ia32-msvc@1.4.17':
+  '@swc/core-win32-ia32-msvc@1.7.35':
     optional: true
 
-  '@swc/core-win32-x64-msvc@1.4.17':
+  '@swc/core-win32-x64-msvc@1.7.35':
     optional: true
 
-  '@swc/core@1.4.17':
+  '@swc/core@1.7.35':
     dependencies:
       '@swc/counter': 0.1.3
-      '@swc/types': 0.1.6
+      '@swc/types': 0.1.13
     optionalDependencies:
-      '@swc/core-darwin-arm64': 1.4.17
-      '@swc/core-darwin-x64': 1.4.17
-      '@swc/core-linux-arm-gnueabihf': 1.4.17
-      '@swc/core-linux-arm64-gnu': 1.4.17
-      '@swc/core-linux-arm64-musl': 1.4.17
-      '@swc/core-linux-x64-gnu': 1.4.17
-      '@swc/core-linux-x64-musl': 1.4.17
-      '@swc/core-win32-arm64-msvc': 1.4.17
-      '@swc/core-win32-ia32-msvc': 1.4.17
-      '@swc/core-win32-x64-msvc': 1.4.17
+      '@swc/core-darwin-arm64': 1.7.35
+      '@swc/core-darwin-x64': 1.7.35
+      '@swc/core-linux-arm-gnueabihf': 1.7.35
+      '@swc/core-linux-arm64-gnu': 1.7.35
+      '@swc/core-linux-arm64-musl': 1.7.35
+      '@swc/core-linux-x64-gnu': 1.7.35
+      '@swc/core-linux-x64-musl': 1.7.35
+      '@swc/core-win32-arm64-msvc': 1.7.35
+      '@swc/core-win32-ia32-msvc': 1.7.35
+      '@swc/core-win32-x64-msvc': 1.7.35
 
   '@swc/counter@0.1.3': {}
 
-  '@swc/types@0.1.6':
+  '@swc/types@0.1.13':
     dependencies:
       '@swc/counter': 0.1.3
 
@@ -8049,11 +8049,11 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  bpmn-js-properties-panel@0.46.0(bpmn-js@8.9.0):
+  bpmn-js-properties-panel@0.46.0(bpmn-js@8.10.0):
     dependencies:
       '@bpmn-io/element-templates-validator': 0.2.0
       '@bpmn-io/extract-process-variables': 0.4.5
-      bpmn-js: 8.9.0
+      bpmn-js: 8.10.0
       ids: 1.0.5
       inherits: 2.0.4
       lodash: 4.17.21
@@ -8068,7 +8068,7 @@ snapshots:
       min-dom: 0.2.0
       svg.js: 2.7.1
 
-  bpmn-js@8.9.0:
+  bpmn-js@8.10.0:
     dependencies:
       bpmn-moddle: 7.1.3
       css.escape: 1.5.1
@@ -11306,7 +11306,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  uuid@9.0.1: {}
+  uuid@10.0.0: {}
 
   vary@1.1.2: {}
 
@@ -11385,11 +11385,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-top-level-await@1.4.1(rollup@4.17.1)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)):
+  vite-plugin-top-level-await@1.4.4(rollup@4.17.1)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)):
     dependencies:
       '@rollup/plugin-virtual': 3.0.2(rollup@4.17.1)
-      '@swc/core': 1.4.17
-      uuid: 9.0.1
+      '@swc/core': 1.7.35
+      uuid: 10.0.0
       vite: 5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)
     transitivePeerDependencies:
       - '@swc/helpers'
diff --git a/src/api/bpm/activity/index.ts b/src/api/bpm/activity/index.ts
deleted file mode 100644
index 870d0d6c..00000000
--- a/src/api/bpm/activity/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import request from '@/config/axios'
-
-export const getActivityList = async (params) => {
-  return await request.get({
-    url: '/bpm/activity/list',
-    params
-  })
-}
diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index 3d6330a8..dfbddef1 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -24,24 +24,23 @@ export type ProcessInstanceVO = {
 
 // 用户信息
 export type User = {
-  id: number,
-  nickname: string,
+  id: number
+  nickname: string
   avatar: string
 }
 
 // 审批任务信息
 export type ApprovalTaskInfo = {
-  id: number,
-  ownerUser: User,
-  assigneeUser: User,
-  status: number,
+  id: number
+  ownerUser: User
+  assigneeUser: User
+  status: number
   reason: string
-
 }
 
 // 审批节点信息
 export type ApprovalNodeInfo = {
-  id : number
+  id: number
   name: string
   nodeType: NodeType
   status: number
@@ -88,12 +87,22 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 }
 
 // 获取审批详情
-export const getApprovalDetail = async (processInstanceId?:string, processDefinitionId?:string) => {
-  const param = processInstanceId ? '?processInstanceId='+ processInstanceId : '?processDefinitionId='+ processDefinitionId
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail'+ param })
+export const getApprovalDetail = async (
+  processInstanceId?: string,
+  processDefinitionId?: string
+) => {
+  const param = processInstanceId
+    ? '?processInstanceId=' + processInstanceId
+    : '?processDefinitionId=' + processDefinitionId
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail' + param })
 }
 
 // 获取表单字段权限
 export const getFormFieldsPermission = async (params: any) => {
   return await request.get({ url: '/bpm/process-instance/get-form-fields-permission', params })
 }
+
+// 获取流程实例的 BPMN 模型视图
+export const getProcessInstanceBpmnModelView = async (id: string) => {
+  return await request.get({ url: '/bpm/process-instance/get-bpmn-model-view?id=' + id })
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 4da5deb2..2c723884 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="simple-flow-canvas" v-loading="loading">
-    <div class="simple-flow-container" >
+    <div class="simple-flow-container">
       <div class="top-area-container">
         <div class="top-actions">
           <div class="canvas-control">
@@ -15,10 +15,7 @@
         </div>
       </div>
       <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree
-          v-if="processNodeTree"
-          v-model:flow-node="processNodeTree"
-        />
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
       </div>
     </div>
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
@@ -49,7 +46,7 @@ import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
 import * as UserApi from '@/api/system/user'
 import * as UserGroupApi from '@/api/bpm/userGroup'
-import { fa } from 'element-plus/es/locale'
+
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 485b9795..fb181cf3 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -1,664 +1,374 @@
 <template>
-  <div class="my-process-designer">
-    <div class="my-process-designer__container">
-      <div class="my-process-designer__canvas" style="height: 760px" ref="bpmnCanvas"></div>
+  <div class="process-viewer">
+    <div style="height: 100%" ref="processCanvas" v-show="!isLoading"> </div>
+    <!-- 自定义箭头样式，用于已完成状态下流程连线箭头 -->
+    <defs ref="customDefs">
+      <marker
+        id="sequenceflow-end-white-success"
+        viewBox="0 0 20 20"
+        refX="11"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-arrow"
+          d="M 1 5 L 11 10 L 1 15 Z"
+          style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1"
+        />
+      </marker>
+      <marker
+        id="conditional-flow-marker-white-success"
+        viewBox="0 0 20 20"
+        refX="-1"
+        refY="10"
+        markerWidth="10"
+        markerHeight="10"
+        orient="auto"
+      >
+        <path
+          class="success-conditional"
+          d="M 0 10 L 8 6 L 16 10 L 8 14 Z"
+          style="stroke-width: 1px; stroke-linecap: round; stroke-dasharray: 10000, 1"
+        />
+      </marker>
+    </defs>
+
+    <!-- 审批记录 -->
+    <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px">
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          />
+          <el-table-column
+            label="发起人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+            v-else
+          />
+          <el-table-column
+            label="部门"
+            prop="assigneeUser.deptName"
+            min-width="100"
+            align="center"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="审批建议"
+            prop="reason"
+            min-width="120"
+            v-if="selectActivityType === 'bpmn:UserTask'"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
+
+    <!-- Zoom：放大、缩小 -->
+    <div style="position: absolute; top: 0; left: 0; width: 100%">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="default">
+          <el-button
+            size="default"
+            :plain="true"
+            :disabled="defaultZoom <= 0.3"
+            :icon="ZoomOut"
+            @click="processZoomOut()"
+          />
+          <el-button size="default" style="width: 90px">
+            {{ Math.floor(defaultZoom * 10 * 10) + '%' }}
+          </el-button>
+          <el-button
+            size="default"
+            :plain="true"
+            :disabled="defaultZoom >= 3.9"
+            :icon="ZoomIn"
+            @click="processZoomIn()"
+          />
+          <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
+        </el-button-group>
+      </el-row>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import '../theme/index.scss'
 import BpmnViewer from 'bpmn-js/lib/Viewer'
-import DefaultEmptyXML from './plugins/defaultEmpty'
-import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { formatDate } from '@/utils/formatTime'
-import { isEmpty } from '@/utils/is'
-
-defineOptions({ name: 'MyProcessViewer' })
+import MoveCanvasModule from 'diagram-js/lib/navigation/movecanvas'
+import { ZoomOut, ZoomIn, ScaleToOriginal } from '@element-plus/icons-vue'
+import { DICT_TYPE } from '@/utils/dict'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
 
 const props = defineProps({
-  value: {
-    // BPMN XML 字符串
+  xml: {
     type: String,
-    default: ''
+    required: true
   },
-  prefix: {
-    // 使用哪个引擎
-    type: String,
-    default: 'camunda'
-  },
-  activityData: {
-    // 活动的数据。传递时，可高亮流程
-    type: Array,
-    default: () => []
-  },
-  processInstanceData: {
-    // 流程实例的数据。传递时，可展示流程发起人等信息
+  view: {
     type: Object,
-    default: () => {}
-  },
-  taskData: {
-    // 任务实例的数据。传递时，可展示 UserTask 审核相关的信息
-    type: Array,
-    default: () => []
+    require: true
   }
 })
 
-provide('configGlobal', props)
+const processCanvas = ref()
+const bpmnViewer = ref<BpmnViewer | null>(null)
+const customDefs = ref()
+const defaultZoom = ref(1) // 默认缩放比例
+const isLoading = ref(false) // 是否加载中
 
-const emit = defineEmits(['destroy'])
+const processInstance = ref<any>({}) // 流程实例
+const tasks = ref([]) // 流程任务
 
-let bpmnModeler
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectActivityType = ref<string | undefined>(undefined) // 选中 Task 的活动编号
+const selectTasks = ref<any[]>([]) // 选中的任务数组
 
-const xml = ref('')
-const activityLists = ref<any[]>([])
-const processInstance = ref<any>(undefined)
-const taskList = ref<any[]>([])
-const bpmnCanvas = ref()
-// const element = ref()
-const elementOverlayIds = ref<any>(null)
-const overlays = ref<any>(null)
-
-const initBpmnModeler = () => {
-  if (bpmnModeler) return
-  bpmnModeler = new BpmnViewer({
-    container: bpmnCanvas.value,
-    bpmnRenderer: {}
-  })
+/** Zoom：恢复 */
+const processReZoom = () => {
+  defaultZoom.value = 1
+  bpmnViewer.value?.get('canvas').zoom('fit-viewport', 'auto')
 }
 
-/* 创建新的流程图 */
-const createNewDiagram = async (xml) => {
-  // 将字符串转换成图显示出来
-  let newId = `Process_${new Date().getTime()}`
-  let newName = `业务流程_${new Date().getTime()}`
-  let xmlString = xml || DefaultEmptyXML(newId, newName, props.prefix)
-  try {
-    let { warnings } = await bpmnModeler.importXML(xmlString)
-    if (warnings && warnings.length) {
-      warnings.forEach((warn) => console.warn(warn))
-    }
-    // 高亮流程图
-    await highlightDiagram()
-    const canvas = bpmnModeler.get('canvas')
-    canvas.zoom('fit-viewport', 'auto')
-  } catch (e) {
-    console.error(e)
-    // console.error(`[Process Designer Warn]: ${e?.message || e}`);
+/** Zoom：放大 */
+const processZoomIn = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 + zoomStep * 100) / 100
+  if (newZoom > 4) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be greater than 4')
   }
+  defaultZoom.value = newZoom
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value)
 }
 
-/* 高亮流程图 */
-// TODO 芋艿：如果多个 endActivity 的话，目前的逻辑可能有一定的问题。https://www.jdon.com/workflow/multi-events.html
-const highlightDiagram = async () => {
-  const activityList = activityLists.value
-  if (activityList.length === 0) {
+/** Zoom：缩小 */
+const processZoomOut = (zoomStep = 0.1) => {
+  let newZoom = Math.floor(defaultZoom.value * 100 - zoomStep * 100) / 100
+  if (newZoom < 0.2) {
+    throw new Error('[Process Designer Warn ]: The zoom ratio cannot be less than 0.2')
+  }
+  defaultZoom.value = newZoom
+  bpmnViewer.value?.get('canvas').zoom(defaultZoom.value)
+}
+
+/** 流程图预览清空 */
+const clearViewer = () => {
+  if (processCanvas.value) {
+    processCanvas.value.innerHTML = ''
+  }
+  if (bpmnViewer.value) {
+    bpmnViewer.value.destroy()
+  }
+  bpmnViewer.value = null
+}
+
+/** 添加自定义箭头 */
+// TODO 芋艿：自定义箭头不生效，有点奇怪！！！！相关的 marker-end、marker-start 暂时也注释了！！！
+const addCustomDefs = () => {
+  if (!bpmnViewer.value) {
     return
   }
-  // 参考自 https://gitee.com/tony2y/RuoYi-flowable/blob/master/ruoyi-ui/src/components/Process/index.vue#L222 实现
-  // 再次基础上，增加不同审批结果的颜色等等
-  let canvas = bpmnModeler.get('canvas')
-  let todoActivity: any = activityList.find((m: any) => !m.endTime) // 找到待办的任务
-  let endActivity: any = activityList[activityList.length - 1] // 获得最后一个任务
-  let findProcessTask = false //是否已经高亮了进行中的任务
-  //进行中高亮之后的任务 key 集合，用于过滤掉 taskList 进行中后面的任务，避免进行中后面的数据 Hover 还有数据
-  let removeTaskDefinitionKeyList = []
-  // debugger
-  bpmnModeler.getDefinitions().rootElements[0].flowElements?.forEach((n: any) => {
-    let activity: any = activityList.find((m: any) => m.key === n.id) // 找到对应的活动
-    if (!activity) {
-      return
+  const canvas = bpmnViewer.value?.get('canvas')
+  const svg = canvas?._svg
+  svg.appendChild(customDefs.value)
+}
+
+/** 节点选中 */
+const onSelectElement = (element: any) => {
+  // 清空原选中
+  selectActivityType.value = undefined
+  dialogTitle.value = undefined
+  if (!element || !processInstance.value?.id) {
+    return
+  }
+
+  // UserTask 的情况
+  const activityType = element.type
+  selectActivityType.value = activityType
+  if (activityType === 'bpmn:UserTask') {
+    dialogTitle.value = element.businessObject ? element.businessObject.name : undefined
+    selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === element.id)
+    dialogVisible.value = true
+  } else if (activityType === 'bpmn:EndEvent' || activityType === 'bpmn:StartEvent') {
+    dialogTitle.value = '审批信息'
+    selectTasks.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis
+      }
+    ]
+    dialogVisible.value = true
+  }
+}
+
+/** 初始化 BPMN 视图 */
+const importXML = async (xml: string) => {
+  // 清空流程图
+  clearViewer()
+
+  // 初始化流程图
+  if (xml != null && xml !== '') {
+    try {
+      bpmnViewer.value = new BpmnViewer({
+        additionalModules: [MoveCanvasModule],
+        container: processCanvas.value
+      })
+      // 增加点击事件
+      bpmnViewer.value.on('element.click', ({ element }) => {
+        onSelectElement(element)
+      })
+
+      // 初始化 BPMN 视图
+      isLoading.value = true
+      await bpmnViewer.value.importXML(xml)
+      // 自定义成功的箭头
+      addCustomDefs()
+    } catch (e) {
+      clearViewer()
+    } finally {
+      isLoading.value = false
+      // 高亮流程
+      setProcessStatus(props.view)
     }
-    if (n.$type === 'bpmn:UserTask') {
-      // 用户任务
-      // 处理用户任务的高亮
-      const task: any = taskList.value.find((m: any) => m.id === activity.taskId) // 找到活动对应的 taskId
-      if (!task) {
-        return
-      }
-      // 进行中的任务已经高亮过了，则不高亮后面的任务了
-      if (findProcessTask) {
-        removeTaskDefinitionKeyList.push(n.id)
-        return
-      }
-      // 高亮任务
-      canvas.addMarker(n.id, getResultCss(task.status))
-      //标记是否高亮了进行中任务
-      if (task.status === 1) {
-        findProcessTask = true
-      }
-      // 如果非通过，就不走后面的线条了
-      if (task.status !== 2) {
-        return
-      }
-      // 处理 outgoing 出线
-      const outgoing = getActivityOutgoing(activity)
-      outgoing?.forEach((nn: any) => {
-        // debugger
-        let targetActivity: any = activityList.find((m: any) => m.key === nn.targetRef.id)
-        // 如果目标活动存在，则根据该活动是否结束，进行【bpmn:SequenceFlow】连线的高亮设置
-        if (targetActivity) {
-          canvas.addMarker(nn.id, targetActivity.endTime ? 'highlight' : 'highlight-todo')
-        } else if (nn.targetRef.$type === 'bpmn:ExclusiveGateway') {
-          // TODO 芋艿：这个流程，暂时没走到过
-          canvas.addMarker(nn.id, activity.endTime ? 'highlight' : 'highlight-todo')
-          canvas.addMarker(nn.targetRef.id, activity.endTime ? 'highlight' : 'highlight-todo')
-        } else if (nn.targetRef.$type === 'bpmn:EndEvent') {
-          // TODO 芋艿：这个流程，暂时没走到过
-          if (!todoActivity && endActivity.key === n.id) {
-            canvas.addMarker(nn.id, 'highlight')
-            canvas.addMarker(nn.targetRef.id, 'highlight')
-          }
-          if (!activity.endTime) {
-            canvas.addMarker(nn.id, 'highlight-todo')
-            canvas.addMarker(nn.targetRef.id, 'highlight-todo')
-          }
+  }
+}
+
+/** 高亮流程 */
+const setProcessStatus = (view: any) => {
+  // 设置相关变量
+  processInstance.value = view.processInstance
+  tasks.value = view.tasks
+  if (isLoading.value || !processInstance.value || !bpmnViewer.value) {
+    return
+  }
+  const {
+    unfinishedTaskActivityIds,
+    finishedTaskActivityIds,
+    finishedSequenceFlowActivityIds,
+    rejectedTaskActivityIds
+  } = view
+  const canvas = bpmnViewer.value.get('canvas')
+  const elementRegistry = bpmnViewer.value.get('elementRegistry')
+
+  // 已完成节点
+  if (Array.isArray(finishedSequenceFlowActivityIds)) {
+    finishedSequenceFlowActivityIds.forEach((item: any) => {
+      if (item != null) {
+        canvas.addMarker(item, 'success')
+        const element = elementRegistry.get(item)
+        const conditionExpression = element.businessObject.conditionExpression
+        if (conditionExpression) {
+          canvas.addMarker(item, 'condition-expression')
         }
-      })
-    } else if (n.$type === 'bpmn:ExclusiveGateway') {
-      // 排它网关
-      // 设置【bpmn:ExclusiveGateway】排它网关的高亮
-      canvas.addMarker(n.id, getActivityHighlightCss(activity))
-      // 查找需要高亮的连线
-      let matchNN: any = undefined
-      let matchActivity: any = undefined
-      n.outgoing?.forEach((nn: any) => {
-        let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-        if (!targetActivity) {
-          return
-        }
-        // 特殊判断 endEvent 类型的原因，ExclusiveGateway 可能后续连有 2 个路径：
-        //  1. 一个是 UserTask => EndEvent
-        //  2. 一个是 EndEvent
-        // 在选择路径 1 时，其实 EndEvent 可能也存在，导致 1 和 2 都高亮，显然是不正确的。
-        // 所以，在 matchActivity 为 EndEvent 时，需要进行覆盖~~
-        if (!matchActivity || matchActivity.type === 'endEvent') {
-          matchNN = nn
-          matchActivity = targetActivity
-        }
-      })
-      if (matchNN && matchActivity) {
-        canvas.addMarker(matchNN.id, getActivityHighlightCss(matchActivity))
       }
-    } else if (n.$type === 'bpmn:ParallelGateway') {
-      // 并行网关
-      // 设置【bpmn:ParallelGateway】并行网关的高亮
-      canvas.addMarker(n.id, getActivityHighlightCss(activity))
-      n.outgoing?.forEach((nn: any) => {
-        // 获得连线是否有指向目标。如果有，则进行高亮
-        const targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-        if (targetActivity) {
-          canvas.addMarker(nn.id, getActivityHighlightCss(targetActivity)) // 高亮【bpmn:SequenceFlow】连线
-          // 高亮【...】目标。其中 ... 可以是 bpm:UserTask、也可以是其它的。当然，如果是 bpm:UserTask 的话，其实不做高亮也没问题，因为上面有逻辑做了这块。
-          canvas.addMarker(nn.targetRef.id, getActivityHighlightCss(targetActivity))
-        }
-      })
-    } else if (n.$type === 'bpmn:StartEvent') {
-      // 开始节点
-      canvas.addMarker(n.id, 'highlight')
-      n.outgoing?.forEach((nn) => {
-        // outgoing 例如说【bpmn:SequenceFlow】连线
-        // 获得连线是否有指向目标。如果有，则进行高亮
-        let targetActivity = activityList.find((m: any) => m.key === nn.targetRef.id)
-        if (targetActivity) {
-          canvas.addMarker(nn.id, 'highlight') // 高亮【bpmn:SequenceFlow】连线
-          canvas.addMarker(n.id, 'highlight') // 高亮【bpmn:StartEvent】开始节点（自己）
-        }
-      })
-    } else if (n.$type === 'bpmn:EndEvent') {
-      // 结束节点
-      if (!processInstance.value || processInstance.value.status === 1) {
-        return
+    })
+  }
+  if (Array.isArray(finishedTaskActivityIds)) {
+    finishedTaskActivityIds.forEach((item: any) => canvas.addMarker(item, 'success'))
+  }
+
+  // 未完成节点
+  if (Array.isArray(unfinishedTaskActivityIds)) {
+    unfinishedTaskActivityIds.forEach((item: any) => canvas.addMarker(item, 'primary'))
+  }
+
+  // 被拒绝节点
+  if (Array.isArray(rejectedTaskActivityIds)) {
+    rejectedTaskActivityIds.forEach((item: any) => {
+      if (item != null) {
+        canvas.addMarker(item, 'danger')
       }
-      canvas.addMarker(n.id, getResultCss(processInstance.value.status))
-    } else if (n.$type === 'bpmn:ServiceTask') {
-      //服务任务
-      if (activity.startTime > 0 && activity.endTime === 0) {
-        //进入执行，标识进行色
-        canvas.addMarker(n.id, getResultCss(1))
-      }
-      if (activity.endTime > 0) {
-        // 执行完成，节点标识完成色, 所有outgoing标识完成色。
-        canvas.addMarker(n.id, getResultCss(2))
-        const outgoing = getActivityOutgoing(activity)
-        outgoing?.forEach((out) => {
-          canvas.addMarker(out.id, getResultCss(2))
-        })
-      }
-    } else if (n.$type === 'bpmn:SequenceFlow') {
-      let targetActivity = activityList.find((m: any) => m.key === n.targetRef.id)
-      if (targetActivity) {
-        canvas.addMarker(n.id, getActivityHighlightCss(targetActivity))
-      }
-    }
-  })
-  if (!isEmpty(removeTaskDefinitionKeyList)) {
-    taskList.value = taskList.value.filter(
-      (item) => !removeTaskDefinitionKeyList.includes(item.taskDefinitionKey)
+    })
+  }
+
+  // 特殊：处理 end 节点的高亮。因为 end 在拒绝、取消时，被后端计算成了 finishedTaskActivityIds 里
+  if (
+    [BpmProcessInstanceStatus.CANCEL, BpmProcessInstanceStatus.REJECT].includes(
+      processInstance.value.status
     )
-  }
-}
-
-const getActivityHighlightCss = (activity) => {
-  return activity.endTime ? 'highlight' : 'highlight-todo'
-}
-
-const getResultCss = (status) => {
-  if (status === 1) {
-    // 审批中
-    return 'highlight-todo'
-  } else if (status === 2) {
-    // 已通过
-    return 'highlight'
-  } else if (status === 3) {
-    // 不通过
-    return 'highlight-reject'
-  } else if (status === 4) {
-    // 已取消
-    return 'highlight-cancel'
-  } else if (status === 5) {
-    // 退回
-    return 'highlight-return'
-  } else if (status === 6) {
-    // 委派
-    return 'highlight-todo'
-  } else if (status === 7) {
-    // 审批通过中
-    return 'highlight-todo'
-  } else if (status === 0) {
-    // 待审批
-    return 'highlight-todo'
-  }
-  return ''
-}
-
-const getActivityOutgoing = (activity) => {
-  // 如果有 outgoing，则直接使用它
-  if (activity.outgoing && activity.outgoing.length > 0) {
-    return activity.outgoing
-  }
-  // 如果没有，则遍历获得起点为它的【bpmn:SequenceFlow】节点们。原因是：bpmn-js 的 UserTask 拿不到 outgoing
-  const flowElements = bpmnModeler.getDefinitions().rootElements[0].flowElements
-  const outgoing: any[] = []
-  flowElements.forEach((item: any) => {
-    if (item.$type !== 'bpmn:SequenceFlow') {
-      return
-    }
-    if (item.sourceRef.id === activity.key) {
-      outgoing.push(item)
-    }
-  })
-  return outgoing
-}
-const initModelListeners = () => {
-  const EventBus = bpmnModeler.get('eventBus')
-  // 注册需要的监听事件
-  EventBus.on('element.hover', function (eventObj) {
-    let element = eventObj ? eventObj.element : null
-    elementHover(element)
-  })
-  EventBus.on('element.out', function (eventObj) {
-    let element = eventObj ? eventObj.element : null
-    elementOut(element)
-  })
-}
-// 流程图的元素被 hover
-const elementHover = (element) => {
-  element.value = element
-  !elementOverlayIds.value && (elementOverlayIds.value = {})
-  !overlays.value && (overlays.value = bpmnModeler.get('overlays'))
-  // 展示信息
-  // console.log(activityLists.value, 'activityLists.value')
-  // console.log(element.value, 'element.value')
-  const activity = activityLists.value.find((m) => m.key === element.value.id)
-  // console.log(activity, 'activityactivityactivityactivity')
-  if (!activity) {
-    return
-  }
-  if (!elementOverlayIds.value[element.value.id] && element.value.type !== 'bpmn:Process') {
-    let html = `<div class="element-overlays">
-            <p>Elemet id: ${element.value.id}</p>
-            <p>Elemet type: ${element.value.type}</p>
-          </div>` // 默认值
-    if (element.value.type === 'bpmn:StartEvent' && processInstance.value) {
-      html = `<p>发起人：${processInstance.value.startUser.nickname}</p>
-                  <p>部门：${processInstance.value.startUser.deptName}</p>
-                  <p>创建时间：${formatDate(processInstance.value.createTime)}`
-    } else if (element.value.type === 'bpmn:UserTask') {
-      let task = taskList.value.find((m) => m.id === activity.taskId) // 找到活动对应的 taskId
-      if (!task) {
-        return
+  ) {
+    const endNodes = elementRegistry.filter((element: any) => element.type === 'bpmn:EndEvent')
+    endNodes.forEach((item: any) => {
+      canvas.removeMarker(item.id, 'success')
+      if (processInstance.value.status === BpmProcessInstanceStatus.CANCEL) {
+        canvas.addMarker(item.id, 'cancel')
+      } else {
+        canvas.addMarker(item.id, 'danger')
       }
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
-      let dataResult = ''
-      optionData.forEach((element) => {
-        if (element.value == task.status) {
-          dataResult = element.label
-        }
-      })
-      html = `<p>审批人：${task.assigneeUser.nickname}</p>
-                  <p>部门：${task.assigneeUser.deptName}</p>
-                  <p>结果：${dataResult}</p>
-                  <p>创建时间：${formatDate(task.createTime)}</p>`
-      // html = `<p>审批人：${task.assigneeUser.nickname}</p>
-      //             <p>部门：${task.assigneeUser.deptName}</p>
-      //             <p>结果：${getIntDictOptions(
-      //               DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-      //               task.status
-      //             )}</p>
-      //             <p>创建时间：${formatDate(task.createTime)}</p>`
-      if (task.endTime) {
-        html += `<p>结束时间：${formatDate(task.endTime)}</p>`
-      }
-      if (task.reason) {
-        html += `<p>审批建议：${task.reason}</p>`
-      }
-    } else if (element.value.type === 'bpmn:ServiceTask' && processInstance.value) {
-      if (activity.startTime > 0) {
-        html = `<p>创建时间：${formatDate(activity.startTime)}</p>`
-      }
-      if (activity.endTime > 0) {
-        html += `<p>结束时间：${formatDate(activity.endTime)}</p>`
-      }
-      console.log(html)
-    } else if (element.value.type === 'bpmn:EndEvent' && processInstance.value) {
-      let optionData = getIntDictOptions(DICT_TYPE.BPM_TASK_STATUS)
-      let dataResult = ''
-      optionData.forEach((element) => {
-        if (element.value == processInstance.value.status) {
-          dataResult = element.label
-        }
-      })
-      html = `<p>结果：${dataResult}</p>`
-      // html = `<p>结果：${getIntDictOptions(
-      //   DICT_TYPE.BPM_PROCESS_INSTANCE_RESULT,
-      //   processInstance.value.status
-      // )}</p>`
-      if (processInstance.value.endTime) {
-        html += `<p>结束时间：${formatDate(processInstance.value.endTime)}</p>`
-      }
-    }
-    // console.log(html, 'html111111111111111')
-    elementOverlayIds.value[element.value.id] = toRaw(overlays.value)?.add(element.value, {
-      position: { left: 0, bottom: 0 },
-      html: `<div class="element-overlays">${html}</div>`
     })
   }
 }
 
-// 流程图的元素被 out
-const elementOut = (element) => {
-  toRaw(overlays.value).remove({ element })
-  elementOverlayIds.value[element.id] = null
-}
+watch(
+  () => props.xml,
+  (newXml) => {
+    importXML(newXml)
+  },
+  { immediate: true }
+)
 
+watch(
+  () => props.view,
+  (newView) => {
+    setProcessStatus(newView)
+  },
+  { immediate: true }
+)
+
+/** mounted：初始化 */
 onMounted(() => {
-  xml.value = props.value
-  activityLists.value = props.activityData
-  // 初始化
-  initBpmnModeler()
-  createNewDiagram(xml.value)
-  // 初始模型的监听器
-  initModelListeners()
+  importXML(props.xml)
+  setProcessStatus(props.view)
 })
 
+/** unmount：销毁 */
 onBeforeUnmount(() => {
-  // this.$once('hook:beforeDestroy', () => {
-  // })
-  if (bpmnModeler) bpmnModeler.destroy()
-  emit('destroy', bpmnModeler)
-  bpmnModeler = null
+  clearViewer()
 })
-
-watch(
-  () => props.value,
-  (newValue) => {
-    xml.value = newValue
-    createNewDiagram(xml.value)
-  }
-)
-watch(
-  () => props.activityData,
-  (newActivityData) => {
-    activityLists.value = newActivityData
-    createNewDiagram(xml.value)
-  }
-)
-watch(
-  () => props.processInstanceData,
-  (newProcessInstanceData) => {
-    processInstance.value = newProcessInstanceData
-    createNewDiagram(xml.value)
-  }
-)
-watch(
-  () => props.taskData,
-  (newTaskListData) => {
-    taskList.value = newTaskListData
-    createNewDiagram(xml.value)
-  }
-)
 </script>
-
-<style lang="scss">
-/** 处理中 */
-.highlight-todo.djs-connection > .djs-visual > path {
-  stroke: #1890ff !important;
-  stroke-dasharray: 4px !important;
-  fill-opacity: 0.2 !important;
-}
-
-.highlight-todo.djs-shape .djs-visual > :nth-child(1) {
-  fill: #1890ff !important;
-  stroke: #1890ff !important;
-  stroke-dasharray: 4px !important;
-  fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-todo.djs-connection > .djs-visual > path) {
-  stroke: #1890ff !important;
-  stroke-dasharray: 4px !important;
-  fill-opacity: 0.2 !important;
-  marker-end: url('#sequenceflow-end-_E7DFDF-_E7DFDF-803g1kf6zwzmcig1y2ulm5egr');
-}
-
-:deep(.highlight-todo.djs-shape .djs-visual > :nth-child(1)) {
-  fill: #1890ff !important;
-  stroke: #1890ff !important;
-  stroke-dasharray: 4px !important;
-  fill-opacity: 0.2 !important;
-}
-
-/** 通过 */
-.highlight.djs-shape .djs-visual > :nth-child(1) {
-  fill: green !important;
-  stroke: green !important;
-  fill-opacity: 0.2 !important;
-}
-
-.highlight.djs-shape .djs-visual > :nth-child(2) {
-  fill: green !important;
-}
-
-.highlight.djs-shape .djs-visual > path {
-  fill: green !important;
-  fill-opacity: 0.2 !important;
-  stroke: green !important;
-}
-
-.highlight.djs-connection > .djs-visual > path {
-  stroke: green !important;
-}
-
-.highlight:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: green !important; /* color elements as green */
-}
-
-:deep(.highlight.djs-shape .djs-visual > :nth-child(1)) {
-  fill: green !important;
-  stroke: green !important;
-  fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight.djs-shape .djs-visual > :nth-child(2)) {
-  fill: green !important;
-}
-
-:deep(.highlight.djs-shape .djs-visual > path) {
-  fill: green !important;
-  fill-opacity: 0.2 !important;
-  stroke: green !important;
-}
-
-:deep(.highlight.djs-connection > .djs-visual > path) {
-  stroke: green !important;
-}
-
-.djs-element.highlight > .djs-visual > path {
-  stroke: green !important;
-}
-
-/** 不通过 */
-.highlight-reject.djs-shape .djs-visual > :nth-child(1) {
-  fill: red !important;
-  stroke: red !important;
-  fill-opacity: 0.2 !important;
-}
-
-.highlight-reject.djs-shape .djs-visual > :nth-child(2) {
-  fill: red !important;
-}
-
-.highlight-reject.djs-shape .djs-visual > path {
-  fill: red !important;
-  fill-opacity: 0.2 !important;
-  stroke: red !important;
-}
-
-.highlight-reject.djs-connection > .djs-visual > path {
-  stroke: red !important;
-  marker-end: url(#sequenceflow-end-white-success) !important;
-}
-
-.highlight-reject:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: red !important; /* color elements as green */
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(1)) {
-  fill: red !important;
-  stroke: red !important;
-  fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > :nth-child(2)) {
-  fill: red !important;
-}
-
-:deep(.highlight-reject.djs-shape .djs-visual > path) {
-  fill: red !important;
-  fill-opacity: 0.2 !important;
-  stroke: red !important;
-}
-
-:deep(.highlight-reject.djs-connection > .djs-visual > path) {
-  stroke: red !important;
-}
-
-/** 已取消 */
-.highlight-cancel.djs-shape .djs-visual > :nth-child(1) {
-  fill: grey !important;
-  stroke: grey !important;
-  fill-opacity: 0.2 !important;
-}
-
-.highlight-cancel.djs-shape .djs-visual > :nth-child(2) {
-  fill: grey !important;
-}
-
-.highlight-cancel.djs-shape .djs-visual > path {
-  fill: grey !important;
-  fill-opacity: 0.2 !important;
-  stroke: grey !important;
-}
-
-.highlight-cancel.djs-connection > .djs-visual > path {
-  stroke: grey !important;
-}
-
-.highlight-cancel:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: grey !important; /* color elements as green */
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(1)) {
-  fill: grey !important;
-  stroke: grey !important;
-  fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > :nth-child(2)) {
-  fill: grey !important;
-}
-
-:deep(.highlight-cancel.djs-shape .djs-visual > path) {
-  fill: grey !important;
-  fill-opacity: 0.2 !important;
-  stroke: grey !important;
-}
-
-:deep(.highlight-cancel.djs-connection > .djs-visual > path) {
-  stroke: grey !important;
-}
-
-/** 回退 */
-.highlight-return.djs-shape .djs-visual > :nth-child(1) {
-  fill: #e6a23c !important;
-  stroke: #e6a23c !important;
-  fill-opacity: 0.2 !important;
-}
-
-.highlight-return.djs-shape .djs-visual > :nth-child(2) {
-  fill: #e6a23c !important;
-}
-
-.highlight-return.djs-shape .djs-visual > path {
-  fill: #e6a23c !important;
-  fill-opacity: 0.2 !important;
-  stroke: #e6a23c !important;
-}
-
-.highlight-return.djs-connection > .djs-visual > path {
-  stroke: #e6a23c !important;
-}
-
-.highlight-return:not(.djs-connection) .djs-visual > :nth-child(1) {
-  fill: #e6a23c !important; /* color elements as green */
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > :nth-child(1)) {
-  fill: #e6a23c !important;
-  stroke: #e6a23c !important;
-  fill-opacity: 0.2 !important;
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > :nth-child(2)) {
-  fill: #e6a23c !important;
-}
-
-:deep(.highlight-return.djs-shape .djs-visual > path) {
-  fill: #e6a23c !important;
-  fill-opacity: 0.2 !important;
-  stroke: #e6a23c !important;
-}
-
-:deep(.highlight-return.djs-connection > .djs-visual > path) {
-  stroke: #e6a23c !important;
-}
-
-.element-overlays {
-  width: 200px;
-  padding: 8px;
-  color: #fafafa;
-  background: rgb(0 0 0 / 60%);
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-</style>
diff --git a/src/components/bpmnProcessDesigner/package/theme/index.scss b/src/components/bpmnProcessDesigner/package/theme/index.scss
index 2e60fad4..b1a5d980 100644
--- a/src/components/bpmnProcessDesigner/package/theme/index.scss
+++ b/src/components/bpmnProcessDesigner/package/theme/index.scss
@@ -1,2 +1,117 @@
 @import './process-designer.scss';
 @import './process-panel.scss';
+
+$success-color: #4eb819;
+$primary-color: #409EFF;
+$danger-color: #F56C6C;
+$cancel-color: #909399;
+
+.process-viewer {
+  position: relative;
+  border: 1px solid #EFEFEF;
+  background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+') repeat!important;
+
+  .success-arrow {
+    fill: $success-color;
+    stroke: $success-color;
+  }
+
+  .success-conditional {
+    fill: white;
+    stroke: $success-color;
+  }
+
+  .success.djs-connection {
+    .djs-visual path {
+      stroke: $success-color!important;
+      //marker-end: url(#sequenceflow-end-white-success)!important;
+    }
+  }
+
+  .success.djs-connection.condition-expression {
+    .djs-visual path {
+      //marker-start: url(#conditional-flow-marker-white-success)!important;
+    }
+  }
+
+  .success.djs-shape {
+    .djs-visual rect {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $success-color!important;
+    }
+
+    .djs-visual path:nth-child(2) {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $success-color!important;
+      fill: $success-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .primary.djs-shape {
+    .djs-visual rect {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $primary-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $primary-color!important;
+      fill: $primary-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .danger.djs-shape {
+    .djs-visual rect {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $danger-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $danger-color!important;
+      fill: $danger-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+
+  .cancel.djs-shape {
+    .djs-visual rect {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+
+    .djs-visual polygon {
+      stroke: $cancel-color!important;
+    }
+
+    .djs-visual circle {
+      stroke: $cancel-color!important;
+      fill: $cancel-color!important;
+      fill-opacity: 0.15!important;
+    }
+  }
+}
+
+.process-viewer .djs-tooltip-container, .process-viewer .djs-overlay-container, .process-viewer .djs-palette {
+  display: none;
+}
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 11e4a7da..2f95155d 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -292,7 +292,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'process-instance/detail',
-        component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
+        // component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
         name: 'BpmProcessInstanceDetail',
         meta: {
           noCache: true,
@@ -301,13 +302,11 @@ const remainingRouter: AppRouteRecordRaw[] = [
           title: '流程详情',
           activeMenu: '/bpm/task/my'
         },
-        props: route => (
-          { 
-            id: route.query.id,
-            taskId: route.query.taskId,
-            activityId: route.query.activityId
-          }
-        )
+        props: (route) => ({
+          id: route.query.id,
+          taskId: route.query.taskId,
+          activityId: route.query.activityId
+        })
       },
       {
         path: 'oa/leave/create',
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 874f5da0..692a45fb 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -449,3 +449,11 @@ export const BpmModelFormType = {
   NORMAL: 10, // 流程表单
   CUSTOM: 20 // 业务表单
 }
+
+export const BpmProcessInstanceStatus = {
+  NOT_START: -1, // 未开始
+  RUNNING: 1, // 审批中
+  APPROVE: 2, // 审批通过
+  REJECT: 3, // 审批不通过
+  CANCEL: 4 // 已取消
+}
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 8912593a..db15c192 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -3,48 +3,43 @@
     <template #header>
       <span class="el-icon-picture-outline">流程图</span>
     </template>
-    <MyProcessViewer
-      key="designer"
-      :activityData="activityList"
-      :prefix="bpmnControlForm.prefix"
-      :processInstanceData="processInstance"
-      :taskData="tasks"
-      :value="bpmnXml"
-      v-bind="bpmnControlForm"
-    />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
   </el-card>
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ActivityApi from '@/api/bpm/activity'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
-  loading: propTypes.bool, // 是否加载中
+  loading: propTypes.bool.def(false), // 是否加载中
   id: propTypes.string, // 流程实例的编号
-  processInstance: propTypes.any, // 流程实例的信息
-  tasks: propTypes.array, // 流程任务的数组
   bpmnXml: propTypes.string // BPMN XML
 })
 
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const activityList = ref([]) // 任务列表
+const view = ref({
+  bpmnXml: ''
+}) // BPMN 流程图数据
 
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
   () => props.loading,
   async (value) => {
     if (value && props.id) {
-      activityList.value = await ActivityApi.getActivityList({
-        processInstanceId: props.id
-      })
+      view.value = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
     }
   }
 )
+
+/** 监听 bpmnXml */
+watch(
+  () => props.bpmnXml,
+  (value) => {
+    view.value.bpmnXml = value
+  }
+)
 </script>
 <style>
 .box-card {
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 96ac4889..0ec11684 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -157,13 +157,7 @@
     />
 
     <!-- 高亮流程图 -->
-    <ProcessInstanceBpmnViewer
-      :id="`${id}`"
-      :bpmn-xml="bpmnXml"
-      :loading="processInstanceLoading"
-      :process-instance="processInstance"
-      :tasks="tasks"
-    />
+    <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" />
 
     <!-- 弹窗：转派审批人 -->
     <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index b2035a19..0ef2aab3 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -66,13 +66,7 @@
           </el-tab-pane>
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
-            <ProcessInstanceBpmnViewer
-              :id="`${id}`"
-              :bpmn-xml="bpmnXml"
-              :loading="processInstanceLoading"
-              :process-instance="processInstance"
-              :tasks="tasks"
-            />
+            <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" />
           </el-tab-pane>
           <!-- 流转记录 -->
           <el-tab-pane label="流转记录" name="record">

From dcf1ad6b38b1c9c78dc866ecb5ed28ab06b09011 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 13 Oct 2024 09:47:12 +0800
Subject: [PATCH 012/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=95=86=E5=9F=8E=EF=BC=9A=E9=97=A8=E5=BA=97?=
 =?UTF-8?q?=E8=87=AA=E6=8F=90=E7=9A=84=E5=91=98=E5=B7=A5=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/trade/delivery/pickUpStore/index.ts  |  14 +-
 .../mall/trade/delivery/pickUpOrder/index.vue | 140 ++++++++++--------
 .../DeliveryPickUpStoreBindForm.vue           |  78 ++++------
 .../components/StoreStaffTableSelect.vue      |  15 +-
 .../mall/trade/delivery/pickUpStore/index.vue |   7 +-
 src/views/mall/trade/order/index.vue          |   2 +-
 .../member/user/detail/UserOrderList.vue      |   2 +-
 7 files changed, 122 insertions(+), 136 deletions(-)

diff --git a/src/api/mall/trade/delivery/pickUpStore/index.ts b/src/api/mall/trade/delivery/pickUpStore/index.ts
index 01e59522..ea6c852b 100644
--- a/src/api/mall/trade/delivery/pickUpStore/index.ts
+++ b/src/api/mall/trade/delivery/pickUpStore/index.ts
@@ -13,10 +13,11 @@ export interface DeliveryPickUpStoreVO {
   latitude: number
   longitude: number
   status: number
+  verifyUserIds: number[] // 绑定用户编号组数
 }
 
 // 查询自提门店列表
-export const getDeliveryPickUpStorePage = async (params) => {
+export const getDeliveryPickUpStorePage = async (params: any) => {
   return await request.get({ url: '/trade/delivery/pick-up-store/page', params })
 }
 
@@ -26,8 +27,8 @@ export const getDeliveryPickUpStore = async (id: number) => {
 }
 
 // 查询自提门店精简列表
-export const getListAllSimple = async (): Promise<DeliveryPickUpStoreVO[]> => {
-  return await request.get({ url: '/trade/delivery/pick-up-store/list-all-simple' })
+export const getSimpleDeliveryPickUpStoreList = async (): Promise<DeliveryPickUpStoreVO[]> => {
+  return await request.get({ url: '/trade/delivery/pick-up-store/simple-list' })
 }
 
 // 新增自提门店
@@ -45,12 +46,7 @@ export const deleteDeliveryPickUpStore = async (id: number) => {
   return await request.delete({ url: '/trade/delivery/pick-up-store/delete?id=' + id })
 }
 
-//绑定自提店员
+// 绑定自提店员
 export const bindStoreStaffId = async (data: any) => {
   return await request.post({ url: '/trade/delivery/pick-up-store/bind', data })
 }
-
-//查询门店绑定情况
-export const getDeliveryPickUpStoreStaff = async (id: number) => {
-  return await request.get({ url: '/trade/delivery/pick-up-store/get-store-staff?id=' + id })
-}
diff --git a/src/views/mall/trade/delivery/pickUpOrder/index.vue b/src/views/mall/trade/delivery/pickUpOrder/index.vue
index 06ec835b..e864dd3e 100644
--- a/src/views/mall/trade/delivery/pickUpOrder/index.vue
+++ b/src/views/mall/trade/delivery/pickUpOrder/index.vue
@@ -72,7 +72,13 @@
           <Icon class="mr-5px" icon="ep:refresh" />
           重置
         </el-button>
-        <el-button @click="handlePickup" type="success" plain v-hasPermi="['trade:order:pick-up']" :disabled="isUse">
+        <el-button
+          @click="handlePickup"
+          type="success"
+          plain
+          v-hasPermi="['trade:order:pick-up']"
+          :disabled="isUse"
+        >
           <Icon class="mr-5px" icon="ep:check" />
           核销
         </el-button>
@@ -221,26 +227,20 @@ import { DeliveryTypeEnum } from '@/utils/constants'
 import { TradeOrderSummaryRespVO } from '@/api/mall/trade/order'
 import { DeliveryPickUpStoreVO } from '@/api/mall/trade/delivery/pickUpStore'
 import OrderPickUpForm from '@/views/mall/trade/order/form/OrderPickUpForm.vue'
-import { ref, onMounted } from "vue";
+import { ref, onMounted } from 'vue'
+import { useUserStore } from '@/store/modules/user'
 const message = useMessage() // 消息弹窗
 
-const port = ref("");
-const ports = ref([]);
-const reader = ref("");
+const port = ref('')
+const ports = ref([])
+const reader = ref('')
 
 defineOptions({ name: 'PickUpOrder' })
 
-// 列表的加载中
-const loading = ref(true)
-// 列表的总页数
-const total = ref(2)
-// 列表的数据
-const list = ref<TradeOrderApi.OrderVO[]>([])
-// 搜索的表单
-const queryFormRef = ref<FormInstance>()
-const serialPort = ref(false)
-const isUse = ref(true)
-// 初始表单参数
+const loading = ref(true) // 列表的加载中
+const total = ref(2) // 列表的总页数
+const list = ref<TradeOrderApi.OrderVO[]>([]) // 列表的数据
+const queryFormRef = ref<FormInstance>() // 搜索的表单
 const INIT_QUERY_PARAMS = {
   // 页数
   pageNo: 1,
@@ -251,15 +251,15 @@ const INIT_QUERY_PARAMS = {
   // 配送方式
   deliveryType: DeliveryTypeEnum.PICK_UP.type,
   // 自提门店
-  pickUpStoreId: undefined
-}
+  pickUpStoreId: -1
+} // 初始表单参数
 
-// 表单搜索
-const queryParams = ref({ ...INIT_QUERY_PARAMS })
-// 订单搜索类型 queryParam
-const queryType = reactive({ queryParam: 'no' })
-// 订单统计数据
-const summary = ref<TradeOrderSummaryRespVO>()
+const queryParams = ref({ ...INIT_QUERY_PARAMS }) // 表单搜索
+const queryType = reactive({ queryParam: 'no' }) // 订单搜索类型 queryParam
+const summary = ref<TradeOrderSummaryRespVO>() // 订单统计数据
+
+const serialPort = ref(false) // 是否连接扫码枪
+const isUse = ref(true) // 是否可核销
 
 // 订单聚合搜索 select 类型配置（动态搜索）
 const dynamicSearchList = ref([
@@ -308,7 +308,7 @@ const handleQuery = async () => {
 const resetQuery = () => {
   queryFormRef.value?.resetFields()
   queryParams.value = { ...INIT_QUERY_PARAMS }
-  if(pickUpStoreList.value.length > 0) {
+  if (pickUpStoreList.value.length > 0) {
     queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
   }
   handleQuery()
@@ -317,7 +317,12 @@ const resetQuery = () => {
 /** 自提门店精简列表 */
 const pickUpStoreList = ref<DeliveryPickUpStoreVO[]>([])
 const getPickUpStoreList = async () => {
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
+  // 移除自己无法核销的门店
+  const userId = useUserStore().getUser.id
+  pickUpStoreList.value = pickUpStoreList.value.filter((item) =>
+    item.verifyUserIds?.includes(userId)
+  )
 }
 
 /** 显示核销表单 */
@@ -330,85 +335,92 @@ const handlePickup = () => {
 const connectToSerialPort = async () => {
   try {
     // 判断浏览器支持串口通信
-    if ("serial" in navigator && navigator.serial != null && typeof navigator.serial === 'object' && "requestPort" in navigator.serial) {
+    if (
+      'serial' in navigator &&
+      navigator.serial != null &&
+      typeof navigator.serial === 'object' &&
+      'requestPort' in navigator.serial
+    ) {
       // 提示用户选择一个串口
-      port.value = await navigator.serial.requestPort();
+      port.value = await navigator.serial.requestPort()
     } else {
-      message.error("浏览器不支持扫码枪连接，请更换浏览器重试")
+      message.error('浏览器不支持扫码枪连接，请更换浏览器重试')
       return
     }
 
     // 获取用户之前授予该网站访问权限的所有串口。
-    ports.value = await navigator.serial.getPorts();
+    ports.value = await navigator.serial.getPorts()
 
     // console.log(port.value, ports.value);
-    console.log(port.value);
+    // console.log(port.value)
     // 等待串口打开
-    await port.value.open({ baudRate: 9600 , dataBits: 8 , stopBits: 2});
+    await port.value.open({ baudRate: 9600, dataBits: 8, stopBits: 2 })
 
     // console.log(typeof port.value);
-    message.success("成功连接扫码枪")
-    serialPort.value = true;
+    message.success('成功连接扫码枪')
+    serialPort.value = true
     // readData(port.value);
-    readData();
+    readData()
   } catch (error) {
     // 处理连接串口出错的情况
-    console.log("Error connecting to serial port:", error);
+    console.log('Error connecting to serial port:', error)
   }
-};
+}
 
 /** 监听扫码枪输入 */
 const readData = async () => {
-  reader.value = port.value.readable.getReader();
-  let data = ""; //扫码数据
+  reader.value = port.value.readable.getReader()
+  let data = '' //扫码数据
   // 监听来自串口的数据
   while (true) {
-    const { value, done } = await reader.value.read();
+    const { value, done } = await reader.value.read()
     if (done) {
       // 允许稍后关闭串口
-      reader.value.releaseLock();
-      break;
+      reader.value.releaseLock()
+      break
     }
     // 获取发送的数据
-    const serialData = new TextDecoder().decode(value);
-    data = `${data}${serialData}`;
-    if (serialData.includes("\r")) {
+    const serialData = new TextDecoder().decode(value)
+    data = `${data}${serialData}`
+    if (serialData.includes('\r')) {
       //读取结束
-      let codeData = data.replace("\r","");
-      data = ""; //清空下次读取不会叠加
-      console.log(`二维码数据:${codeData}`);
+      let codeData = data.replace('\r', '')
+      data = '' //清空下次读取不会叠加
+      console.log(`二维码数据:${codeData}`)
       //处理拿到数据逻辑
       pickUpForm.value.open(codeData)
     }
   }
-};
+}
 
 /** 断开扫码枪 */
 const cutPort = async () => {
-  if (port.value !== "") {
-    await reader.value.cancel();
-    await port.value.close();
-    port.value = "";
-    console.log("断开扫码枪连接");
-    message.success("已成功断开扫码枪连接")
-    serialPort.value = false;
+  if (port.value !== '') {
+    await reader.value.cancel()
+    await port.value.close()
+    port.value = ''
+    console.log('断开扫码枪连接')
+    message.success('已成功断开扫码枪连接')
+    serialPort.value = false
   } else {
-    message.warning("请先连接或打开扫码枪")
+    message.warning('请先连接或打开扫码枪')
   }
-};
+}
 
 /** 初始化 **/
 onMounted(async () => {
   await getPickUpStoreList()
-  if(pickUpStoreList.value.length > 0){
-    queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
-    isUse.value = false
-    await getList()
-  }else{
-    message.error("当前登录人没绑定任何自提点")
+  if (pickUpStoreList.value.length === 0) {
+    message.error('当前登录人没绑定任何自提点')
     loading.value = false
     isUse.value = true
+    return
   }
+
+  // 查询
+  queryParams.value.pickUpStoreId = pickUpStoreList.value[0].id
+  isUse.value = false
+  await getList()
 })
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
index be855804..8ea04a13 100644
--- a/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/DeliveryPickUpStoreBindForm.vue
@@ -10,18 +10,18 @@
       <el-row>
         <el-col :span="24">
           <el-form-item label="门店名称" prop="name">
-            <el-input v-model="formData.name" placeholder="请输入门店名称" :disabled="true"/>
+            <el-input v-model="formData.name" placeholder="请输入门店名称" readonly />
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="24">
-          <el-form-item label="门店店员" prop="storeStaffIds">
+          <el-form-item label="门店店员" prop="verifyUserIds">
             <el-button type="primary" @click="storeStaffTableSelect.open()">选择店员</el-button>
           </el-form-item>
           <!-- 店员列表 -->
-          <ContentWrap v-if="usersList.length > 0">
-            <el-table :data="usersList">
+          <ContentWrap v-if="formData.verifyUsers.length > 0">
+            <el-table :data="formData.verifyUsers">
               <el-table-column label="编号" align="center" prop="id" />
               <el-table-column
                 label="用户昵称"
@@ -56,15 +56,16 @@
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
-  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="changeStoreStaff"/>
+
+  <!-- 选择员工弹窗 -->
+  <StoreStaffTableSelect ref="storeStaffTableSelect" @change="handleSelect" />
 </template>
 <script setup lang="ts">
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
 import StoreStaffTableSelect from './components/StoreStaffTableSelect.vue'
-import {DICT_TYPE} from "@/utils/dict";
+import { DICT_TYPE } from '@/utils/dict'
 
 const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
 
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
@@ -72,12 +73,10 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formData = ref({
   id: undefined,
   name: '',
-  storeStaffIds: [],
-  storeStaffs: [],
-})
-const formRules = reactive({
-  name: [{ required: true, message: '门店名称不能为空', trigger: 'blur' }],
+  verifyUserIds: [],
+  verifyUsers: []
 })
+const formRules = reactive({})
 const formRef = ref() // 表单 Ref
 const storeStaffTableSelect = ref() // 表单 Ref
 
@@ -88,7 +87,7 @@ const open = async (id: number) => {
   resetForm()
   formLoading.value = true
   try {
-    await getList(id)
+    formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStore(id)
   } finally {
     formLoading.value = false
   }
@@ -97,7 +96,6 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 
 /** 提交表单 */
 const submitForm = async () => {
-  formData.value.storeStaffIds = usersList.value.map(item => item.id) as [];
   // 校验表单
   if (!formRef) return
   const valid = await formRef.value.validate()
@@ -105,42 +103,31 @@ const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
-    const data = formData.value
+    const data = {
+      id: formData.value.id,
+      verifyUserIds: formData.value.verifyUsers.map((item: any) => item.id)
+    }
     await DeliveryPickUpStoreApi.bindStoreStaffId(data)
-    message.success("绑定成功")
+    message.success('绑定成功')
     dialogVisible.value = false
   } finally {
     formLoading.value = false
   }
 }
 
-/** 删除按钮操作 */
-const handleDelete = async (id: number) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    const index = usersList.value.findIndex(item => {
-      if (item.id == id){
-        return true;
-      }
-    })
-    usersList.value.splice(index, 1);
-    //await DeliveryPickUpStoreStaffApi.deleteDeliveryPickUpStoreStaff(id,formData.value.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    //await getList(formData.value.id)
-  } catch {}
+/** 处理选择员工操作 */
+const handleSelect = (checkedUsers: []) => {
+  formData.value.verifyUsers = checkedUsers
 }
 
-/**
- * 查询自提点员工绑定关系
- */
-const getList = async (id: number) => {
-  formData.value = await DeliveryPickUpStoreApi.getDeliveryPickUpStoreStaff(id)
-  if(formData.value.storeStaffs){
-    usersList.value = formData.value.storeStaffs;
-  }
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  const index = formData.value.verifyUsers.findIndex((item: any) => {
+    if (item.id == id) {
+      return true
+    }
+  })
+  formData.value.verifyUsers.splice(index, 1)
 }
 
 /** 重置表单 */
@@ -148,14 +135,9 @@ const resetForm = () => {
   formData.value = {
     id: undefined,
     name: '',
-    storeStaffIds: [],
-    storeStaffs: [],
+    verifyUserIds: [],
+    verifyUsers: []
   }
   formRef.value?.resetFields()
 }
-
-const usersList = ref([])
-const changeStoreStaff = (checkedUsers : []) => {
-  usersList.value = checkedUsers
-}
 </script>
diff --git a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
index 63c0c0a0..4256fbc2 100644
--- a/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/components/StoreStaffTableSelect.vue
@@ -1,3 +1,4 @@
+<!-- TODO 芋艿：这块后续抽个独立的组件出来 -->
 <template>
   <Dialog :title="dialogTitle" v-model="dialogVisible" width="60%">
     <el-row :gutter="20">
@@ -147,8 +148,7 @@ const checkedUsers = ref([])
 // 选中状态：key为用户ID，value为是否选中
 const checkedStatus = ref<Record<string, boolean>>({})
 
-
-const dialogTitle = "选择店员"
+const dialogTitle = '选择店员'
 const dialogVisible = ref(false)
 const loading = ref(true) // 列表的加载中
 const total = ref(0) // 列表的总页数
@@ -221,11 +221,7 @@ const handleCheckAll = (checked: boolean) => {
  * @param combinationActivity 活动
  * @param isCalcCheckAll 是否计算全选
  */
-const handleCheckOne = (
-  checked: boolean,
-  combinationActivity,
-  isCalcCheckAll: boolean
-) => {
+const handleCheckOne = (checked: boolean, combinationActivity, isCalcCheckAll: boolean) => {
   if (checked) {
     checkedUsers.value.push(combinationActivity as never)
     checkedStatus.value[combinationActivity.id] = true
@@ -245,8 +241,7 @@ const handleCheckOne = (
 }
 
 // 查找活动在已选中活动列表中的索引
-const findCheckedIndex = (user) =>
-  checkedUsers.value.findIndex((item) => item.id === user.id)
+const findCheckedIndex = (user) => checkedUsers.value.findIndex((item) => item.id === user.id)
 
 // 计算全选框状态
 const calculateIsCheckAll = () => {
@@ -260,7 +255,7 @@ const calculateIsCheckAll = () => {
 const handleEmitChange = () => {
   // 关闭弹窗
   dialogVisible.value = false
-  emits("change", [...checkedUsers.value])
+  emits('change', [...checkedUsers.value])
 }
 
 /** 确认选择时的触发事件 */
diff --git a/src/views/mall/trade/delivery/pickUpStore/index.vue b/src/views/mall/trade/delivery/pickUpStore/index.vue
index 28b8e454..c7684bec 100644
--- a/src/views/mall/trade/delivery/pickUpStore/index.vue
+++ b/src/views/mall/trade/delivery/pickUpStore/index.vue
@@ -93,7 +93,7 @@
         prop="createTime"
         width="180"
       />
-      <el-table-column align="center" label="操作">
+      <el-table-column align="center" label="操作" min-width="110">
         <template #default="scope">
           <el-button
             v-hasPermi="['trade:delivery:pick-up-store:update']"
@@ -104,7 +104,7 @@
             编辑
           </el-button>
           <el-button
-            v-hasPermi="['trade:delivery:pick-up-store:bind']"
+            v-hasPermi="['trade:delivery:pick-up-store:update']"
             link
             type="primary"
             @click="openFormBind(scope.row.id)"
@@ -123,10 +123,11 @@
       </el-table-column>
     </el-table>
   </ContentWrap>
+
   <!-- 表单弹窗：添加/修改 -->
   <DeliveryPickUpStoreForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：绑定店员 -->
-  <DeliveryPickUpStoreBindForm ref="formBindRef"/>
+  <DeliveryPickUpStoreBindForm ref="formBindRef" />
 </template>
 <script lang="ts" name="DeliveryPickUpStore" setup>
 import * as DeliveryPickUpStoreApi from '@/api/mall/trade/delivery/pickUpStore'
diff --git a/src/views/mall/trade/order/index.vue b/src/views/mall/trade/order/index.vue
index 56aa57b3..9407aeac 100644
--- a/src/views/mall/trade/order/index.vue
+++ b/src/views/mall/trade/order/index.vue
@@ -351,7 +351,7 @@ const deliveryExpressList = ref<DeliveryExpressApi.DeliveryExpressVO[]>([]) // 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>
diff --git a/src/views/member/user/detail/UserOrderList.vue b/src/views/member/user/detail/UserOrderList.vue
index bae0bf0d..92ee70d9 100644
--- a/src/views/member/user/detail/UserOrderList.vue
+++ b/src/views/member/user/detail/UserOrderList.vue
@@ -273,7 +273,7 @@ const openDetail = (id: number) => {
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  pickUpStoreList.value = await PickUpStoreApi.getListAllSimple()
+  pickUpStoreList.value = await PickUpStoreApi.getSimpleDeliveryPickUpStoreList()
   deliveryExpressList.value = await DeliveryExpressApi.getSimpleDeliveryExpressList()
 })
 </script>

From d10a3af3d109ce1a935117cefad182fccb82514c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 13 Oct 2024 12:39:38 +0800
Subject: [PATCH 013/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=94=AF=E4=BB=98=EF=BC=9A=E8=BD=AC=E8=B4=A6?=
 =?UTF-8?q?=E5=9B=9E=E8=B0=83=E5=9C=B0=E5=9D=80=EF=BC=8C=E9=9D=9E=E5=BF=85?=
 =?UTF-8?q?=E5=A1=AB=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pay/app/components/AppForm.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/pay/app/components/AppForm.vue b/src/views/pay/app/components/AppForm.vue
index 0d42f998..50895b0c 100644
--- a/src/views/pay/app/components/AppForm.vue
+++ b/src/views/pay/app/components/AppForm.vue
@@ -73,8 +73,7 @@ const formRules = reactive({
   appKey: [{ required: true, message: '应用标识不能为空', trigger: 'blur' }],
   status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
   orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
-  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }],
-  transferNotifyUrl: [{ required: true, message: '转账结果的回调地址不能为空', trigger: 'blur' }]
+  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
 })
 const formRef = ref() // 表单 Ref
 

From 842fe09e8b7ff4957d464855252cee7dcfc09925 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 13 Oct 2024 20:07:42 +0800
Subject: [PATCH 014/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=96=B0=E5=AE=A1=E6=89=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=A2=9E=E5=8A=A0=E5=87=8F=E7=AD=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/task/index.ts                     |  14 +-
 src/assets/svgs/bpm/audit4.svg                |   1 +
 src/router/modules/remaining.ts               |   4 +-
 .../detail/ProcessInstanceOperationButton.vue | 320 ++++++++++--------
 .../detail/dialog/TaskSignList.vue            |   2 +-
 .../bpm/processInstance/detail/index_new.vue  |  25 +-
 6 files changed, 203 insertions(+), 163 deletions(-)
 create mode 100644 src/assets/svgs/bpm/audit4.svg

diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index cf75bfa5..50816952 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -9,10 +9,10 @@ export enum TaskStatusEnum {
    */
   NOT_START = -1,
 
-   /**
+  /**
    * 待审批
    */
-   WAIT = 0,
+  WAIT = 0,
   /**
    * 审批中
    */
@@ -26,7 +26,7 @@ export enum TaskStatusEnum {
    * 审批不通过
    */
   REJECT = 3,
-  
+
   /**
    * 已取消
    */
@@ -42,8 +42,7 @@ export enum TaskStatusEnum {
   /**
    * 审批通过中
    */
-  APPROVING = 7,
-
+  APPROVING = 7
 }
 
 export type TaskVO = {
@@ -111,6 +110,11 @@ export const copyTask = async (data: any) => {
   return await request.put({ url: '/bpm/task/copy', data })
 }
 
+// 获取我的待办任务
+export const myTodoTask = async (processInstanceId: string) => {
+  return await request.get({ url: '/bpm/task/my-todo?processInstanceId=' + processInstanceId })
+}
+
 // 获取减签任务列表
 export const getChildrenTaskList = async (id: string) => {
   return await request.get({ url: '/bpm/task/list-by-parent-task-id?parentTaskId=' + id })
diff --git a/src/assets/svgs/bpm/audit4.svg b/src/assets/svgs/bpm/audit4.svg
new file mode 100644
index 00000000..ec661443
--- /dev/null
+++ b/src/assets/svgs/bpm/audit4.svg
@@ -0,0 +1 @@
+<svg t="1728812935276" class="icon" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4361" width="200" height="200"><path d="M1159.10034 346.809949l-177.334385-280.171946a52.524561 52.524561 0 0 0-72.305741-16.279543L24.344573 611.35763a52.626948 52.626948 0 0 0-16.30002 72.305741L185.399416 963.876272a52.504083 52.504083 0 0 0 72.244308 16.21811l885.156596-560.958215a52.422174 52.422174 0 0 0 16.30002-72.326218z m-35.323535 42.203945L238.640686 950.054019a16.627658 16.627658 0 0 1-23.016611-5.180785L38.310168 664.660333a16.730045 16.730045 0 0 1 5.180785-23.078043L928.668027 80.562642a16.607181 16.607181 0 0 1 22.975655 5.22174l177.416295 280.212902a16.996252 16.996252 0 0 1-5.283172 23.01661z m-763.008836-177.784888l14.682304 35.303058 19.043993-33.132452 38.047031-3.071612-25.617242-28.422647 8.723377-37.146025-34.770645 15.644743-32.681949-19.801658 4.136438 38.067509-28.975538 24.736713 37.412231 7.822371zM586.121884 106.077497l-18.265851-33.62391-15.5014 35.016374-37.596528 7.167094 28.381692 25.514855-4.894101 37.924167 33.111975-19.187335 34.545393 16.422884-7.98619-37.473663 26.211086-27.787848-38.006076-3.972618z m343.610968 563.29264l-30.245137-23.303294-0.143342 38.190372-31.596646 21.460328 36.38836 12.040718 10.730164 36.654567 22.566108-30.85946 38.190372 1.085303-22.422765-31.043756 12.921246-35.83547-36.38836 11.610692z m-123.49927 152.270033l-14.416098-35.425922-19.351154 33.030065-38.026553 2.764451 25.39199 28.545512-9.030538 37.105069 34.975419-15.296626 32.538607 20.25216-3.849753-38.087986 28.975537-24.716235-37.207457-8.170488z m-226.234444 103.574748l18.102032 33.767252 15.808562-34.913987 37.596528-6.757545-28.217873-25.781062 5.180785-37.883211-33.255317 18.839218-34.361097-16.648135 7.658552 37.391753-26.57968 27.685461 38.067508 4.300256z m-338.901163-565.954703l30.081318 23.671888 0.430026-38.231328 31.739988-21.35794-36.183587-12.286447-10.443479-36.818386-22.852792 30.654685-38.190373-1.392464 22.115605 31.187098-13.166976 35.937858 36.449793-11.364964z m-134.372775 165.047938C102.711627 362.454691 181.242501 202.444197 327.61504 109.722477 473.987578 17.000757 651.915808 14.379648 796.465857 87.033505L831.400321 64.9179A508.106015 508.106015 0 0 0 694.119753 12.536681a510.133279 510.133279 0 0 0-195.927874-5.651766 506.611164 506.611164 0 0 0-189.620832 72.612902 509.355138 509.355138 0 0 0-146.659222 140.638863 509.989937 509.989937 0 0 0-78.858513 179.627855 508.679383 508.679383 0 0 0-11.344486 146.618268l35.016374-22.095127z m950.520494-24.757191c4.156915 161.832984-74.394437 321.823002-220.72602 414.524244-146.331584 92.844584-324.321246 95.404261-468.83034 22.729927l-34.975419 22.177037a510.338053 510.338053 0 0 0 137.301045 52.319787 508.658906 508.658906 0 0 0 195.907398 5.672243 506.201616 506.201616 0 0 0 189.620832-72.592424A510.235666 510.235666 0 0 0 1080.876627 624.156012c10.91446-48.531466 14.702782-97.718208 11.324009-146.700177l-34.975419 22.115605zM433.176097 276.613382a276.322193 276.322193 0 0 1 131.321641-42.511107l54.019412-34.217755a312.075754 312.075754 0 0 0-204.528388 46.688499 312.055276 312.055276 0 0 0-129.478674 165.047938l53.998935-34.197278a276.50649 276.50649 0 0 1 94.667074-100.810297z m297.741565 470.57092c40.954823-25.903926 72.756244-60.879345 94.687552-100.666956l53.957979-34.279187a311.686683 311.686683 0 0 1-129.417241 165.047938c-61.718919 39.009469-133.164608 55.14567-204.50791 46.708976l53.978457-34.197278c45.25508-2.784928 90.305385-16.586703 131.301163-42.593016z m-303.00426-123.990728L277.895884 716.918687l40.565753 64.913395c5.467469 8.764332 12.573131 10.402525 21.337463 4.914579l120.816728-75.500217a19.494496 19.494496 0 0 0 8.211442-11.201144c1.290077-5.528901-5.487946-21.235076-19.53545-46.954705l29.671769-7.719984c16.279542 33.091497 23.549023 53.917025 22.013218 62.312763-2.477767 8.989584-8.682423 16.914342-18.102032 23.487592l-135.171395 84.448845c-20.927915 13.064589-37.965121 8.518603-51.644032-13.37175l-78.694693-125.936081 25.289604-15.788085 20.067863 32.088104 124.215979-77.629867-34.627303-55.432353-159.723811 99.806904-15.194239-24.306688 185.484395-115.90215 65.036259 104.025252z m160.133359-51.050187l8.805287 14.108936 31.596646-19.760702-8.805287-14.088459-31.617123 19.740225z m20.047386-38.21085l-8.661945-13.863208-31.617124 19.740225 8.661946 13.863207 31.617123-19.740224z m0.286684 70.790412l25.228171 40.360978-21.890353 13.678911-78.223713-125.219372 72.694812-45.418899-5.610811-1.9044c-0.327639-4.873624-0.901006-9.583429-1.228645-14.436575l-9.010061 13.719866c-2.477767-1.82249-4.730282-3.788321-6.675636-5.283172-11.979286 12.225015-31.064233 28.197396-57.111501 48.203827l-15.214717-17.876781c4.300256-3.378773 6.470862-9.112448 6.614204-16.996251-0.286684-5.897495-0.839574-14.334188-2.109173-25.023397l-22.852792 14.272756-14.293233-22.852792 33.07102-20.682186a213.84561 213.84561 0 0 0-19.023516-13.105543l22.361334-19.392109c6.286565 5.201263 13.044111 11.119235 20.25216 17.774393l33.787729-21.091734 14.272756 22.832314-43.760229 27.337345c0.921484 12.286447 1.2696 24.224778 1.576761 35.528309l25.125784-21.43985c-5.610811-3.583547-10.689209-6.839455-15.460446-9.624383l13.863208-16.750523c11.426396 6.368475 22.525153 13.310318 33.173407 21.173644-4.607418-26.866364-14.784691-56.681475-30.286092-89.588676l25.043875-10.238706c5.590333 12.73695 10.648254 25.125784 14.989465 36.961728l37.678437-23.549024 14.743737 23.569501-7.064707 4.423121c23.794752 40.238114 39.31663 77.507003 47.057092 111.560939 19.371631 12.573131 37.65796 20.743618 54.736121 24.28621l-1.290077 29.856066c-15.399014-3.542592-31.658078-10.648254-48.613375-20.989347a171.682619 171.682619 0 0 1-4.464076 54.51087l-25.801539-12.614085c5.160308-18.777786 5.938449-39.193766 2.272993-61.268416a484.905108 484.905108 0 0 1-51.644032-47.507595c0.020477 4.382166 0.307161 8.600513 0.184297 12.73695l-14.661827-5.037443 61.841783 98.946853c9.112448 14.579917 5.795107 27.13257-9.767725 36.859341l-14.08846 8.805287-19.125902-18.142987 13.515092-7.064707c5.569856-3.501637 7.126139-7.51521 4.545985-11.651647l-7.740462-12.388834-31.617123 19.740225z m11.569737-162.733991c15.910949 18.450148 31.596646 34.361097 46.790886 47.855711-8.088578-22.688972-19.535451-46.954705-34.606826-72.694811l-15.808561 9.870112c1.290077 5.283172 2.662064 10.177274 3.624501 14.968988z m-53.896547 244.295521l-18.224896 11.385441-19.944999-19.985954a102.387058 102.387058 0 0 0 16.381929-7.863326c4.607418-2.887315 4.914579-7.822371 0.819096-14.375143l-30.388478-48.633852c-4.505031 6.88041-9.153403 13.494614-13.945118 19.863089l-22.668494-21.665102c7.371868-7.638075 14.211324-15.644743 20.354547-24.2043l-31.125666-49.84202-20.927915 13.064588-15.03042-24.060958 20.88696-13.064589-26.1087-41.835352 24.060959-15.03042 26.129177 41.814875 14.600395-9.112449 15.03042 24.060959-14.579917 9.112448 23.999526 38.415625c3.030657-5.938449 6.32752-12.061195 9.214835-18.265852l16.095246 25.781062c-3.030657 5.938449-6.32752 12.081673-9.358177 18.020122l41.77392 66.858749c10.484435 16.791478 8.027145 30.14275-7.04423 39.562359z m226.275399-449.356321l25.043874-15.644743 40.401933 64.667666 44.743145-27.951667 80.373841 128.598146c12.143105 19.453541 9.870112 34.750168-6.921366 45.214125l-23.078042 14.436575-21.60367-19.965477 22.381811-12.286447c5.344604-3.358296 5.446992-9.153403 0.430026-17.201025l-9.870113-15.767607-64.176208 40.094772 32.04715 51.295916-25.289604 15.788084-99.04924-158.495166 44.968396-28.115486-40.401933-64.667666z m61.739396 142.604695l12.614085 20.190728 64.176209-40.11525-12.614086-20.17025-64.176208 40.094772z m50.804458-61.493668l-12.593608-20.17025-64.196685 40.094772 12.614085 20.190728 64.176208-40.11525z m-136.911974-53.036496c14.743736 7.371868 29.978931 16.074768 45.910357 26.415861l-14.047505 22.975656a356.245531 356.245531 0 0 0-46.647543-25.965358l14.784691-23.426159z m83.650227-56.005721l27.296389-2.866837c3.276386 18.245374 4.791714 36.900296 4.075005 56.312882l-27.112093 2.047741c0.409548-19.863089-0.941961-38.29276-4.259301-55.493786z m-176.371947 100.748866l27.501164-10.074887c2.559676 7.863326 4.791714 15.255672 6.655159 22.54563l40.340501-25.228171 15.050897 24.081436-48.613375 30.388479c1.965832 11.262576 3.39925 22.197514 4.361688 32.415743l55.903334-34.934464 14.129414 22.607062-22.340856 13.965595 14.272756 22.852791 30.634208-19.125902 14.579917 23.344249-30.634208 19.125903 29.630815 47.405208a230.166107 230.166107 0 0 0 20.682186-32.866246l18.224896 19.392109c-11.324009 19.22829-25.965358 38.518011-43.965003 57.869165l-24.122391-15.337581c4.709805-5.979404 5.733675-11.364963 3.01018-15.74713l-28.258828-45.214125-30.634208 19.14638-14.579917-23.344249 30.634208-19.14638-14.272756-22.852792-11.672125 7.289959-10.648254-16.996252c0.307161 5.877017 0.47098 11.528783 0.47098 16.93482l-28.87315-0.204774a297.802998 297.802998 0 0 0-17.467232-98.291576z" fill="#8a8a8a" p-id="4362"></path></svg>
\ No newline at end of file
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 2f95155d..2cbaaa49 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -292,8 +292,8 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'process-instance/detail',
-        // component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
-        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
+        //component: () => import('@/views/bpm/processInstance/detail/index.vue'),
         name: 'BpmProcessInstanceDetail',
         meta: {
           noCache: true,
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 96d9739e..188ac9dc 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
-    v-if="runningTask.id"
+    v-if="runningTask && runningTask.id"
   >
     <!-- 【通过】按钮 -->
     <el-popover
@@ -9,7 +9,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.APPROVE)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
         <el-button plain type="success" @click="openPopover('approve')">
@@ -38,7 +38,12 @@
             />
           </el-card>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
+            <el-input
+              v-model="genericForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
           </el-form-item>
           <el-form-item>
             <el-button :disabled="formLoading" type="success" @click="handleAudit(true)">
@@ -56,7 +61,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.REJECT)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -85,7 +90,12 @@
             />
           </el-card>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" placeholder="请输入审批意见" type="textarea" :rows="4" />
+            <el-input
+              v-model="genericForm.reason"
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="4"
+            />
           </el-form-item>
           <el-form-item>
             <el-button :disabled="formLoading" type="danger" @click="handleAudit(false)">
@@ -103,10 +113,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.COPY)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
     >
       <template #reference>
-        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="svg-icon:send" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.COPY) }}
         </div>
@@ -120,9 +130,14 @@
           :rules="genericRule"
           label-width="100px"
         >
-                
           <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="genericForm.copyUserIds" clearable style="width: 100%" multiple placeholder="请选择抄送人">
+            <el-select
+              v-model="genericForm.copyUserIds"
+              clearable
+              style="width: 100%"
+              multiple
+              placeholder="请选择抄送人"
+            >
               <el-option
                 v-for="item in userOptions"
                 :key="item.id"
@@ -132,7 +147,13 @@
             </el-select>
           </el-form-item>
           <el-form-item label="抄送意见" prop="copyReason">
-            <el-input v-model="genericForm.copyReason" clearable placeholder="请输入抄送意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.copyReason"
+              clearable
+              placeholder="请输入抄送意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
 
           <el-form-item>
@@ -151,10 +172,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.TRANSFER)"
+      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
     >
       <template #reference>
-        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="fa:share-square-o" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
         </div>
@@ -168,7 +189,6 @@
           :rules="genericRule"
           label-width="100px"
         >
-                
           <el-form-item label="新审批人" prop="assigneeUserId">
             <el-select v-model="genericForm.assigneeUserId" clearable style="width: 100%">
               <el-option
@@ -180,12 +200,17 @@
             </el-select>
           </el-form-item>
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
 
-
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary"  @click="handleTransfer()">
+            <el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
               {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
             </el-button>
             <el-button @click="popOverVisible.transfer = false"> 取消 </el-button>
@@ -193,22 +218,22 @@
         </el-form>
       </div>
     </el-popover>
-    
+
     <!-- 【委派】按钮 -->
     <el-popover
       :visible="popOverVisible.delegate"
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.DELEGATE)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
     >
       <template #reference>
-        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="ep:position" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
         </div>
       </template>
-      
+
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -228,9 +253,15 @@
               />
             </el-select>
           </el-form-item>
-     
+
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
 
           <el-form-item>
@@ -241,7 +272,6 @@
           </el-form-item>
         </el-form>
       </div>
-
     </el-popover>
 
     <!-- 【加签】按钮 当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
@@ -250,10 +280,10 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.ADD_SIGN)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
     >
       <template #reference>
-        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="ep:plus" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
         </div>
@@ -278,9 +308,15 @@
               />
             </el-select>
           </el-form-item>
-      
+
           <el-form-item label="审批意见" prop="reason">
-            <el-input v-model="genericForm.reason" clearable placeholder="请输入审批意见" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
           <el-form-item>
             <el-button :disabled="formLoading" type="primary" @click="handlerAddSign('before')">
@@ -295,17 +331,25 @@
       </div>
     </el-popover>
 
-    <!-- TODO @jason：减签 -->
+    <!-- 【减签】按钮 -->
+    <div
+      @click="openChildrenTask()"
+      class="hover-bg-gray-100 rounded-xl p-6px"
+      v-if="runningTask.children"
+    >
+      <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
+    </div>
+
     <!-- 【退回】按钮 -->
     <el-popover
       :visible="popOverVisible.return"
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isShowButton(OperationButtonType.RETURN)"
+      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
     >
       <template #reference>
-        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px" >
+        <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px">
           <Icon :size="14" icon="fa:mail-reply" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.RETURN) }}
         </div>
@@ -320,20 +364,26 @@
           label-width="100px"
         >
           <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
-              <el-select v-model="genericForm.targetTaskDefinitionKey" clearable style="width: 100%">
-                <el-option
-                  v-for="item in returnList"
-                  :key="item.taskDefinitionKey"
-                  :label="item.name"
-                  :value="item.taskDefinitionKey"
-                />
-              </el-select>
+            <el-select v-model="genericForm.targetTaskDefinitionKey" clearable style="width: 100%">
+              <el-option
+                v-for="item in returnList"
+                :key="item.taskDefinitionKey"
+                :label="item.name"
+                :value="item.taskDefinitionKey"
+              />
+            </el-select>
           </el-form-item>
           <el-form-item label="退回理由" prop="returnReason">
-            <el-input v-model="genericForm.returnReason" clearable placeholder="请输入退回理由" type="textarea"  :rows="3" />
+            <el-input
+              v-model="genericForm.returnReason"
+              clearable
+              placeholder="请输入退回理由"
+              type="textarea"
+              :rows="3"
+            />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary"  @click="handleReturn()">
+            <el-button :disabled="formLoading" type="primary" @click="handleReturn()">
               {{ getButtonDisplayName(OperationButtonType.RETURN) }}
             </el-button>
             <el-button @click="popOverVisible.return = false"> 取消 </el-button>
@@ -341,29 +391,29 @@
         </el-form>
       </div>
     </el-popover>
-   
+
+    <!-- 弹窗：子任务  -->
+    <TaskSignList ref="taskSignListRef" @success="reload" />
     <!--TODO @jason：撤回 -->
     <!--TODO @jason：再次发起 -->
   </div>
 </template>
 <script lang="ts" setup>
+import TaskSignList from './dialog/TaskSignList.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
-import { useUserStore } from '@/store/modules/user'
 import * as TaskApi from '@/api/bpm/task'
 import { propTypes } from '@/utils/propTypes'
-import { isEmpty } from '@/utils/is'
 import {
   OperationButtonType,
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 defineOptions({ name: 'ProcessInstanceBtnConatiner' })
 
-const userId = useUserStore().getUser.id // 当前登录的编号
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-defineProps({
-  processInstance: propTypes.any, // 流程实例信息
+const props = defineProps({
+  processInstanceId: propTypes.string, // 流程实例信息
   userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
@@ -374,7 +424,7 @@ const popOverVisible = ref({
   transfer: false,
   delegate: false,
   addSign: false,
-  return : false,
+  return: false,
   copy: false
 })
 /** 退回节点 */
@@ -390,7 +440,7 @@ const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
-  assigneeUserId:[{ required: true, message: '新审批人不能为空', trigger: 'change' }],
+  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
 })
@@ -407,43 +457,25 @@ watch(
   }
 )
 
-// TODO @jaosn：具体的审批任务，要不改成后端返回。让前端弱化下
-/**
- * 设置 runningTasks 中的任务
- */
-const loadRunningTask = (tasks: any[]) => {
-  runningTask.value = {}
-  genericForm.value = {}
-  approveForm.value = {}
-  approveFormFApi.value = {}
-  tasks.forEach((task: any) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-    // 2.3 添加到处理任务
-    runningTask.value = { ...task }
-    genericForm.value = {
-      reason: '',
-      copyUserIds: []
-    }
-
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const tempApproveForm = {}
-      setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
-      approveForm.value = tempApproveForm
+/** 弹出退回气泡卡 */
+const openReturnPopover = async () => {
+  returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
+  if (returnList.value.length === 0) {
+    message.warning('当前没有可退回的节点')
+    return
+  }
+  openPopover('return')
+}
+/** 弹出气泡卡 */
+const openPopover = (type: string) => {
+  Object.keys(popOverVisible.value).forEach((item) => {
+    if (item === type) {
+      popOverVisible.value[item] = true
     } else {
-      approveForm.value = {} // 占位，避免为空
+      popOverVisible.value[item] = false
     }
   })
+  formRef.value.resetFields()
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -479,7 +511,7 @@ const handleAudit = async (pass: boolean) => {
       message.success('审批不通过成功')
     }
     // 2.2 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -511,7 +543,6 @@ const handleCopy = async () => {
 
 /** 处理转交 */
 const handleTransfer = async () => {
-   
   formLoading.value = true
   try {
     const transferFormRef = proxy.$refs['formRef']
@@ -526,12 +557,12 @@ const handleTransfer = async () => {
       reason: genericForm.value.reason,
       assigneeUserId: genericForm.value.assigneeUserId
     }
-  
+
     await TaskApi.transferTask(data)
     popOverVisible.value.transfer = false
     message.success('操作成功')
     // 2. 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -539,30 +570,30 @@ const handleTransfer = async () => {
 
 /** 处理委派 */
 const handleDelegate = async () => {
-   formLoading.value = true
-   try {
-     const deletegateFormRef = proxy.$refs['formRef']
-     // 1.1 校验表单
-     const elForm = unref(deletegateFormRef)
-     if (!elForm) return
-     const valid = await elForm.validate()
-     if (!valid) return
-     // 1.2 处理委派
-     const data = {
-       id: runningTask.value.id,
-       reason: genericForm.value.reason,
-       delegateUserId: genericForm.value.delegateUserId
-     }
-   
-     await TaskApi.delegateTask(data)
-     popOverVisible.value.delegate = false
-     message.success('操作成功')
-     // 2. 加载最新数据
-     getDetail()
-   } finally {
-     formLoading.value = false
-   }
- }
+  formLoading.value = true
+  try {
+    const deletegateFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(deletegateFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 处理委派
+    const data = {
+      id: runningTask.value.id,
+      reason: genericForm.value.reason,
+      delegateUserId: genericForm.value.delegateUserId
+    }
+
+    await TaskApi.delegateTask(data)
+    popOverVisible.value.delegate = false
+    message.success('操作成功')
+    // 2. 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
 
 /** 处理加签 */
 const handlerAddSign = async (type: string) => {
@@ -585,7 +616,7 @@ const handlerAddSign = async (type: string) => {
     message.success('操作成功')
     popOverVisible.value.addSign = false
     // 2 加载最新数据
-    getDetail()
+    reload()
   } finally {
     formLoading.value = false
   }
@@ -607,43 +638,41 @@ const handleReturn = async () => {
       reason: genericForm.value.returnReason,
       targetTaskDefinitionKey: genericForm.value.targetTaskDefinitionKey
     }
-  
+
     await TaskApi.returnTask(data)
     popOverVisible.value.return = false
     message.success('操作成功')
-    // 2 加载最新数据
-    getDetail()
+    // 2 重新加载数据
+    reload()
   } finally {
     formLoading.value = false
   }
 }
 
-/** 弹出退回气泡卡 */
-const openReturnPopover = async  () => {
-  returnList.value = await TaskApi.getTaskListByReturn(runningTask.value.id)
-  if (returnList.value.length === 0) {
-    message.warning('当前没有可退回的节点')
-    return
-  }
-  openPopover('return')
-}
-/** 弹出气泡卡 */
-const openPopover = (type: string ) => {
-  Object.keys(popOverVisible.value).forEach( item => {
-    if( item === type) {
-      popOverVisible.value[item] = true
-    } else {
-      popOverVisible.value[item] = false
-    }
-  })
-  formRef.value.resetFields()
+/** 子任务 */
+const taskSignListRef = ref()
+const openChildrenTask = () => {
+  taskSignListRef.value.open(runningTask.value)
 }
 
-/** 获得详情 */
-const getDetail = () => {
+/** 重新加载数据 */
+const reload = () => {
+  getMyTodoTask()
   emit('success')
 }
 
+/** 任务是否为处理中状态 */
+const isHandleTaskStatus = () => {
+  let canHandle = false
+  if (
+    TaskApi.TaskStatusEnum.RUNNING === runningTask.value.status ||
+    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value.status
+  ) {
+    canHandle = true
+  }
+  return canHandle
+}
+
 /** 是否显示按钮 */
 const isShowButton = (btnType: OperationButtonType): boolean => {
   let isShow = true
@@ -662,7 +691,26 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
   return displayName
 }
 
-defineExpose({ loadRunningTask })
+/** 获取我的待办任务 */
+const getMyTodoTask = async () => {
+  genericForm.value = {}
+  approveForm.value = {}
+  approveFormFApi.value = {}
+  const data = await TaskApi.myTodoTask(props.processInstanceId)
+  runningTask.value = data
+  // 处理 approve 表单.
+  if (data && data.formId && data.formConf) {
+    const tempApproveForm = {}
+    setConfAndFields2(tempApproveForm, data.formConf, data.formFields, data.formVariables)
+    approveForm.value = tempApproveForm
+  } else {
+    approveForm.value = {} // 占位，避免为空
+  }
+}
+
+onMounted(async () => {
+  await getMyTodoTask()
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
index 648e86b5..80ef37e1 100644
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
@@ -2,7 +2,7 @@
   <el-drawer v-model="drawerVisible" title="子任务" size="880px">
     <!-- 当前任务 -->
     <template #header>
-      <h4>【{{ parentTask.name }} 】审批人：{{ parentTask?.assigneeUser?.nickname }}</h4>
+      <h4>【{{ parentTask.name }} 】审批人：{{ parentTask?.ownerUser?.nickname }}</h4>
       <el-button
         style="margin-left: 5px"
         v-if="isSignDeleteButtonVisible(parentTask)"
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 65b68242..133f1273 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -37,7 +37,7 @@
           <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
         </div>
 
-        <el-tabs v-model="activeTab" @tab-change="onTabChange">
+        <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
           <el-tab-pane label="审批详情" name="form">
             <div class="form-scroll-area">
@@ -104,8 +104,7 @@
         <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
-            ref="operationButtonRef"
-            :processInstance="processInstance"
+            :process-instance-id="id"
             :userOptions="userOptions"
             @success="refresh"
           />
@@ -119,7 +118,6 @@ import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
@@ -132,6 +130,7 @@ import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/co
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
 import audit2 from '@/assets/svgs/bpm/audit2.svg'
 import audit3 from '@/assets/svgs/bpm/audit3.svg'
+import audit4 from '@/assets/svgs/bpm/audit4.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
@@ -142,16 +141,14 @@ const props = defineProps<{
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
-let processDefinitionId = undefined // 流程定义 Id
-const operationButtonRef = ref()
 const timelineRef = ref()
-const bpmnXml = ref('') // BPMN XML
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
 const auditIcons = {
   1: audit1,
   2: audit2,
-  3: audit3
+  3: audit3,
+  4: audit4
 }
 
 // ========== 申请信息 ==========
@@ -220,9 +217,6 @@ const getProcessInstance = async () => {
       // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
       BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
-    processDefinitionId = processDefinition.id
-    // 加载流程图
-    // bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinition.id))?.bpmnXml
   } finally {
     processInstanceLoading.value = false
   }
@@ -272,7 +266,7 @@ const getTaskList = async () => {
     })
 
     // 获得需要自己审批的任务
-    operationButtonRef.value?.loadRunningTask(tasks.value)
+    //operationButtonRef.value?.loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
   }
@@ -291,13 +285,6 @@ const refresh = () => {
 /** 当前的Tab */
 const activeTab = ref('form')
 
-/** Tab 切换 加载流程图，直接加载显示不出来，不知道啥原因，所以切换以后在加载 */
-const onTabChange = async (tabName: string) => {
-  if (tabName === 'diagram' && processDefinitionId && !bpmnXml.value) {
-    //加载流程图
-    bpmnXml.value = (await DefinitionApi.getProcessDefinition(processDefinitionId))?.bpmnXml
-  }
-}
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 onMounted(async () => {

From b056db55b2e891d26f6d00b10b1263ba985cf518 Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Sun, 13 Oct 2024 21:11:03 +0800
Subject: [PATCH 015/109] =?UTF-8?q?feat:=20=E5=88=86=E7=B1=BB=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                | 154 +++---
 .../bpm/model/CategoryDraggableModel.vue      | 404 ++++++++++++++++
 src/views/bpm/model/index.vue                 | 397 +++------------
 src/views/bpm/model/index_new.vue             | 456 ------------------
 src/views/bpm/model/index_old.vue             | 404 ++++++++++++++++
 src/views/bpm/model/mock.js                   | 202 ++++++++
 7 files changed, 1155 insertions(+), 863 deletions(-)
 create mode 100644 src/views/bpm/model/CategoryDraggableModel.vue
 delete mode 100644 src/views/bpm/model/index_new.vue
 create mode 100644 src/views/bpm/model/index_old.vue
 create mode 100644 src/views/bpm/model/mock.js

diff --git a/package.json b/package.json
index a338c1d6..34b6683b 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "pinia-plugin-persistedstate": "^3.2.1",
     "qrcode": "^1.5.3",
     "qs": "^6.12.0",
+    "sortablejs": "^1.15.3",
     "steady-xml": "^0.1.0",
     "url": "^0.11.3",
     "video.js": "^7.21.5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3ae6f8cf..f1790a46 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -125,6 +125,9 @@ importers:
       qs:
         specifier: ^6.12.0
         version: 6.12.1
+      sortablejs:
+        specifier: ^1.15.3
+        version: 1.15.3
       steady-xml:
         specifier: ^0.1.0
         version: 0.1.0
@@ -1053,7 +1056,7 @@ packages:
       postcss-selector-parser: ^6.0.13
 
   '@ctrl/tinycolor@3.6.1':
-    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==, tarball: https://registry.npmmirror.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz}
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
     engines: {node: '>=10'}
 
   '@dual-bundle/import-meta-resolve@4.0.0':
@@ -1065,139 +1068,139 @@ packages:
       vue: ^3.2.0
 
   '@esbuild/aix-ppc64@0.19.12':
-    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==, tarball: https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz}
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
 
   '@esbuild/android-arm64@0.19.12':
-    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==, tarball: https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz}
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.19.12':
-    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==, tarball: https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz}
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.19.12':
-    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==, tarball: https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
 
   '@esbuild/darwin-arm64@0.19.12':
-    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==, tarball: https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz}
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.19.12':
-    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==, tarball: https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
 
   '@esbuild/freebsd-arm64@0.19.12':
-    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz}
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.19.12':
-    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
 
   '@esbuild/linux-arm64@0.19.12':
-    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz}
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.19.12':
-    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz}
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.19.12':
-    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==, tarball: https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz}
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.19.12':
-    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==, tarball: https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz}
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.19.12':
-    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz}
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.19.12':
-    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==, tarball: https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz}
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.19.12':
-    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==, tarball: https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz}
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.19.12':
-    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==, tarball: https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz}
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.19.12':
-    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==, tarball: https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
 
   '@esbuild/netbsd-x64@0.19.12':
-    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==, tarball: https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
 
   '@esbuild/openbsd-x64@0.19.12':
-    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==, tarball: https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
 
   '@esbuild/sunos-x64@0.19.12':
-    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==, tarball: https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
 
   '@esbuild/win32-arm64@0.19.12':
-    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==, tarball: https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz}
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.19.12':
-    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==, tarball: https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz}
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
 
   '@esbuild/win32-x64@0.19.12':
-    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==, tarball: https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz}
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1221,13 +1224,13 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
   '@floating-ui/core@1.6.1':
-    resolution: {integrity: sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==, tarball: https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.1.tgz}
+    resolution: {integrity: sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==}
 
   '@floating-ui/dom@1.6.4':
-    resolution: {integrity: sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==, tarball: https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.4.tgz}
+    resolution: {integrity: sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==}
 
   '@floating-ui/utils@0.2.2':
-    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==, tarball: https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.2.tgz}
+    resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
 
   '@form-create/component-elm-checkbox@3.1.29':
     resolution: {integrity: sha512-tzqpwg+lq1X/V1wEsOkHBC9QxZyUsoymFRrWiEdqvstRcTQKQjntt/3gl8MQ3Tcq22dP2xJbQxjTeu1J8o6NCA==}
@@ -1395,7 +1398,7 @@ packages:
     engines: {node: '>= 8'}
 
   '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==, tarball: https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz}
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
   '@pkgr/core@0.1.1':
@@ -1415,7 +1418,7 @@ packages:
     resolution: {integrity: sha512-s2t+1oVtGDV6KtqfCXtUOhxfeYvOdDF90IVm+nMs/6bUP0HeGZLslguuL/AibpwtfL4FA/oCsIu/RhwapgAdJw==}
 
   '@rollup/plugin-virtual@3.0.2':
-    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==, tarball: https://registry.npmmirror.com/@rollup/plugin-virtual/-/plugin-virtual-3.0.2.tgz}
+    resolution: {integrity: sha512-10monEYsBp3scM4/ND4LNH5Rxvh3e/cVeL3jWTgZ2SrQ+BmUoQcopVQvnaMcOnykb1VkxUFuDAN+0FnpTFRy2A==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
@@ -1437,91 +1440,91 @@ packages:
         optional: true
 
   '@rollup/rollup-android-arm-eabi@4.17.1':
-    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz}
+    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==}
     cpu: [arm]
     os: [android]
 
   '@rollup/rollup-android-arm64@4.17.1':
-    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.1.tgz}
+    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==}
     cpu: [arm64]
     os: [android]
 
   '@rollup/rollup-darwin-arm64@4.17.1':
-    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.1.tgz}
+    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==}
     cpu: [arm64]
     os: [darwin]
 
   '@rollup/rollup-darwin-x64@4.17.1':
-    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.1.tgz}
+    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==}
     cpu: [x64]
     os: [darwin]
 
   '@rollup/rollup-linux-arm-gnueabihf@4.17.1':
-    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.1.tgz}
+    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.17.1':
-    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.1.tgz}
+    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.17.1':
-    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.1.tgz}
+    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.17.1':
-    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.1.tgz}
+    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.17.1':
-    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.1.tgz}
+    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.17.1':
-    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.1.tgz}
+    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.17.1':
-    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.1.tgz}
+    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.17.1':
-    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.1.tgz}
+    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.17.1':
-    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.1.tgz}
+    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.17.1':
-    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.1.tgz}
+    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==}
     cpu: [arm64]
     os: [win32]
 
   '@rollup/rollup-win32-ia32-msvc@4.17.1':
-    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.1.tgz}
+    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==}
     cpu: [ia32]
     os: [win32]
 
   '@rollup/rollup-win32-x64-msvc@4.17.1':
-    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.1.tgz}
+    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==}
     cpu: [x64]
     os: [win32]
 
@@ -1529,71 +1532,71 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
   '@swc/core-darwin-arm64@1.7.26':
-    resolution: {integrity: sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==, tarball: https://registry.npmmirror.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.26.tgz}
+    resolution: {integrity: sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
   '@swc/core-darwin-x64@1.7.26':
-    resolution: {integrity: sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==, tarball: https://registry.npmmirror.com/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz}
+    resolution: {integrity: sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
   '@swc/core-linux-arm-gnueabihf@1.7.26':
-    resolution: {integrity: sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz}
+    resolution: {integrity: sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
   '@swc/core-linux-arm64-gnu@1.7.26':
-    resolution: {integrity: sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz}
+    resolution: {integrity: sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.7.26':
-    resolution: {integrity: sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz}
+    resolution: {integrity: sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.7.26':
-    resolution: {integrity: sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz}
+    resolution: {integrity: sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.7.26':
-    resolution: {integrity: sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz}
+    resolution: {integrity: sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.7.26':
-    resolution: {integrity: sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==, tarball: https://registry.npmmirror.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz}
+    resolution: {integrity: sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
   '@swc/core-win32-ia32-msvc@1.7.26':
-    resolution: {integrity: sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==, tarball: https://registry.npmmirror.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz}
+    resolution: {integrity: sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
   '@swc/core-win32-x64-msvc@1.7.26':
-    resolution: {integrity: sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==, tarball: https://registry.npmmirror.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz}
+    resolution: {integrity: sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
 
   '@swc/core@1.7.26':
-    resolution: {integrity: sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==, tarball: https://registry.npmmirror.com/@swc/core/-/core-1.7.26.tgz}
+    resolution: {integrity: sha512-f5uYFf+TmMQyYIoxkn/evWhNGuUzC730dFwAKGwBVHHVoPyak1/GvJUm6i1SKl+2Hrj9oN0i3WSoWWZ4pgI8lw==}
     engines: {node: '>=10'}
     peerDependencies:
       '@swc/helpers': '*'
@@ -1602,13 +1605,13 @@ packages:
         optional: true
 
   '@swc/counter@0.1.3':
-    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==, tarball: https://registry.npmmirror.com/@swc/counter/-/counter-0.1.3.tgz}
+    resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
   '@swc/types@0.1.12':
-    resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==, tarball: https://registry.npmmirror.com/@swc/types/-/types-0.1.12.tgz}
+    resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
 
   '@sxzz/popperjs-es@2.11.7':
-    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==, tarball: https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz}
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
 
   '@transloadit/prettier-bytes@0.0.7':
     resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
@@ -1756,10 +1759,10 @@ packages:
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
 
   '@types/video.js@7.3.58':
-    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==, tarball: https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz}
+    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==}
 
   '@types/web-bluetooth@0.0.16':
-    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==, tarball: https://registry.npmmirror.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz}
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
 
   '@types/web-bluetooth@0.0.20':
     resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==}
@@ -2105,19 +2108,19 @@ packages:
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
 
   '@vueuse/core@9.13.0':
-    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==, tarball: https://registry.npmmirror.com/@vueuse/core/-/core-9.13.0.tgz}
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
   '@vueuse/metadata@10.9.0':
     resolution: {integrity: sha512-iddNbg3yZM0X7qFY2sAotomgdHK7YJ6sKUvQqbvwnf7TmaVPxS4EJydcNsVejNdS8iWCtDk+fYXr7E32nyTnGA==}
 
   '@vueuse/metadata@9.13.0':
-    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==, tarball: https://registry.npmmirror.com/@vueuse/metadata/-/metadata-9.13.0.tgz}
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
   '@vueuse/shared@10.9.0':
     resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
 
   '@vueuse/shared@9.13.0':
-    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==, tarball: https://registry.npmmirror.com/@vueuse/shared/-/shared-9.13.0.tgz}
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
 
   '@wangeditor/basic-modules@1.1.7':
     resolution: {integrity: sha512-cY9CPkLJaqF05STqfpZKWG4LpxTMeGSIIF1fHvfm/mz+JXatCagjdkbxdikOuKYlxDdeqvOeBmsUBItufDLXZg==}
@@ -2325,7 +2328,7 @@ packages:
     engines: {node: '>=8'}
 
   async-validator@4.2.5:
-    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==, tarball: https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz}
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
 
   async@3.2.5:
     resolution: {integrity: sha512-baNZyqaaLhyLVKm/DlvdW051MSgO6b8eVfIezl9E5PqWxFgzLm/wQntEW4zOytVburDEr0JlALEpdOFwvErLsg==}
@@ -3049,7 +3052,7 @@ packages:
     resolution: {integrity: sha512-9ItEpeu15hW5m8jKdriL+BQrgwDTXEL9pn4SkillWFu73ZNNNQ2BKKLS+ZHv2vC9UkNhosAeyfxOf/5OSeTCPA==}
 
   element-plus@2.8.4:
-    resolution: {integrity: sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==, tarball: https://registry.npmmirror.com/element-plus/-/element-plus-2.8.4.tgz}
+    resolution: {integrity: sha512-ZlVAdUOoJliv4kW3ntWnnSHMT+u/Os7mXJjk2xzOlqNeHaI2/ozlF+R58ZCEak8ZnDi6+5A2viWEYRsq64IuiA==}
     peerDependencies:
       vue: ^3.2.0
 
@@ -3134,7 +3137,7 @@ packages:
     engines: {node: '>=6'}
 
   escape-html@1.0.3:
-    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==, tarball: https://registry.npmmirror.com/escape-html/-/escape-html-1.0.3.tgz}
+    resolution: {integrity: sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==}
 
   escape-string-regexp@1.0.5:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
@@ -3376,7 +3379,7 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
   fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
@@ -3993,7 +3996,7 @@ packages:
     resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
 
   lodash-unified@1.0.3:
-    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==, tarball: https://registry.npmmirror.com/lodash-unified/-/lodash-unified-1.0.3.tgz}
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
     peerDependencies:
       '@types/lodash-es': '*'
       lodash: '*'
@@ -4129,7 +4132,7 @@ packages:
     resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
 
   memoize-one@6.0.0:
-    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==, tarball: https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz}
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
 
   meow@12.1.1:
     resolution: {integrity: sha512-BhXM0Au22RwUneMPwSCnyhTOizdWoIEPU9sp0Aqa1PnDMR5Wv2FGXYDjuzJEIX+Eo2Rb8xuYe5jrnm5QowQFkw==}
@@ -4300,7 +4303,7 @@ packages:
     engines: {node: '>=0.10.0'}
 
   normalize-wheel-es@1.2.0:
-    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==, tarball: https://registry.npmmirror.com/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz}
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
 
   npm-run-path@4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
@@ -4920,6 +4923,9 @@ packages:
   sortablejs@1.14.0:
     resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
 
+  sortablejs@1.15.3:
+    resolution: {integrity: sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg==}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -5336,7 +5342,7 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
   uuid@10.0.0:
-    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==, tarball: https://registry.npmmirror.com/uuid/-/uuid-10.0.0.tgz}
+    resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==}
     hasBin: true
 
   vary@1.1.2:
@@ -5386,7 +5392,7 @@ packages:
       vite: '>=2.0.0'
 
   vite-plugin-top-level-await@1.4.4:
-    resolution: {integrity: sha512-QyxQbvcMkgt+kDb12m2P8Ed35Sp6nXP+l8ptGrnHV9zgYDUpraO0CPdlqLSeBqvY2DToR52nutDG7mIHuysdiw==, tarball: https://registry.npmmirror.com/vite-plugin-top-level-await/-/vite-plugin-top-level-await-1.4.4.tgz}
+    resolution: {integrity: sha512-QyxQbvcMkgt+kDb12m2P8Ed35Sp6nXP+l8ptGrnHV9zgYDUpraO0CPdlqLSeBqvY2DToR52nutDG7mIHuysdiw==}
     peerDependencies:
       vite: '>=2.8'
 
@@ -10788,6 +10794,8 @@ snapshots:
 
   sortablejs@1.14.0: {}
 
+  sortablejs@1.15.3: {}
+
   source-map-js@1.2.0: {}
 
   source-map-resolve@0.5.3:
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
new file mode 100644
index 00000000..fa891e60
--- /dev/null
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -0,0 +1,404 @@
+<template>
+  <!-- 默认使其全部展开 -->
+  <el-collapse :modelValue="title">
+    <el-collapse-item :name="title">
+      <template #icon="{ isActive }">
+        <div
+          class="ml-20px flex items-center"
+          :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+        >
+          <Icon icon="ep:arrow-down-bold" color="#999" />
+        </div>
+        <div class="ml-auto mr-30px">
+          <template v-if="!isSorting">
+            <el-button link type="info" class="mr-10px" @click.stop="handleSort">
+              <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+              排序
+            </el-button>
+            <el-button link type="info" @click.stop="handleGroup">
+              <Icon icon="ep:setting" class="mr-5px" />
+              分组
+            </el-button>
+          </template>
+          <template v-else>
+            <el-button @click.stop="cancelSort"> 取 消 </el-button>
+            <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+          </template>
+        </div>
+      </template>
+      <template #title>
+        <div class="flex items-center">
+          <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
+          <div class="color-gray-600 text-16px"> ({{ dataList?.length || 0 }}) </div>
+        </div>
+      </template>
+
+      <el-table
+        :class="title"
+        ref="tableRef"
+        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0' }"
+        :data="dataList"
+      >
+        <el-table-column label="流程名" prop="name" min-width="150">
+          <template #default="scope">
+            <div class="flex items-center">
+              <el-tooltip content="拖动排序" v-if="isSorting">
+                <Icon
+                  icon="ic:round-drag-indicator"
+                  class="drag-icon cursor-move text-#8a909c mr-10px"
+                />
+              </el-tooltip>
+              <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
+              {{ scope.row.name }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column label="可见范围" prop="startUserIds" min-width="100">
+          <template #default="scope">
+            <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+              全部可见
+            </el-text>
+            <el-text v-else-if="scope.row.startUsers.length == 1">
+              {{ scope.row.startUsers[0].nickname }}
+            </el-text>
+            <el-text v-else>
+              <el-tooltip
+                class="box-item"
+                effect="dark"
+                placement="top"
+                :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+              >
+                {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+              </el-tooltip>
+            </el-text>
+          </template>
+        </el-table-column>
+        <el-table-column label="表单信息" prop="formType" min-width="200">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.formType === 10"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formName }}</span>
+            </el-button>
+            <el-button
+              v-else-if="scope.row.formType === 20"
+              type="primary"
+              link
+              @click="handleFormDetail(scope.row)"
+            >
+              <span>{{ scope.row.formCustomCreatePath }}</span>
+            </el-button>
+            <label v-else>暂无表单</label>
+          </template>
+        </el-table-column>
+        <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
+          <template #default="scope">
+            <span v-if="scope.row.processDefinition">
+              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+            </span>
+            <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+              v{{ scope.row.processDefinition.version }}
+            </el-tag>
+            <el-tag v-else type="warning">未部署</el-tag>
+            <el-tag
+              v-if="scope.row.processDefinition?.suspensionState === 2"
+              type="warning"
+              class="ml-10px"
+            >
+              已停用
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" fixed="right">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              @click="openForm('update', scope.row.id)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              修改
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDesign(scope.row)"
+              v-hasPermi="['bpm:model:update']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              设计
+            </el-button>
+            <el-button
+              link
+              class="!ml-5px"
+              type="primary"
+              @click="handleDeploy(scope.row)"
+              v-hasPermi="['bpm:model:deploy']"
+              :disabled="!isManagerUser(scope.row)"
+            >
+              发布
+            </el-button>
+            <el-dropdown
+              class="!align-middle ml-5px"
+              @command="(command) => handleCommand(command, scope.row)"
+              v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+            >
+              <el-button type="primary" link>更多</el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item
+                    command="handleDefinitionList"
+                    v-if="checkPermi(['bpm:process-definition:query'])"
+                  >
+                    历史
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    command="handleChangeState"
+                    v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                  </el-dropdown-item>
+                  <el-dropdown-item
+                    type="danger"
+                    command="handleDelete"
+                    v-if="checkPermi(['bpm:model:delete'])"
+                    :disabled="!isManagerUser(scope.row)"
+                  >
+                    删除
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-collapse-item>
+  </el-collapse>
+</template>
+
+<script lang="ts" setup>
+// 拖拽组件
+import Sortable from 'sortablejs'
+import { propTypes } from '@/utils/propTypes'
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+import { useAppStore } from '@/store/modules/app'
+import { cloneDeep } from 'lodash-es'
+
+defineOptions({ name: 'BpmModel' })
+
+const props = defineProps({
+  // 分类后的数据
+  dataList: propTypes.object.def([]),
+  title: propTypes.string.def('')
+})
+const emit = defineEmits(['success'])
+const appStore = useAppStore()
+const message = useMessage() // 消息弹窗
+const isDark = computed(() => appStore.getIsDark)
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+const isSorting = ref(false) // 是否正处于排序状态
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    emit('success')
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/* 排序 */
+const handleSort = () => {
+  isSorting.value = true
+  initSort()
+}
+
+const saveSort = () => {
+  // 接口调用
+  console.log(tableData.value)
+  cancelSort()
+}
+
+const cancelSort = () => {
+  isSorting.value = false
+}
+
+/* 分组 */
+const handleGroup = () => {
+  console.log('分组')
+}
+const tableRef = ref()
+// 创建拖拽实例
+const initSort = () => {
+  const table = document.querySelector(`.${props.title} .el-table__body-wrapper tbody`)
+  Sortable.create(table, {
+    group: 'shared',
+    animation: 150,
+    draggable: '.el-table__row',
+    handle: '.drag-icon',
+    // 结束拖动事件
+    onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
+      if (oldDraggableIndex !== newDraggableIndex) {
+        tableData.value.splice(
+          newDraggableIndex,
+          0,
+          tableData.value.splice(oldDraggableIndex, 1)[0]
+        )
+      }
+    }
+  })
+}
+const tableData: any = ref([])
+onMounted(() => {
+  tableData.value = cloneDeep(props.dataList)
+})
+</script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 6px;
+  }
+  .el-collapse,
+  .el-collapse-item__header,
+  .el-collapse-item__wrap {
+    border: none;
+  }
+  .el-collapse-item__arrow {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 500;
+  }
+}
+</style>
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 4534ec61..2f2929ad 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,211 +1,69 @@
 <template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+    <div class="flex justify-between pl-20px items-center">
+      <h3 class="font-extrabold">表单管理</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px flex"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item align="right" prop="key" class="ml-auto">
+          <el-input
+            v-model="queryParams.key"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          >
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          </el-button>
+        </el-form-item>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
+        <el-form-item>
+          <el-dropdown placement="bottom-end">
+            <el-button class="w-30px" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
+                <el-dropdown-item>
+                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+                  新建分组
                 </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
+                <el-dropdown-item>
+                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+                  分组排序
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-divider />
+
+    <!-- 分类卡片组 -->
+    <div class="px-15px">
+      <ContentWrap
+        v-loading="loading"
+        :body-style="{ padding: 0 }"
+        v-for="(list, title) in categoryGroup"
+        :key="title"
+      >
+        <CategoryDraggableModel :dataList="list" :title="title" @success="getList" />
+      </ContentWrap>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
@@ -218,26 +76,15 @@
 </template>
 
 <script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
+import { groupBy } from 'lodash-es'
+import { mockData } from './mock'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -246,15 +93,16 @@ const queryParams = reactive({
   category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryGroup = ref<any>({}) // 按照category分组的数据
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
     const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    data.list = mockData
+    categoryGroup.value = groupBy(data.list, 'categoryName')
   } finally {
     loading.value = false
   }
@@ -266,139 +114,20 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleWorkflowDesignEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
-  }
-}
-
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
-}
 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
deleted file mode 100644
index 4f2ba3c3..00000000
--- a/src/views/bpm/model/index_new.vue
+++ /dev/null
@@ -1,456 +0,0 @@
-<template>
-  <ContentWrap>
-    <div class="flex justify-between pl-20px items-center">
-      <h3 class="font-extrabold">表单管理</h3>
-      <!-- 搜索工作栏 -->
-      <el-form
-        class="-mb-15px flex"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <el-form-item align="right" prop="key" class="ml-auto">
-          <el-input
-            v-model="queryParams.key"
-            placeholder="搜索流程"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          >
-            <template #prefix>
-              <Icon icon="ep:search" class="mx-10px" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
-          </el-button>
-        </el-form-item>
-
-        <el-form-item>
-          <el-dropdown placement="bottom-end">
-            <el-button class="w-30px" plain>
-              <Icon icon="ep:setting" />
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item>
-                  <Icon icon="ep:circle-plus" size="13" class="mr-5px" />
-                  新建分组
-                </el-dropdown-item>
-                <el-dropdown-item>
-                  <Icon icon="fa:sort-amount-desc" size="13" class="mr-5px" />
-                  分组排序
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <el-divider />
-
-    <!-- 分类卡片组 -->
-    <div class="px-15px">
-      <ContentWrap :body-style="{ padding: 0 }" v-for="(list, title) in categoryGroup" :key="title">
-        <!-- 默认使其全部展开 -->
-        <el-collapse :modelValue="title">
-          <el-collapse-item :name="title">
-            <template #icon="{ isActive }">
-              <div
-                class="ml-20px flex items-center"
-                :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
-              >
-                <Icon icon="ep:arrow-down-bold" color="#999" />
-              </div>
-              <div class="ml-auto mr-30px">
-                <el-button link type="info" class="mr-10px" @click.stop="handleSort">
-                  <Icon icon="fa:sort-amount-desc" class="mr-5px" />
-                  排序
-                </el-button>
-                <el-button link type="info" @click.stop="handleGroup">
-                  <Icon icon="ep:setting" class="mr-5px" />
-                  分组
-                </el-button>
-              </div>
-            </template>
-            <template #title>
-              <div class="flex items-center">
-                <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
-                <div class="color-gray-600 text-16px"> ({{ list?.length || 0 }}) </div>
-              </div>
-            </template>
-
-            <el-table
-              :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0' }"
-              v-loading="loading"
-              :data="list"
-            >
-              <el-table-column label="流程名" prop="name" min-width="150">
-                <template #default="scope">
-                  <div class="flex items-center">
-                    <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
-                    {{ scope.row.name }}
-                  </div>
-                </template>
-              </el-table-column>
-              <el-table-column label="可见范围" prop="startUserIds" min-width="100">
-                <template #default="scope">
-                  <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-                    全部可见
-                  </el-text>
-                  <el-text v-else-if="scope.row.startUsers.length == 1">
-                    {{ scope.row.startUsers[0].nickname }}
-                  </el-text>
-                  <el-text v-else>
-                    <el-tooltip
-                      class="box-item"
-                      effect="dark"
-                      placement="top"
-                      :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-                    >
-                      {{ scope.row.startUsers[0].nickname }}等
-                      {{ scope.row.startUsers.length }} 人可见
-                    </el-tooltip>
-                  </el-text>
-                </template>
-              </el-table-column>
-              <el-table-column label="表单信息" prop="formType" min-width="200">
-                <template #default="scope">
-                  <el-button
-                    v-if="scope.row.formType === 10"
-                    type="primary"
-                    link
-                    @click="handleFormDetail(scope.row)"
-                  >
-                    <span>{{ scope.row.formName }}</span>
-                  </el-button>
-                  <el-button
-                    v-else-if="scope.row.formType === 20"
-                    type="primary"
-                    link
-                    @click="handleFormDetail(scope.row)"
-                  >
-                    <span>{{ scope.row.formCustomCreatePath }}</span>
-                  </el-button>
-                  <label v-else>暂无表单</label>
-                </template>
-              </el-table-column>
-              <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
-                <template #default="scope">
-                  <span v-if="scope.row.processDefinition">
-                    {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-                  </span>
-                  <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-                    v{{ scope.row.processDefinition.version }}
-                  </el-tag>
-                  <el-tag v-else type="warning">未部署</el-tag>
-                  <el-tag
-                    v-if="scope.row.processDefinition?.suspensionState === 2"
-                    type="warning"
-                    class="ml-10px"
-                  >
-                    已停用
-                  </el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column label="操作" width="200" fixed="right">
-                <template #default="scope">
-                  <el-button
-                    link
-                    type="primary"
-                    @click="openForm('update', scope.row.id)"
-                    v-hasPermi="['bpm:model:update']"
-                    :disabled="!isManagerUser(scope.row)"
-                  >
-                    修改
-                  </el-button>
-                  <el-button
-                    link
-                    class="!ml-5px"
-                    type="primary"
-                    @click="handleDesign(scope.row)"
-                    v-hasPermi="['bpm:model:update']"
-                    :disabled="!isManagerUser(scope.row)"
-                  >
-                    设计
-                  </el-button>
-                  <el-button
-                    link
-                    class="!ml-5px"
-                    type="primary"
-                    @click="handleDeploy(scope.row)"
-                    v-hasPermi="['bpm:model:deploy']"
-                    :disabled="!isManagerUser(scope.row)"
-                  >
-                    发布
-                  </el-button>
-                  <el-dropdown
-                    class="!align-middle ml-5px"
-                    @command="(command) => handleCommand(command, scope.row)"
-                    v-hasPermi="[
-                      'bpm:process-definition:query',
-                      'bpm:model:update',
-                      'bpm:model:delete'
-                    ]"
-                  >
-                    <el-button type="primary" link>更多</el-button>
-                    <template #dropdown>
-                      <el-dropdown-menu>
-                        <el-dropdown-item
-                          command="handleDefinitionList"
-                          v-if="checkPermi(['bpm:process-definition:query'])"
-                        >
-                          历史
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                          command="handleChangeState"
-                          v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                          :disabled="!isManagerUser(scope.row)"
-                        >
-                          {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                        </el-dropdown-item>
-                        <el-dropdown-item
-                          type="danger"
-                          command="handleDelete"
-                          v-if="checkPermi(['bpm:model:delete'])"
-                          :disabled="!isManagerUser(scope.row)"
-                        >
-                          删除
-                        </el-dropdown-item>
-                      </el-dropdown-menu>
-                    </template>
-                  </el-dropdown>
-                </template>
-              </el-table-column>
-            </el-table>
-          </el-collapse-item>
-        </el-collapse>
-      </ContentWrap>
-    </div>
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-  </Dialog>
-</template>
-
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
-import { useAppStore } from '@/store/modules/app'
-import { groupBy } from 'lodash-es'
-
-defineOptions({ name: 'BpmModel' })
-
-const appStore = useAppStore()
-const message = useMessage() // 消息弹窗
-const isDark = computed(() => appStore.getIsDark)
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-const loading = ref(true) // 列表的加载中
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-const categoryGroup = ref<any>({}) // 按照category分组的数据
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
-    const data = await ModelApi.getModelPage(queryParams)
-    categoryGroup.value = groupBy(data.list, 'categoryName')
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleWorkflowDesignEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
-  }
-}
-
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
-}
-
-/* 排序 */
-const handleSort = () => {
-  console.log('排序')
-}
-
-/* 分组 */
-const handleGroup = () => {
-  console.log('分组')
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-})
-</script>
-
-<style lang="scss" scoped>
-:deep() {
-  .el-form--inline .el-form-item {
-    margin-right: 10px;
-  }
-  .el-divider--horizontal {
-    margin-top: 6px;
-  }
-  .el-collapse,
-  .el-collapse-item__header,
-  .el-collapse-item__wrap {
-    border: none;
-  }
-  .el-collapse-item__arrow {
-    margin-left: 10px;
-    font-size: 20px;
-    font-weight: 500;
-  }
-}
-</style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
new file mode 100644
index 00000000..4534ec61
--- /dev/null
+++ b/src/views/bpm/model/index_old.vue
@@ -0,0 +1,404 @@
+<template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>
diff --git a/src/views/bpm/model/mock.js b/src/views/bpm/model/mock.js
new file mode 100644
index 00000000..93c4b60b
--- /dev/null
+++ b/src/views/bpm/model/mock.js
@@ -0,0 +1,202 @@
+export const mockData = [
+  {
+    key: 'out_apply',
+    name: '外出申请',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/OA/goingOut/create',
+    formCustomViewPath: '/OA/goingOut/detail',
+    id: 'ff8f8bab-4d4e-11ef-8201-0242ac130002',
+    formName: null,
+    createTime: 1722218716216,
+    processDefinition: {
+      id: 'out_apply:4:7f56d464-4eec-11ef-8c3a-0242ac130002',
+      version: 4,
+      deploymentTime: 1722396312641,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'contract_change_history',
+    name: '合同变更申请',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/changeRecord/detail',
+    formCustomViewPath: '/project/changeRecord/detail',
+    id: '0c689067-3a92-11ef-b7f0-0242ac130002',
+    formName: null,
+    createTime: 1720158441959,
+    processDefinition: {
+      id: 'contract_change_history:1:f69fff4f-3a9a-11ef-b7f0-0242ac130002',
+      version: 1,
+      deploymentTime: 1720162270788,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'expenses_claim',
+    name: '费用报销申请',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/finance/reimbursement/detail',
+    formCustomViewPath: '/finance/reimbursement/detail',
+    id: '0310ad0c-351e-11ef-a653-0242ac130002',
+    formName: null,
+    createTime: 1719558848849,
+    processDefinition: {
+      id: 'expenses_claim:5:a043a1d8-4eec-11ef-8c3a-0242ac130002',
+      version: 5,
+      deploymentTime: 1722396367911,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'out_business_apply',
+    name: '申请单',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/finance/businessTripApply/detail',
+    formCustomViewPath: '/finance/businessTripApply/detail',
+    id: '279e27a4-3393-11ef-8401-0242ac130002',
+    formName: null,
+    createTime: 1719389258966,
+    processDefinition: {
+      id: 'out_business_apply:9:a7b2d4e2-430f-11ef-876f-0242ac130002',
+      version: 9,
+      deploymentTime: 1721091998780,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project_delay_application',
+    name: '项目延时申请',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/workHourDelay/create',
+    formCustomViewPath: '/project/workHourDelay/detail',
+    id: '46d87275-27c7-11ef-b258-0242ac130002',
+    formName: null,
+    createTime: 1718092231234,
+    processDefinition: {
+      id: 'b7ed308a-430f-11ef-876f-0242ac130002',
+      version: 5,
+      deploymentTime: 1721092026059,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project_result_approval',
+    name: '项目成果审核',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/projectTaskResult/detail',
+    formCustomViewPath: '/project/projectTaskResult/detail',
+    id: '4a15d4f8-23cc-11ef-8dd0-0242ac130002',
+    formName: null,
+    createTime: 1717654579502,
+    processDefinition: {
+      id: 'dd3cc360-4eec-11ef-8c3a-0242ac130002',
+      version: 6,
+      deploymentTime: 1722396470232,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_contract',
+    name: '合同管理',
+    description: null,
+    category: '2',
+    categoryName: '测试2',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/sales/contract/create',
+    formCustomViewPath: '/sales/contract/detail',
+    id: '8317cb71-0d1a-11ef-8445-70b5e844a623',
+    formName: null,
+    createTime: 1715159299146,
+    processDefinition: {
+      id: 'pms_contract:5:c7d6012a-29f2-11ef-a08d-0242ac130002',
+      version: 5,
+      deploymentTime: 1718330818270,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_consult_task_act',
+    name: '咨询任务书',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/consultTask/create',
+    formCustomViewPath: '/consultTask/detail',
+    id: '47fad8e4-0b91-11ef-b841-70b5e844a623',
+    formName: null,
+    createTime: 1714990407756,
+    processDefinition: {
+      id: 'pms_consult_task_act:1:67c2ae59-0b91-11ef-b841-70b5e844a623',
+      version: 1,
+      deploymentTime: 1714990460960,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'pms_project',
+    name: '立项管理',
+    description: null,
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/project/applyProject/create',
+    formCustomViewPath: '/project/applyProject/detail',
+    id: 'f0ba6bde-0b90-11ef-b841-70b5e844a623',
+    formName: null,
+    createTime: 1714990261372,
+    processDefinition: {
+      id: 'pms_project:6:b9e4e33b-2c6c-11ef-8386-0242ac130002',
+      version: 6,
+      deploymentTime: 1718603095738,
+      suspensionState: 1
+    }
+  },
+  {
+    key: 'invoice_apply_manage',
+    name: '开票申请',
+    description: 'asdas',
+    category: '1',
+    categoryName: '测试1',
+    formType: 20,
+    formId: null,
+    formCustomCreatePath: '/sales/invoice/create',
+    formCustomViewPath: '/sales/invoice/detail',
+    id: '7ec07575-0605-11ef-ab76-cc96e508c010',
+    formName: null,
+    createTime: 1714380614292,
+    processDefinition: {
+      id: 'invoice_apply_manage:8:665a8c40-44c9-11ef-9813-0242ac130002',
+      version: 8,
+      deploymentTime: 1721281726671,
+      suspensionState: 1
+    }
+  }
+]

From ea02192b6473d550cafb3ccfd5b0b45368969030 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 15 Oct 2024 08:39:11 +0800
Subject: [PATCH 016/109] chore

---
 src/views/bpm/model/index.vue     | 399 ++++++++++++++++++++++++-----
 src/views/bpm/model/index_new.vue | 133 ++++++++++
 src/views/bpm/model/index_old.vue | 404 ------------------------------
 3 files changed, 468 insertions(+), 468 deletions(-)
 create mode 100644 src/views/bpm/model/index_new.vue
 delete mode 100644 src/views/bpm/model/index_old.vue

diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 2f2929ad..4534ec61 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,69 +1,211 @@
 <template>
-  <ContentWrap>
-    <div class="flex justify-between pl-20px items-center">
-      <h3 class="font-extrabold">表单管理</h3>
-      <!-- 搜索工作栏 -->
-      <el-form
-        class="-mb-15px flex"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-      >
-        <el-form-item align="right" prop="key" class="ml-auto">
-          <el-input
-            v-model="queryParams.key"
-            placeholder="搜索流程"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          >
-            <template #prefix>
-              <Icon icon="ep:search" class="mx-10px" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
-          </el-button>
-        </el-form-item>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
 
-        <el-form-item>
-          <el-dropdown placement="bottom-end">
-            <el-button class="w-30px" plain>
-              <Icon icon="ep:setting" />
-            </el-button>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item>
-                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
-                  新建分组
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
                 </el-dropdown-item>
-                <el-dropdown-item>
-                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
-                  分组排序
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
-        </el-form-item>
-      </el-form>
-    </div>
-
-    <el-divider />
-
-    <!-- 分类卡片组 -->
-    <div class="px-15px">
-      <ContentWrap
-        v-loading="loading"
-        :body-style="{ padding: 0 }"
-        v-for="(list, title) in categoryGroup"
-        :key="title"
-      >
-        <CategoryDraggableModel :dataList="list" :title="title" @success="getList" />
-      </ContentWrap>
-    </div>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
@@ -76,15 +218,26 @@
 </template>
 
 <script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
 import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
 import ModelForm from './ModelForm.vue'
-import { groupBy } from 'lodash-es'
-import { mockData } from './mock'
-import CategoryDraggableModel from './CategoryDraggableModel.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
 
 defineOptions({ name: 'BpmModel' })
 
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
 const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -93,16 +246,15 @@ const queryParams = reactive({
   category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryGroup = ref<any>({}) // 按照category分组的数据
+const categoryList = ref([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
     const data = await ModelApi.getModelPage(queryParams)
-    data.list = mockData
-    categoryGroup.value = groupBy(data.list, 'categoryName')
+    list.value = data.list
+    total.value = data.total
   } finally {
     loading.value = false
   }
@@ -114,20 +266,139 @@ const handleQuery = () => {
   getList()
 }
 
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
   rule: [],
   option: {}
 })
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
 
 /** 初始化 **/
 onMounted(async () => {
   await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
 })
 </script>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
new file mode 100644
index 00000000..2f2929ad
--- /dev/null
+++ b/src/views/bpm/model/index_new.vue
@@ -0,0 +1,133 @@
+<template>
+  <ContentWrap>
+    <div class="flex justify-between pl-20px items-center">
+      <h3 class="font-extrabold">表单管理</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="-mb-15px flex"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+      >
+        <el-form-item align="right" prop="key" class="ml-auto">
+          <el-input
+            v-model="queryParams.key"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          >
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+          </el-button>
+        </el-form-item>
+
+        <el-form-item>
+          <el-dropdown placement="bottom-end">
+            <el-button class="w-30px" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+                  新建分组
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+                  分组排序
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-divider />
+
+    <!-- 分类卡片组 -->
+    <div class="px-15px">
+      <ContentWrap
+        v-loading="loading"
+        :body-style="{ padding: 0 }"
+        v-for="(list, title) in categoryGroup"
+        :key="title"
+      >
+        <CategoryDraggableModel :dataList="list" :title="title" @success="getList" />
+      </ContentWrap>
+    </div>
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import * as ModelApi from '@/api/bpm/model'
+import ModelForm from './ModelForm.vue'
+import { groupBy } from 'lodash-es'
+import { mockData } from './mock'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
+
+defineOptions({ name: 'BpmModel' })
+
+const loading = ref(true) // 列表的加载中
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryGroup = ref<any>({}) // 按照category分组的数据
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+    const data = await ModelApi.getModelPage(queryParams)
+    data.list = mockData
+    categoryGroup.value = groupBy(data.list, 'categoryName')
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+})
+</script>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
deleted file mode 100644
index 4534ec61..00000000
--- a/src/views/bpm/model/index_old.vue
+++ /dev/null
@@ -1,404 +0,0 @@
-<template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
-                </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-
-  <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-  </Dialog>
-</template>
-
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
-
-defineOptions({ name: 'BpmModel' })
-
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-
-const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
-
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleWorkflowDesignEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
-  }
-}
-
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
-})
-</script>

From a033706fb488540e4dc3042a94fdb6424d2f3077 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 14 Oct 2024 15:17:05 +0800
Subject: [PATCH 017/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=88=97=E8=A1=A8=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=B8=8E=E6=96=87=E5=AD=97=E7=BB=86=E8=8A=82=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 49 ++++++++++++-------
 src/views/bpm/model/index_new.vue             |  8 +--
 2 files changed, 36 insertions(+), 21 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index fa891e60..f118f9f7 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -9,7 +9,7 @@
         >
           <Icon icon="ep:arrow-down-bold" color="#999" />
         </div>
-        <div class="ml-auto mr-30px">
+        <div class="ml-auto mr-45px">
           <template v-if="!isSorting">
             <el-button link type="info" class="mr-10px" @click.stop="handleSort">
               <Icon icon="fa:sort-amount-desc" class="mr-5px" />
@@ -36,7 +36,8 @@
       <el-table
         :class="title"
         ref="tableRef"
-        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0' }"
+        :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
+        :cell-style="{ paddingLeft: '10px' }"
         :data="dataList"
       >
         <el-table-column label="流程名" prop="name" min-width="150">
@@ -48,7 +49,7 @@
                   class="drag-icon cursor-move text-#8a909c mr-10px"
                 />
               </el-tooltip>
-              <el-image :src="scope.row.icon" class="h-32px w-32px mr-10px rounded" />
+              <el-image :src="scope.row.icon" class="h-38px w-38px mr-10px rounded" />
               {{ scope.row.name }}
             </div>
           </template>
@@ -96,20 +97,22 @@
         </el-table-column>
         <el-table-column label="最后发布" prop="deploymentTime" min-width="250">
           <template #default="scope">
-            <span v-if="scope.row.processDefinition">
-              {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-            </span>
-            <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-              v{{ scope.row.processDefinition.version }}
-            </el-tag>
-            <el-tag v-else type="warning">未部署</el-tag>
-            <el-tag
-              v-if="scope.row.processDefinition?.suspensionState === 2"
-              type="warning"
-              class="ml-10px"
-            >
-              已停用
-            </el-tag>
+            <div class="flex items-center">
+              <span v-if="scope.row.processDefinition" class="w-150px">
+                {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+              </span>
+              <el-tag v-if="scope.row.processDefinition">
+                v{{ scope.row.processDefinition.version }}
+              </el-tag>
+              <el-tag v-else type="warning">未部署</el-tag>
+              <el-tag
+                v-if="scope.row.processDefinition?.suspensionState === 2"
+                type="warning"
+                class="ml-10px"
+              >
+                已停用
+              </el-tag>
+            </div>
           </template>
         </el-table-column>
         <el-table-column label="操作" width="200" fixed="right">
@@ -384,6 +387,9 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 :deep() {
+  .el-card {
+    border-radius: 8px;
+  }
   .el-form--inline .el-form-item {
     margin-right: 10px;
   }
@@ -400,5 +406,14 @@ onMounted(() => {
     font-size: 20px;
     font-weight: 500;
   }
+  .el-collapse-item__content {
+    padding-bottom: 0;
+  }
+  .el-table__cell {
+    border-bottom: none !important;
+  }
+  .el-table__row {
+    height: 68px;
+  }
 }
 </style>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 2f2929ad..13cd765c 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -1,7 +1,7 @@
 <template>
   <ContentWrap>
     <div class="flex justify-between pl-20px items-center">
-      <h3 class="font-extrabold">表单管理</h3>
+      <h3 class="font-extrabold">流程模型</h3>
       <!-- 搜索工作栏 -->
       <el-form
         class="-mb-15px flex"
@@ -25,7 +25,7 @@
         </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新建流程
+            <Icon icon="ep:plus" class="mr-5px" /> 新建模型
           </el-button>
         </el-form-item>
 
@@ -38,11 +38,11 @@
               <el-dropdown-menu>
                 <el-dropdown-item>
                   <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
-                  新建分组
+                  新建分类
                 </el-dropdown-item>
                 <el-dropdown-item>
                   <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
-                  分组排序
+                  分类排序
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>

From 57820cb3e18de92358c3ea4b335c1a64dac9993e Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 15 Oct 2024 15:17:40 +0800
Subject: [PATCH 018/109] =?UTF-8?q?faet:=20=E5=88=86=E7=B1=BB=E4=B8=8B?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=95=B0=E6=8D=AE=E6=8B=96=E6=8B=BD=E6=8E=92?=
 =?UTF-8?q?=E5=BA=8F=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0=EF=BC=9B=E9=87=8D?=
 =?UTF-8?q?=E5=91=BD=E5=90=8D=E5=88=86=E7=B1=BB=E5=BC=B9=E7=AA=97=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6=EF=BC=9B=E5=88=A0=E9=99=A4=E5=88=86=E7=B1=BB=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91=E5=88=A4=E6=96=AD=E4=B8=8E=E6=8F=90=E7=A4=BA=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 118 +++++++++++++++---
 src/views/bpm/model/index_new.vue             |  17 ++-
 2 files changed, 114 insertions(+), 21 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index f118f9f7..2a5c5e14 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -9,16 +9,24 @@
         >
           <Icon icon="ep:arrow-down-bold" color="#999" />
         </div>
-        <div class="ml-auto mr-45px">
+        <div class="ml-auto mr-45px flex items-center">
           <template v-if="!isSorting">
-            <el-button link type="info" class="mr-10px" @click.stop="handleSort">
+            <el-button link type="info" class="mr-20px" @click.stop="handleSort">
               <Icon icon="fa:sort-amount-desc" class="mr-5px" />
               排序
             </el-button>
-            <el-button link type="info" @click.stop="handleGroup">
-              <Icon icon="ep:setting" class="mr-5px" />
-              分组
-            </el-button>
+            <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+              <el-button link type="info" @click.stop="handleGroup">
+                <Icon icon="ep:setting" class="mr-5px" />
+                分类
+              </el-button>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                  <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </template>
           <template v-else>
             <el-button @click.stop="cancelSort"> 取 消 </el-button>
@@ -32,13 +40,13 @@
           <div class="color-gray-600 text-16px"> ({{ dataList?.length || 0 }}) </div>
         </div>
       </template>
-
       <el-table
         :class="title"
         ref="tableRef"
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
-        :data="dataList"
+        :data="tableData"
+        row-key="id"
       >
         <el-table-column label="流程名" prop="name" min-width="150">
           <template #default="scope">
@@ -183,10 +191,25 @@
       </el-table>
     </el-collapse-item>
   </el-collapse>
+
+  <!-- 弹窗：重命名分类 -->
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
+    <template #title>
+      <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
+    </template>
+    <div class="px-30px">
+      <el-input v-model="renameVal" />
+    </div>
+    <template #footer>
+      <div class="pr-25px pb-25px">
+        <el-button @click="renameVisible = false">取 消</el-button>
+        <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
+      </div>
+    </template>
+  </Dialog>
 </template>
 
 <script lang="ts" setup>
-// 拖拽组件
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -201,6 +224,7 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
+const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
   dataList: propTypes.object.def([]),
@@ -214,6 +238,8 @@ const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
 const isSorting = ref(false) // 是否正处于排序状态
+const tableData: any = ref([])
+const originalData: any = ref([]) // 原始数据
 
 /** '更多'操作按钮 */
 const handleCommand = (command: string, row: any) => {
@@ -232,6 +258,21 @@ const handleCommand = (command: string, row: any) => {
   }
 }
 
+/* '分类'操作按钮 */
+const handleCategoryCommand = (command: string) => {
+  switch (command) {
+    case 'handleRename':
+      renameVal.value = props.title
+      renameVisible.value = true
+      break
+    case 'handleDeleteGroup':
+      handleDeleteGroup()
+      break
+    default:
+      break
+  }
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -340,6 +381,8 @@ const isManagerUser = (row: any) => {
 
 /* 排序 */
 const handleSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(props.dataList)
   isSorting.value = true
   initSort()
 }
@@ -347,16 +390,20 @@ const handleSort = () => {
 const saveSort = () => {
   // 接口调用
   console.log(tableData.value)
-  cancelSort()
-}
-
-const cancelSort = () => {
+  // 刷新列表
+  emit('success')
   isSorting.value = false
 }
 
-/* 分组 */
+const cancelSort = () => {
+  // 恢复初始数据
+  tableData.value = cloneDeep(originalData.value)
+  isSorting.value = false
+}
+
+/* 分类 */
 const handleGroup = () => {
-  console.log('分组')
+  console.log('分类')
 }
 const tableRef = ref()
 // 创建拖拽实例
@@ -379,17 +426,48 @@ const initSort = () => {
     }
   })
 }
-const tableData: any = ref([])
-onMounted(() => {
+
+// 更新表格数据
+const updateTableData = () => {
   tableData.value = cloneDeep(props.dataList)
+}
+
+const renameVal = ref('')
+// 重命名弹窗确定
+const handleRenameConfirm = () => {
+  if (!renameVal.value) {
+    return message.warning('请输入名称')
+  }
+}
+
+// 删除分类
+const handleDeleteGroup = async () => {
+  if (props.dataList.length > 0) {
+    return message.warning('该分类下仍有流程定义,不允许删除')
+  }
+  await message.confirm('确认删除分类吗?')
+  // 实际调用接口删除
+}
+onMounted(() => {
+  updateTableData()
 })
+
+defineExpose({ updateTableData })
 </script>
 
+<style lang="scss">
+.rename-dialog.el-dialog {
+  padding: 0 !important;
+  .el-dialog__header {
+    border-bottom: none;
+  }
+  .el-dialog__footer {
+    border-top: none !important;
+  }
+}
+</style>
 <style lang="scss" scoped>
 :deep() {
-  .el-card {
-    border-radius: 8px;
-  }
   .el-form--inline .el-form-item {
     margin-right: 10px;
   }
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 13cd765c..4cf3e3b0 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -61,7 +61,12 @@
         v-for="(list, title) in categoryGroup"
         :key="title"
       >
-        <CategoryDraggableModel :dataList="list" :title="title" @success="getList" />
+        <CategoryDraggableModel
+          ref="draggableModelRef"
+          :dataList="list"
+          :title="title"
+          @success="getList"
+        />
       </ContentWrap>
     </div>
   </ContentWrap>
@@ -84,6 +89,7 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
+const draggableModelRef = ref()
 const loading = ref(true) // 列表的加载中
 const queryParams = reactive({
   pageNo: 1,
@@ -103,6 +109,7 @@ const getList = async () => {
     const data = await ModelApi.getModelPage(queryParams)
     data.list = mockData
     categoryGroup.value = groupBy(data.list, 'categoryName')
+    draggableModelRef.value?.updateTableData()
   } finally {
     loading.value = false
   }
@@ -131,3 +138,11 @@ onMounted(async () => {
   await getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-card {
+    border-radius: 8px;
+  }
+}
+</style>

From 2db1f726c3b9e38711ea48aa734b0e0fad2b62c0 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 15 Oct 2024 16:29:45 +0800
Subject: [PATCH 019/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=88=86=E7=B1=BB=E6=8E=92=E5=BA=8F=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 10 ++++-
 src/views/bpm/model/index_new.vue             | 42 +++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 2a5c5e14..51a53a07 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -36,6 +36,13 @@
       </template>
       <template #title>
         <div class="flex items-center">
+          <el-tooltip content="拖动排序" v-if="isCategorySorting">
+            <Icon
+              :size="22"
+              icon="ic:round-drag-indicator"
+              class="ml-10px category-drag-icon cursor-move text-#8a909c"
+            />
+          </el-tooltip>
           <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
           <div class="color-gray-600 text-16px"> ({{ dataList?.length || 0 }}) </div>
         </div>
@@ -228,7 +235,8 @@ const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
   dataList: propTypes.object.def([]),
-  title: propTypes.string.def('')
+  title: propTypes.string.def(''),
+  isCategorySorting: propTypes.bool.def(false)
 })
 const emit = defineEmits(['success'])
 const appStore = useAppStore()
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 4cf3e3b0..2942a25d 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -4,6 +4,7 @@
       <h3 class="font-extrabold">流程模型</h3>
       <!-- 搜索工作栏 -->
       <el-form
+        v-if="!isCategorySorting"
         class="-mb-15px flex"
         :model="queryParams"
         ref="queryFormRef"
@@ -30,17 +31,17 @@
         </el-form-item>
 
         <el-form-item>
-          <el-dropdown placement="bottom-end">
+          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
             <el-button class="w-30px" plain>
               <Icon icon="ep:setting" />
             </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item>
+                <el-dropdown-item command="handleAddCategory">
                   <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
                   新建分类
                 </el-dropdown-item>
-                <el-dropdown-item>
+                <el-dropdown-item command="handleSort">
                   <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
                   分类排序
                 </el-dropdown-item>
@@ -49,6 +50,10 @@
           </el-dropdown>
         </el-form-item>
       </el-form>
+      <template v-else>
+        <el-button type="primary" @click="cancelSort"> 取 消 </el-button>
+        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
+      </template>
     </div>
 
     <el-divider />
@@ -63,6 +68,7 @@
       >
         <CategoryDraggableModel
           ref="draggableModelRef"
+          :isCategorySorting="isCategorySorting"
           :dataList="list"
           :title="title"
           @success="getList"
@@ -91,6 +97,7 @@ defineOptions({ name: 'BpmModel' })
 
 const draggableModelRef = ref()
 const loading = ref(true) // 列表的加载中
+const isCategorySorting = ref(false) // 是否正处于排序状态
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -105,7 +112,7 @@ const categoryGroup = ref<any>({}) // 按照category分组的数据
 const getList = async () => {
   loading.value = true
   try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口，并且每条数据都应包含categoryId字段，用于重命名/删除分类。
     const data = await ModelApi.getModelPage(queryParams)
     data.list = mockData
     categoryGroup.value = groupBy(data.list, 'categoryName')
@@ -133,6 +140,33 @@ const formDetailPreview = ref({
   option: {}
 })
 
+/** 右上角设置按钮 */
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'handleAddCategory':
+      handleAddCategory()
+      break
+    case 'handleSort':
+      handleSort()
+      break
+    default:
+      break
+  }
+}
+
+// 新建分类
+const handleAddCategory = () => {}
+// 分类排序
+const handleSort = () => {
+  isCategorySorting.value = true
+}
+// 取消排序
+const cancelSort = () => {
+  isCategorySorting.value = false
+}
+// 保存排序
+const saveSort = () => {}
+
 /** 初始化 **/
 onMounted(async () => {
   await getList()

From 91ea4b7936bdd4a06a96c3d0b4e98bf27dff1d6a Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 16 Oct 2024 15:19:56 +0800
Subject: [PATCH 020/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=88=86=E7=B1=BB=E6=8E=92=E5=BA=8F=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E3=80=81=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96=E3=80=81?=
 =?UTF-8?q?=E6=8E=92=E5=BA=8F=E7=8A=B6=E6=80=81=E4=B8=8B=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E9=80=BB=E8=BE=91=E6=8E=A7=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 118 +++++-----
 src/views/bpm/model/index_new.vue             | 111 ++++++----
 src/views/bpm/model/mock.js                   | 202 ------------------
 3 files changed, 135 insertions(+), 296 deletions(-)
 delete mode 100644 src/views/bpm/model/mock.js

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 51a53a07..d322cf06 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,38 +1,51 @@
 <template>
   <!-- 默认使其全部展开 -->
-  <el-collapse :modelValue="title">
-    <el-collapse-item :name="title">
+  <el-collapse v-model="activeCollapse">
+    <el-collapse-item :name="categoryInfo.id">
       <template #icon="{ isActive }">
-        <div
-          class="ml-20px flex items-center"
-          :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
-        >
-          <Icon icon="ep:arrow-down-bold" color="#999" />
-        </div>
-        <div class="ml-auto mr-45px flex items-center">
-          <template v-if="!isSorting">
-            <el-button link type="info" class="mr-20px" @click.stop="handleSort">
-              <Icon icon="fa:sort-amount-desc" class="mr-5px" />
-              排序
-            </el-button>
-            <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
-              <el-button link type="info" @click.stop="handleGroup">
-                <Icon icon="ep:setting" class="mr-5px" />
-                分类
+        <div class="flex-1 flex" v-if="!isCategorySorting">
+          <div
+            class="ml-20px flex items-center"
+            :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+          >
+            <Icon icon="ep:arrow-down-bold" color="#999" />
+          </div>
+          <div class="ml-auto mr-45px flex items-center">
+            <template v-if="!isModelSorting">
+              <el-button
+                v-if="categoryInfo.modelList.length > 0"
+                link
+                type="info"
+                class="mr-20px"
+                @click.stop="handleSort"
+              >
+                <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+                排序
               </el-button>
-              <template #dropdown>
-                <el-dropdown-menu>
-                  <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                  <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
-                </el-dropdown-menu>
-              </template>
-            </el-dropdown>
-          </template>
-          <template v-else>
-            <el-button @click.stop="cancelSort"> 取 消 </el-button>
-            <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
-          </template>
+              <el-dropdown
+                @command="(command) => handleCategoryCommand(command)"
+                placement="bottom"
+              >
+                <el-button link type="info" @click.stop="handleGroup">
+                  <Icon icon="ep:setting" class="mr-5px" />
+                  分类
+                </el-button>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                    <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </template>
+            <template v-else>
+              <el-button @click.stop="cancelSort"> 取 消 </el-button>
+              <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+            </template>
+            <!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> -->
+          </div>
         </div>
+        <div></div>
       </template>
       <template #title>
         <div class="flex items-center">
@@ -43,12 +56,12 @@
               class="ml-10px category-drag-icon cursor-move text-#8a909c"
             />
           </el-tooltip>
-          <h3 class="ml-20px mr-8px text-18px">{{ title }}</h3>
-          <div class="color-gray-600 text-16px"> ({{ dataList?.length || 0 }}) </div>
+          <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
+          <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
         </div>
       </template>
       <el-table
-        :class="title"
+        :class="categoryInfo.name"
         ref="tableRef"
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
@@ -58,7 +71,7 @@
         <el-table-column label="流程名" prop="name" min-width="150">
           <template #default="scope">
             <div class="flex items-center">
-              <el-tooltip content="拖动排序" v-if="isSorting">
+              <el-tooltip content="拖动排序" v-if="isModelSorting">
                 <Icon
                   icon="ic:round-drag-indicator"
                   class="drag-icon cursor-move text-#8a909c mr-10px"
@@ -231,11 +244,11 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
+const activeCollapse: any = ref([])
 const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
-  dataList: propTypes.object.def([]),
-  title: propTypes.string.def(''),
+  categoryInfo: propTypes.object.def([]),
   isCategorySorting: propTypes.bool.def(false)
 })
 const emit = defineEmits(['success'])
@@ -245,7 +258,7 @@ const isDark = computed(() => appStore.getIsDark)
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
-const isSorting = ref(false) // 是否正处于排序状态
+const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
 
@@ -270,7 +283,7 @@ const handleCommand = (command: string, row: any) => {
 const handleCategoryCommand = (command: string) => {
   switch (command) {
     case 'handleRename':
-      renameVal.value = props.title
+      renameVal.value = props.categoryInfo.name
       renameVisible.value = true
       break
     case 'handleDeleteGroup':
@@ -390,8 +403,8 @@ const isManagerUser = (row: any) => {
 /* 排序 */
 const handleSort = () => {
   // 保存初始数据
-  originalData.value = cloneDeep(props.dataList)
-  isSorting.value = true
+  originalData.value = cloneDeep(props.categoryInfo.modelList)
+  isModelSorting.value = true
   initSort()
 }
 
@@ -400,13 +413,13 @@ const saveSort = () => {
   console.log(tableData.value)
   // 刷新列表
   emit('success')
-  isSorting.value = false
+  isModelSorting.value = false
 }
 
 const cancelSort = () => {
   // 恢复初始数据
   tableData.value = cloneDeep(originalData.value)
-  isSorting.value = false
+  isModelSorting.value = false
 }
 
 /* 分类 */
@@ -416,7 +429,7 @@ const handleGroup = () => {
 const tableRef = ref()
 // 创建拖拽实例
 const initSort = () => {
-  const table = document.querySelector(`.${props.title} .el-table__body-wrapper tbody`)
+  const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
   Sortable.create(table, {
     group: 'shared',
     animation: 150,
@@ -437,7 +450,7 @@ const initSort = () => {
 
 // 更新表格数据
 const updateTableData = () => {
-  tableData.value = cloneDeep(props.dataList)
+  tableData.value = cloneDeep(props.categoryInfo.modelList)
 }
 
 const renameVal = ref('')
@@ -450,17 +463,18 @@ const handleRenameConfirm = () => {
 
 // 删除分类
 const handleDeleteGroup = async () => {
-  if (props.dataList.length > 0) {
+  if (props.categoryInfo.modelList.length > 0) {
     return message.warning('该分类下仍有流程定义,不允许删除')
   }
   await message.confirm('确认删除分类吗?')
   // 实际调用接口删除
 }
-onMounted(() => {
-  updateTableData()
-})
 
-defineExpose({ updateTableData })
+watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
+
+defineExpose({
+  activeCollapse
+})
 </script>
 
 <style lang="scss">
@@ -476,12 +490,6 @@ defineExpose({ updateTableData })
 </style>
 <style lang="scss" scoped>
 :deep() {
-  .el-form--inline .el-form-item {
-    margin-right: 10px;
-  }
-  .el-divider--horizontal {
-    margin-top: 6px;
-  }
   .el-collapse,
   .el-collapse-item__header,
   .el-collapse-item__wrap {
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 2942a25d..82a12986 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -5,7 +5,7 @@
       <!-- 搜索工作栏 -->
       <el-form
         v-if="!isCategorySorting"
-        class="-mb-15px flex"
+        class="-mb-15px flex mr-10px"
         :model="queryParams"
         ref="queryFormRef"
         :inline="true"
@@ -50,36 +50,35 @@
           </el-dropdown>
         </el-form-item>
       </el-form>
-      <template v-else>
-        <el-button type="primary" @click="cancelSort"> 取 消 </el-button>
+      <div class="mr-20px" v-else>
+        <el-button @click="cancelSort"> 取 消 </el-button>
         <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
-      </template>
+      </div>
     </div>
 
     <el-divider />
 
     <!-- 分类卡片组 -->
     <div class="px-15px">
-      <ContentWrap
-        v-loading="loading"
-        :body-style="{ padding: 0 }"
-        v-for="(list, title) in categoryGroup"
-        :key="title"
-      >
-        <CategoryDraggableModel
-          ref="draggableModelRef"
-          :isCategorySorting="isCategorySorting"
-          :dataList="list"
-          :title="title"
-          @success="getList"
-        />
-      </ContentWrap>
+      <draggable v-model="categoryGroup" item-key="id" :animation="400">
+        <template #item="{ element }">
+          <ContentWrap v-loading="loading" :body-style="{ padding: 0 }" :key="element.id">
+            <CategoryDraggableModel
+              ref="categoryDraggableModelRef"
+              :isCategorySorting="isCategorySorting"
+              :categoryInfo="element"
+              @success="getAllModel"
+            />
+          </ContentWrap>
+        </template>
+      </draggable>
     </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-
+  <ModelForm ref="formRef" @success="getAllModel" />
+  <!-- 表单弹窗：添加/修改分类 -->
+  <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
@@ -87,15 +86,18 @@
 </template>
 
 <script lang="ts" setup>
+import draggable from 'vuedraggable'
+import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
 import ModelForm from './ModelForm.vue'
-import { groupBy } from 'lodash-es'
-import { mockData } from './mock'
+import CategoryForm from '../category/CategoryForm.vue'
+import { groupBy, cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const draggableModelRef = ref()
+const categoryDraggableModelRef = ref()
+const categoryFormRef = ref()
 const loading = ref(true) // 列表的加载中
 const isCategorySorting = ref(false) // 是否正处于排序状态
 const queryParams = reactive({
@@ -106,26 +108,32 @@ const queryParams = reactive({
   category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryGroup = ref<any>({}) // 按照category分组的数据
+const categoryGroup: any = ref([]) // 按照category分组的数据
+const originalData: any = ref([])
+// 查询所有分类数据
+const getAllCategory = async () => {
+  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
+  const data = await CategoryApi.getCategoryPage(queryParams)
+  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
+}
 
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // TODO 芋艿：这里需要一个不分页查全部的流程模型接口，并且每条数据都应包含categoryId字段，用于重命名/删除分类。
-    const data = await ModelApi.getModelPage(queryParams)
-    data.list = mockData
-    categoryGroup.value = groupBy(data.list, 'categoryName')
-    draggableModelRef.value?.updateTableData()
-  } finally {
-    loading.value = false
-  }
+/** 查询所有流程模型接口 */
+const getAllModel = async () => {
+  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+  const data = await ModelApi.getModelPage(queryParams)
+  const groupedData = groupBy(data.list, 'categoryName')
+  Object.keys(groupedData).forEach((key) => {
+    const category = categoryGroup.value.find((item) => item.name === key)
+    if (category) {
+      category.modelList = groupedData[key]
+    }
+  })
 }
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
-  getList()
+  getAllModel()
 }
 
 /** 添加/修改操作 */
@@ -155,21 +163,40 @@ const handleCommand = (command: string) => {
 }
 
 // 新建分类
-const handleAddCategory = () => {}
+const handleAddCategory = () => {
+  categoryFormRef.value.open('create')
+}
 // 分类排序
 const handleSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
+  categoryDraggableModelRef.value?.forEach((element) => {
+    element.activeCollapse = []
+  })
 }
 // 取消排序
 const cancelSort = () => {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value)
   isCategorySorting.value = false
 }
 // 保存排序
 const saveSort = () => {}
 
+const getList = async () => {
+  loading.value = true
+  try {
+    await getAllCategory()
+    await getAllModel()
+  } finally {
+    loading.value = false
+  }
+}
+
 /** 初始化 **/
 onMounted(async () => {
-  await getList()
+  getList()
 })
 </script>
 
@@ -178,5 +205,11 @@ onMounted(async () => {
   .el-card {
     border-radius: 8px;
   }
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 6px;
+  }
 }
 </style>
diff --git a/src/views/bpm/model/mock.js b/src/views/bpm/model/mock.js
deleted file mode 100644
index 93c4b60b..00000000
--- a/src/views/bpm/model/mock.js
+++ /dev/null
@@ -1,202 +0,0 @@
-export const mockData = [
-  {
-    key: 'out_apply',
-    name: '外出申请',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/OA/goingOut/create',
-    formCustomViewPath: '/OA/goingOut/detail',
-    id: 'ff8f8bab-4d4e-11ef-8201-0242ac130002',
-    formName: null,
-    createTime: 1722218716216,
-    processDefinition: {
-      id: 'out_apply:4:7f56d464-4eec-11ef-8c3a-0242ac130002',
-      version: 4,
-      deploymentTime: 1722396312641,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'contract_change_history',
-    name: '合同变更申请',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/changeRecord/detail',
-    formCustomViewPath: '/project/changeRecord/detail',
-    id: '0c689067-3a92-11ef-b7f0-0242ac130002',
-    formName: null,
-    createTime: 1720158441959,
-    processDefinition: {
-      id: 'contract_change_history:1:f69fff4f-3a9a-11ef-b7f0-0242ac130002',
-      version: 1,
-      deploymentTime: 1720162270788,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'expenses_claim',
-    name: '费用报销申请',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/finance/reimbursement/detail',
-    formCustomViewPath: '/finance/reimbursement/detail',
-    id: '0310ad0c-351e-11ef-a653-0242ac130002',
-    formName: null,
-    createTime: 1719558848849,
-    processDefinition: {
-      id: 'expenses_claim:5:a043a1d8-4eec-11ef-8c3a-0242ac130002',
-      version: 5,
-      deploymentTime: 1722396367911,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'out_business_apply',
-    name: '申请单',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/finance/businessTripApply/detail',
-    formCustomViewPath: '/finance/businessTripApply/detail',
-    id: '279e27a4-3393-11ef-8401-0242ac130002',
-    formName: null,
-    createTime: 1719389258966,
-    processDefinition: {
-      id: 'out_business_apply:9:a7b2d4e2-430f-11ef-876f-0242ac130002',
-      version: 9,
-      deploymentTime: 1721091998780,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project_delay_application',
-    name: '项目延时申请',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/workHourDelay/create',
-    formCustomViewPath: '/project/workHourDelay/detail',
-    id: '46d87275-27c7-11ef-b258-0242ac130002',
-    formName: null,
-    createTime: 1718092231234,
-    processDefinition: {
-      id: 'b7ed308a-430f-11ef-876f-0242ac130002',
-      version: 5,
-      deploymentTime: 1721092026059,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project_result_approval',
-    name: '项目成果审核',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/projectTaskResult/detail',
-    formCustomViewPath: '/project/projectTaskResult/detail',
-    id: '4a15d4f8-23cc-11ef-8dd0-0242ac130002',
-    formName: null,
-    createTime: 1717654579502,
-    processDefinition: {
-      id: 'dd3cc360-4eec-11ef-8c3a-0242ac130002',
-      version: 6,
-      deploymentTime: 1722396470232,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_contract',
-    name: '合同管理',
-    description: null,
-    category: '2',
-    categoryName: '测试2',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/sales/contract/create',
-    formCustomViewPath: '/sales/contract/detail',
-    id: '8317cb71-0d1a-11ef-8445-70b5e844a623',
-    formName: null,
-    createTime: 1715159299146,
-    processDefinition: {
-      id: 'pms_contract:5:c7d6012a-29f2-11ef-a08d-0242ac130002',
-      version: 5,
-      deploymentTime: 1718330818270,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_consult_task_act',
-    name: '咨询任务书',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/consultTask/create',
-    formCustomViewPath: '/consultTask/detail',
-    id: '47fad8e4-0b91-11ef-b841-70b5e844a623',
-    formName: null,
-    createTime: 1714990407756,
-    processDefinition: {
-      id: 'pms_consult_task_act:1:67c2ae59-0b91-11ef-b841-70b5e844a623',
-      version: 1,
-      deploymentTime: 1714990460960,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'pms_project',
-    name: '立项管理',
-    description: null,
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/project/applyProject/create',
-    formCustomViewPath: '/project/applyProject/detail',
-    id: 'f0ba6bde-0b90-11ef-b841-70b5e844a623',
-    formName: null,
-    createTime: 1714990261372,
-    processDefinition: {
-      id: 'pms_project:6:b9e4e33b-2c6c-11ef-8386-0242ac130002',
-      version: 6,
-      deploymentTime: 1718603095738,
-      suspensionState: 1
-    }
-  },
-  {
-    key: 'invoice_apply_manage',
-    name: '开票申请',
-    description: 'asdas',
-    category: '1',
-    categoryName: '测试1',
-    formType: 20,
-    formId: null,
-    formCustomCreatePath: '/sales/invoice/create',
-    formCustomViewPath: '/sales/invoice/detail',
-    id: '7ec07575-0605-11ef-ab76-cc96e508c010',
-    formName: null,
-    createTime: 1714380614292,
-    processDefinition: {
-      id: 'invoice_apply_manage:8:665a8c40-44c9-11ef-9813-0242ac130002',
-      version: 8,
-      deploymentTime: 1721281726671,
-      suspensionState: 1
-    }
-  }
-]

From 708e12b6cee20fa747446d06c014d2000fb8830f Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 16 Oct 2024 16:23:41 +0800
Subject: [PATCH 021/109] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E7=BB=86=E8=8A=82=E3=80=81=E5=88=A0=E9=99=A4=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E7=B1=BB=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 34 ++++++++++++++-----
 src/views/bpm/model/index_new.vue             | 13 ++++---
 2 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index d322cf06..6269e72b 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,10 +1,11 @@
 <template>
   <!-- 默认使其全部展开 -->
   <el-collapse v-model="activeCollapse">
-    <el-collapse-item :name="categoryInfo.id">
+    <el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
       <template #icon="{ isActive }">
         <div class="flex-1 flex" v-if="!isCategorySorting">
           <div
+            v-if="categoryInfo.modelList.length > 0"
             class="ml-20px flex items-center"
             :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
           >
@@ -230,6 +231,7 @@
 </template>
 
 <script lang="ts" setup>
+import { CategoryApi } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -409,8 +411,7 @@ const handleSort = () => {
 }
 
 const saveSort = () => {
-  // 接口调用
-  console.log(tableData.value)
+  // TODO 芋艿：这里需要一个保存分类下模型排序接口
   // 刷新列表
   emit('success')
   isModelSorting.value = false
@@ -451,6 +452,9 @@ const initSort = () => {
 // 更新表格数据
 const updateTableData = () => {
   tableData.value = cloneDeep(props.categoryInfo.modelList)
+  if (props.categoryInfo.modelList.length > 0) {
+    activeCollapse.value = [props.categoryInfo.id]
+  }
 }
 
 const renameVal = ref('')
@@ -463,15 +467,27 @@ const handleRenameConfirm = () => {
 
 // 删除分类
 const handleDeleteGroup = async () => {
-  if (props.categoryInfo.modelList.length > 0) {
-    return message.warning('该分类下仍有流程定义,不允许删除')
-  }
-  await message.confirm('确认删除分类吗?')
-  // 实际调用接口删除
+  try {
+    if (props.categoryInfo.modelList.length > 0) {
+      return message.warning('该分类下仍有流程定义,不允许删除')
+    }
+    await message.confirm('确认删除分类吗?')
+    // 发起删除
+    await CategoryApi.deleteCategory(props.categoryInfo.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    emit('success')
+  } catch {}
 }
 
 watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
-
+watch(
+  () => props.isCategorySorting,
+  (val) => {
+    if (val) activeCollapse.value = []
+  },
+  { immediate: true }
+)
 defineExpose({
   activeCollapse
 })
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 82a12986..c0224fa0 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -67,7 +67,7 @@
               ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
               :categoryInfo="element"
-              @success="getAllModel"
+              @success="getList"
             />
           </ContentWrap>
         </template>
@@ -76,7 +76,7 @@
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getAllModel" />
+  <ModelForm ref="formRef" @success="getList" />
   <!-- 表单弹窗：添加/修改分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
@@ -133,7 +133,7 @@ const getAllModel = async () => {
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.pageNo = 1
-  getAllModel()
+  getList()
 }
 
 /** 添加/修改操作 */
@@ -171,9 +171,6 @@ const handleSort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
-  categoryDraggableModelRef.value?.forEach((element) => {
-    element.activeCollapse = []
-  })
 }
 // 取消排序
 const cancelSort = () => {
@@ -182,7 +179,9 @@ const cancelSort = () => {
   isCategorySorting.value = false
 }
 // 保存排序
-const saveSort = () => {}
+const saveSort = () => {
+  // TODO 芋艿：这里需要一个保存分类排序接口
+}
 
 const getList = async () => {
   loading.value = true

From 3a9197dfdfd21fe989cba3436cb63e9606d56c76 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Wed, 16 Oct 2024 22:31:20 +0800
Subject: [PATCH 022/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=95=B4=E5=90=88=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E6=8E=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          | 10 +--
 src/utils/formCreate.ts                       |  1 +
 .../detail/ProcessInstanceOperationButton.vue | 16 ++--
 .../detail/ProcessInstanceTimeline.vue        | 66 ++++++++------
 .../bpm/processInstance/detail/index_new.vue  | 89 +++++++++++--------
 5 files changed, 96 insertions(+), 86 deletions(-)

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index 96b440bb..e9256407 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -87,14 +87,8 @@ export const getProcessInstanceCopyPage = async (params: any) => {
 }
 
 // 获取审批详情
-export const getApprovalDetail = async (
-  processInstanceId?: string,
-  processDefinitionId?: string
-) => {
-  const param = processInstanceId
-    ? '?processInstanceId=' + processInstanceId
-    : '?processDefinitionId=' + processDefinitionId
-  return await request.get({ url: 'bpm/process-instance/get-approval-detail' + param })
+export const getApprovalDetail = async (params: any) => {
+  return await request.get({ url: 'bpm/process-instance/get-approval-detail' , params })
 }
 
 // 获取表单字段权限
diff --git a/src/utils/formCreate.ts b/src/utils/formCreate.ts
index 850df8cb..a93d9cdd 100644
--- a/src/utils/formCreate.ts
+++ b/src/utils/formCreate.ts
@@ -44,6 +44,7 @@ export const setConfAndFields2 = (
   value?: object
 ) => {
   if (isRef(detailPreview)) {
+    // @ts-ignore
     detailPreview = detailPreview.value
   }
   // @ts-ignore
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 188ac9dc..9518465c 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -657,7 +657,6 @@ const openChildrenTask = () => {
 
 /** 重新加载数据 */
 const reload = () => {
-  getMyTodoTask()
   emit('success')
 }
 
@@ -691,26 +690,23 @@ const getButtonDisplayName = (btnType: OperationButtonType) => {
   return displayName
 }
 
-/** 获取我的待办任务 */
-const getMyTodoTask = async () => {
+const loadTodoTask = (task: any) => {
   genericForm.value = {}
   approveForm.value = {}
   approveFormFApi.value = {}
-  const data = await TaskApi.myTodoTask(props.processInstanceId)
-  runningTask.value = data
+  runningTask.value = task
   // 处理 approve 表单.
-  if (data && data.formId && data.formConf) {
+  if (task && task.formId && task.formConf) {
     const tempApproveForm = {}
-    setConfAndFields2(tempApproveForm, data.formConf, data.formFields, data.formVariables)
+    setConfAndFields2(tempApproveForm, task.formConf, task.formFields, task.formVariables)
     approveForm.value = tempApproveForm
   } else {
     approveForm.value = {} // 占位，避免为空
   }
 }
 
-onMounted(async () => {
-  await getMyTodoTask()
-})
+defineExpose({ loadTodoTask })
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index d201db12..6f1e454b 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -134,23 +134,31 @@ import { TaskStatusEnum } from '@/api/bpm/task'
 import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-const props = defineProps({
-  // 流程实例编号
-  processInstanceId: {
-    type: String,
-    required: false,
-    default: ''
-  },
-  // 流程定义编号
-  processDefinitionId: {
-    type: String,
-    required: false,
-    default: ''
-  }
-})
+// const props = defineProps({
+//   // 流程实例编号
+//   processInstanceId: {
+//     type: String,
+//     required: false,
+//     default: ''
+//   },
+//   // 流程定义编号
+//   processDefinitionId: {
+//     type: String,
+//     required: false,
+//     default: ''
+//   },
+//   approveNodes : {
+//     type: ProcessInstanceApi.ApprovalNodeInfo[],
+//     required: false,
+//     default: ''
+//   }
+// })
+defineProps<{
+  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+}>()
 
 // 审批节点
-const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
 
 const statusIconMap2 = {
   // 未开始
@@ -194,13 +202,13 @@ const statusIconMap = {
 }
 
 /** 获得审批详情 */
-const getApprovalDetail = async () => {
-  const data = await ProcessInstanceApi.getApprovalDetail(
-    props.processInstanceId,
-    props.processDefinitionId
-  )
-  approveNodes.value = data.approveNodes
-}
+// const getApprovalDetail = async () => {
+//   const data = await ProcessInstanceApi.getApprovalDetail(
+//     props.processInstanceId,
+//     props.processDefinitionId
+//   )
+//   approveNodes.value = data.approveNodes
+// }
 
 const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
   if (taskStatus == TaskStatusEnum.NOT_START) {
@@ -226,13 +234,13 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
 }
 
 /** 重新刷新审批详情 */
-const refresh = () => {
-  getApprovalDetail()
-}
+// const refresh = () => {
+//   getApprovalDetail()
+// }
 
-defineExpose({ refresh })
+// defineExpose({ refresh })
 
-onMounted(async () => {
-  await getApprovalDetail()
-})
+// onMounted(async () => {
+//   await getApprovalDetail()
+// })
 </script>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 133f1273..a0e018eb 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -23,7 +23,6 @@
           <div
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
           >
-            <!-- <img class="rounded-full h-28px" src="@/assets/imgs/avatar.jpg" alt="" /> -->
             <el-avatar
               :size="28"
               v-if="processInstance?.startUser?.avatar"
@@ -50,7 +49,7 @@
                       class="form-box flex flex-col mb-30px flex-1"
                     >
                       <!-- 情况一：流程表单 -->
-                      <el-col v-if="processInstance?.processDefinition?.formType === 10">
+                      <el-col v-if="processDefinition?.formType === 10">
                         <form-create
                           v-model="detailForm.value"
                           v-model:api="fApi"
@@ -59,14 +58,14 @@
                         />
                       </el-col>
                       <!-- 情况二：业务表单 -->
-                      <div v-if="processInstance?.processDefinition?.formType === 20">
+                      <div v-if="processDefinition?.formType === 20">
                         <BusinessFormComponent :id="processInstance.businessKey" />
                       </div>
                     </div>
                   </el-col>
                   <el-col :span="6">
                     <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline ref="timelineRef" :process-instance-id="id" />
+                    <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -104,6 +103,7 @@
         <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
+            ref="operationButtonRef"
             :process-instance-id="id"
             :userOptions="userOptions"
             @success="refresh"
@@ -124,7 +124,6 @@ import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
-import { registerComponent } from '@/utils/routerHelper'
 import * as UserApi from '@/api/system/user'
 import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
@@ -141,7 +140,10 @@ const props = defineProps<{
 const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
+const processDefinition = ref<any>({}) // 流程定义
 const timelineRef = ref()
+// 操作按钮组件 ref
+const operationButtonRef = ref()
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
 const auditIcons = {
@@ -161,78 +163,92 @@ const detailForm = ref({
 
 /** 获得详情 */
 const getDetail = async () => {
-  // 1. 获得流程实例相关
-  getProcessInstance()
+  // 1. 获取审批详情
+  getApprovalDetail()
   // 2. 获得流程任务列表
   getTaskList()
 }
 
 /** 加载流程实例 */
 const BusinessFormComponent = ref<any>(null) // 异步组件
-const getProcessInstance = async () => {
+/** 获取审批详情 */
+const getApprovalDetail = async () => {
+  processInstanceLoading.value = true
   try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(props.id)
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param);
     if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if(!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！')
       return
     }
-    processInstance.value = data
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition
 
     // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
+    if (processDefinition.value.formType === 10) {
       // 获取表单字段权限
-      let fieldsPermission = undefined
-      if (props.taskId || props.activityId) {
-        fieldsPermission = await ProcessInstanceApi.getFormFieldsPermission({
-          processInstanceId: props.id,
-          taskId: props.taskId,
-          activityId: props.activityId
-        })
-      }
-
-      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 表单不显示
-        detailForm.value.value = data.formVariables
+      const formFieldsPermission = data.formFieldsPermission
+     
+      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 显示不了，
+        detailForm.value.value = processInstance.value.formVariables
       } else {
         setConfAndFields2(
           detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables
         )
       }
-
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
+        //@ts-ignore
         fApi.value?.disabled(true)
-        if (fieldsPermission) {
-          Object.keys(fieldsPermission).forEach((item) => {
-            setFieldPermission(item, fieldsPermission[item])
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item])
           })
         }
       })
-    } else {
-      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
+
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask)
+
   } finally {
     processInstanceLoading.value = false
   }
+  
 }
 
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**
  * 设置表单权限
  */
 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)
   }
 }
@@ -264,9 +280,6 @@ const getTaskList = async () => {
         return b.createTime - a.createTime
       }
     })
-
-    // 获得需要自己审批的任务
-    //operationButtonRef.value?.loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
   }
@@ -278,8 +291,6 @@ const getTaskList = async () => {
 const refresh = () => {
   // 重新获取详情
   getDetail()
-  // 刷新审批详情 Timeline
-  timelineRef.value?.refresh()
 }
 
 /** 当前的Tab */

From 4bc79c382b5c9d7b92ba28158d983c3616ff3e91 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 17 Oct 2024 09:40:40 +0800
Subject: [PATCH 023/109] =?UTF-8?q?feat:=20=E7=A9=BA=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=B1=95=E7=A4=BA=E6=96=B0=E5=BB=BA=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E3=80=81=E5=9B=9E=E6=98=BE=E5=88=86=E7=B1=BB=E9=80=BB?=
 =?UTF-8?q?=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 19 +++++++++++++++++++
 src/views/bpm/model/ModelForm.vue             |  8 +++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 6269e72b..d30ff6d2 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -23,6 +23,16 @@
                 <Icon icon="fa:sort-amount-desc" class="mr-5px" />
                 排序
               </el-button>
+              <el-button
+                v-else
+                link
+                type="info"
+                class="mr-20px"
+                @click.stop="handleAddModel('create')"
+              >
+                <Icon icon="fa:plus" class="mr-5px" />
+                新建
+              </el-button>
               <el-dropdown
                 @command="(command) => handleCategoryCommand(command)"
                 placement="bottom"
@@ -228,9 +238,12 @@
       </div>
     </template>
   </Dialog>
+  <!-- 表单弹窗：添加流程模型 -->
+  <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
 </template>
 
 <script lang="ts" setup>
+import ModelForm from './ModelForm.vue'
 import { CategoryApi } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
@@ -480,6 +493,12 @@ const handleDeleteGroup = async () => {
   } catch {}
 }
 
+// 添加流程模型弹窗
+const modelFormRef = ref()
+const handleAddModel = (type: string) => {
+  modelFormRef.value.open(type)
+}
+
 watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
 watch(
   () => props.isCategorySorting,
diff --git a/src/views/bpm/model/ModelForm.vue b/src/views/bpm/model/ModelForm.vue
index d9c4c032..16d3c1d6 100644
--- a/src/views/bpm/model/ModelForm.vue
+++ b/src/views/bpm/model/ModelForm.vue
@@ -155,6 +155,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE, getBoolDictOptions, getIntDictOptions } from '@/utils/dict'
 import { ElMessageBox } from 'element-plus'
 import * as ModelApi from '@/api/bpm/model'
@@ -170,7 +171,9 @@ defineOptions({ name: 'ModelForm' })
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 const userStore = useUserStoreWithOut() // 用户信息缓存
-
+const props = defineProps({
+  categoryId: propTypes.number
+})
 const dialogVisible = ref(false) // 弹窗的是否展示
 const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
@@ -232,6 +235,9 @@ const open = async (type: string, id?: string) => {
   categoryList.value = await CategoryApi.getCategorySimpleList()
   // 查询用户列表
   userList.value = await UserApi.getSimpleUserList()
+  if (props.categoryId) {
+    formData.value.category = props.categoryId
+  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 

From fb2ea334b91d392870668b5e337007ee6aa2f01e Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 17 Oct 2024 15:36:15 +0800
Subject: [PATCH 024/109] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=90=9C=E7=B4=A2=E6=A1=86=E6=8C=89=E5=9B=9E=E8=BD=A6?=
 =?UTF-8?q?=E5=90=8E=E5=88=B7=E6=96=B0=E9=A1=B5=E9=9D=A2bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/index_new.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index c0224fa0..3098054f 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -10,6 +10,7 @@
         ref="queryFormRef"
         :inline="true"
         label-width="68px"
+        @submit.prevent
       >
         <el-form-item align="right" prop="key" class="ml-auto">
           <el-input

From d818e338e3e95b3b6ec127ed242e3e14b80c6a12 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 17 Oct 2024 16:18:02 +0800
Subject: [PATCH 025/109] =?UTF-8?q?feat:=20=E5=BC=83=E7=94=A8el-collapse?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=EF=BC=8C=E6=94=B9=E7=94=A8el-collapse-transi?=
 =?UTF-8?q?tion=E4=BB=A3=E6=9B=BF=EF=BC=8C=E6=8F=90=E9=AB=98=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=87=AA=E5=AE=9A=E4=B9=89=E7=A8=8B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 159 +++++++-----------
 1 file changed, 64 insertions(+), 95 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index d30ff6d2..bff690f9 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,76 +1,66 @@
 <template>
-  <!-- 默认使其全部展开 -->
-  <el-collapse v-model="activeCollapse">
-    <el-collapse-item :name="categoryInfo.id" :disabled="categoryInfo.modelList.length === 0">
-      <template #icon="{ isActive }">
-        <div class="flex-1 flex" v-if="!isCategorySorting">
-          <div
+  <div class="flex items-center h-50px">
+    <div class="flex items-center">
+      <el-tooltip content="拖动排序" v-if="isCategorySorting">
+        <Icon
+          :size="22"
+          icon="ic:round-drag-indicator"
+          class="ml-10px category-drag-icon cursor-move text-#8a909c"
+        />
+      </el-tooltip>
+      <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
+      <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
+    </div>
+    <div class="flex-1 flex" v-if="!isCategorySorting">
+      <div
+        v-if="categoryInfo.modelList.length > 0"
+        class="ml-20px flex items-center"
+        :class="[
+          'transition-transform duration-300 cursor-pointer',
+          isExpand ? 'rotate-180' : 'rotate-0'
+        ]"
+        @click="isExpand = !isExpand"
+      >
+        <Icon icon="ep:arrow-down-bold" color="#999" />
+      </div>
+      <div class="ml-auto flex items-center" :class="isModelSorting ? 'mr-15px' : 'mr-45px'">
+        <template v-if="!isModelSorting">
+          <el-button
             v-if="categoryInfo.modelList.length > 0"
-            class="ml-20px flex items-center"
-            :class="['transition-transform duration-300', isActive ? 'rotate-180' : 'rotate-0']"
+            link
+            type="info"
+            class="mr-20px"
+            @click.stop="handleSort"
           >
-            <Icon icon="ep:arrow-down-bold" color="#999" />
-          </div>
-          <div class="ml-auto mr-45px flex items-center">
-            <template v-if="!isModelSorting">
-              <el-button
-                v-if="categoryInfo.modelList.length > 0"
-                link
-                type="info"
-                class="mr-20px"
-                @click.stop="handleSort"
-              >
-                <Icon icon="fa:sort-amount-desc" class="mr-5px" />
-                排序
-              </el-button>
-              <el-button
-                v-else
-                link
-                type="info"
-                class="mr-20px"
-                @click.stop="handleAddModel('create')"
-              >
-                <Icon icon="fa:plus" class="mr-5px" />
-                新建
-              </el-button>
-              <el-dropdown
-                @command="(command) => handleCategoryCommand(command)"
-                placement="bottom"
-              >
-                <el-button link type="info" @click.stop="handleGroup">
-                  <Icon icon="ep:setting" class="mr-5px" />
-                  分类
-                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                    <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
-              </el-dropdown>
+            <Icon icon="fa:sort-amount-desc" class="mr-5px" />
+            排序
+          </el-button>
+          <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
+            <Icon icon="fa:plus" class="mr-5px" />
+            新建
+          </el-button>
+          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+            <el-button link type="info">
+              <Icon icon="ep:setting" class="mr-5px" />
+              分类
+            </el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+              </el-dropdown-menu>
             </template>
-            <template v-else>
-              <el-button @click.stop="cancelSort"> 取 消 </el-button>
-              <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
-            </template>
-            <!-- <el-button v-else type="primary" @click.stop="addModel"> 新建模型 </el-button> -->
-          </div>
-        </div>
-        <div></div>
-      </template>
-      <template #title>
-        <div class="flex items-center">
-          <el-tooltip content="拖动排序" v-if="isCategorySorting">
-            <Icon
-              :size="22"
-              icon="ic:round-drag-indicator"
-              class="ml-10px category-drag-icon cursor-move text-#8a909c"
-            />
-          </el-tooltip>
-          <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
-          <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
-        </div>
-      </template>
+          </el-dropdown>
+        </template>
+        <template v-else>
+          <el-button @click.stop="cancelSort"> 取 消 </el-button>
+          <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+        </template>
+      </div>
+    </div>
+  </div>
+  <el-collapse-transition>
+    <div v-show="isExpand">
       <el-table
         :class="categoryInfo.name"
         ref="tableRef"
@@ -220,8 +210,8 @@
           </template>
         </el-table-column>
       </el-table>
-    </el-collapse-item>
-  </el-collapse>
+    </div>
+  </el-collapse-transition>
 
   <!-- 弹窗：重命名分类 -->
   <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
@@ -259,7 +249,6 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
-const activeCollapse: any = ref([])
 const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
@@ -276,7 +265,7 @@ const userStore = useUserStoreWithOut() // 用户信息缓存
 const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
-
+const isExpand = ref(false) // 是否处于展开状态
 /** '更多'操作按钮 */
 const handleCommand = (command: string, row: any) => {
   switch (command) {
@@ -436,10 +425,6 @@ const cancelSort = () => {
   isModelSorting.value = false
 }
 
-/* 分类 */
-const handleGroup = () => {
-  console.log('分类')
-}
 const tableRef = ref()
 // 创建拖拽实例
 const initSort = () => {
@@ -466,7 +451,7 @@ const initSort = () => {
 const updateTableData = () => {
   tableData.value = cloneDeep(props.categoryInfo.modelList)
   if (props.categoryInfo.modelList.length > 0) {
-    activeCollapse.value = [props.categoryInfo.id]
+    isExpand.value = true
   }
 }
 
@@ -503,13 +488,10 @@ watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
 watch(
   () => props.isCategorySorting,
   (val) => {
-    if (val) activeCollapse.value = []
+    if (val) isExpand.value = false
   },
   { immediate: true }
 )
-defineExpose({
-  activeCollapse
-})
 </script>
 
 <style lang="scss">
@@ -525,19 +507,6 @@ defineExpose({
 </style>
 <style lang="scss" scoped>
 :deep() {
-  .el-collapse,
-  .el-collapse-item__header,
-  .el-collapse-item__wrap {
-    border: none;
-  }
-  .el-collapse-item__arrow {
-    margin-left: 10px;
-    font-size: 20px;
-    font-weight: 500;
-  }
-  .el-collapse-item__content {
-    padding-bottom: 0;
-  }
   .el-table__cell {
     border-bottom: none !important;
   }

From f47e8f3a2558347f18d8b7386de647637c564fc4 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 17 Oct 2024 10:01:02 +0800
Subject: [PATCH 026/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E5=AE=A1=E6=89=B9=E6=84=8F=E8=A7=81=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20tooltip=20=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTimeline.vue        | 77 ++++++-------------
 1 file changed, 22 insertions(+), 55 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 6f1e454b..44f289e1 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -11,27 +11,31 @@
     >
       <div class="flex flex-col items-start">
         <div class="font-bold"> {{ activity.name }}</div>
-        <div class="flex items-center mt-1">
+        <div class="flex items-center flex-wrap mt-1 ">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
             <div class="flex flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                 <!-- 信息：头像 -->
-                <el-avatar
-                  :size="36"
-                  v-if="task.assigneeUser && task.assigneeUser.avatar"
-                  :src="task.assigneeUser.avatar"
-                />
-                <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
-                  {{ task.assigneeUser.nickname.substring(0, 1) }}
-                </el-avatar>
-                <el-avatar
-                  v-else-if="task.ownerUser && task.ownerUser.avatar"
-                  :src="task.ownerUser.avatar"
-                />
-                <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
-                  {{ task.ownerUser.nickname.substring(0, 1) }}
-                </el-avatar>
+                <el-tooltip :content="task.reason" placement="bottom" v-if="task.assigneeUser && task.assigneeUser.avatar" effect="light">
+                  <el-avatar
+                    :size="36"
+                    :src="task.assigneeUser.avatar"
+                  />
+                </el-tooltip>
+                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.assigneeUser && task.assigneeUser.nickname" effect="light">
+                  <el-avatar >
+                    {{ task.assigneeUser.nickname.substring(0, 1) }}
+                  </el-avatar>
+                </el-tooltip>
+                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.avatar" effect="light">
+                  <el-avatar :src="task.ownerUser.avatar"/>
+                </el-tooltip>
+                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.nickname" effect="light">
+                  <el-avatar >
+                    {{ task.ownerUser.nickname.substring(0, 1) }}
+                  </el-avatar>
+                </el-tooltip>
                 <!-- 信息：任务 ICON -->
                 <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
@@ -57,6 +61,7 @@
                 >
                   {{ task.ownerUser.nickname }}
                 </div>
+                <!--
                 <div v-if="task.reason" class="text-#a5a5a5 my-4px text-12px flex items-center w-100%">
                   <div
                     :title="task.reason"
@@ -65,6 +70,7 @@
                     {{ task.reason }}
                   </div>
                 </div>
+                -->
               </div>
             </div>
           </div>
@@ -134,25 +140,6 @@ import { TaskStatusEnum } from '@/api/bpm/task'
 import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-// const props = defineProps({
-//   // 流程实例编号
-//   processInstanceId: {
-//     type: String,
-//     required: false,
-//     default: ''
-//   },
-//   // 流程定义编号
-//   processDefinitionId: {
-//     type: String,
-//     required: false,
-//     default: ''
-//   },
-//   approveNodes : {
-//     type: ProcessInstanceApi.ApprovalNodeInfo[],
-//     required: false,
-//     default: ''
-//   }
-// })
 defineProps<{
   approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
 }>()
@@ -201,15 +188,6 @@ const statusIconMap = {
   '7': { color: '#00b32a', icon: Check }
 }
 
-/** 获得审批详情 */
-// const getApprovalDetail = async () => {
-//   const data = await ProcessInstanceApi.getApprovalDetail(
-//     props.processInstanceId,
-//     props.processDefinitionId
-//   )
-//   approveNodes.value = data.approveNodes
-// }
-
 const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
   if (taskStatus == TaskStatusEnum.NOT_START) {
     return statusIconMap[taskStatus]?.icon
@@ -232,15 +210,4 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
     return `创建时间：${formatDate(node.startTime)}`
   }
 }
-
-/** 重新刷新审批详情 */
-// const refresh = () => {
-//   getApprovalDetail()
-// }
-
-// defineExpose({ refresh })
-
-// onMounted(async () => {
-//   await getApprovalDetail()
-// })
 </script>

From 0f8522e306454fc3d32d646a5c54dc85ad1ea632 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Thu, 17 Oct 2024 23:21:19 +0800
Subject: [PATCH 027/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=96=B0=E5=AE=A1=E6=89=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=96=B0=E5=A2=9E=E5=8F=96=E6=B6=88=E5=92=8C=E5=86=8D?=
 =?UTF-8?q?=E6=AC=A1=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/audit4.svg                |   2 +-
 .../detail/ProcessInstanceOperationButton.vue | 139 +++++++++++++++---
 .../bpm/processInstance/detail/index_new.vue  |   7 +-
 3 files changed, 122 insertions(+), 26 deletions(-)

diff --git a/src/assets/svgs/bpm/audit4.svg b/src/assets/svgs/bpm/audit4.svg
index ec661443..ab9b1553 100644
--- a/src/assets/svgs/bpm/audit4.svg
+++ b/src/assets/svgs/bpm/audit4.svg
@@ -1 +1 @@
-<svg t="1728812935276" class="icon" viewBox="0 0 1167 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4361" width="200" height="200"><path d="M1159.10034 346.809949l-177.334385-280.171946a52.524561 52.524561 0 0 0-72.305741-16.279543L24.344573 611.35763a52.626948 52.626948 0 0 0-16.30002 72.305741L185.399416 963.876272a52.504083 52.504083 0 0 0 72.244308 16.21811l885.156596-560.958215a52.422174 52.422174 0 0 0 16.30002-72.326218z m-35.323535 42.203945L238.640686 950.054019a16.627658 16.627658 0 0 1-23.016611-5.180785L38.310168 664.660333a16.730045 16.730045 0 0 1 5.180785-23.078043L928.668027 80.562642a16.607181 16.607181 0 0 1 22.975655 5.22174l177.416295 280.212902a16.996252 16.996252 0 0 1-5.283172 23.01661z m-763.008836-177.784888l14.682304 35.303058 19.043993-33.132452 38.047031-3.071612-25.617242-28.422647 8.723377-37.146025-34.770645 15.644743-32.681949-19.801658 4.136438 38.067509-28.975538 24.736713 37.412231 7.822371zM586.121884 106.077497l-18.265851-33.62391-15.5014 35.016374-37.596528 7.167094 28.381692 25.514855-4.894101 37.924167 33.111975-19.187335 34.545393 16.422884-7.98619-37.473663 26.211086-27.787848-38.006076-3.972618z m343.610968 563.29264l-30.245137-23.303294-0.143342 38.190372-31.596646 21.460328 36.38836 12.040718 10.730164 36.654567 22.566108-30.85946 38.190372 1.085303-22.422765-31.043756 12.921246-35.83547-36.38836 11.610692z m-123.49927 152.270033l-14.416098-35.425922-19.351154 33.030065-38.026553 2.764451 25.39199 28.545512-9.030538 37.105069 34.975419-15.296626 32.538607 20.25216-3.849753-38.087986 28.975537-24.716235-37.207457-8.170488z m-226.234444 103.574748l18.102032 33.767252 15.808562-34.913987 37.596528-6.757545-28.217873-25.781062 5.180785-37.883211-33.255317 18.839218-34.361097-16.648135 7.658552 37.391753-26.57968 27.685461 38.067508 4.300256z m-338.901163-565.954703l30.081318 23.671888 0.430026-38.231328 31.739988-21.35794-36.183587-12.286447-10.443479-36.818386-22.852792 30.654685-38.190373-1.392464 22.115605 31.187098-13.166976 35.937858 36.449793-11.364964z m-134.372775 165.047938C102.711627 362.454691 181.242501 202.444197 327.61504 109.722477 473.987578 17.000757 651.915808 14.379648 796.465857 87.033505L831.400321 64.9179A508.106015 508.106015 0 0 0 694.119753 12.536681a510.133279 510.133279 0 0 0-195.927874-5.651766 506.611164 506.611164 0 0 0-189.620832 72.612902 509.355138 509.355138 0 0 0-146.659222 140.638863 509.989937 509.989937 0 0 0-78.858513 179.627855 508.679383 508.679383 0 0 0-11.344486 146.618268l35.016374-22.095127z m950.520494-24.757191c4.156915 161.832984-74.394437 321.823002-220.72602 414.524244-146.331584 92.844584-324.321246 95.404261-468.83034 22.729927l-34.975419 22.177037a510.338053 510.338053 0 0 0 137.301045 52.319787 508.658906 508.658906 0 0 0 195.907398 5.672243 506.201616 506.201616 0 0 0 189.620832-72.592424A510.235666 510.235666 0 0 0 1080.876627 624.156012c10.91446-48.531466 14.702782-97.718208 11.324009-146.700177l-34.975419 22.115605zM433.176097 276.613382a276.322193 276.322193 0 0 1 131.321641-42.511107l54.019412-34.217755a312.075754 312.075754 0 0 0-204.528388 46.688499 312.055276 312.055276 0 0 0-129.478674 165.047938l53.998935-34.197278a276.50649 276.50649 0 0 1 94.667074-100.810297z m297.741565 470.57092c40.954823-25.903926 72.756244-60.879345 94.687552-100.666956l53.957979-34.279187a311.686683 311.686683 0 0 1-129.417241 165.047938c-61.718919 39.009469-133.164608 55.14567-204.50791 46.708976l53.978457-34.197278c45.25508-2.784928 90.305385-16.586703 131.301163-42.593016z m-303.00426-123.990728L277.895884 716.918687l40.565753 64.913395c5.467469 8.764332 12.573131 10.402525 21.337463 4.914579l120.816728-75.500217a19.494496 19.494496 0 0 0 8.211442-11.201144c1.290077-5.528901-5.487946-21.235076-19.53545-46.954705l29.671769-7.719984c16.279542 33.091497 23.549023 53.917025 22.013218 62.312763-2.477767 8.989584-8.682423 16.914342-18.102032 23.487592l-135.171395 84.448845c-20.927915 13.064589-37.965121 8.518603-51.644032-13.37175l-78.694693-125.936081 25.289604-15.788085 20.067863 32.088104 124.215979-77.629867-34.627303-55.432353-159.723811 99.806904-15.194239-24.306688 185.484395-115.90215 65.036259 104.025252z m160.133359-51.050187l8.805287 14.108936 31.596646-19.760702-8.805287-14.088459-31.617123 19.740225z m20.047386-38.21085l-8.661945-13.863208-31.617124 19.740225 8.661946 13.863207 31.617123-19.740224z m0.286684 70.790412l25.228171 40.360978-21.890353 13.678911-78.223713-125.219372 72.694812-45.418899-5.610811-1.9044c-0.327639-4.873624-0.901006-9.583429-1.228645-14.436575l-9.010061 13.719866c-2.477767-1.82249-4.730282-3.788321-6.675636-5.283172-11.979286 12.225015-31.064233 28.197396-57.111501 48.203827l-15.214717-17.876781c4.300256-3.378773 6.470862-9.112448 6.614204-16.996251-0.286684-5.897495-0.839574-14.334188-2.109173-25.023397l-22.852792 14.272756-14.293233-22.852792 33.07102-20.682186a213.84561 213.84561 0 0 0-19.023516-13.105543l22.361334-19.392109c6.286565 5.201263 13.044111 11.119235 20.25216 17.774393l33.787729-21.091734 14.272756 22.832314-43.760229 27.337345c0.921484 12.286447 1.2696 24.224778 1.576761 35.528309l25.125784-21.43985c-5.610811-3.583547-10.689209-6.839455-15.460446-9.624383l13.863208-16.750523c11.426396 6.368475 22.525153 13.310318 33.173407 21.173644-4.607418-26.866364-14.784691-56.681475-30.286092-89.588676l25.043875-10.238706c5.590333 12.73695 10.648254 25.125784 14.989465 36.961728l37.678437-23.549024 14.743737 23.569501-7.064707 4.423121c23.794752 40.238114 39.31663 77.507003 47.057092 111.560939 19.371631 12.573131 37.65796 20.743618 54.736121 24.28621l-1.290077 29.856066c-15.399014-3.542592-31.658078-10.648254-48.613375-20.989347a171.682619 171.682619 0 0 1-4.464076 54.51087l-25.801539-12.614085c5.160308-18.777786 5.938449-39.193766 2.272993-61.268416a484.905108 484.905108 0 0 1-51.644032-47.507595c0.020477 4.382166 0.307161 8.600513 0.184297 12.73695l-14.661827-5.037443 61.841783 98.946853c9.112448 14.579917 5.795107 27.13257-9.767725 36.859341l-14.08846 8.805287-19.125902-18.142987 13.515092-7.064707c5.569856-3.501637 7.126139-7.51521 4.545985-11.651647l-7.740462-12.388834-31.617123 19.740225z m11.569737-162.733991c15.910949 18.450148 31.596646 34.361097 46.790886 47.855711-8.088578-22.688972-19.535451-46.954705-34.606826-72.694811l-15.808561 9.870112c1.290077 5.283172 2.662064 10.177274 3.624501 14.968988z m-53.896547 244.295521l-18.224896 11.385441-19.944999-19.985954a102.387058 102.387058 0 0 0 16.381929-7.863326c4.607418-2.887315 4.914579-7.822371 0.819096-14.375143l-30.388478-48.633852c-4.505031 6.88041-9.153403 13.494614-13.945118 19.863089l-22.668494-21.665102c7.371868-7.638075 14.211324-15.644743 20.354547-24.2043l-31.125666-49.84202-20.927915 13.064588-15.03042-24.060958 20.88696-13.064589-26.1087-41.835352 24.060959-15.03042 26.129177 41.814875 14.600395-9.112449 15.03042 24.060959-14.579917 9.112448 23.999526 38.415625c3.030657-5.938449 6.32752-12.061195 9.214835-18.265852l16.095246 25.781062c-3.030657 5.938449-6.32752 12.081673-9.358177 18.020122l41.77392 66.858749c10.484435 16.791478 8.027145 30.14275-7.04423 39.562359z m226.275399-449.356321l25.043874-15.644743 40.401933 64.667666 44.743145-27.951667 80.373841 128.598146c12.143105 19.453541 9.870112 34.750168-6.921366 45.214125l-23.078042 14.436575-21.60367-19.965477 22.381811-12.286447c5.344604-3.358296 5.446992-9.153403 0.430026-17.201025l-9.870113-15.767607-64.176208 40.094772 32.04715 51.295916-25.289604 15.788084-99.04924-158.495166 44.968396-28.115486-40.401933-64.667666z m61.739396 142.604695l12.614085 20.190728 64.176209-40.11525-12.614086-20.17025-64.176208 40.094772z m50.804458-61.493668l-12.593608-20.17025-64.196685 40.094772 12.614085 20.190728 64.176208-40.11525z m-136.911974-53.036496c14.743736 7.371868 29.978931 16.074768 45.910357 26.415861l-14.047505 22.975656a356.245531 356.245531 0 0 0-46.647543-25.965358l14.784691-23.426159z m83.650227-56.005721l27.296389-2.866837c3.276386 18.245374 4.791714 36.900296 4.075005 56.312882l-27.112093 2.047741c0.409548-19.863089-0.941961-38.29276-4.259301-55.493786z m-176.371947 100.748866l27.501164-10.074887c2.559676 7.863326 4.791714 15.255672 6.655159 22.54563l40.340501-25.228171 15.050897 24.081436-48.613375 30.388479c1.965832 11.262576 3.39925 22.197514 4.361688 32.415743l55.903334-34.934464 14.129414 22.607062-22.340856 13.965595 14.272756 22.852791 30.634208-19.125902 14.579917 23.344249-30.634208 19.125903 29.630815 47.405208a230.166107 230.166107 0 0 0 20.682186-32.866246l18.224896 19.392109c-11.324009 19.22829-25.965358 38.518011-43.965003 57.869165l-24.122391-15.337581c4.709805-5.979404 5.733675-11.364963 3.01018-15.74713l-28.258828-45.214125-30.634208 19.14638-14.579917-23.344249 30.634208-19.14638-14.272756-22.852792-11.672125 7.289959-10.648254-16.996252c0.307161 5.877017 0.47098 11.528783 0.47098 16.93482l-28.87315-0.204774a297.802998 297.802998 0 0 0-17.467232-98.291576z" fill="#8a8a8a" p-id="4362"></path></svg>
\ No newline at end of file
+<svg t="1729178183592" class="icon" viewBox="0 0 1300 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4332" width="200" height="200"><path d="M784.074702 99.196443l10.927871 18.473304-21.302843-2.56935-14.180213 16.066571-4.130475-21.042655-19.676671-8.521137 18.733492-10.440019 2.016452-21.335366 15.708814 14.603017 20.945085-4.683373-9.041512 19.449008zM1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512z" fill="#8a8a8a" p-id="4333"></path><path d="M1067.22363 642.402668l-18.440781 10.92787 2.56935-21.302842-16.099094-14.180213 21.042655-4.130475 8.521137-19.676671 10.440019 18.733492 21.367889 2.016452-14.603017 15.708814 4.683373 20.945085-19.481531-9.041512zM571.924408 100.009528l-17.400031-12.488994 20.52228-6.211974 6.504685-20.457234 12.261331 17.595172 21.432936-0.09757-12.944323 17.074798 6.732349 20.359663-20.262093-7.02506-17.269938 12.716659 0.422804-21.46546zM991.444053 784.43246l-21.172749 3.480006 10.114785-18.928632-9.822074-19.026203 21.107702 3.772717 15.090868-15.253486 2.927109 21.237796 19.156296 9.626933-19.318914 9.366746-3.219819 21.205273-14.863204-15.48115zM428.008258 156.795426l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.936097 19.936859-7.870669-5.88674 20.619851 13.692361 16.521899-21.432936 0.813086-11.513292 18.083024-7.382817-20.132zM854.260251 896.475655l-20.749945-5.333841 16.879657-13.237034-1.365983-21.400413 17.822836 11.96862 19.936859-7.903192-5.854217 20.619851 13.659838 16.554423-21.432936 0.780562-11.513292 18.115547-7.382817-20.164523zM562.460092 923.665237l10.895347 18.440782-21.302843-2.569351-14.180212 16.099095-4.130475-21.042655-19.676672-8.521137 18.733493-10.440019 2.016452-21.36789 15.708814 14.603018 20.945085-4.683373-9.008989 19.48153zM242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988z" fill="#8a8a8a" p-id="4334"></path><path d="M242.787359 420.788058l-18.473305 10.895347 2.569351-21.302843-16.066572-14.180213 21.042656-4.130474 8.521137-19.676672 10.440019 18.733492 21.335366 2.016453-14.603018 15.708813 4.683374 20.945085-19.449008-9.008988zM700.814737 943.959854l-17.400032-12.521518 20.522281-6.211974 6.504685-20.42471 12.26133 17.595172 21.432937-0.130094-12.944323 17.107321 6.732349 20.359663-20.262093-7.025059-17.269938 12.684135 0.422804-21.432936zM303.541115 278.823313l-21.140226 3.480006 10.114785-18.928633-9.854597-19.058726 21.107702 3.772717 15.090868-15.220962 2.927109 21.237796 19.156296 9.626933-19.28639 9.366746-3.252342 21.172749-14.863205-15.448626z" fill="#8a8a8a" p-id="4335"></path><path d="M407.648595 90.642782a486.713038 486.713038 0 0 1 504.568397 11.578339l25.010513-14.407877A512.081309 512.081309 0 0 0 139.850723 547.401747l24.977989-14.407877a486.778085 486.778085 0 0 1 242.819883-442.351088zM893.28836 933.422265a486.810608 486.810608 0 0 1-504.568398-11.610863l-25.010513 14.407877a512.081309 512.081309 0 0 0 797.5394-459.621026l-24.97799 14.505447a486.843132 486.843132 0 0 1-242.982499 442.318565z" fill="#8a8a8a" p-id="4336"></path><path d="M814.061299 795.880705a326.665269 326.665269 0 0 1-258.170939 29.563792l-29.791456 17.172368a353.236906 353.236906 0 0 0 472.793013-272.448721l-29.693886 17.172367a326.762839 326.762839 0 0 1-155.136732 208.540194zM486.875655 228.119295a326.795363 326.795363 0 0 1 258.170939-29.563792l29.791456-17.172368a353.236906 353.236906 0 0 0-472.793013 272.448721l29.82398-17.172367a326.762839 326.762839 0 0 1 155.006638-208.540194zM1288.350389 374.73489a53.923837 53.923837 0 0 1-14.34283 12.001143L229.420232 988.712085A53.793743 53.793743 0 0 1 156.112434 968.937843l-148.924757-258.235985a53.76122 53.76122 0 0 1 19.741718-73.437891L1071.516722 35.352962A53.826266 53.826266 0 0 1 1144.82452 55.062157l148.827187 258.268508a53.793743 53.793743 0 0 1-5.398888 61.404225zM32.19819 665.754486a28.360426 28.360426 0 0 0-5.626553 10.73273 28.067715 28.067715 0 0 0 2.699444 21.432936L178.195839 956.188661a28.165285 28.165285 0 0 0 38.442687 10.342449l1044.587328-601.976052a28.132762 28.132762 0 0 0 10.440019-38.442687l-148.924758-258.268509a28.197808 28.197808 0 0 0-38.442687-10.342449L39.711101 659.444942a28.230332 28.230332 0 0 0-7.512911 6.309544z" fill="#8a8a8a" p-id="4337"></path><path d="M498.941845 597.390249l-138.322121 79.877529 38.637827 66.933207q8.000762 13.854979 21.595554 5.98431l114.254788-65.957504a21.172749 21.172749 0 0 0 9.952167-11.123011q2.634397-9.757027-16.91218-47.321582l18.440781-4.130474q20.489757 43.22363 18.148071 56.167953a36.166047 36.166047 0 0 1-16.261712 19.514054l-123.068636 71.031158q-25.17313 14.603017-40.394092-11.77348L317.103383 639.020232l16.066571-9.269176 18.570875 32.133143 122.027886-70.47826-33.596697-58.249452-150.160648 86.707448-9.041511-15.611243 166.454883-96.106718zM691.903319 563.663459c-3.935334 3.837764-9.757027 9.399269-17.497602 16.619469l23.319295 40.394093-15.611244 9.008988-21.237795-36.816516q-31.027346 27.709957-64.754137 54.314118l-12.814229-13.39965 9.171605-7.382818 9.236653-7.122629-79.714912-138.126982-17.627696 10.179832-8.781324-15.155915L601.683341 414.836271l6.960013 12.06619 86.34969-49.858408 8.488614 14.733111q28.197808 65.82741 30.506972 123.39387a274.660314 274.660314 0 0 0 69.339939 27.612387l-3.642623 18.440781a322.177037 322.177037 0 0 1-65.534699-26.40902 220.899095 220.899095 0 0 1-15.38358 72.819946l-18.14807-6.179451a215.272542 215.272542 0 0 0 15.448626-77.340702 312.940384 312.940384 0 0 1-89.374369-86.739971l-8.748801 5.138701-7.2202-12.488995-17.172368 9.919644 71.876767 124.499667q10.570113-10.017215 17.465079-16.61947z m-134.32174-56.948515l40.166428-23.189202-19.969382-34.702493-40.166429 23.189201z m28.067714 48.785135l40.166429-23.189201-19.514055-33.921931-40.166428 23.189201z m48.557472-8.813847l-40.166428 23.189201 21.888264 37.922312q13.334604-10.92787 35.775766-30.767159z m7.2202-117.832365A289.848753 289.848753 0 0 0 715.515325 503.365031a330.437986 330.437986 0 0 0-26.441544-101.92841zM812.760362 400.460918l-4.813467 17.95293a280.482007 280.482007 0 0 0-56.167953-12.781706l5.073654-17.530125a291.637542 291.637542 0 0 1 55.907766 12.358901z m24.360045 28.78323a925.063745 925.063745 0 0 1 10.017214 101.895887l-18.440781 2.016452a812.792886 812.792886 0 0 0-8.878895-101.375512z m-45.923075-86.25212l-4.813467 18.017977a290.922026 290.922026 0 0 0-58.542163-11.513292l5.073655-17.497602a308.972527 308.972527 0 0 1 58.281975 10.992917z m48.459902-17.562649l-9.334223 13.724885A298.792695 298.792695 0 0 0 783.814515 315.477211l9.757027-14.180212a437.635191 437.635191 0 0 1 46.085692 24.13238zM834.355916 269.944418l16.521899-9.529363 35.157821 60.916373 48.199714-27.840051L1003.282579 413.047483q12.716659 22.115928-8.228426 34.214642l-26.018739 15.058345-13.237034-13.009369 25.238177-13.952549c6.992536-4.065428 8.45609-9.561887 4.423186-16.554423l-12.716659-22.018358-80.527997 46.475973L919.762427 491.1037l-16.066572 9.269176-81.926505-141.899698 47.744387-27.579864z m107.750103 73.763125l-14.830682-25.660981-80.56052 46.508496 14.830681 25.726028z m-72.592282 60.330952l14.700587 25.433317 80.560521-46.508496-14.700587-25.433318z m45.532793-166.064603a222.720407 222.720407 0 0 1-2.406733 56.13543l-16.456853 0.878132a242.722312 242.722312 0 0 0 2.081499-55.647578z" fill="#8a8a8a" p-id="4338"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 9518465c..cb9a0c6a 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
-    v-if="runningTask && runningTask.id"
   >
     <!-- 【通过】按钮 -->
     <el-popover
@@ -9,7 +8,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
         <el-button plain type="success" @click="openPopover('approve')">
@@ -26,7 +25,7 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+          <el-card v-if="runningTask?.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
             </template>
@@ -61,7 +60,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -78,7 +77,7 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-card v-if="runningTask.formId > 0" class="mb-15px !-mt-10px">
+          <el-card v-if="runningTask?.formId > 0" class="mb-15px !-mt-10px">
             <template #header>
               <span class="el-icon-picture-outline"> 填写表单【{{ runningTask?.formName }}】 </span>
             </template>
@@ -113,7 +112,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.COPY)"
     >
       <template #reference>
         <div @click="openPopover('copy')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -172,7 +171,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if=" isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
+      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
     >
       <template #reference>
         <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -225,7 +224,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.DELEGATE)"
     >
       <template #reference>
         <div @click="openPopover('delegate')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -280,7 +279,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.ADD_SIGN)"
     >
       <template #reference>
         <div @click="openPopover('addSign')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -335,7 +334,7 @@
     <div
       @click="openChildrenTask()"
       class="hover-bg-gray-100 rounded-xl p-6px"
-      v-if="runningTask.children"
+      v-if="runningTask?.children"
     >
       <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
     </div>
@@ -346,11 +345,11 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.RETURN)"
     >
       <template #reference>
         <div @click="openReturnPopover" class="hover-bg-gray-100 rounded-xl p-6px">
-          <Icon :size="14" icon="fa:mail-reply" />&nbsp;
+          <Icon :size="14" icon="ep:back" />&nbsp;
           {{ getButtonDisplayName(OperationButtonType.RETURN) }}
         </div>
       </template>
@@ -392,28 +391,82 @@
       </div>
     </el-popover>
 
+    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <el-popover
+      :visible="popOverVisible.cancel"
+      placement="top-start"
+      :width="420"
+      trigger="click"
+      v-if="userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)"
+    >
+      <template #reference>
+        <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+        </div>
+      </template>
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="取消理由" prop="cancelReason">
+            <span class=" text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
+            <el-input
+              v-model="genericForm.cancelReason"
+              clearable
+              placeholder="请输入取消理由"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">取消</el-button>
+            <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
+    <!-- 【再次提交】 按钮-->
+    <div
+      @click="handleReCreate()"
+      class="hover-bg-gray-100 rounded-xl p-6px"
+      v-if="userId === processInstance?.startUser?.id && isEndProcessStatus(processInstance?.status) 
+            && processDefinition?.formType === 10"
+    >
+      <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
+    </div>
     <!-- 弹窗：子任务  -->
     <TaskSignList ref="taskSignListRef" @success="reload" />
-    <!--TODO @jason：撤回 -->
-    <!--TODO @jason：再次发起 -->
+   
+  
   </div>
 </template>
 <script lang="ts" setup>
+import { useUserStoreWithOut } from '@/store/modules/user'
 import TaskSignList from './dialog/TaskSignList.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import * as TaskApi from '@/api/bpm/task'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { propTypes } from '@/utils/propTypes'
 import {
   OperationButtonType,
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
 defineOptions({ name: 'ProcessInstanceBtnConatiner' })
 
+const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
+const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const props = defineProps({
-  processInstanceId: propTypes.string, // 流程实例信息
+  processInstance: propTypes.object, // 流程实例信息
+  processDefinition : propTypes.object, // 流程定义信息
   userOptions: propTypes.any
 })
 const formLoading = ref(false) // 表单加载中
@@ -425,12 +478,13 @@ const popOverVisible = ref({
   delegate: false,
   addSign: false,
   return: false,
-  copy: false
+  copy: false,
+  cancel: false
 })
 /** 退回节点 */
 const returnList = ref([] as any)
 // ========== 审批信息 ==========
-const runningTask = ref<any>({}) // 运行中的任务
+const runningTask = ref<any>() // 运行中的任务
 const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
@@ -439,6 +493,7 @@ const formRef = ref()
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
@@ -649,6 +704,36 @@ const handleReturn = async () => {
   }
 }
 
+/** 处理取消 */
+const handleCancel = async () => {
+  formLoading.value = true
+  try {
+    const cancelFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(cancelFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交取消
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(props.processInstance.id, genericForm.value.cancelReason)
+    popOverVisible.value.return = false
+    message.success('操作成功')
+    // 2 重新加载数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 处理再次提交 */
+const handleReCreate = async () => {
+  // 跳转发起流程界面
+  await router.push({
+    name: 'BpmProcessInstanceCreate',
+    query: { processInstanceId: props.processInstance?.id }
+  })
+}
+
 /** 子任务 */
 const taskSignListRef = ref()
 const openChildrenTask = () => {
@@ -664,18 +749,30 @@ const reload = () => {
 const isHandleTaskStatus = () => {
   let canHandle = false
   if (
-    TaskApi.TaskStatusEnum.RUNNING === runningTask.value.status ||
-    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value.status
+    TaskApi.TaskStatusEnum.RUNNING === runningTask.value?.status ||
+    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value?.status
   ) {
     canHandle = true
   }
   return canHandle
 }
 
+/** 流程状态是否为结束状态 */
+const isEndProcessStatus = (status: number) => {
+  let isEndStatus = false
+  if (
+     BpmProcessInstanceStatus.APPROVE === status || BpmProcessInstanceStatus.REJECT === status ||
+     BpmProcessInstanceStatus.CANCEL === status
+  ) {
+    isEndStatus = true
+  }
+  return isEndStatus
+}
+
 /** 是否显示按钮 */
 const isShowButton = (btnType: OperationButtonType): boolean => {
   let isShow = true
-  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
     isShow = runningTask.value.buttonsSetting[btnType].enable
   }
   return isShow
@@ -684,7 +781,7 @@ const isShowButton = (btnType: OperationButtonType): boolean => {
 /** 获取按钮的显示名称 */
 const getButtonDisplayName = (btnType: OperationButtonType) => {
   let displayName = OPERATION_BUTTON_NAME.get(btnType)
-  if (runningTask.value.buttonsSetting && runningTask.value.buttonsSetting[btnType]) {
+  if (runningTask.value?.buttonsSetting && runningTask.value?.buttonsSetting[btnType]) {
     displayName = runningTask.value.buttonsSetting[btnType].displayName
   }
   return displayName
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index a0e018eb..4f60b79f 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -20,9 +20,7 @@
         </div>
 
         <div class="flex items-center gap-5 mb-10px text-13px h-35px">
-          <div
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
-          >
+          <div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
             <el-avatar
               :size="28"
               v-if="processInstance?.startUser?.avatar"
@@ -104,7 +102,8 @@
           <!-- 操作栏按钮 -->
           <ProcessInstanceOperationButton
             ref="operationButtonRef"
-            :process-instance-id="id"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
             :userOptions="userOptions"
             @success="refresh"
           />

From 498244020d5198c3de4f5f45a430061ecb4e6f0a Mon Sep 17 00:00:00 2001
From: GoldenZqqqq <1361001127@qq.com>
Date: Fri, 18 Oct 2024 20:49:08 +0800
Subject: [PATCH 028/109] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E7=B1=BB=E7=BB=84=E4=B8=8D=E5=9C=A8=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E7=8A=B6=E6=80=81=E4=B8=8B=E4=B9=9F=E8=83=BD=E6=8B=96?=
 =?UTF-8?q?=E5=8A=A8=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/model/CategoryDraggableModel.vue |  5 ++---
 src/views/bpm/model/index_new.vue              | 17 +++++++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index bff690f9..6d25128b 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -66,6 +66,7 @@
         ref="tableRef"
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
+        :row-style="{ height: '68px' }"
         :data="tableData"
         row-key="id"
       >
@@ -509,9 +510,7 @@ watch(
 :deep() {
   .el-table__cell {
     border-bottom: none !important;
-  }
-  .el-table__row {
-    height: 68px;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
index 3098054f..97dca594 100644
--- a/src/views/bpm/model/index_new.vue
+++ b/src/views/bpm/model/index_new.vue
@@ -61,9 +61,19 @@
 
     <!-- 分类卡片组 -->
     <div class="px-15px">
-      <draggable v-model="categoryGroup" item-key="id" :animation="400">
+      <draggable
+        :disabled="!isCategorySorting"
+        v-model="categoryGroup"
+        item-key="id"
+        :animation="400"
+      >
         <template #item="{ element }">
-          <ContentWrap v-loading="loading" :body-style="{ padding: 0 }" :key="element.id">
+          <ContentWrap
+            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+            v-loading="loading"
+            :body-style="{ padding: 0 }"
+            :key="element.id"
+          >
             <CategoryDraggableModel
               ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
@@ -202,6 +212,9 @@ onMounted(async () => {
 
 <style lang="scss" scoped>
 :deep() {
+  .el-table--fit .el-table__inner-wrapper:before {
+    height: 0;
+  }
   .el-card {
     border-radius: 8px;
   }

From 5267fe459f4eb8aeeb5d8a8eceb5acfc7fbfc19d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 18 Oct 2024 21:16:44 +0800
Subject: [PATCH 029/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=96=B0=E5=AE=A1=E6=89=B9=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=20v4=20=E9=83=A8=E5=88=86=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     |  2 +-
 .../src/nodes-config/StartUserNodeConfig.vue  |  1 -
 .../detail/ProcessInstanceBpmnViewer.vue      |  5 ++--
 .../detail/ProcessInstanceOperationButton.vue | 23 +++++++++++--------
 .../detail/ProcessInstanceTaskList.vue        |  5 ++--
 .../bpm/processInstance/detail/index_new.vue  | 15 ++++++------
 6 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 44fbf361..61b51704 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -507,7 +507,7 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.REJECT, '拒绝')
 OPERATION_BUTTON_NAME.set(OperationButtonType.TRANSFER, '转办')
 OPERATION_BUTTON_NAME.set(OperationButtonType.DELEGATE, '委派')
 OPERATION_BUTTON_NAME.set(OperationButtonType.ADD_SIGN, '加签')
-OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '回退')
+OPERATION_BUTTON_NAME.set(OperationButtonType.RETURN, '退回')
 OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
 
 // 默认的按钮权限设置
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
index 5bf64b4a..e43a351e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/StartUserNodeConfig.vue
@@ -119,7 +119,6 @@ const saveConfig = async () => {
   currentNode.value.fieldsPermission = fieldsPermissionConfig.value
   // 设置发起人的按钮权限
   currentNode.value.buttonsSetting = START_USER_BUTTON_SETTING
-  console.log('currentNode.value.buttonsSetting==>', currentNode.value.buttonsSetting)
   settingVisible.value = false
   return true
 }
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index db15c192..00a579f4 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
+    <template #header v-if="showHeader">
       <span class="el-icon-picture-outline">流程图</span>
     </template>
     <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
@@ -16,7 +16,8 @@ defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
   id: propTypes.string, // 流程实例的编号
-  bpmnXml: propTypes.string // BPMN XML
+  bpmnXml: propTypes.string, // BPMN XML
+  showHeader: propTypes.bool.def(true), // 是否显示头
 })
 
 const view = ref({
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index cb9a0c6a..f2d5e02e 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -391,7 +391,7 @@
       </div>
     </el-popover>
 
-    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <!--【撤消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
     <el-popover
       :visible="popOverVisible.cancel"
       placement="top-start"
@@ -401,7 +401,7 @@
     >
       <template #reference>
         <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
-          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 撤消
         </div>
       </template>
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
@@ -413,18 +413,18 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-form-item label="取消理由" prop="cancelReason">
-            <span class=" text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
+          <el-form-item label="撤消理由" prop="cancelReason">
+            <span class=" text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
             <el-input
               v-model="genericForm.cancelReason"
               clearable
-              placeholder="请输入取消理由"
+              placeholder="请输入撤消理由"
               type="textarea"
               :rows="3"
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">取消</el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">撤消</el-button>
             <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
@@ -493,11 +493,12 @@ const formRef = ref()
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
-  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '撤消理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }]
+  addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
+  targetTaskDefinitionKey:  [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
 })
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
@@ -530,7 +531,9 @@ const openPopover = (type: string) => {
       popOverVisible.value[item] = false
     }
   })
-  formRef.value.resetFields()
+  nextTick().then(() => {
+    formRef.value.resetFields()
+  })
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -814,7 +817,7 @@ defineExpose({ loadTodoTask })
 .btn-container {
   > div {
     display: flex;
-    margin: 0 15px;
+    margin: 0 8px;
     cursor: pointer;
     align-items: center;
 
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index f82e8003..fd2de617 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header>
+    <template #header v-if="showHeader">
       <span class="el-icon-picture-outline">审批记录</span>
     </template>
     <el-col :offset="3" :span="17">
@@ -104,7 +104,8 @@ defineOptions({ name: 'BpmProcessInstanceTaskList' })
 defineProps({
   loading: propTypes.bool, // 是否加载中
   processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+  tasks: propTypes.arrayOf(propTypes.object), // 流程任务的数组
+  showHeader: propTypes.bool.def(true), // 是否显示头
 })
 
 /** 获得流程实例对应的颜色 */
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
index 4f60b79f..262c1844 100644
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ b/src/views/bpm/processInstance/detail/index_new.vue
@@ -1,5 +1,5 @@
 <template>
-  <ContentWrap :bodyStyle="{ padding: '10px 20px' }" class="position-relative">
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
     <div class="processInstance-wrap-main">
       <el-scrollbar>
         <img
@@ -73,7 +73,7 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" />
+              <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" :show-header="false"/>
             </div>
           </el-tab-pane>
 
@@ -85,6 +85,7 @@
                   :loading="tasksLoad"
                   :process-instance="processInstance"
                   :tasks="tasks"
+                  :show-header="false"
                 />
               </el-scrollbar>
             </div>
@@ -305,27 +306,27 @@ onMounted(async () => {
 </script>
 
 <style lang="scss" scoped>
-$wrap-padding-height: 30px;
+$wrap-padding-height: 20px;
 $wrap-margin-height: 15px;
 $button-height: 51px;
 $process-header-height: 194px;
 
 .processInstance-wrap-main {
   height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
   );
   max-height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
   );
   overflow: auto;
 
   .form-scroll-area {
     height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
         $process-header-height - 40px
     );
     max-height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 45px -
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
         $process-header-height - 40px
     );
     overflow: auto;

From d6e89db05caad3ef6b16c96ea310c38f29db462e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 19 Oct 2024 18:23:22 +0800
Subject: [PATCH 030/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20cc=20=E6=8A=84=E9=80=81=E8=A1=A8=E7=9A=84=E5=AD=97?=
 =?UTF-8?q?=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/task/copy/index.vue | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/views/bpm/task/copy/index.vue b/src/views/bpm/task/copy/index.vue
index 28911dca..f32a52a5 100644
--- a/src/views/bpm/task/copy/index.vue
+++ b/src/views/bpm/task/copy/index.vue
@@ -45,7 +45,12 @@
   <ContentWrap>
     <el-table v-loading="loading" :data="list">
       <el-table-column align="center" label="流程名" prop="processInstanceName" min-width="180" />
-      <el-table-column align="center" label="流程发起人" prop="startUserName" min-width="100" />
+      <el-table-column
+        align="center"
+        label="流程发起人"
+        prop="startUser.nickname"
+        min-width="100"
+      />
       <el-table-column
         :formatter="dateFormatter"
         align="center"
@@ -53,8 +58,10 @@
         prop="processInstanceStartTime"
         width="180"
       />
-      <el-table-column align="center" label="抄送任务" prop="taskName" min-width="180" />
-      <el-table-column align="center" label="抄送人" prop="creatorName" min-width="100" />
+      <el-table-column align="center" label="抄送节点" prop="activityName" min-width="180" />
+      <el-table-column align="center" label="抄送人" min-width="100">
+        <template #default="scope"> {{ scope.row.createUser?.nickname || '系统' }} </template>
+      </el-table-column>
       <el-table-column align="center" label="抄送意见" prop="reason" width="150" />
       <el-table-column
         align="center"

From 410c3bc9a7a32fb6340d4665c98983f696344d30 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 19 Oct 2024 18:51:56 +0800
Subject: [PATCH 031/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E4=BB=BF?=
 =?UTF-8?q?=E9=92=89=E9=92=89=E6=A8=A1=E5=BC=8F=EF=BC=8C=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1=E7=9A=84=E6=9D=83=E9=99=90=E9=83=BD=E5=BC=80?=
 =?UTF-8?q?=E5=90=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/SimpleProcessDesignerV2/src/consts.ts | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 61b51704..c51053ce 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -96,7 +96,6 @@ export interface SimpleFlowNode {
   conditionGroups?: ConditionGroup
   // 是否默认的条件
   defaultFlow?: boolean
-
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -514,10 +513,10 @@ OPERATION_BUTTON_NAME.set(OperationButtonType.COPY, '抄送')
 export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
   { id: OperationButtonType.APPROVE, displayName: '通过', enable: true },
   { id: OperationButtonType.REJECT, displayName: '拒绝', enable: true },
-  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
-  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
-  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
-  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
+  { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
+  { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
+  { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
+  { id: OperationButtonType.RETURN, displayName: '回退', enable: true }
 ]
 
 // 发起人的按钮权限。暂时定死，不可以编辑

From dcdce4120d41739a925e3196482abca77197f90d Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 19 Oct 2024 19:01:38 +0800
Subject: [PATCH 032/109] =?UTF-8?q?=E3=80=90=E6=96=87=E6=A1=88=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E2=80=9C?=
 =?UTF-8?q?=E5=9B=9E=E9=80=80=E2=80=9D=E7=BB=9F=E4=B8=80=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E2=80=9C=E9=80=80=E5=9B=9E=E2=80=9D=EF=BC=8C=E5=92=8C=E9=A3=9E?=
 =?UTF-8?q?=E4=B9=A6=E4=BF=9D=E6=8C=81=E4=B8=80=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/task/index.ts                     |  4 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |  8 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 14 +---
 .../package/designer/ProcessViewer.vue        |  5 +-
 .../detail/ProcessInstanceOperationButton.vue | 73 ++++++++++---------
 .../detail/ProcessInstanceTimeline.vue        | 46 ++++++++----
 .../detail/dialog/TaskReturnForm.vue          | 14 ++--
 .../bpm/processInstance/detail/index.vue      |  2 +-
 8 files changed, 91 insertions(+), 75 deletions(-)

diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index 50816952..8a5829e3 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -75,12 +75,12 @@ export const getTaskListByProcessInstanceId = async (processInstanceId: string)
   })
 }
 
-// 获取所有可回退的节点
+// 获取所有可退回的节点
 export const getTaskListByReturn = async (id: string) => {
   return await request.get({ url: '/bpm/task/list-by-return', params: { id } })
 }
 
-// 回退
+// 退回
 export const returnTask = async (data: any) => {
   return await request.put({ url: '/bpm/task/return', data })
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index c51053ce..3611ef91 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -177,7 +177,7 @@ export enum ApproveMethodType {
 export type RejectHandler = {
   // 审批拒绝类型
   type: RejectHandlerType
-  // 回退节点 Id
+  // 退回节点 Id
   returnNodeId?: string
 }
 
@@ -359,7 +359,7 @@ export enum OperationButtonType {
    */
   ADD_SIGN = 5,
   /**
-   * 回退
+   * 退回
    */
   RETURN = 6,
   /**
@@ -516,7 +516,7 @@ export const DEFAULT_BUTTON_SETTING: ButtonSetting[] = [
   { id: OperationButtonType.TRANSFER, displayName: '转办', enable: true },
   { id: OperationButtonType.DELEGATE, displayName: '委派', enable: true },
   { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: true },
-  { id: OperationButtonType.RETURN, displayName: '回退', enable: true }
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: true }
 ]
 
 // 发起人的按钮权限。暂时定死，不可以编辑
@@ -526,7 +526,7 @@ export const START_USER_BUTTON_SETTING: ButtonSetting[] = [
   { id: OperationButtonType.TRANSFER, displayName: '转办', enable: false },
   { id: OperationButtonType.DELEGATE, displayName: '委派', enable: false },
   { id: OperationButtonType.ADD_SIGN, displayName: '加签', enable: false },
-  { id: OperationButtonType.RETURN, displayName: '回退', enable: false }
+  { id: OperationButtonType.RETURN, displayName: '退回', enable: false }
 ]
 
 export const MULTI_LEVEL_DEPT: DictDataVO = [
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 57b96654..899d7045 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -134,12 +134,7 @@
               prop="userIds"
               span="24"
             >
-              <el-select
-                v-model="configForm.userIds"
-                clearable
-                multiple
-                style="width: 100%"
-              >
+              <el-select v-model="configForm.userIds" clearable multiple style="width: 100%">
                 <el-option
                   v-for="item in userOptions"
                   :key="item.id"
@@ -183,10 +178,7 @@
                     :key="index"
                     class="flex items-center"
                   >
-                    <el-radio
-                      :value="item.value"
-                      :label="item.value"
-                    >
+                    <el-radio :value="item.value" :label="item.value">
                       {{ item.label }}
                     </el-radio>
                     <el-form-item prop="approveRatio">
@@ -552,7 +544,7 @@ const approveMethodChanged = () => {
   }
   formRef.value.clearValidate('approveRatio')
 }
-// 审批拒绝 可回退的节点
+// 审批拒绝 可退回的节点
 const returnTaskList = ref<SimpleFlowNode[]>([])
 // 审批人超时未处理设置
 const {
diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index fb181cf3..3451f604 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -282,9 +282,12 @@ const importXML = async (xml: string) => {
 /** 高亮流程 */
 const setProcessStatus = (view: any) => {
   // 设置相关变量
+  if (!view || !view.processInstance) {
+    return
+  }
   processInstance.value = view.processInstance
   tasks.value = view.tasks
-  if (isLoading.value || !processInstance.value || !bpmnViewer.value) {
+  if (isLoading.value || !bpmnViewer.value) {
     return
   }
   const {
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index f2d5e02e..f792dbf4 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -8,7 +8,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.APPROVE)"
     >
       <template #reference>
         <el-button plain type="success" @click="openPopover('approve')">
@@ -60,7 +60,7 @@
       placement="top-end"
       :width="420"
       trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.REJECT)"
     >
       <template #reference>
         <el-button class="mr-20px" plain type="danger" @click="openPopover('reject')">
@@ -171,7 +171,7 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if=" runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
+      v-if="runningTask && isHandleTaskStatus() && isShowButton(OperationButtonType.TRANSFER)"
     >
       <template #reference>
         <div @click="openPopover('transfer')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -397,7 +397,9 @@
       placement="top-start"
       :width="420"
       trigger="click"
-      v-if="userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)"
+      v-if="
+        userId === processInstance?.startUser?.id && !isEndProcessStatus(processInstance?.status)
+      "
     >
       <template #reference>
         <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
@@ -414,7 +416,7 @@
           label-width="100px"
         >
           <el-form-item label="撤消理由" prop="cancelReason">
-            <span class=" text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
+            <span class="text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
             <el-input
               v-model="genericForm.cancelReason"
               clearable
@@ -424,7 +426,9 @@
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">撤消</el-button>
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()"
+              >撤消</el-button
+            >
             <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
@@ -434,15 +438,16 @@
     <div
       @click="handleReCreate()"
       class="hover-bg-gray-100 rounded-xl p-6px"
-      v-if="userId === processInstance?.startUser?.id && isEndProcessStatus(processInstance?.status) 
-            && processDefinition?.formType === 10"
+      v-if="
+        userId === processInstance?.startUser?.id &&
+        isEndProcessStatus(processInstance?.status) &&
+        processDefinition?.formType === 10
+      "
     >
       <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
     </div>
     <!-- 弹窗：子任务  -->
     <TaskSignList ref="taskSignListRef" @success="reload" />
-   
-  
   </div>
 </template>
 <script lang="ts" setup>
@@ -457,20 +462,22 @@ import {
   OPERATION_BUTTON_NAME
 } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { BpmProcessInstanceStatus } from '@/utils/constants'
-defineOptions({ name: 'ProcessInstanceBtnConatiner' })
+
+defineOptions({ name: 'ProcessInstanceBtnContainer' })
 
 const router = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { proxy } = getCurrentInstance() as any
+
 const userId = useUserStoreWithOut().getUser.id // 当前登录的编号
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const props = defineProps({
   processInstance: propTypes.object, // 流程实例信息
-  processDefinition : propTypes.object, // 流程定义信息
+  processDefinition: propTypes.object, // 流程定义信息
   userOptions: propTypes.any
 })
+
 const formLoading = ref(false) // 表单加载中
-/** 气泡卡是否展示 */
 const popOverVisible = ref({
   approve: false,
   reject: false,
@@ -480,16 +487,15 @@ const popOverVisible = ref({
   return: false,
   copy: false,
   cancel: false
-})
-/** 退回节点 */
-const returnList = ref([] as any)
+}) // 气泡卡是否展示
+const returnList = ref([] as any) // 退回节点
+
 // ========== 审批信息 ==========
 const runningTask = ref<any>() // 运行中的任务
 const genericForm = ref<any>({}) // 通用表单
 const approveForm = ref<any>({}) // 审批通过时，额外的补充信息
 const approveFormFApi = ref<any>({}) // approveForms 的 fAPi
 const formRef = ref()
-/** 表单校验规则 */
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
@@ -498,8 +504,8 @@ const genericRule = reactive({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  targetTaskDefinitionKey:  [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
-})
+  targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
+}) // 表单校验规则
 
 /** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
 watch(
@@ -520,20 +526,16 @@ const openReturnPopover = async () => {
     message.warning('当前没有可退回的节点')
     return
   }
-  openPopover('return')
+  await openPopover('return')
 }
+
 /** 弹出气泡卡 */
-const openPopover = (type: string) => {
+const openPopover = async (type: string) => {
   Object.keys(popOverVisible.value).forEach((item) => {
-    if (item === type) {
-      popOverVisible.value[item] = true
-    } else {
-      popOverVisible.value[item] = false
-    }
-  })
-  nextTick().then(() => {
-    formRef.value.resetFields()
+    popOverVisible.value[item] = item === type
   })
+  await nextTick()
+  formRef.value.resetFields()
 }
 
 /** 处理审批通过和不通过的操作 */
@@ -575,7 +577,7 @@ const handleAudit = async (pass: boolean) => {
   }
 }
 
-/* 处理抄送 */
+/** 处理抄送 */
 const handleCopy = async () => {
   formLoading.value = true
   try {
@@ -718,7 +720,10 @@ const handleCancel = async () => {
     const valid = await elForm.validate()
     if (!valid) return
     // 1.2 提交取消
-    await ProcessInstanceApi.cancelProcessInstanceByStartUser(props.processInstance.id, genericForm.value.cancelReason)
+    await ProcessInstanceApi.cancelProcessInstanceByStartUser(
+      props.processInstance.id,
+      genericForm.value.cancelReason
+    )
     popOverVisible.value.return = false
     message.success('操作成功')
     // 2 重新加载数据
@@ -764,8 +769,9 @@ const isHandleTaskStatus = () => {
 const isEndProcessStatus = (status: number) => {
   let isEndStatus = false
   if (
-     BpmProcessInstanceStatus.APPROVE === status || BpmProcessInstanceStatus.REJECT === status ||
-     BpmProcessInstanceStatus.CANCEL === status
+    BpmProcessInstanceStatus.APPROVE === status ||
+    BpmProcessInstanceStatus.REJECT === status ||
+    BpmProcessInstanceStatus.CANCEL === status
   ) {
     isEndStatus = true
   }
@@ -806,7 +812,6 @@ const loadTodoTask = (task: any) => {
 }
 
 defineExpose({ loadTodoTask })
-
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 44f289e1..c7152001 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -11,28 +11,45 @@
     >
       <div class="flex flex-col items-start">
         <div class="font-bold"> {{ activity.name }}</div>
-        <div class="flex items-center flex-wrap mt-1 ">
+        <div class="flex items-center flex-wrap mt-1">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
             <div class="flex flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                 <!-- 信息：头像 -->
-                <el-tooltip :content="task.reason" placement="bottom" v-if="task.assigneeUser && task.assigneeUser.avatar" effect="light">
-                  <el-avatar
-                    :size="36"
-                    :src="task.assigneeUser.avatar"
-                  />
+                <el-tooltip
+                  :content="task.reason"
+                  placement="bottom"
+                  v-if="task.assigneeUser && task.assigneeUser.avatar"
+                  effect="light"
+                >
+                  <el-avatar :size="36" :src="task.assigneeUser.avatar" />
                 </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.assigneeUser && task.assigneeUser.nickname" effect="light">
-                  <el-avatar >
+                <el-tooltip
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.assigneeUser && task.assigneeUser.nickname"
+                  effect="light"
+                >
+                  <el-avatar>
                     {{ task.assigneeUser.nickname.substring(0, 1) }}
                   </el-avatar>
                 </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.avatar" effect="light">
-                  <el-avatar :src="task.ownerUser.avatar"/>
+                <el-tooltip
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.ownerUser && task.ownerUser.avatar"
+                  effect="light"
+                >
+                  <el-avatar :src="task.ownerUser.avatar" />
                 </el-tooltip>
-                <el-tooltip :content="task.reason" placement="bottom" v-else-if="task.ownerUser && task.ownerUser.nickname" effect="light">
-                  <el-avatar >
+                <el-tooltip
+                  :content="task.reason"
+                  placement="bottom"
+                  v-else-if="task.ownerUser && task.ownerUser.nickname"
+                  effect="light"
+                >
+                  <el-avatar>
                     {{ task.ownerUser.nickname.substring(0, 1) }}
                   </el-avatar>
                 </el-tooltip>
@@ -146,7 +163,6 @@ defineProps<{
 
 // 审批节点
 
-
 const statusIconMap2 = {
   // 未开始
   '-1': { color: '#e5e7ec', icon: 'ep-clock' },
@@ -160,7 +176,7 @@ const statusIconMap2 = {
   '3': { color: '#f46b6c', icon: 'fa-solid:times-circle' },
   // 取消
   '4': { color: '#cccccc', icon: 'ep:delete-filled' },
-  // 回退
+  // 退回
   '5': { color: '#f46b6c', icon: 'ep:remove-filled' },
   // 委派中
   '6': { color: '#448ef7', icon: 'ep:loading' },
@@ -180,7 +196,7 @@ const statusIconMap = {
   '3': { color: '#f46b6c', icon: Close },
   // 已取消
   '4': { color: '#cccccc', icon: Delete },
-  // 回退
+  // 退回
   '5': { color: '#f46b6c', icon: Minus },
   // 委派中
   '6': { color: '#448ef7', icon: Loading },
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
index a1391697..92d15f2c 100644
--- a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-model="dialogVisible" title="回退任务" width="500">
+  <Dialog v-model="dialogVisible" title="退回任务" width="500">
     <el-form
       ref="formRef"
       v-loading="formLoading"
@@ -17,8 +17,8 @@
           />
         </el-select>
       </el-form-item>
-      <el-form-item label="回退理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入回退理由" />
+      <el-form-item label="退回理由" prop="reason">
+        <el-input v-model="formData.reason" clearable placeholder="请输入退回理由" />
       </el-form-item>
     </el-form>
     <template #footer>
@@ -39,8 +39,8 @@ const formData = ref({
   reason: ''
 })
 const formRules = ref({
-  targetTaskDefinitionKey: [{ required: true, message: '必须选择回退节点', trigger: 'change' }],
-  reason: [{ required: true, message: '回退理由不能为空', trigger: 'blur' }]
+  targetTaskDefinitionKey: [{ required: true, message: '必须选择退回节点', trigger: 'change' }],
+  reason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }]
 })
 
 const formRef = ref() // 表单 Ref
@@ -49,7 +49,7 @@ const returnList = ref([] as any)
 const open = async (id: string) => {
   returnList.value = await TaskApi.getTaskListByReturn(id)
   if (returnList.value.length === 0) {
-    message.warning('当前没有可回退的节点')
+    message.warning('当前没有可退回的节点')
     return false
   }
   dialogVisible.value = true
@@ -69,7 +69,7 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     await TaskApi.returnTask(formData.value)
-    message.success('回退成功')
+    message.success('退回成功')
     dialogVisible.value = false
     // 发送操作成功的事件
     emit('success')
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index ae75b32f..fb45d8c9 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -161,7 +161,7 @@
 
     <!-- 弹窗：转派审批人 -->
     <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-    <!-- 弹窗：回退节点 -->
+    <!-- 弹窗：退回节点 -->
     <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
     <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
     <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />

From 43b7dff0d01aa8ff200b419b7b1bc4a69815a2f5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 19 Oct 2024 21:53:05 +0800
Subject: [PATCH 033/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E7=A8=8B=E7=9A=84=E6=B5=81=E8=BD=AC=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95=EF=BC=8C=E4=B8=8D=E5=8C=BA=E5=88=86=E7=88=B6=E5=AD=90?=
 =?UTF-8?q?=E4=BB=BB=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/designer/ProcessViewer.vue        |  18 +-
 src/router/modules/remaining.ts               |   3 +-
 src/views/bpm/model/index.vue                 | 504 +++++---------
 src/views/bpm/model/index_new.vue             | 228 -------
 src/views/bpm/model/index_old.vue             | 404 ++++++++++++
 .../detail/ProcessInstanceBpmnViewer.vue      |   6 +-
 .../detail/ProcessInstanceTaskList.vue        |  26 +-
 .../detail/dialog/TaskDelegateForm.vue        |  89 ---
 .../detail/dialog/TaskReturnForm.vue          |  90 ---
 .../detail/dialog/TaskSignCreateForm.vue      |  99 ---
 .../detail/dialog/TaskSignDeleteForm.vue      |   1 +
 .../detail/dialog/TaskSignList.vue            |   1 +
 .../detail/dialog/TaskTransferForm.vue        |  89 ---
 .../bpm/processInstance/detail/index.vue      | 615 +++++++-----------
 .../bpm/processInstance/detail/index_new.vue  | 341 ----------
 15 files changed, 826 insertions(+), 1688 deletions(-)
 delete mode 100644 src/views/bpm/model/index_new.vue
 create mode 100644 src/views/bpm/model/index_old.vue
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue
 delete mode 100644 src/views/bpm/processInstance/detail/index_new.vue

diff --git a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
index 3451f604..34a54c8c 100644
--- a/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
+++ b/src/components/bpmnProcessDesigner/package/designer/ProcessViewer.vue
@@ -53,11 +53,14 @@
           />
           <el-table-column
             label="审批人"
-            prop="assigneeUser.nickname"
             min-width="100"
             align="center"
             v-if="selectActivityType === 'bpmn:UserTask'"
-          />
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
           <el-table-column
             label="发起人"
             prop="assigneeUser.nickname"
@@ -65,12 +68,11 @@
             align="center"
             v-else
           />
-          <el-table-column
-            label="部门"
-            prop="assigneeUser.deptName"
-            min-width="100"
-            align="center"
-          />
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
           <el-table-column
             :formatter="dateFormatter"
             align="center"
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 2cbaaa49..a61fd166 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -292,8 +292,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
       },
       {
         path: 'process-instance/detail',
-        component: () => import('@/views/bpm/processInstance/detail/index_new.vue'),
-        //component: () => import('@/views/bpm/processInstance/detail/index.vue'),
+        component: () => import('@/views/bpm/processInstance/detail/index.vue'),
         name: 'BpmProcessInstanceDetail',
         meta: {
           noCache: true,
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 4534ec61..97dca594 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -1,216 +1,95 @@
 <template>
-  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
-  <doc-alert
-    title="流程设计器（钉钉、飞书）"
-    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
-  />
-  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
-  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
-
   <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="流程标识" prop="key">
-        <el-input
-          v-model="queryParams.key"
-          placeholder="请输入流程标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程名称" prop="name">
-        <el-input
-          v-model="queryParams.name"
-          placeholder="请输入流程名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="category in categoryList"
-            :key="category.code"
-            :label="category.name"
-            :value="category.code"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['bpm:model:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新建
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+    <div class="flex justify-between pl-20px items-center">
+      <h3 class="font-extrabold">流程模型</h3>
+      <!-- 搜索工作栏 -->
+      <el-form
+        v-if="!isCategorySorting"
+        class="-mb-15px flex mr-10px"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="68px"
+        @submit.prevent
+      >
+        <el-form-item align="right" prop="key" class="ml-auto">
+          <el-input
+            v-model="queryParams.key"
+            placeholder="搜索流程"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          >
+            <template #prefix>
+              <Icon icon="ep:search" class="mx-10px" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
+            <Icon icon="ep:plus" class="mr-5px" /> 新建模型
+          </el-button>
+        </el-form-item>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list">
-      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
-      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
-        <template #default="scope">
-          <el-image :src="scope.row.icon" class="h-32px w-32px" />
-        </template>
-      </el-table-column>
-      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
-        <template #default="scope">
-          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
-            全部可见
-          </el-text>
-          <el-text v-else-if="scope.row.startUsers.length == 1">
-            {{ scope.row.startUsers[0].nickname }}
-          </el-text>
-          <el-text v-else>
-            <el-tooltip
-              class="box-item"
-              effect="dark"
-              placement="top"
-              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
-            >
-              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
-            </el-tooltip>
-          </el-text>
-        </template>
-      </el-table-column>
-      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
-      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
-        <template #default="scope">
-          <el-button
-            v-if="scope.row.formType === 10"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formName }}</span>
-          </el-button>
-          <el-button
-            v-else-if="scope.row.formType === 20"
-            type="primary"
-            link
-            @click="handleFormDetail(scope.row)"
-          >
-            <span>{{ scope.row.formCustomCreatePath }}</span>
-          </el-button>
-          <label v-else>暂无表单</label>
-        </template>
-      </el-table-column>
-      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
-        <template #default="scope">
-          <span v-if="scope.row.processDefinition">
-            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
-          </span>
-          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
-            v{{ scope.row.processDefinition.version }}
-          </el-tag>
-          <el-tag v-else type="warning">未部署</el-tag>
-          <el-tag
-            v-if="scope.row.processDefinition?.suspensionState === 2"
-            type="warning"
-            class="ml-10px"
-          >
-            已停用
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" width="200" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            修改
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDesign(scope.row)"
-            v-hasPermi="['bpm:model:update']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            设计
-          </el-button>
-          <el-button
-            link
-            class="!ml-5px"
-            type="primary"
-            @click="handleDeploy(scope.row)"
-            v-hasPermi="['bpm:model:deploy']"
-            :disabled="!isManagerUser(scope.row)"
-          >
-            发布
-          </el-button>
-          <el-dropdown
-            class="!align-middle ml-5px"
-            @command="(command) => handleCommand(command, scope.row)"
-            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
-          >
-            <el-button type="primary" link>更多</el-button>
+        <el-form-item>
+          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
+            <el-button class="w-30px" plain>
+              <Icon icon="ep:setting" />
+            </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item
-                  command="handleDefinitionList"
-                  v-if="checkPermi(['bpm:process-definition:query'])"
-                >
-                  历史
+                <el-dropdown-item command="handleAddCategory">
+                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
+                  新建分类
                 </el-dropdown-item>
-                <el-dropdown-item
-                  command="handleChangeState"
-                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
-                </el-dropdown-item>
-                <el-dropdown-item
-                  type="danger"
-                  command="handleDelete"
-                  v-if="checkPermi(['bpm:model:delete'])"
-                  :disabled="!isManagerUser(scope.row)"
-                >
-                  删除
+                <el-dropdown-item command="handleSort">
+                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
+                  分类排序
                 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
+        </el-form-item>
+      </el-form>
+      <div class="mr-20px" v-else>
+        <el-button @click="cancelSort"> 取 消 </el-button>
+        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
+      </div>
+    </div>
+
+    <el-divider />
+
+    <!-- 分类卡片组 -->
+    <div class="px-15px">
+      <draggable
+        :disabled="!isCategorySorting"
+        v-model="categoryGroup"
+        item-key="id"
+        :animation="400"
+      >
+        <template #item="{ element }">
+          <ContentWrap
+            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
+            v-loading="loading"
+            :body-style="{ padding: 0 }"
+            :key="element.id"
+          >
+            <CategoryDraggableModel
+              ref="categoryDraggableModelRef"
+              :isCategorySorting="isCategorySorting"
+              :categoryInfo="element"
+              @success="getList"
+            />
+          </ContentWrap>
         </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
+      </draggable>
+    </div>
   </ContentWrap>
 
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
-
+  <!-- 表单弹窗：添加/修改分类 -->
+  <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
     <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
@@ -218,26 +97,20 @@
 </template>
 
 <script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import * as ModelApi from '@/api/bpm/model'
-import * as FormApi from '@/api/bpm/form'
-import ModelForm from './ModelForm.vue'
-import { setConfAndFields2 } from '@/utils/formCreate'
+import draggable from 'vuedraggable'
 import { CategoryApi } from '@/api/bpm/category'
-import { BpmModelType } from '@/utils/constants'
-import { checkPermi } from '@/utils/permission'
-import { useUserStoreWithOut } from '@/store/modules/user'
+import * as ModelApi from '@/api/bpm/model'
+import ModelForm from './ModelForm.vue'
+import CategoryForm from '../category/CategoryForm.vue'
+import { groupBy, cloneDeep } from 'lodash-es'
+import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const message = useMessage() // 消息弹窗
-const { t } = useI18n() // 国际化
-const { push } = useRouter() // 路由
-const userStore = useUserStoreWithOut() // 用户信息缓存
-
+const categoryDraggableModelRef = ref()
+const categoryFormRef = ref()
 const loading = ref(true) // 列表的加载中
-const total = ref(0) // 列表的总页数
-const list = ref([]) // 列表的数据
+const isCategorySorting = ref(false) // 是否正处于排序状态
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
@@ -246,18 +119,26 @@ const queryParams = reactive({
   category: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryGroup: any = ref([]) // 按照category分组的数据
+const originalData: any = ref([])
+// 查询所有分类数据
+const getAllCategory = async () => {
+  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
+  const data = await CategoryApi.getCategoryPage(queryParams)
+  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
+}
 
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    const data = await ModelApi.getModelPage(queryParams)
-    list.value = data.list
-    total.value = data.total
-  } finally {
-    loading.value = false
-  }
+/** 查询所有流程模型接口 */
+const getAllModel = async () => {
+  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
+  const data = await ModelApi.getModelPage(queryParams)
+  const groupedData = groupBy(data.list, 'categoryName')
+  Object.keys(groupedData).forEach((key) => {
+    const category = categoryGroup.value.find((item) => item.name === key)
+    if (category) {
+      category.modelList = groupedData[key]
+    }
+  })
 }
 
 /** 搜索按钮操作 */
@@ -266,139 +147,82 @@ const handleQuery = () => {
   getList()
 }
 
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value.resetFields()
-  handleQuery()
-}
-
-/** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
-  switch (command) {
-    case 'handleDefinitionList':
-      handleDefinitionList(row)
-      break
-    case 'handleDelete':
-      handleDelete(row)
-      break
-    case 'handleChangeState':
-      handleChangeState(row)
-      break
-    default:
-      break
-  }
-}
-
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
-
-/** 删除按钮操作 */
-const handleDelete = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.delConfirm()
-    // 发起删除
-    await ModelApi.deleteModel(row.id)
-    message.success(t('common.delSuccess'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 更新状态操作 */
-const handleChangeState = async (row: any) => {
-  const state = row.processDefinition.suspensionState
-  const newState = state === 1 ? 2 : 1
-  try {
-    // 修改状态的二次确认
-    const id = row.id
-    debugger
-    const statusState = state === 1 ? '停用' : '启用'
-    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
-    await message.confirm(content)
-    // 发起修改状态
-    await ModelApi.updateModelState(id, newState)
-    message.success(statusState + '成功')
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 设计流程 */
-const handleDesign = (row: any) => {
-  if (row.type == BpmModelType.BPMN) {
-    push({
-      name: 'BpmModelEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  } else {
-    push({
-      name: 'SimpleWorkflowDesignEditor',
-      query: {
-        modelId: row.id
-      }
-    })
-  }
-}
-
-/** 发布流程 */
-const handleDeploy = async (row: any) => {
-  try {
-    // 删除的二次确认
-    await message.confirm('是否部署该流程！！')
-    // 发起部署
-    await ModelApi.deployModel(row.id)
-    message.success(t('部署成功'))
-    // 刷新列表
-    await getList()
-  } catch {}
-}
-
-/** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
-  push({
-    name: 'BpmProcessDefinition',
-    query: {
-      key: row.key
-    }
-  })
-}
-
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row: any) => {
-  if (row.formType == 10) {
-    // 设置表单
-    const data = await FormApi.getForm(row.formId)
-    setConfAndFields2(formDetailPreview, data.conf, data.fields)
-    // 弹窗打开
-    formDetailVisible.value = true
-  } else {
-    await push({
-      path: row.formCustomCreatePath
-    })
+
+/** 右上角设置按钮 */
+const handleCommand = (command: string) => {
+  switch (command) {
+    case 'handleAddCategory':
+      handleAddCategory()
+      break
+    case 'handleSort':
+      handleSort()
+      break
+    default:
+      break
   }
 }
 
-/** 判断是否可以操作 */
-const isManagerUser = (row: any) => {
-  const userId = userStore.getUser.id
-  return row.managerUserIds && row.managerUserIds.includes(userId)
+// 新建分类
+const handleAddCategory = () => {
+  categoryFormRef.value.open('create')
+}
+// 分类排序
+const handleSort = () => {
+  // 保存初始数据
+  originalData.value = cloneDeep(categoryGroup.value)
+  isCategorySorting.value = true
+}
+// 取消排序
+const cancelSort = () => {
+  // 恢复初始数据
+  categoryGroup.value = cloneDeep(originalData.value)
+  isCategorySorting.value = false
+}
+// 保存排序
+const saveSort = () => {
+  // TODO 芋艿：这里需要一个保存分类排序接口
+}
+
+const getList = async () => {
+  loading.value = true
+  try {
+    await getAllCategory()
+    await getAllModel()
+  } finally {
+    loading.value = false
+  }
 }
 
 /** 初始化 **/
 onMounted(async () => {
-  await getList()
-  // 查询流程分类列表
-  categoryList.value = await CategoryApi.getCategorySimpleList()
+  getList()
 })
 </script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-table--fit .el-table__inner-wrapper:before {
+    height: 0;
+  }
+  .el-card {
+    border-radius: 8px;
+  }
+  .el-form--inline .el-form-item {
+    margin-right: 10px;
+  }
+  .el-divider--horizontal {
+    margin-top: 6px;
+  }
+}
+</style>
diff --git a/src/views/bpm/model/index_new.vue b/src/views/bpm/model/index_new.vue
deleted file mode 100644
index 97dca594..00000000
--- a/src/views/bpm/model/index_new.vue
+++ /dev/null
@@ -1,228 +0,0 @@
-<template>
-  <ContentWrap>
-    <div class="flex justify-between pl-20px items-center">
-      <h3 class="font-extrabold">流程模型</h3>
-      <!-- 搜索工作栏 -->
-      <el-form
-        v-if="!isCategorySorting"
-        class="-mb-15px flex mr-10px"
-        :model="queryParams"
-        ref="queryFormRef"
-        :inline="true"
-        label-width="68px"
-        @submit.prevent
-      >
-        <el-form-item align="right" prop="key" class="ml-auto">
-          <el-input
-            v-model="queryParams.key"
-            placeholder="搜索流程"
-            clearable
-            @keyup.enter="handleQuery"
-            class="!w-240px"
-          >
-            <template #prefix>
-              <Icon icon="ep:search" class="mx-10px" />
-            </template>
-          </el-input>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
-            <Icon icon="ep:plus" class="mr-5px" /> 新建模型
-          </el-button>
-        </el-form-item>
-
-        <el-form-item>
-          <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
-            <el-button class="w-30px" plain>
-              <Icon icon="ep:setting" />
-            </el-button>
-            <template #dropdown>
-              <el-dropdown-menu>
-                <el-dropdown-item command="handleAddCategory">
-                  <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
-                  新建分类
-                </el-dropdown-item>
-                <el-dropdown-item command="handleSort">
-                  <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
-                  分类排序
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </template>
-          </el-dropdown>
-        </el-form-item>
-      </el-form>
-      <div class="mr-20px" v-else>
-        <el-button @click="cancelSort"> 取 消 </el-button>
-        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
-      </div>
-    </div>
-
-    <el-divider />
-
-    <!-- 分类卡片组 -->
-    <div class="px-15px">
-      <draggable
-        :disabled="!isCategorySorting"
-        v-model="categoryGroup"
-        item-key="id"
-        :animation="400"
-      >
-        <template #item="{ element }">
-          <ContentWrap
-            class="rounded-lg transition-all duration-300 ease-in-out hover:shadow-xl"
-            v-loading="loading"
-            :body-style="{ padding: 0 }"
-            :key="element.id"
-          >
-            <CategoryDraggableModel
-              ref="categoryDraggableModelRef"
-              :isCategorySorting="isCategorySorting"
-              :categoryInfo="element"
-              @success="getList"
-            />
-          </ContentWrap>
-        </template>
-      </draggable>
-    </div>
-  </ContentWrap>
-
-  <!-- 表单弹窗：添加/修改流程 -->
-  <ModelForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：添加/修改分类 -->
-  <CategoryForm ref="categoryFormRef" @success="getList" />
-  <!-- 弹窗：表单详情 -->
-  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
-    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
-  </Dialog>
-</template>
-
-<script lang="ts" setup>
-import draggable from 'vuedraggable'
-import { CategoryApi } from '@/api/bpm/category'
-import * as ModelApi from '@/api/bpm/model'
-import ModelForm from './ModelForm.vue'
-import CategoryForm from '../category/CategoryForm.vue'
-import { groupBy, cloneDeep } from 'lodash-es'
-import CategoryDraggableModel from './CategoryDraggableModel.vue'
-
-defineOptions({ name: 'BpmModel' })
-
-const categoryDraggableModelRef = ref()
-const categoryFormRef = ref()
-const loading = ref(true) // 列表的加载中
-const isCategorySorting = ref(false) // 是否正处于排序状态
-const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
-})
-const queryFormRef = ref() // 搜索的表单
-const categoryGroup: any = ref([]) // 按照category分组的数据
-const originalData: any = ref([])
-// 查询所有分类数据
-const getAllCategory = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
-  const data = await CategoryApi.getCategoryPage(queryParams)
-  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
-}
-
-/** 查询所有流程模型接口 */
-const getAllModel = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
-  const data = await ModelApi.getModelPage(queryParams)
-  const groupedData = groupBy(data.list, 'categoryName')
-  Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item) => item.name === key)
-    if (category) {
-      category.modelList = groupedData[key]
-    }
-  })
-}
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.pageNo = 1
-  getList()
-}
-
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-/** 流程表单的详情按钮操作 */
-const formDetailVisible = ref(false)
-const formDetailPreview = ref({
-  rule: [],
-  option: {}
-})
-
-/** 右上角设置按钮 */
-const handleCommand = (command: string) => {
-  switch (command) {
-    case 'handleAddCategory':
-      handleAddCategory()
-      break
-    case 'handleSort':
-      handleSort()
-      break
-    default:
-      break
-  }
-}
-
-// 新建分类
-const handleAddCategory = () => {
-  categoryFormRef.value.open('create')
-}
-// 分类排序
-const handleSort = () => {
-  // 保存初始数据
-  originalData.value = cloneDeep(categoryGroup.value)
-  isCategorySorting.value = true
-}
-// 取消排序
-const cancelSort = () => {
-  // 恢复初始数据
-  categoryGroup.value = cloneDeep(originalData.value)
-  isCategorySorting.value = false
-}
-// 保存排序
-const saveSort = () => {
-  // TODO 芋艿：这里需要一个保存分类排序接口
-}
-
-const getList = async () => {
-  loading.value = true
-  try {
-    await getAllCategory()
-    await getAllModel()
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 初始化 **/
-onMounted(async () => {
-  getList()
-})
-</script>
-
-<style lang="scss" scoped>
-:deep() {
-  .el-table--fit .el-table__inner-wrapper:before {
-    height: 0;
-  }
-  .el-card {
-    border-radius: 8px;
-  }
-  .el-form--inline .el-form-item {
-    margin-right: 10px;
-  }
-  .el-divider--horizontal {
-    margin-top: 6px;
-  }
-}
-</style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
new file mode 100644
index 00000000..4534ec61
--- /dev/null
+++ b/src/views/bpm/model/index_old.vue
@@ -0,0 +1,404 @@
+<template>
+  <doc-alert title="流程设计器（BPMN）" url="https://doc.iocoder.cn/bpm/model-designer-dingding/" />
+  <doc-alert
+    title="流程设计器（钉钉、飞书）"
+    url="https://doc.iocoder.cn/bpm/model-designer-bpmn/"
+  />
+  <doc-alert title="选择审批人、发起人自选" url="https://doc.iocoder.cn/bpm/assignee/" />
+  <doc-alert title="会签、或签、依次审批" url="https://doc.iocoder.cn/bpm/multi-instance/" />
+
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item label="流程标识" prop="key">
+        <el-input
+          v-model="queryParams.key"
+          placeholder="请输入流程标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入流程名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="流程分类" prop="category">
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['bpm:model:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新建
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list">
+      <el-table-column label="流程名称" align="center" prop="name" min-width="200" />
+      <el-table-column label="流程图标" align="center" prop="icon" min-width="100">
+        <template #default="scope">
+          <el-image :src="scope.row.icon" class="h-32px w-32px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="可见范围" align="center" prop="startUserIds" min-width="100">
+        <template #default="scope">
+          <el-text v-if="!scope.row.startUsers || scope.row.startUsers.length === 0">
+            全部可见
+          </el-text>
+          <el-text v-else-if="scope.row.startUsers.length == 1">
+            {{ scope.row.startUsers[0].nickname }}
+          </el-text>
+          <el-text v-else>
+            <el-tooltip
+              class="box-item"
+              effect="dark"
+              placement="top"
+              :content="scope.row.startUsers.map((user: any) => user.nickname).join('、')"
+            >
+              {{ scope.row.startUsers[0].nickname }}等 {{ scope.row.startUsers.length }} 人可见
+            </el-tooltip>
+          </el-text>
+        </template>
+      </el-table-column>
+      <el-table-column label="流程分类" align="center" prop="categoryName" min-width="100" />
+      <el-table-column label="表单信息" align="center" prop="formType" min-width="200">
+        <template #default="scope">
+          <el-button
+            v-if="scope.row.formType === 10"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formName }}</span>
+          </el-button>
+          <el-button
+            v-else-if="scope.row.formType === 20"
+            type="primary"
+            link
+            @click="handleFormDetail(scope.row)"
+          >
+            <span>{{ scope.row.formCustomCreatePath }}</span>
+          </el-button>
+          <label v-else>暂无表单</label>
+        </template>
+      </el-table-column>
+      <el-table-column label="最后发布" align="center" prop="deploymentTime" min-width="250">
+        <template #default="scope">
+          <span v-if="scope.row.processDefinition">
+            {{ formatDate(scope.row.processDefinition.deploymentTime) }}
+          </span>
+          <el-tag v-if="scope.row.processDefinition" class="ml-10px">
+            v{{ scope.row.processDefinition.version }}
+          </el-tag>
+          <el-tag v-else type="warning">未部署</el-tag>
+          <el-tag
+            v-if="scope.row.processDefinition?.suspensionState === 2"
+            type="warning"
+            class="ml-10px"
+          >
+            已停用
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="200" fixed="right">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.id)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            修改
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDesign(scope.row)"
+            v-hasPermi="['bpm:model:update']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            设计
+          </el-button>
+          <el-button
+            link
+            class="!ml-5px"
+            type="primary"
+            @click="handleDeploy(scope.row)"
+            v-hasPermi="['bpm:model:deploy']"
+            :disabled="!isManagerUser(scope.row)"
+          >
+            发布
+          </el-button>
+          <el-dropdown
+            class="!align-middle ml-5px"
+            @command="(command) => handleCommand(command, scope.row)"
+            v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
+          >
+            <el-button type="primary" link>更多</el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item
+                  command="handleDefinitionList"
+                  v-if="checkPermi(['bpm:process-definition:query'])"
+                >
+                  历史
+                </el-dropdown-item>
+                <el-dropdown-item
+                  command="handleChangeState"
+                  v-if="checkPermi(['bpm:model:update']) && scope.row.processDefinition"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  {{ scope.row.processDefinition.suspensionState === 1 ? '停用' : '启用' }}
+                </el-dropdown-item>
+                <el-dropdown-item
+                  type="danger"
+                  command="handleDelete"
+                  v-if="checkPermi(['bpm:model:delete'])"
+                  :disabled="!isManagerUser(scope.row)"
+                >
+                  删除
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改流程 -->
+  <ModelForm ref="formRef" @success="getList" />
+
+  <!-- 弹窗：表单详情 -->
+  <Dialog title="表单详情" v-model="formDetailVisible" width="800">
+    <form-create :rule="formDetailPreview.rule" :option="formDetailPreview.option" />
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { formatDate } from '@/utils/formatTime'
+import * as ModelApi from '@/api/bpm/model'
+import * as FormApi from '@/api/bpm/form'
+import ModelForm from './ModelForm.vue'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import { CategoryApi } from '@/api/bpm/category'
+import { BpmModelType } from '@/utils/constants'
+import { checkPermi } from '@/utils/permission'
+import { useUserStoreWithOut } from '@/store/modules/user'
+
+defineOptions({ name: 'BpmModel' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { push } = useRouter() // 路由
+const userStore = useUserStoreWithOut() // 用户信息缓存
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref([]) // 列表的数据
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  key: undefined,
+  name: undefined,
+  category: undefined
+})
+const queryFormRef = ref() // 搜索的表单
+const categoryList = ref([]) // 流程分类列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ModelApi.getModelPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** '更多'操作按钮 */
+const handleCommand = (command: string, row: any) => {
+  switch (command) {
+    case 'handleDefinitionList':
+      handleDefinitionList(row)
+      break
+    case 'handleDelete':
+      handleDelete(row)
+      break
+    case 'handleChangeState':
+      handleChangeState(row)
+      break
+    default:
+      break
+  }
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await ModelApi.deleteModel(row.id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 更新状态操作 */
+const handleChangeState = async (row: any) => {
+  const state = row.processDefinition.suspensionState
+  const newState = state === 1 ? 2 : 1
+  try {
+    // 修改状态的二次确认
+    const id = row.id
+    debugger
+    const statusState = state === 1 ? '停用' : '启用'
+    const content = '是否确认' + statusState + '流程名字为"' + row.name + '"的数据项?'
+    await message.confirm(content)
+    // 发起修改状态
+    await ModelApi.updateModelState(id, newState)
+    message.success(statusState + '成功')
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 设计流程 */
+const handleDesign = (row: any) => {
+  if (row.type == BpmModelType.BPMN) {
+    push({
+      name: 'BpmModelEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  } else {
+    push({
+      name: 'SimpleWorkflowDesignEditor',
+      query: {
+        modelId: row.id
+      }
+    })
+  }
+}
+
+/** 发布流程 */
+const handleDeploy = async (row: any) => {
+  try {
+    // 删除的二次确认
+    await message.confirm('是否部署该流程！！')
+    // 发起部署
+    await ModelApi.deployModel(row.id)
+    message.success(t('部署成功'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 跳转到指定流程定义列表 */
+const handleDefinitionList = (row) => {
+  push({
+    name: 'BpmProcessDefinition',
+    query: {
+      key: row.key
+    }
+  })
+}
+
+/** 流程表单的详情按钮操作 */
+const formDetailVisible = ref(false)
+const formDetailPreview = ref({
+  rule: [],
+  option: {}
+})
+const handleFormDetail = async (row: any) => {
+  if (row.formType == 10) {
+    // 设置表单
+    const data = await FormApi.getForm(row.formId)
+    setConfAndFields2(formDetailPreview, data.conf, data.fields)
+    // 弹窗打开
+    formDetailVisible.value = true
+  } else {
+    await push({
+      path: row.formCustomCreatePath
+    })
+  }
+}
+
+/** 判断是否可以操作 */
+const isManagerUser = (row: any) => {
+  const userId = userStore.getUser.id
+  return row.managerUserIds && row.managerUserIds.includes(userId)
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 查询流程分类列表
+  categoryList.value = await CategoryApi.getCategorySimpleList()
+})
+</script>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 00a579f4..33520627 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,8 +1,5 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header v-if="showHeader">
-      <span class="el-icon-picture-outline">流程图</span>
-    </template>
     <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
   </el-card>
 </template>
@@ -16,8 +13,7 @@ defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
   id: propTypes.string, // 流程实例的编号
-  bpmnXml: propTypes.string, // BPMN XML
-  showHeader: propTypes.bool.def(true), // 是否显示头
+  bpmnXml: propTypes.string // BPMN XML
 })
 
 const view = ref({
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index fd2de617..b164f337 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,9 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <template #header v-if="showHeader">
-      <span class="el-icon-picture-outline">审批记录</span>
-    </template>
-    <el-col :offset="3" :span="17">
+    <el-col>
       <div class="block">
         <el-timeline>
           <el-timeline-item
@@ -26,14 +23,6 @@
             <p style="font-weight: 700">
               审批任务：{{ item.name }}
               <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
-              <el-button
-                class="ml-10px"
-                v-if="!isEmpty(item.children)"
-                @click="openChildrenTask(item)"
-                size="small"
-              >
-                <Icon icon="ep:memo" /> 子任务
-              </el-button>
               <el-button
                 class="ml-10px"
                 size="small"
@@ -78,8 +67,6 @@
     </el-col>
   </el-card>
 
-  <!-- 弹窗：子任务  -->
-  <TaskSignList ref="taskSignListRef" @success="refresh" />
   <!-- 弹窗：表单 -->
   <Dialog title="表单详情" v-model="taskFormVisible" width="600">
     <form-create
@@ -94,8 +81,6 @@
 import { formatDate, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE } from '@/utils/dict'
-import { isEmpty } from '@/utils/is'
-import TaskSignList from './dialog/TaskSignList.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { setConfAndFields2 } from '@/utils/formCreate'
 
@@ -104,8 +89,7 @@ defineOptions({ name: 'BpmProcessInstanceTaskList' })
 defineProps({
   loading: propTypes.bool, // 是否加载中
   processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object), // 流程任务的数组
-  showHeader: propTypes.bool.def(true), // 是否显示头
+  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
 })
 
 /** 获得流程实例对应的颜色 */
@@ -142,12 +126,6 @@ const getTaskTimelineItemType = (item: any) => {
   return ''
 }
 
-/** 子任务 */
-const taskSignListRef = ref()
-const openChildrenTask = (item: any) => {
-  taskSignListRef.value.open(item)
-}
-
 /** 查看表单 */
 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
 const taskForm = ref({
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue
deleted file mode 100644
index 178b1b97..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskDelegateForm.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="委派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="接收人" prop="delegateUserId">
-        <el-select v-model="formData.delegateUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="委派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入委派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'BpmTaskDelegateForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  delegateUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '委派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.delegateTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    delegateUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
deleted file mode 100644
index 92d15f2c..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskReturnForm.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="退回任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="退回节点" prop="targetTaskDefinitionKey">
-        <el-select v-model="formData.targetTaskDefinitionKey" clearable style="width: 100%">
-          <el-option
-            v-for="item in returnList"
-            :key="item.taskDefinitionKey"
-            :label="item.name"
-            :value="item.taskDefinitionKey"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="退回理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入退回理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" name="TaskRollbackDialogForm" setup>
-import * as TaskApi from '@/api/bpm/task'
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  targetTaskDefinitionKey: undefined,
-  reason: ''
-})
-const formRules = ref({
-  targetTaskDefinitionKey: [{ required: true, message: '必须选择退回节点', trigger: 'change' }],
-  reason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const returnList = ref([] as any)
-/** 打开弹窗 */
-const open = async (id: string) => {
-  returnList.value = await TaskApi.getTaskListByReturn(id)
-  if (returnList.value.length === 0) {
-    message.warning('当前没有可退回的节点')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.returnTask(formData.value)
-    message.success('退回成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    targetTaskDefinitionKey: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue
deleted file mode 100644
index 9e4998c1..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignCreateForm.vue
+++ /dev/null
@@ -1,99 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="加签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="加签处理人" prop="userIds">
-        <el-select v-model="formData.userIds" multiple clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="加签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入加签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('before')">
-        向前加签
-      </el-button>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm('after')">
-        向后加签
-      </el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskSignCreateForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  userIds: [],
-  type: '',
-  reason: ''
-})
-const formRules = ref({
-  userIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '加签理由不能为空', trigger: 'change' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async (type: string) => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  formData.value.type = type
-  try {
-    await TaskApi.signCreateTask(formData.value)
-    message.success('加签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    userIds: [],
-    type: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
index fc6d6b2c..33d7ed76 100644
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
@@ -86,4 +86,5 @@ const resetForm = () => {
   }
   formRef.value?.resetFields()
 }
+// TODO @jason：新界面搞完，可以删除
 </script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
index 80ef37e1..57842a5e 100644
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
+++ b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
@@ -103,4 +103,5 @@ const handleSignDeleteSuccess = () => {
 const isSignDeleteButtonVisible = (task: any) => {
   return task && task.children && !isEmpty(task.children)
 }
+// TODO @jason：新界面搞完，可以删除
 </script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue
deleted file mode 100644
index c1012ac9..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskTransferForm.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="转派任务" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="新审批人" prop="assigneeUserId">
-        <el-select v-model="formData.assigneeUserId" clearable style="width: 100%">
-          <el-option
-            v-for="item in userList"
-            :key="item.id"
-            :label="item.nickname"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="转派理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入转派理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import * as UserApi from '@/api/system/user'
-
-defineOptions({ name: 'TaskTransferForm' })
-
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  assigneeUserId: undefined,
-  reason: ''
-})
-const formRules = ref({
-  assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
-  reason: [{ required: true, message: '转派理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const userList = ref<any[]>([]) // 用户列表
-
-/** 打开弹窗 */
-const open = async (id: string) => {
-  dialogVisible.value = true
-  resetForm()
-  formData.value.id = id
-  // 获得用户列表
-  userList.value = await UserApi.getSimpleUserList()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.transferTask(formData.value)
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    assigneeUserId: undefined,
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-</script>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index fb45d8c9..204746c3 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -1,216 +1,163 @@
 <template>
-  <ContentWrap>
-    <!-- 审批信息 -->
-    <el-card
-      v-for="(item, index) in runningTasks"
-      :key="index"
-      v-loading="processInstanceLoading"
-      class="box-card"
-    >
-      <template #header>
-        <span class="el-icon-picture-outline">审批任务【{{ item.name }}】</span>
-      </template>
-      <el-col :offset="6" :span="16">
-        <el-form
-          :ref="'form' + index"
-          :model="auditForms[index]"
-          :rules="auditRule"
-          label-width="100px"
-        >
-          <el-form-item v-if="processInstance && processInstance.name" label="流程名">
-            {{ processInstance.name }}
-          </el-form-item>
-          <el-form-item v-if="processInstance && processInstance.startUser" label="流程发起人">
-            {{ processInstance?.startUser.nickname }}
-            <el-tag size="small" type="info">{{ processInstance?.startUser.deptName }}</el-tag>
-          </el-form-item>
-          <el-card v-if="runningTasks[index].formId > 0" class="mb-15px !-mt-10px">
-            <template #header>
-              <span class="el-icon-picture-outline">
-                填写表单【{{ runningTasks[index]?.formName }}】
-              </span>
-            </template>
-            <form-create
-              v-model="approveForms[index].value"
-              v-model:api="approveFormFApis[index]"
-              :option="approveForms[index].option"
-              :rule="approveForms[index].rule"
-            />
-          </el-card>
-          <el-form-item label="审批建议" prop="reason">
-            <el-input
-              v-model="auditForms[index].reason"
-              placeholder="请输入审批建议"
-              type="textarea"
-            />
-          </el-form-item>
-          <el-form-item label="抄送人" prop="copyUserIds">
-            <el-select v-model="auditForms[index].copyUserIds" multiple placeholder="请选择抄送人">
-              <el-option
-                v-for="itemx in userOptions"
-                :key="itemx.id"
-                :label="itemx.nickname"
-                :value="itemx.id"
-              />
-            </el-select>
-          </el-form-item>
-        </el-form>
-        <div style="margin-bottom: 20px; margin-left: 10%; font-size: 14px">
-          <!-- TODO @jason：建议搞个 if 来判断，替代现有的 !item.buttonsSetting || item.buttonsSetting[OpsButtonType.APPROVE]?.enable -->
-          <el-button
-            type="success"
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.APPROVE]?.enable"
-            @click="handleAudit(item, true)"
-          >
-            <Icon icon="ep:select" />
-            <!-- TODO @jason：这个也是类似哈，搞个方法来生成名字 -->
-            {{
-              item.buttonsSetting?.[OperationButtonType.APPROVE]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.APPROVE)
-            }}
-          </el-button>
-          <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.REJECT]?.enable"
-            type="danger"
-            @click="handleAudit(item, false)"
-          >
-            <Icon icon="ep:close" />
-            {{
-              item.buttonsSetting?.[OperationButtonType.REJECT].displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.REJECT)
-            }}
-          </el-button>
-          <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.TRANSFER]?.enable"
-            type="primary"
-            @click="openTaskUpdateAssigneeForm(item.id)"
-          >
-            <Icon icon="ep:edit" />
-            {{
-              item.buttonsSetting?.[OperationButtonType.TRANSFER]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.TRANSFER)
-            }}
-          </el-button>
-          <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.DELEGATE]?.enable"
-            type="primary"
-            @click="handleDelegate(item)"
-          >
-            <Icon icon="ep:position" />
-            {{
-              item.buttonsSetting?.[OperationButtonType.DELEGATE]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.DELEGATE)
-            }}
-          </el-button>
-          <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.ADD_SIGN]?.enable"
-            type="primary"
-            @click="handleSign(item)"
-          >
-            <Icon icon="ep:plus" />
-            {{
-              item.buttonsSetting?.[OperationButtonType.ADD_SIGN]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.ADD_SIGN)
-            }}
-          </el-button>
-          <el-button
-            v-if="!item.buttonsSetting || item.buttonsSetting[OperationButtonType.RETURN]?.enable"
-            type="warning"
-            @click="handleBack(item)"
-          >
-            <Icon icon="ep:back" />
-            {{
-              item.buttonsSetting?.[OperationButtonType.RETURN]?.displayName ||
-              OPERATION_BUTTON_NAME.get(OperationButtonType.RETURN)
-            }}
-          </el-button>
-        </div>
-      </el-col>
-    </el-card>
-
-    <!-- 申请信息 -->
-    <el-card v-loading="processInstanceLoading" class="box-card">
-      <template #header>
-        <span class="el-icon-document">申请信息【{{ processInstance.name }}】</span>
-      </template>
-      <!-- 情况一：流程表单 -->
-      <el-col v-if="processInstance?.processDefinition?.formType === 10" :offset="6" :span="16">
-        <form-create
-          v-model="detailForm.value"
-          v-model:api="fApi"
-          :option="detailForm.option"
-          :rule="detailForm.rule"
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <img
+          class="position-absolute right-20px"
+          width="150"
+          :src="auditIcons[processInstance.status]"
+          alt=""
         />
-      </el-col>
-      <!-- 情况二：业务表单 -->
-      <div v-if="processInstance?.processDefinition?.formType === 20">
-        <BusinessFormComponent :id="processInstance.businessKey" />
-      </div>
-    </el-card>
+        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
+        <el-divider class="!my-8px" />
+        <div class="flex items-center gap-5 mb-10px h-40px">
+          <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
+          <dict-tag
+            v-if="processInstance.status"
+            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
+            :value="processInstance.status"
+          />
+        </div>
 
-    <!-- 审批记录 -->
-    <ProcessInstanceTaskList
-      :loading="tasksLoad"
-      :process-instance="processInstance"
-      :tasks="tasks"
-      @refresh="getTaskList"
-    />
+        <div class="flex items-center gap-5 mb-10px text-13px h-35px">
+          <div
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600"
+          >
+            <el-avatar
+              :size="28"
+              v-if="processInstance?.startUser?.avatar"
+              :src="processInstance?.startUser?.avatar"
+            />
+            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
+              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ processInstance?.startUser?.nickname }}
+          </div>
+          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
+        </div>
 
-    <!-- 高亮流程图 -->
-    <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" />
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="审批详情" name="form">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="18" class="!flex !flex-col formCol">
+                    <!-- 表单信息 -->
+                    <div
+                      v-loading="processInstanceLoading"
+                      class="form-box flex flex-col mb-30px flex-1"
+                    >
+                      <!-- 情况一：流程表单 -->
+                      <el-col v-if="processDefinition?.formType === 10">
+                        <form-create
+                          v-model="detailForm.value"
+                          v-model:api="fApi"
+                          :option="detailForm.option"
+                          :rule="detailForm.rule"
+                        />
+                      </el-col>
+                      <!-- 情况二：业务表单 -->
+                      <div v-if="processDefinition?.formType === 20">
+                        <BusinessFormComponent :id="processInstance.businessKey" />
+                      </div>
+                    </div>
+                  </el-col>
+                  <el-col :span="6">
+                    <!-- 审批记录时间线 -->
+                    <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
 
-    <!-- 弹窗：转派审批人 -->
-    <TaskTransferForm ref="taskTransferFormRef" @success="getDetail" />
-    <!-- 弹窗：退回节点 -->
-    <TaskReturnForm ref="taskReturnFormRef" @success="getDetail" />
-    <!-- 弹窗：委派，将任务委派给别人处理，处理完成后，会重新回到原审批人手中-->
-    <TaskDelegateForm ref="taskDelegateForm" @success="getDetail" />
-    <!-- 弹窗：加签，当前任务审批人为A，向前加签选了一个C，则需要C先审批，然后再是A审批，向后加签B，A审批完，需要B再审批完，才算完成这个任务节点 -->
-    <TaskSignCreateForm ref="taskSignCreateFormRef" @success="getDetail" />
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <ProcessInstanceBpmnViewer
+                :id="`${id}`"
+                :loading="processInstanceLoading"
+                :show-header="false"
+              />
+            </div>
+          </el-tab-pane>
+
+          <!-- 流转记录 -->
+          <el-tab-pane label="流转记录" name="record">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <ProcessInstanceTaskList
+                  :loading="tasksLoad"
+                  :process-instance="processInstance"
+                  :tasks="tasks"
+                  :show-header="false"
+                />
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
+
+          <!-- 流转评论 TODO 待开发 -->
+          <el-tab-pane label="流转评论" name="comment" v-if="false">
+            <div class="form-scroll-area">
+              <el-scrollbar> 流转评论 </el-scrollbar>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :userOptions="userOptions"
+            @success="refresh"
+          />
+        </div>
+      </el-scrollbar>
+    </div>
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { useUserStore } from '@/store/modules/user'
+import { formatDate } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
-import TaskReturnForm from './dialog/TaskReturnForm.vue'
-import TaskDelegateForm from './dialog/TaskDelegateForm.vue'
-import TaskTransferForm from './dialog/TaskTransferForm.vue'
-import TaskSignCreateForm from './dialog/TaskSignCreateForm.vue'
-import { registerComponent } from '@/utils/routerHelper'
-import { isEmpty } from '@/utils/is'
+import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
+import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import * as UserApi from '@/api/system/user'
-import {
-  OperationButtonType,
-  OPERATION_BUTTON_NAME
-} from '@/components/SimpleProcessDesignerV2/src/consts'
+import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import audit1 from '@/assets/svgs/bpm/audit1.svg'
+import audit2 from '@/assets/svgs/bpm/audit2.svg'
+import audit3 from '@/assets/svgs/bpm/audit3.svg'
+import audit4 from '@/assets/svgs/bpm/audit4.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
-
-const { query } = useRoute() // 查询参数
+const props = defineProps<{
+  id: string // 流程实例的编号
+  taskId?: string // 任务编号
+  activityId?: string //流程活动编号，用于抄送查看
+}>()
 const message = useMessage() // 消息弹窗
-const { proxy } = getCurrentInstance() as any
-
-const userId = useUserStore().getUser.id // 当前登录的编号
-const id = query.id as unknown as string // 流程实例的编号
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
-const bpmnXml = ref('') // BPMN XML
+const processDefinition = ref<any>({}) // 流程定义
+const timelineRef = ref()
+// 操作按钮组件 ref
+const operationButtonRef = ref()
 const tasksLoad = ref(true) // 任务的加载中
 const tasks = ref<any[]>([]) // 任务列表
-// ========== 审批信息 ==========
-const runningTasks = ref<any[]>([]) // 运行中的任务
-const auditForms = ref<any[]>([]) // 审批任务的表单
-const auditRule = reactive({
-  reason: [{ required: true, message: '审批建议不能为空', trigger: 'blur' }]
-})
-const approveForms = ref<any[]>([]) // 审批通过时，额外的补充信息
-const approveFormFApis = ref<ApiAttrs[]>([]) // approveForms 的 fAPi
+const auditIcons = {
+  1: audit1,
+  2: audit2,
+  3: audit3,
+  4: audit4
+}
 
 // ========== 申请信息 ==========
 const fApi = ref<ApiAttrs>() //
@@ -220,163 +167,106 @@ const detailForm = ref({
   value: {}
 }) // 流程实例的表单详情
 
-/** 监听 approveFormFApis，实现它对应的 form-create 初始化后，隐藏掉对应的表单提交按钮 */
-watch(
-  () => approveFormFApis.value,
-  (value) => {
-    value?.forEach((api) => {
-      api.btn.show(false)
-      api.resetBtn.show(false)
-    })
-  },
-  {
-    deep: true
-  }
-)
-
-/** 处理审批通过和不通过的操作 */
-const handleAudit = async (task, pass) => {
-  // 1.1 获得对应表单
-  const index = runningTasks.value.indexOf(task)
-  const auditFormRef = proxy.$refs['form' + index][0]
-  // 1.2 校验表单
-  const elForm = unref(auditFormRef)
-  if (!elForm) return
-  let valid = await elForm.validate()
-  if (!valid) return
-  // 校验申请表单（可编辑字段）
-  // TODO @jason：之前这里是 if (!fApi.value) return；针对业务表单的情况下，会导致没办法审核，可能要看下。我这里改了点，看看是不是还有别的地方兼容性
-  if (fApi.value) {
-    valid = await fApi.value.validate()
-    if (!valid) return
-  }
-
-  // 2.1 提交审批
-  const data = {
-    id: task.id,
-    reason: auditForms.value[index].reason,
-    copyUserIds: auditForms.value[index].copyUserIds
-  }
-  if (pass) {
-    // 审批通过，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
-    const formCreateApi = approveFormFApis.value[index]
-    if (formCreateApi) {
-      await formCreateApi.validate()
-      data.variables = approveForms.value[index].value
-    }
-    // 获取表单可编辑字段的值
-    if (fApi.value) {
-      data.variables = getWritableValueOfForm(task.fieldsPermission)
-    }
-
-    await TaskApi.approveTask(data)
-    message.success('审批通过成功')
-  } else {
-    await TaskApi.rejectTask(data)
-    message.success('审批不通过成功')
-  }
-  // 2.2 加载最新数据
-  getDetail()
-}
-
-/** 转派审批人 */
-const taskTransferFormRef = ref()
-const openTaskUpdateAssigneeForm = (id: string) => {
-  taskTransferFormRef.value.open(id)
-}
-
-/** 处理审批退回的操作 */
-const taskDelegateForm = ref()
-const handleDelegate = async (task) => {
-  taskDelegateForm.value.open(task.id)
-}
-
-/** 处理审批退回的操作 */
-const taskReturnFormRef = ref()
-const handleBack = async (task: any) => {
-  taskReturnFormRef.value.open(task.id)
-}
-
-/** 处理审批加签的操作 */
-const taskSignCreateFormRef = ref()
-const handleSign = async (task: any) => {
-  taskSignCreateFormRef.value.open(task.id)
-}
-
 /** 获得详情 */
-const getDetail = async () => {
-  // 1. 获得流程任务列表（审批记录）。 需要先获取任务，表单的权限设置需要根据任务来设置
-  await getTaskList()
-  // 2. 获得流程实例相关
-  getProcessInstance()
+const getDetail = () => {
+  // 1. 获取审批详情
+  getApprovalDetail()
+  // 2. 获得流程任务列表
+  getTaskList()
 }
 
 /** 加载流程实例 */
-const BusinessFormComponent = ref(null) // 异步组件
-const getProcessInstance = async () => {
+const BusinessFormComponent = ref<any>(null) // 异步组件
+/** 获取审批详情 */
+const getApprovalDetail = async () => {
+  processInstanceLoading.value = true
   try {
-    processInstanceLoading.value = true
-    const data = await ProcessInstanceApi.getProcessInstance(id)
+    const param = {
+      processInstanceId: props.id,
+      activityId: props.activityId,
+      taskId: props.taskId
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
     if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    if (!data.processDefinition || !data.processInstance) {
       message.error('查询不到流程信息！')
       return
     }
-    processInstance.value = data
+    processInstance.value = data.processInstance
+    processDefinition.value = data.processDefinition
 
     // 设置表单信息
-    const processDefinition = data.processDefinition
-    if (processDefinition.formType === 10) {
+    if (processDefinition.value.formType === 10) {
+      // 获取表单字段权限
+      const formFieldsPermission = data.formFieldsPermission
+
       if (detailForm.value.rule.length > 0) {
-        detailForm.value.value = data.formVariables
+        // 避免刷新 form-create 显示不了，
+        detailForm.value.value = processInstance.value.formVariables
       } else {
         setConfAndFields2(
           detailForm,
-          processDefinition.formConf,
-          processDefinition.formFields,
-          data.formVariables
+          processDefinition.value.formConf,
+          processDefinition.value.formFields,
+          processInstance.value.formVariables
         )
       }
       nextTick().then(() => {
         fApi.value?.btn.show(false)
         fApi.value?.resetBtn.show(false)
+        //@ts-ignore
         fApi.value?.disabled(true)
-        // 设置表单权限。后续需要改造成。只处理一个运行中的任务
-        if (runningTasks.value.length > 0) {
-          const task = runningTasks.value.at(0)
-          if (task.fieldsPermission) {
-            Object.keys(task.fieldsPermission).forEach((item) => {
-              setFieldPermission(item, task.fieldsPermission[item])
-            })
-          }
+        // 设置表单字段权限
+        if (formFieldsPermission) {
+          Object.keys(data.formFieldsPermission).forEach((item) => {
+            setFieldPermission(item, formFieldsPermission[item])
+          })
         }
       })
-    } else {
-      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
-      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
 
-    // 加载流程图
-    bpmnXml.value = (
-      await DefinitionApi.getProcessDefinition(processDefinition.id as number)
-    )?.bpmnXml
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+
+    // 获取待办任务显示操作按钮
+    operationButtonRef.value?.loadTodoTask(data.todoTask)
   } finally {
     processInstanceLoading.value = false
   }
 }
 
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+/**
+ * 设置表单权限
+ */
+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 getTaskList = async () => {
-  runningTasks.value = []
-  auditForms.value = []
-  approveForms.value = []
-  approveFormFApis.value = []
   try {
     // 获得未取消的任务
     tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(id)
+    const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
     tasks.value = []
     // 1.1 移除已取消的审批
-    data.forEach((task) => {
+    data.forEach((task: any) => {
       if (task.status !== 4) {
         tasks.value.push(task)
       }
@@ -395,77 +285,21 @@ const getTaskList = async () => {
         return b.createTime - a.createTime
       }
     })
-
-    // 获得需要自己审批的任务
-    loadRunningTask(tasks.value)
   } finally {
     tasksLoad.value = false
   }
 }
 
 /**
- * 设置 runningTasks 中的任务
+ * 操作成功后刷新
  */
-const loadRunningTask = (tasks) => {
-  tasks.forEach((task) => {
-    if (!isEmpty(task.children)) {
-      loadRunningTask(task.children)
-    }
-    // 2.1 只有待处理才需要
-    if (task.status !== 1 && task.status !== 6) {
-      return
-    }
-    // 2.2 自己不是处理人
-    if (!task.assigneeUser || task.assigneeUser.id !== userId) {
-      return
-    }
-
-    // 2.3 添加到处理任务
-    runningTasks.value.push({ ...task })
-    auditForms.value.push({
-      reason: '',
-      copyUserIds: []
-    })
-
-    // 2.4 处理 approve 表单
-    if (task.formId && task.formConf) {
-      const approveForm = {}
-      setConfAndFields2(approveForm, task.formConf, task.formFields, task.formVariables)
-      approveForms.value.push(approveForm)
-    } else {
-      approveForms.value.push({}) // 占位，避免为空
-    }
-  })
+const refresh = () => {
+  // 重新获取详情
+  getDetail()
 }
 
-/**
- * 设置表单权限
- */
-const setFieldPermission = (field: string, permission: string) => {
-  if (permission === '1') {
-    fApi.value?.disabled(true, field)
-  }
-  if (permission === '2') {
-    fApi.value?.disabled(false, field)
-  }
-  if (permission === '3') {
-    fApi.value?.hidden(true, field)
-  }
-}
-/**
- * 获取可以编辑字段的值
- */
-const getWritableValueOfForm = (fieldsPermission: Object) => {
-  const fieldsValue = {}
-  if (fieldsPermission && fApi.value) {
-    Object.keys(fieldsPermission).forEach((item) => {
-      if (fieldsPermission[item] === '2') {
-        fieldsValue[item] = fApi.value.getValue(item)
-      }
-    })
-  }
-  return fieldsValue
-}
+/** 当前的Tab */
+const activeTab = ref('form')
 
 /** 初始化 */
 const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
@@ -475,3 +309,38 @@ onMounted(async () => {
   userOptions.value = await UserApi.getSimpleUserList()
 })
 </script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/index_new.vue b/src/views/bpm/processInstance/detail/index_new.vue
deleted file mode 100644
index 262c1844..00000000
--- a/src/views/bpm/processInstance/detail/index_new.vue
+++ /dev/null
@@ -1,341 +0,0 @@
-<template>
-  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }" class="position-relative">
-    <div class="processInstance-wrap-main">
-      <el-scrollbar>
-        <img
-          class="position-absolute right-20px"
-          width="150"
-          :src="auditIcons[processInstance.status]"
-          alt=""
-        />
-        <div class="text-#878c93 h-15px">编号：{{ id }}</div>
-        <el-divider class="!my-8px" />
-        <div class="flex items-center gap-5 mb-10px h-40px">
-          <div class="text-26px font-bold mb-5px">{{ processInstance.name }}</div>
-          <dict-tag
-            v-if="processInstance.status"
-            :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
-            :value="processInstance.status"
-          />
-        </div>
-
-        <div class="flex items-center gap-5 mb-10px text-13px h-35px">
-          <div class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600">
-            <el-avatar
-              :size="28"
-              v-if="processInstance?.startUser?.avatar"
-              :src="processInstance?.startUser?.avatar"
-            />
-            <el-avatar :size="28" v-else-if="processInstance?.startUser?.nickname">
-              {{ processInstance?.startUser?.nickname.substring(0, 1) }}
-            </el-avatar>
-            {{ processInstance?.startUser?.nickname }}
-          </div>
-          <div class="text-#878c93"> {{ formatDate(processInstance.startTime) }} 提交 </div>
-        </div>
-
-        <el-tabs v-model="activeTab">
-          <!-- 表单信息 -->
-          <el-tab-pane label="审批详情" name="form">
-            <div class="form-scroll-area">
-              <el-scrollbar>
-                <el-row>
-                  <el-col :span="18" class="!flex !flex-col formCol">
-                    <!-- 表单信息 -->
-                    <div
-                      v-loading="processInstanceLoading"
-                      class="form-box flex flex-col mb-30px flex-1"
-                    >
-                      <!-- 情况一：流程表单 -->
-                      <el-col v-if="processDefinition?.formType === 10">
-                        <form-create
-                          v-model="detailForm.value"
-                          v-model:api="fApi"
-                          :option="detailForm.option"
-                          :rule="detailForm.rule"
-                        />
-                      </el-col>
-                      <!-- 情况二：业务表单 -->
-                      <div v-if="processDefinition?.formType === 20">
-                        <BusinessFormComponent :id="processInstance.businessKey" />
-                      </div>
-                    </div>
-                  </el-col>
-                  <el-col :span="6">
-                    <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
-                  </el-col>
-                </el-row>
-              </el-scrollbar>
-            </div>
-          </el-tab-pane>
-
-          <!-- 流程图 -->
-          <el-tab-pane label="流程图" name="diagram">
-            <div class="form-scroll-area">
-              <ProcessInstanceBpmnViewer :id="`${id}`" :loading="processInstanceLoading" :show-header="false"/>
-            </div>
-          </el-tab-pane>
-
-          <!-- 流转记录 -->
-          <el-tab-pane label="流转记录" name="record">
-            <div class="form-scroll-area">
-              <el-scrollbar>
-                <ProcessInstanceTaskList
-                  :loading="tasksLoad"
-                  :process-instance="processInstance"
-                  :tasks="tasks"
-                  :show-header="false"
-                />
-              </el-scrollbar>
-            </div>
-          </el-tab-pane>
-
-          <!-- 流转评论 TODO 待开发 -->
-          <el-tab-pane label="流转评论" name="comment">
-            <div class="form-scroll-area">
-              <el-scrollbar> 流转评论 </el-scrollbar>
-            </div>
-          </el-tab-pane>
-        </el-tabs>
-
-        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
-          <!-- 操作栏按钮 -->
-          <ProcessInstanceOperationButton
-            ref="operationButtonRef"
-            :process-instance="processInstance"
-            :process-definition="processDefinition"
-            :userOptions="userOptions"
-            @success="refresh"
-          />
-        </div>
-      </el-scrollbar>
-    </div>
-  </ContentWrap>
-</template>
-<script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
-import { DICT_TYPE } from '@/utils/dict'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
-import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
-import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
-import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
-import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
-import * as UserApi from '@/api/system/user'
-import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
-import audit1 from '@/assets/svgs/bpm/audit1.svg'
-import audit2 from '@/assets/svgs/bpm/audit2.svg'
-import audit3 from '@/assets/svgs/bpm/audit3.svg'
-import audit4 from '@/assets/svgs/bpm/audit4.svg'
-
-defineOptions({ name: 'BpmProcessInstanceDetail' })
-const props = defineProps<{
-  id: string // 流程实例的编号
-  taskId?: string // 任务编号
-  activityId?: string //流程活动编号，用于抄送查看
-}>()
-const message = useMessage() // 消息弹窗
-const processInstanceLoading = ref(false) // 流程实例的加载中
-const processInstance = ref<any>({}) // 流程实例
-const processDefinition = ref<any>({}) // 流程定义
-const timelineRef = ref()
-// 操作按钮组件 ref
-const operationButtonRef = ref()
-const tasksLoad = ref(true) // 任务的加载中
-const tasks = ref<any[]>([]) // 任务列表
-const auditIcons = {
-  1: audit1,
-  2: audit2,
-  3: audit3,
-  4: audit4
-}
-
-// ========== 申请信息 ==========
-const fApi = ref<ApiAttrs>() //
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程实例的表单详情
-
-/** 获得详情 */
-const getDetail = async () => {
-  // 1. 获取审批详情
-  getApprovalDetail()
-  // 2. 获得流程任务列表
-  getTaskList()
-}
-
-/** 加载流程实例 */
-const BusinessFormComponent = ref<any>(null) // 异步组件
-/** 获取审批详情 */
-const getApprovalDetail = async () => {
-  processInstanceLoading.value = true
-  try {
-    const param = {
-      processInstanceId: props.id,
-      activityId: props.activityId,
-      taskId: props.taskId
-    }
-    const data = await ProcessInstanceApi.getApprovalDetail(param);
-    if (!data) {
-      message.error('查询不到审批详情信息！')
-      return
-    }
-    if(!data.processDefinition || !data.processInstance) {
-      message.error('查询不到流程信息！')
-      return
-    }
-    processInstance.value = data.processInstance
-    processDefinition.value = data.processDefinition
-
-    // 设置表单信息
-    if (processDefinition.value.formType === 10) {
-      // 获取表单字段权限
-      const formFieldsPermission = data.formFieldsPermission
-     
-      if (detailForm.value.rule.length > 0) {  // 避免刷新 form-create 显示不了，
-        detailForm.value.value = processInstance.value.formVariables
-      } else {
-        setConfAndFields2(
-          detailForm,
-          processDefinition.value.formConf,
-          processDefinition.value.formFields,
-          processInstance.value.formVariables
-        )
-      }
-      nextTick().then(() => {
-        fApi.value?.btn.show(false)
-        fApi.value?.resetBtn.show(false)
-        //@ts-ignore
-        fApi.value?.disabled(true)
-        // 设置表单字段权限
-        if (formFieldsPermission) {
-          Object.keys(data.formFieldsPermission).forEach((item) => {
-            setFieldPermission(item, formFieldsPermission[item])
-          })
-        }
-      })
-    }
-
-    // 获取审批节点，显示 Timeline 的数据
-    approveNodes.value = data.approveNodes
-
-    // 获取待办任务显示操作按钮
-    operationButtonRef.value?.loadTodoTask(data.todoTask)
-
-  } finally {
-    processInstanceLoading.value = false
-  }
-  
-}
-
-// 审批节点信息
-const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
-/**
- * 设置表单权限
- */
-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 getTaskList = async () => {
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task: any) => {
-      if (task.status !== 4) {
-        tasks.value.push(task)
-      }
-    })
-    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-    tasks.value.sort((a, b) => {
-      // 有已完成的情况，按照完成时间倒序
-      if (a.endTime && b.endTime) {
-        return b.endTime - a.endTime
-      } else if (a.endTime) {
-        return 1
-      } else if (b.endTime) {
-        return -1
-        // 都是未完成，按照创建时间倒序
-      } else {
-        return b.createTime - a.createTime
-      }
-    })
-  } finally {
-    tasksLoad.value = false
-  }
-}
-
-/**
- * 操作成功后刷新
- */
-const refresh = () => {
-  // 重新获取详情
-  getDetail()
-}
-
-/** 当前的Tab */
-const activeTab = ref('form')
-
-/** 初始化 */
-const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
-onMounted(async () => {
-  getDetail()
-  // 获得用户列表
-  userOptions.value = await UserApi.getSimpleUserList()
-})
-</script>
-
-<style lang="scss" scoped>
-$wrap-padding-height: 20px;
-$wrap-margin-height: 15px;
-$button-height: 51px;
-$process-header-height: 194px;
-
-.processInstance-wrap-main {
-  height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
-  );
-  max-height: calc(
-    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
-  );
-  overflow: auto;
-
-  .form-scroll-area {
-    height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
-        $process-header-height - 40px
-    );
-    max-height: calc(
-      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
-        $process-header-height - 40px
-    );
-    overflow: auto;
-  }
-}
-
-.form-box {
-  :deep(.el-card) {
-    border: none;
-  }
-}
-</style>

From aa6610e36cdd1555d1141ce370f4b8169bedefe5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 19 Oct 2024 22:03:37 +0800
Subject: [PATCH 034/109] =?UTF-8?q?=E3=80=90=E6=96=87=E6=A1=88=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E2=80=9C?=
 =?UTF-8?q?=E6=92=A4=E9=94=80=E2=80=9D=E7=BB=9F=E4=B8=80=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E2=80=9C=E5=8F=96=E6=B6=88=E2=80=9D=EF=BC=8C=E6=9B=B4=E5=A5=BD?=
 =?UTF-8?q?=E7=90=86=E8=A7=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index f792dbf4..4233d05c 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -391,7 +391,7 @@
       </div>
     </el-popover>
 
-    <!--【撤消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
+    <!--【取消】按钮 这个对应发起人的取消, 只有发起人可以取消 -->
     <el-popover
       :visible="popOverVisible.cancel"
       placement="top-start"
@@ -403,7 +403,7 @@
     >
       <template #reference>
         <div @click="openPopover('cancel')" class="hover-bg-gray-100 rounded-xl p-6px">
-          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 撤消
+          <Icon :size="14" icon="fa:mail-reply" />&nbsp; 取消
         </div>
       </template>
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
@@ -415,20 +415,20 @@
           :rules="genericRule"
           label-width="100px"
         >
-          <el-form-item label="撤消理由" prop="cancelReason">
-            <span class="text-#878c93 text-12px">&nbsp; 撤消后，该审批流程将自动结束</span>
+          <el-form-item label="取消理由" prop="cancelReason">
+            <span class="text-#878c93 text-12px">&nbsp; 取消后，该审批流程将自动结束</span>
             <el-input
               v-model="genericForm.cancelReason"
               clearable
-              placeholder="请输入撤消理由"
+              placeholder="请输入取消理由"
               type="textarea"
               :rows="3"
             />
           </el-form-item>
           <el-form-item>
-            <el-button :disabled="formLoading" type="primary" @click="handleCancel()"
-              >撤消</el-button
-            >
+            <el-button :disabled="formLoading" type="primary" @click="handleCancel()">
+              取消
+            </el-button>
             <el-button @click="popOverVisible.cancel = false"> 取消 </el-button>
           </el-form-item>
         </el-form>
@@ -499,7 +499,7 @@ const formRef = ref()
 const genericRule = reactive({
   reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
   returnReason: [{ required: true, message: '退回理由不能为空', trigger: 'blur' }],
-  cancelReason: [{ required: true, message: '撤消理由不能为空', trigger: 'blur' }],
+  cancelReason: [{ required: true, message: '取消理由不能为空', trigger: 'blur' }],
   copyUserIds: [{ required: true, message: '抄送人不能为空', trigger: 'change' }],
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],

From ffc09e8e35f8375036bb84d7e80d5ba1098cabe0 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 20 Oct 2024 08:58:52 +0800
Subject: [PATCH 035/109] =?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=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=BB=98=E8=AE=A4=E4=BB=8E=20125px=20=E5=88=B0=20100p?=
 =?UTF-8?q?x=EF=BC=8C=E6=95=B4=E4=BD=93=E9=A2=84=E8=A7=88=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=9B=B4=E5=A5=BD=E7=9C=8B=E4=B8=80=E7=82=B9~?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/form/editor/index.vue | 6 +++++-
 src/views/infra/build/index.vue     | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/form/editor/index.vue b/src/views/bpm/form/editor/index.vue
index 0e82923a..12945e0f 100644
--- a/src/views/bpm/form/editor/index.vue
+++ b/src/views/bpm/form/editor/index.vue
@@ -64,7 +64,11 @@ const designerConfig = ref({
   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
   autoActive: true, // 是否自动选中拖入的组件
   useTemplate: false, // 是否生成vue2语法的模板组件
-  formOptions: {}, // 定义表单配置默认值
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
   fieldReadonly: false, // 配置field是否可以编辑
   hiddenDragMenu: false, // 隐藏拖拽操作按钮
   hiddenDragBtn: false, // 隐藏拖拽按钮
diff --git a/src/views/infra/build/index.vue b/src/views/infra/build/index.vue
index 05ea7334..ed1091e7 100644
--- a/src/views/infra/build/index.vue
+++ b/src/views/infra/build/index.vue
@@ -49,7 +49,11 @@ const designerConfig = ref({
   switchType: [], // 是否可以切换组件类型,或者可以相互切换的字段
   autoActive: true, // 是否自动选中拖入的组件
   useTemplate: false, // 是否生成vue2语法的模板组件
-  formOptions: {}, // 定义表单配置默认值
+  formOptions: {
+    form: {
+      labelWidth: '100px' // 设置默认的 label 宽度为 100px
+    }
+  }, // 定义表单配置默认值
   fieldReadonly: false, // 配置field是否可以编辑
   hiddenDragMenu: false, // 隐藏拖拽操作按钮
   hiddenDragBtn: false, // 隐藏拖拽按钮

From cd9cefa2c8a6cc6327bc76488181ec63764a533a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 20 Oct 2024 10:24:35 +0800
Subject: [PATCH 036/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E6=84=8F=E8=A7=81=E7=9B=B4=E6=8E=A5=E5=B1=95=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E9=80=9A=E8=BF=87=20tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTimeline.vue        | 80 +++++--------------
 .../bpm/processInstance/detail/index.vue      |  4 +-
 2 files changed, 24 insertions(+), 60 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index c7152001..f36afd60 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -17,42 +17,21 @@
             <div class="flex flex-col pr-2">
               <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
                 <!-- 信息：头像 -->
-                <el-tooltip
-                  :content="task.reason"
-                  placement="bottom"
+                <el-avatar
                   v-if="task.assigneeUser && task.assigneeUser.avatar"
-                  effect="light"
-                >
-                  <el-avatar :size="36" :src="task.assigneeUser.avatar" />
-                </el-tooltip>
-                <el-tooltip
-                  :content="task.reason"
-                  placement="bottom"
-                  v-else-if="task.assigneeUser && task.assigneeUser.nickname"
-                  effect="light"
-                >
-                  <el-avatar>
-                    {{ task.assigneeUser.nickname.substring(0, 1) }}
-                  </el-avatar>
-                </el-tooltip>
-                <el-tooltip
-                  :content="task.reason"
-                  placement="bottom"
+                  :size="36"
+                  :src="task.assigneeUser.avatar"
+                />
+                <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
+                  {{ task.assigneeUser.nickname.substring(0, 1) }}
+                </el-avatar>
+                <el-avatar
                   v-else-if="task.ownerUser && task.ownerUser.avatar"
-                  effect="light"
-                >
-                  <el-avatar :src="task.ownerUser.avatar" />
-                </el-tooltip>
-                <el-tooltip
-                  :content="task.reason"
-                  placement="bottom"
-                  v-else-if="task.ownerUser && task.ownerUser.nickname"
-                  effect="light"
-                >
-                  <el-avatar>
-                    {{ task.ownerUser.nickname.substring(0, 1) }}
-                  </el-avatar>
-                </el-tooltip>
+                  :src="task.ownerUser.avatar"
+                />
+                <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
+                  {{ task.ownerUser.nickname.substring(0, 1) }}
+                </el-avatar>
                 <!-- 信息：任务 ICON -->
                 <div
                   class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
@@ -78,16 +57,12 @@
                 >
                   {{ task.ownerUser.nickname }}
                 </div>
-                <!--
-                <div v-if="task.reason" class="text-#a5a5a5 my-4px text-12px flex items-center w-100%">
-                  <div
-                    :title="task.reason"
-                    class="text-truncate w-200px border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
-                  >
-                    {{ task.reason }}
-                  </div>
+                <div
+                  v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
+                  class="text-#a5a5a5 text-13px mt-1"
+                >
+                  审批意见：{{ task.reason }}
                 </div>
-                -->
               </div>
             </div>
           </div>
@@ -131,20 +106,6 @@
         >
           {{ getApprovalNodeTime(activity) }}
         </div>
-
-        <!-- TODO @jason：审批意见，要展示哈。 -->
-        <!-- <div class="color-#a1a6ae text-12px mb-10px"> {{ activity.assigneeUser.nickname }}</div>
-        <div v-if="activity.opinion" class="text-#a5a5a5 text-12px w-100%">
-          <div class="mb-5px">审批意见：</div>
-          <div
-            class="w-100% border-1px border-#a5a5a5 border-dashed rounded py-5px px-15px text-#2d2d2d"
-          >
-            {{ activity.opinion }}
-          </div>
-        </div>
-        <div v-if="activity.createTime" class="text-#a5a5a5 text-13px">
-          {{ formatDate(activity.createTime) }}
-        </div> -->
       </div>
     </el-timeline-item>
   </el-timeline>
@@ -219,8 +180,11 @@ const getApprovalNodeColor = (taskStatus: number) => {
 }
 
 const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
+  if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
+    return `发起时间：${formatDate(node.startTime)}`
+  }
   if (node.endTime) {
-    return `结束时间：${formatDate(node.endTime)}`
+    return `审批时间：${formatDate(node.endTime)}`
   }
   if (node.startTime) {
     return `创建时间：${formatDate(node.startTime)}`
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 204746c3..ab04d4a9 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -42,7 +42,7 @@
             <div class="form-scroll-area">
               <el-scrollbar>
                 <el-row>
-                  <el-col :span="18" class="!flex !flex-col formCol">
+                  <el-col :span="17" class="!flex !flex-col formCol">
                     <!-- 表单信息 -->
                     <div
                       v-loading="processInstanceLoading"
@@ -63,7 +63,7 @@
                       </div>
                     </div>
                   </el-col>
-                  <el-col :span="6">
+                  <el-col :span="7">
                     <!-- 审批记录时间线 -->
                     <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
                   </el-col>

From 520fc784bceb7731d203dc0d9c157ae101c1c37a Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 20 Oct 2024 21:45:02 +0800
Subject: [PATCH 037/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=20=E6=96=B0=E5=A2=9E=E5=8C=85=E5=AE=B9?=
 =?UTF-8?q?=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  36 +++-
 .../src/ProcessNodeTree.vue                   |   8 +
 .../src/SimpleProcessDesigner.vue             |  29 ++-
 .../src/nodes-config/ConditionNodeConfig.vue  |   2 +-
 .../src/nodes/ExclusiveNode.vue               |   8 +-
 .../src/nodes/InclusiveNode.vue               | 201 ++++++++++++++++++
 .../src/nodes/ParallelNode.vue                |   4 +-
 .../SimpleProcessDesignerV2/src/utils.ts      |   8 +
 .../theme/simple-process-designer.scss        |  34 +--
 9 files changed, 290 insertions(+), 40 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 629031b8..1e9dca6e 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -27,11 +27,17 @@
             <div class="handler-item-text">条件分支</div>
           </div>
           <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
-            <div class="handler-item-icon condition">
+            <div class="handler-item-icon parallel">
               <span class="iconfont icon-size icon-parallel"></span>
             </div>
             <div class="handler-item-text">并行分支</div>
           </div>
+          <div class="handler-item" @click="addNode(NodeType.INCLUSIVE_BRANCH_NODE)">
+            <div class="handler-item-icon inclusive">
+              <span class="iconfont icon-size icon-inclusive"></span>
+            </div>
+            <div class="handler-item-text">包容分支</div>
+          </div>
         </div>
         <template #reference>
           <div class="add-icon"><Icon icon="ep:plus" /></div>
@@ -127,7 +133,7 @@ const addNode = (type: number) => {
         {
           id: 'Flow_' + generateUUID(),
           name: '其它情况',
-          showText: '其它情况进入此流程',
+          showText: '未满足其它条件时，将进入此分支',
           type: NodeType.CONDITION_NODE,
           childNode: undefined,
           conditionType: undefined,
@@ -162,6 +168,32 @@ const addNode = (type: number) => {
     }
     emits('update:childNode', data)
   }
+  if (type === NodeType.INCLUSIVE_BRANCH_NODE) {
+    const data: SimpleFlowNode = {
+      name: '包容分支',
+      type: NodeType.INCLUSIVE_BRANCH_NODE,
+      id: 'GateWay_' + generateUUID(),
+      childNode: props.childNode,
+      conditionNodes: [
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '包容条件1',
+          showText: '',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined
+        },
+        {
+          id: 'Flow_' + generateUUID(),
+          name: '其它情况',
+          showText: '未满足其它条件时，将进入此分支',
+          type: NodeType.CONDITION_NODE,
+          childNode: undefined,
+          defaultFlow: true
+        }
+      ]
+    }
+    emits('update:childNode', data)
+  }
 }
 </script>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index be2bc955..8c3e6f0f 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -31,6 +31,13 @@
     @update:model-value="handleModelValueUpdate"
     @find:parent-node="findFromParentNode"
   />
+  <!-- 包容分支节点 -->
+  <InclusiveNode
+    v-if="currentNode && currentNode.type === NodeType.INCLUSIVE_BRANCH_NODE"
+    :flow-node="currentNode"
+    @update:model-value="handleModelValueUpdate"
+    @find:parent-node="findFromParentNode"
+  />
   <!-- 递归显示孩子节点  -->
   <ProcessNodeTree
     v-if="currentNode && currentNode.childNode"
@@ -49,6 +56,7 @@ import UserTaskNode from './nodes/UserTaskNode.vue'
 import CopyTaskNode from './nodes/CopyTaskNode.vue'
 import ExclusiveNode from './nodes/ExclusiveNode.vue'
 import ParallelNode from './nodes/ParallelNode.vue'
+import InclusiveNode from './nodes/InclusiveNode.vue'
 import { SimpleFlowNode, NodeType } from './consts'
 import { useWatchNode } from './node'
 defineOptions({
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 2c723884..ae53284b 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -111,32 +111,31 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       return
     }
     if (type == NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
       validateNode(node.childNode, errorNodes)
     }
 
-    if (type === NodeType.USER_TASK_NODE) {
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
       if (!showText) {
         errorNodes.push(node)
       }
       validateNode(node.childNode, errorNodes)
     }
-    if (type === NodeType.COPY_TASK_NODE) {
-      if (!showText) {
-        errorNodes.push(node)
-      }
-      validateNode(node.childNode, errorNodes)
-    }
-    if (type === NodeType.CONDITION_NODE) {
-      if (!showText) {
-        errorNodes.push(node)
-      }
-      validateNode(node.childNode, errorNodes)
-    }
-
-    if (type == NodeType.CONDITION_BRANCH_NODE) {
+    
+    if (
+      type == NodeType.CONDITION_BRANCH_NODE ||
+      type == NodeType.PARALLEL_BRANCH_NODE ||
+      type == NodeType.INCLUSIVE_BRANCH_NODE
+    ) { // 分支节点
+      // 1. 先校验各个分支
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes)
       })
+      // 2. 校验孩子节点
       validateNode(node.childNode, errorNodes)
     }
   }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
index 3a193d0f..ffbf187d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/ConditionNodeConfig.vue
@@ -26,7 +26,7 @@
       </div>
     </template>
     <div>
-      <div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">其它条件不满足进入此分支（该分支不可编辑和删除）</div>
+      <div class="mb-3 font-size-16px" v-if="currentNode.defaultFlow">未满足其它条件时，将进入此分支（该分支不可编辑和删除）</div>
       <div v-else>
         <el-form
           ref="formRef"
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 385a81ff..b0b12050 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div class="branch-node-add" @click="addCondition">添加条件</div>
+      <el-button class="branch-node-add" color="#67c23a" @click="addCondition"  plain>添加条件</el-button>
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -94,10 +94,6 @@ defineOptions({
   name: 'ExclusiveNode'
 })
 const props = defineProps({
-  // parentNode : {
-  //   type: Object as () => SimpleFlowNode,
-  //   required: true
-  // },
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true
@@ -193,7 +189,7 @@ const recursiveFindParentNode = (
   node: SimpleFlowNode,
   nodeType: number
 ) => {
-  if (!node || node.type === NodeType.START_EVENT_NODE) {
+  if (!node || node.type === NodeType.START_USER_NODE) {
     return
   }
   if (node.type === nodeType) {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
new file mode 100644
index 00000000..15c5ef68
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="branch-node-wrapper">
+    <div class="branch-node-container">
+      <el-button class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
+      <div
+        class="branch-node-item"
+        v-for="(item, index) in currentNode.conditionNodes"
+        :key="index"
+      >
+        <template v-if="index == 0">
+          <div class="branch-line-first-top"> </div>
+          <div class="branch-line-first-bottom"></div>
+        </template>
+        <template v-if="index + 1 == currentNode.conditionNodes?.length">
+          <div class="branch-line-last-top"></div>
+          <div class="branch-line-last-bottom"></div>
+        </template>
+        <div class="node-wrapper">
+          <div class="node-container">
+            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
+              <div class="branch-node-title-container">
+                <div v-if="showInputs[index]">
+                  <input
+                    type="text"
+                    class="editable-title-input"
+                    @blur="blurEvent(index)"
+                    v-mountedFocus
+                    v-model="item.name"
+                  />
+                </div>
+                <div v-else class="branch-title" @click="clickEvent(index)"> {{ item.name }} </div>
+              </div>
+              <div class="branch-node-content" @click="conditionNodeConfig(item.id)">
+                <div class="branch-node-text" :title="item.showText" v-if="item.showText">
+                  {{ item.showText }}
+                </div>
+                <div class="branch-node-text" v-else>
+                  {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
+                </div>
+              </div>
+              <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
+                <div class="toolbar-icon">
+                  <Icon
+                    color="#0089ff"
+                    icon="ep:circle-close-filled"
+                    :size="18"
+                    @click="deleteCondition(index)"
+                  />
+                </div>
+              </div>
+              <div
+                class="branch-node-move move-node-left"
+                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length"
+                @click="moveNode(index, -1)"
+              >
+                <Icon icon="ep:arrow-left" />
+              </div>
+
+              <div
+                class="branch-node-move move-node-right"
+                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                @click="moveNode(index, 1)"
+              >
+                <Icon icon="ep:arrow-right" />
+              </div>
+            </div>
+            <NodeHandler v-model:child-node="item.childNode" />
+          </div>
+        </div>
+        <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
+        <!-- 递归显示子节点  -->
+        <ProcessNodeTree
+          v-if="item && item.childNode"
+          :parent-node="item"
+          v-model:flow-node="item.childNode"
+          @find:recursive-find-parent-node="recursiveFindParentNode"
+        />
+      </div>
+    </div>
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import NodeHandler from '../NodeHandler.vue'
+import ProcessNodeTree from '../ProcessNodeTree.vue'
+import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { getDefaultInclusiveConditionNodeName } from '../utils'
+import { generateUUID } from '@/utils'
+import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
+const { proxy } = getCurrentInstance() as any
+defineOptions({
+  name: 'InclusiveNode'
+})
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+// 定义事件，更新父组件
+const emits = defineEmits<{
+  'update:modelValue': [node: SimpleFlowNode | undefined]
+  'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: number]
+  'find:recursiveFindParentNode': [
+    nodeList: SimpleFlowNode[],
+    curentNode: SimpleFlowNode,
+    nodeType: number
+  ]
+}>()
+
+const currentNode = ref<SimpleFlowNode>(props.flowNode)
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    currentNode.value = newValue
+  }
+)
+
+const showInputs = ref<boolean[]>([])
+// 失去焦点
+const blurEvent = (index: number) => {
+  showInputs.value[index] = false
+  const conditionNode = currentNode.value.conditionNodes?.at(index) as SimpleFlowNode
+  conditionNode.name =
+    conditionNode.name || getDefaultInclusiveConditionNodeName(index, conditionNode.defaultFlow)
+}
+
+// 点击条件名称
+const clickEvent = (index: number) => {
+  showInputs.value[index] = true
+}
+
+const conditionNodeConfig = (nodeId: string) => {
+  const conditionNode = proxy.$refs[nodeId][0]
+  conditionNode.open()
+}
+
+// 新增条件
+const addCondition = () => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    const len = conditionNodes.length
+    let lastIndex = len - 1
+    const conditionData: SimpleFlowNode = {
+      id: 'Flow_' + generateUUID(),
+      name: '包容条件' + len,
+      showText: '',
+      type: NodeType.CONDITION_NODE,
+      childNode: undefined,
+      conditionNodes: [],
+      conditionType: 1,
+      defaultFlow: false
+    }
+    conditionNodes.splice(lastIndex, 0, conditionData)
+  }
+}
+
+// 删除条件
+const deleteCondition = (index: number) => {
+  const conditionNodes = currentNode.value.conditionNodes
+  if (conditionNodes) {
+    conditionNodes.splice(index, 1)
+    if (conditionNodes.length == 1) {
+      const childNode = currentNode.value.childNode
+      // 更新此节点为后续孩子节点
+      emits('update:modelValue', childNode)
+    }
+  }
+}
+
+// 移动节点
+const moveNode = (index: number, to: number) => {
+  // -1 ：向左  1： 向右
+  if (currentNode.value.conditionNodes) {
+    currentNode.value.conditionNodes[index] = currentNode.value.conditionNodes.splice(
+      index + to,
+      1,
+      currentNode.value.conditionNodes[index]
+    )[0]
+  }
+}
+// 递归从父节点中查询匹配的节点
+const recursiveFindParentNode = (
+  nodeList: SimpleFlowNode[],
+  node: SimpleFlowNode,
+  nodeType: number
+) => {
+  if (!node || node.type === NodeType.START_USER_NODE) {
+    return
+  }
+  if (node.type === nodeType) {
+    nodeList.push(node)
+  }
+  // 条件节点 (NodeType.CONDITION_NODE) 比较特殊。需要调用其父节点条件分支节点（NodeType.INCLUSIVE_BRANCH_NODE) 继续查找
+  emits('find:parentNode', nodeList, nodeType)
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 3cdd8f8f..848b2b46 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div class="branch-node-add" @click="addCondition">添加分支</div>
+      <el-button class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -169,7 +169,7 @@ const recursiveFindParentNode = (
   node: SimpleFlowNode,
   nodeType: number
 ) => {
-  if (!node || node.type === NodeType.START_EVENT_NODE) {
+  if (!node || node.type === NodeType.START_USER_NODE) {
     return
   }
   if (node.type === nodeType) {
diff --git a/src/components/SimpleProcessDesignerV2/src/utils.ts b/src/components/SimpleProcessDesignerV2/src/utils.ts
index 854d7032..8e715b44 100644
--- a/src/components/SimpleProcessDesignerV2/src/utils.ts
+++ b/src/components/SimpleProcessDesignerV2/src/utils.ts
@@ -8,6 +8,14 @@ export const getDefaultConditionNodeName = (index: number, defaultFlow: boolean
   return '条件' + (index + 1)
 }
 
+// 获取包容分支条件节点默认的名称
+export const getDefaultInclusiveConditionNodeName = (index: number, defaultFlow: boolean | undefined): string => {
+  if (defaultFlow) {
+    return '其它情况'
+  }
+  return '包容条件' + (index + 1)
+}
+
 export const convertTimeUnit = (strTimeUnit: string) => {
   if (strTimeUnit === 'M') {
     return TimeUnitType.MINUTE
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index fd2ab0ed..7fa2abff 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -166,7 +166,7 @@
 
           .branch-priority {
             min-width: 50px;
-            font-size: 13px;
+            font-size: 12px;
           }
         }
 
@@ -198,7 +198,7 @@
         .branch-node-content {
           display: flex;
           min-height: 32px;
-          padding: 4px 8px;
+          padding: 4px 0;
           margin-top: 4px;
           line-height: 32px;
           align-items: center;
@@ -207,7 +207,7 @@
 
           .branch-node-text {
             overflow: hidden;
-            font-size: 14px;
+            font-size: 12px;
             line-height: 24px;
             text-overflow: ellipsis;
             word-break: break-all;
@@ -355,14 +355,10 @@
             padding: 0 10px;
             font-size: 12px;
             line-height: 36px;
-            color: #222;
-            cursor: pointer;
-            background: #fff;
             border: 2px solid #dedede;
             border-radius: 18px;
             transform: translateX(-50%);
             transform-origin: center center;
-            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
           }
 
           .branch-node-item {
@@ -626,16 +622,17 @@
   cursor: pointer;
 
   .handler-item {
-    margin-right: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   }
 
   .handler-item-icon {
-    width: 80px;
-    height: 80px;
+    width: 60px;
+    height: 60px;
     background: #fff;
     border: 1px solid #e2e2e2;
     border-radius: 50%;
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
     user-select: none;
     text-align: center;
 
@@ -645,8 +642,8 @@
     }
 
     .icon-size {
-      font-size: 35px;
-      line-height: 80px;
+      font-size: 25px;
+      line-height: 60px;
     }
   }
 
@@ -658,13 +655,22 @@
   }
 
   .condition {
-    color: #15bc83;
+    color: #67c23a;
+  }
+
+  .parallel {
+    color: #626aef;
+  }
+
+  .inclusive {
+    color: #345da2;
   }
 
   .handler-item-text {
     margin-top: 4px;
     width: 80px;
     text-align: center;
+    font-size: 13px;
   }
 }
 

From dfa9cd5a3c47c77e797a030bc1e4abf77abcff49 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 22 Oct 2024 15:42:20 +0800
Subject: [PATCH 038/109] =?UTF-8?q?fix:=20=E7=82=B9=E5=87=BB=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=B5=81=E7=A8=8B=E6=A8=A1=E5=9E=8B=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=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/CategoryDraggableModel.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 6d25128b..c6c87da5 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -35,7 +35,7 @@
             <Icon icon="fa:sort-amount-desc" class="mr-5px" />
             排序
           </el-button>
-          <el-button v-else link type="info" class="mr-20px" @click.stop="handleAddModel('create')">
+          <el-button v-else link type="info" class="mr-20px" @click.stop="openModelForm('create')">
             <Icon icon="fa:plus" class="mr-5px" />
             新建
           </el-button>
@@ -150,7 +150,7 @@
             <el-button
               link
               type="primary"
-              @click="openForm('update', scope.row.id)"
+              @click="openModelForm('update', scope.row.id)"
               v-hasPermi="['bpm:model:update']"
               :disabled="!isManagerUser(scope.row)"
             >
@@ -299,12 +299,6 @@ const handleCategoryCommand = (command: string) => {
   }
 }
 
-/** 添加/修改操作 */
-const formRef = ref()
-const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
-}
-
 /** 删除按钮操作 */
 const handleDelete = async (row: any) => {
   try {
@@ -481,8 +475,8 @@ const handleDeleteGroup = async () => {
 
 // 添加流程模型弹窗
 const modelFormRef = ref()
-const handleAddModel = (type: string) => {
-  modelFormRef.value.open(type)
+const openModelForm = (type: string, id?: number) => {
+  modelFormRef.value.open(type, id)
 }
 
 watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })

From de073e82bcc7ac09a9857afc875da7b700cd618b Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 22 Oct 2024 16:23:35 +0800
Subject: [PATCH 039/109] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2timeline=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9icon=E5=B1=95=E7=A4=BA=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E7=89=B9=E6=AE=8A=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/auditor.svg               |   1 +
 src/assets/svgs/bpm/condition.svg             |   1 +
 src/assets/svgs/bpm/copy.svg                  |   1 +
 src/assets/svgs/bpm/parallel.svg              |   1 +
 src/assets/svgs/bpm/starter.svg               |   1 +
 .../detail/ProcessInstanceTimeline.vue        | 159 ++++++++++++++++--
 6 files changed, 146 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/svgs/bpm/auditor.svg
 create mode 100644 src/assets/svgs/bpm/condition.svg
 create mode 100644 src/assets/svgs/bpm/copy.svg
 create mode 100644 src/assets/svgs/bpm/parallel.svg
 create mode 100644 src/assets/svgs/bpm/starter.svg

diff --git a/src/assets/svgs/bpm/auditor.svg b/src/assets/svgs/bpm/auditor.svg
new file mode 100644
index 00000000..66d2c2c0
--- /dev/null
+++ b/src/assets/svgs/bpm/auditor.svg
@@ -0,0 +1 @@
+<svg t="1729561718271" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8640" width="200" height="200"><path d="M908.5952 920.4224H164.7616a31.0784 31.0784 0 0 1-30.976-30.976c0-17.0496 13.9264-30.976 30.976-30.976h743.8336c17.0496 0 31.0272 13.9264 31.0272 30.976a31.0784 31.0784 0 0 1-31.0272 30.976z m0-123.9552H164.7616a31.0784 31.0784 0 0 1-30.976-30.976v-154.9824c0-51.1488 41.8304-92.9792 92.9792-92.9792h198.3488c-6.1952-37.1712-24.7808-72.8064-51.1488-103.8336a216.576 216.576 0 0 1-54.2208-144.128c0-58.88 23.2448-114.688 66.6112-156.4672C429.7728 71.168 485.5296 51.0976 545.9968 52.6848c111.5648 4.608 206.08 100.6592 207.616 212.2752 1.536 55.808-20.1216 110.0288-57.344 151.8592-26.3168 27.904-41.8304 61.952-48.0256 100.7104h198.3488c51.2 0 93.0304 41.8304 93.0304 92.9792v154.9824a31.0784 31.0784 0 0 1-31.0272 30.976z m-712.8064-61.952H877.568v-124.0064a31.0784 31.0784 0 0 0-31.0272-30.976h-232.448a31.0784 31.0784 0 0 1-30.976-31.0272c0-65.024 23.2448-127.0784 66.6624-173.568 27.8528-29.3888 41.8304-68.1472 41.8304-108.4416-1.536-80.5888-68.1984-148.7872-148.7872-151.8592a150.528 150.528 0 0 0-113.152 43.3664 153.6 153.6 0 0 0-48.0256 111.616c0 37.1712 13.9776 74.3424 38.7584 102.2464 44.9536 51.1488 69.7344 113.152 69.7344 176.64a31.0784 31.0784 0 0 1-30.976 31.0272h-232.448a31.0784 31.0784 0 0 0-30.976 30.976v123.9552z" fill="#fff" p-id="8641"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/condition.svg b/src/assets/svgs/bpm/condition.svg
new file mode 100644
index 00000000..4b572ee4
--- /dev/null
+++ b/src/assets/svgs/bpm/condition.svg
@@ -0,0 +1 @@
+<svg t="1729585232424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1602" width="200" height="200"><path d="M925.5 898.9H804.9c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V572.2c0-19-15.4-34.4-34.5-34.4H529.2V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H443.1c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V537.8H219.1c-19 0-34.5 15.4-34.5 34.4V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H98.5c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4H133V555c0-38 30.9-68.8 68.9-68.8h275.7V297.1h-34.5c-19 0-34.5-15.4-34.5-34.4V159.5c0-19 15.4-34.4 34.5-34.4h120.6c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4h-34.5v189.2h292.9c38.1 0 68.9 30.8 68.9 68.8v172h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 18.8-15.4 34.2-34.5 34.2z m0 0" p-id="1603"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/copy.svg b/src/assets/svgs/bpm/copy.svg
new file mode 100644
index 00000000..736fd767
--- /dev/null
+++ b/src/assets/svgs/bpm/copy.svg
@@ -0,0 +1 @@
+<svg t="1729584191390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1449" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1450"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/parallel.svg b/src/assets/svgs/bpm/parallel.svg
new file mode 100644
index 00000000..46aa962f
--- /dev/null
+++ b/src/assets/svgs/bpm/parallel.svg
@@ -0,0 +1 @@
+<svg t="1729585239190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1756"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/starter.svg b/src/assets/svgs/bpm/starter.svg
new file mode 100644
index 00000000..c12c7129
--- /dev/null
+++ b/src/assets/svgs/bpm/starter.svg
@@ -0,0 +1 @@
+<svg t="1729561814171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1359" width="200" height="200"><path d="M674.496 603.456c120.256 0 218.176 90.752 221.44 203.84l0.064 5.888v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352a21.568 21.568 0 0 1-22.144-20.928v-125.888c0-67.712-56.512-123.264-128-125.76l-4.928-0.064H349.568c-71.488 0-130.176 53.504-132.864 121.152l-0.064 4.672v125.888c0 11.52-9.92 20.928-22.144 20.928h-44.352A21.568 21.568 0 0 1 128 939.072v-125.888c0-113.92 95.872-206.528 215.36-209.664l6.208-0.064h324.928zM497.216 128c122.368 0 221.568 93.888 221.568 209.728s-99.2 209.792-221.568 209.792c-122.304 0-221.44-93.952-221.44-209.728C275.712 221.952 374.848 128 497.152 128z m0 83.904c-73.408 0-132.864 56.32-132.864 125.888 0 69.504 59.52 125.824 132.864 125.824 73.408 0 132.928-56.32 132.928-125.824 0-69.504-59.52-125.888-132.928-125.888z" fill="#fff" p-id="1360"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index f36afd60..cda01889 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -9,8 +9,32 @@
       :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
       :color="getApprovalNodeColor(activity.status)"
     >
+      <template #dot>
+        <div
+          class="position-absolute left--10px top--6px rounded-full border border-solid border-#dedede w-30px h-30px flex justify-center items-center bg-#3f73f7 p-5px"
+        >
+          <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
+          <div
+            class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
+          >
+            <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
+              <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
+            </el-icon>
+          </div>
+        </div>
+      </template>
       <div class="flex flex-col items-start">
-        <div class="font-bold"> {{ activity.name }}</div>
+        <!-- 第一行：节点名称、时间 -->
+        <div class="flex w-full">
+          <div class="font-bold"> {{ activity.name }}</div>
+          <!-- 信息：时间 -->
+          <div
+            v-if="activity.status !== TaskStatusEnum.NOT_START"
+            class="text-#a5a5a5 text-13px mt-1 ml-auto"
+          >
+            {{ getApprovalNodeTime(activity) }}
+          </div>
+        </div>
         <div class="flex items-center flex-wrap mt-1">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
@@ -70,7 +94,7 @@
           <div
             v-for="(user, idx1) in activity.candidateUsers"
             :key="idx1"
-            class="flex items-center"
+            class="flex items-center self-start"
           >
             <div class="flex items-center flex-col pr-2">
               <div class="position-relative">
@@ -99,13 +123,6 @@
             </div>
           </div>
         </div>
-        <!-- 信息：时间 -->
-        <div
-          v-if="activity.status !== TaskStatusEnum.NOT_START"
-          class="text-#a5a5a5 text-13px mt-1"
-        >
-          {{ getApprovalNodeTime(activity) }}
-        </div>
       </div>
     </el-timeline-item>
   </el-timeline>
@@ -117,16 +134,105 @@ import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { TaskStatusEnum } from '@/api/bpm/task'
 import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
+import starterSvg from '@/assets/svgs/bpm/starter.svg'
+import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
+import copySvg from '@/assets/svgs/bpm/copy.svg'
+import conditionSvg from '@/assets/svgs/bpm/condition.svg'
+import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
-  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
+// defineProps<{
+//   approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+// }>()
+const approveNodes = [
+  {
+    id: 1,
+    name: '发起审批',
+    nodeType: NodeType.START_USER_NODE,
+    status: TaskStatusEnum.NOT_START,
+    startTime: new Date('2024-10-01 10:00:00'),
+    endTime: null,
+    candidateUsers: [],
+    tasks: []
+  },
+  {
+    id: 2,
+    name: '经理审批',
+    nodeType: NodeType.USER_TASK_NODE,
+    status: TaskStatusEnum.RUNNING, // 审批中
+    startTime: new Date('2024-10-02 11:00:00'),
+    endTime: null,
+    candidateUsers: [
+      {
+        nickname: '张经理',
+        avatar: 'https://picsum.photos/200?r=1'
+      },
+      {
+        nickname: '张经理',
+        avatar: 'https://picsum.photos/200?r=1'
+      },
+      {
+        nickname: '张经理',
+        avatar: 'https://picsum.photos/200?r=1'
+      },
+      {
+        nickname: '张经理',
+        avatar: 'https://picsum.photos/200?r=1'
+      }
+    ],
+    tasks: [
+      {
+        assigneeUser: {
+          nickname: '李经理',
+          avatar: 'https://picsum.photos/200?r=1'
+        },
+        ownerUser: null,
+        status: TaskStatusEnum.RUNNING, // 审批中
+        reason: '同意'
+      }
+    ]
+  },
+  {
+    id: 3,
+    name: '财务审批',
+    nodeType: NodeType.USER_TASK_NODE,
+    status: TaskStatusEnum.APPROVE, // 审批通过
+    startTime: new Date('2024-10-03 14:00:00'),
+    endTime: new Date('2024-10-03 15:00:00'),
+    candidateUsers: [],
+    tasks: [
+      {
+        assigneeUser: {
+          nickname: '王财务',
+          avatar: 'https://picsum.photos/200?r=1'
+        },
+        ownerUser: null,
+        status: TaskStatusEnum.APPROVE, // 审批通过
+        reason: '审批通过'
+      }
+    ]
+  },
+  {
+    id: 4,
+    name: '总经理审批',
+    nodeType: NodeType.USER_TASK_NODE,
+    status: TaskStatusEnum.NOT_START, // 未开始
+    startTime: null,
+    endTime: null,
+    candidateUsers: [
+      {
+        nickname: '总经理',
+        avatar: 'https://picsum.photos/200?r=1'
+      }
+    ],
+    tasks: []
+  }
+]
 
 // 审批节点
-
 const statusIconMap2 = {
   // 未开始
-  '-1': { color: '#e5e7ec', icon: 'ep-clock' },
+  '-1': { color: '#909398', icon: 'ep-clock' },
   // 待审批
   '0': { color: '#e5e7ec', icon: 'ep:loading' },
   // 审批中
@@ -147,7 +253,7 @@ const statusIconMap2 = {
 
 const statusIconMap = {
   // 审批未开始
-  '-1': { color: '#e5e7ec', icon: Clock },
+  '-1': { color: '#909398', icon: Clock },
   '0': { color: '#e5e7ec', icon: Clock },
   // 审批中
   '1': { color: '#448ef7', icon: Loading },
@@ -165,6 +271,23 @@ const statusIconMap = {
   '7': { color: '#00b32a', icon: Check }
 }
 
+const nodeTypeSvgMap = {
+  // 发起人节点
+  [NodeType.START_USER_NODE]: { color: '', svg: starterSvg },
+  // 审批人节点
+  [NodeType.USER_TASK_NODE]: { color: '', svg: auditorSvg },
+  // 抄送人节点
+  [NodeType.COPY_TASK_NODE]: { color: '', svg: copySvg },
+  // 条件分支节点
+  [NodeType.CONDITION_NODE]: { color: '', svg: conditionSvg },
+  // 并行分支节点
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '', svg: parallelSvg }
+}
+
+const getApprovalNodeImg = (nodeType: NodeType) => {
+  return nodeTypeSvgMap[nodeType]?.svg
+}
+
 const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
   if (taskStatus == TaskStatusEnum.NOT_START) {
     return statusIconMap[taskStatus]?.icon
@@ -181,13 +304,13 @@ const getApprovalNodeColor = (taskStatus: number) => {
 
 const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
   if (node.nodeType === NodeType.START_USER_NODE && node.startTime) {
-    return `发起时间：${formatDate(node.startTime)}`
+    return `${formatDate(node.startTime)}`
   }
   if (node.endTime) {
-    return `审批时间：${formatDate(node.endTime)}`
+    return `${formatDate(node.endTime)}`
   }
   if (node.startTime) {
-    return `创建时间：${formatDate(node.startTime)}`
+    return `${formatDate(node.startTime)}`
   }
 }
 </script>

From c7ecb0a69f3cfcf6eaebd70dd51892844beaa3fc Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 23 Oct 2024 10:58:43 +0800
Subject: [PATCH 040/109] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2-=E6=97=B6=E9=97=B4?=
 =?UTF-8?q?=E7=BA=BF=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=8E=E5=B1=95=E7=A4=BA=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/condition.svg             |   2 +-
 src/assets/svgs/bpm/copy.svg                  |   2 +-
 src/assets/svgs/bpm/parallel.svg              |   2 +-
 .../detail/ProcessInstanceTimeline.vue        | 244 ++++++------------
 4 files changed, 81 insertions(+), 169 deletions(-)

diff --git a/src/assets/svgs/bpm/condition.svg b/src/assets/svgs/bpm/condition.svg
index 4b572ee4..41ea85dd 100644
--- a/src/assets/svgs/bpm/condition.svg
+++ b/src/assets/svgs/bpm/condition.svg
@@ -1 +1 @@
-<svg t="1729585232424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1602" width="200" height="200"><path d="M925.5 898.9H804.9c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V572.2c0-19-15.4-34.4-34.5-34.4H529.2V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H443.1c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V537.8H219.1c-19 0-34.5 15.4-34.5 34.4V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H98.5c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4H133V555c0-38 30.9-68.8 68.9-68.8h275.7V297.1h-34.5c-19 0-34.5-15.4-34.5-34.4V159.5c0-19 15.4-34.4 34.5-34.4h120.6c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4h-34.5v189.2h292.9c38.1 0 68.9 30.8 68.9 68.8v172h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 18.8-15.4 34.2-34.5 34.2z m0 0" p-id="1603"></path></svg>
\ No newline at end of file
+<svg t="1729585232424" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1602" width="200" height="200"><path d="M925.5 898.9H804.9c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V572.2c0-19-15.4-34.4-34.5-34.4H529.2V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H443.1c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4h34.5V537.8H219.1c-19 0-34.5 15.4-34.5 34.4V727h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4H98.5c-19 0-34.5-15.4-34.5-34.4V761.3c0-19 15.4-34.4 34.5-34.4H133V555c0-38 30.9-68.8 68.9-68.8h275.7V297.1h-34.5c-19 0-34.5-15.4-34.5-34.4V159.5c0-19 15.4-34.4 34.5-34.4h120.6c19 0 34.5 15.4 34.5 34.4v103.2c0 19-15.4 34.4-34.5 34.4h-34.5v189.2h292.9c38.1 0 68.9 30.8 68.9 68.8v172h34.5c19 0 34.5 15.4 34.5 34.4v103.2c0 18.8-15.4 34.2-34.5 34.2z m0 0" p-id="1603" fill="#fff"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/copy.svg b/src/assets/svgs/bpm/copy.svg
index 736fd767..8ff3bba6 100644
--- a/src/assets/svgs/bpm/copy.svg
+++ b/src/assets/svgs/bpm/copy.svg
@@ -1 +1 @@
-<svg t="1729584191390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1449" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1450"></path></svg>
\ No newline at end of file
+<svg t="1729649333541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1644" width="200" height="200"><path d="M647.888 893.84L491.904 571.52l393.888-393.888-237.904 716.208zM872.32 123.232L459.872 535.68 134.96 380.88 872.32 123.232z m90.72-68.32a23.968 23.968 0 0 0-24.784-5.568L64.08 354.816a23.984 23.984 0 0 0-2.4 44.32l381.392 181.728 187.36 387.088a24.048 24.048 0 0 0 23.152 13.504 24.032 24.032 0 0 0 21.232-16.4L968.96 79.552c2.88-8.672 0.592-18.24-5.92-24.64z" fill="#fff" p-id="1645"></path></svg>
\ No newline at end of file
diff --git a/src/assets/svgs/bpm/parallel.svg b/src/assets/svgs/bpm/parallel.svg
index 46aa962f..ba0ac675 100644
--- a/src/assets/svgs/bpm/parallel.svg
+++ b/src/assets/svgs/bpm/parallel.svg
@@ -1 +1 @@
-<svg t="1729585239190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1756"></path></svg>
\ No newline at end of file
+<svg t="1729585239190" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1755" width="200" height="200"><path d="M901.489435 536.822664v-0.931601l-1.001722-198.240726c-0.100172-19.162936-9.21584-37.474409-25.043042-50.246361-14.024104-11.349507-32.265456-17.60025-51.348255-17.610268l-618.062295-0.18031c-19.142902 0-37.424323 6.280795-51.478478 17.690405-15.827203 12.842072-24.902802 31.2437-24.892785 50.486775v196.798247A114.987635 114.987635 0 1 0 195.295664 536.922836V338.782282c1.15198-1.252152 4.808264-3.596181 10.768509-3.596181l276.725622 0.090155v199.753326a114.987635 114.987635 0 1 0 65.612772 1.412428V335.326342l275.693849 0.080138c6.01033 0 9.626546 2.344029 10.768508 3.596181l1.001722 195.70637a114.987635 114.987635 0 1 0 65.592737 2.113633zM214.979496 645.910158a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m354.689623 0a56.437001 56.437001 0 1 1-56.437001-56.437001 56.507122 56.507122 0 0 1 56.437001 56.437001z m295.507904 56.437001a56.437001 56.437001 0 1 1 56.437001-56.437001 56.507122 56.507122 0 0 1-56.457035 56.437001z" p-id="1756" fill='#fff'></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index cda01889..7c87d55f 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -38,88 +38,80 @@
         <div class="flex items-center flex-wrap mt-1">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
-            <div class="flex flex-col pr-2">
-              <div class="position-relative" v-if="task.assigneeUser || task.ownerUser">
-                <!-- 信息：头像 -->
-                <el-avatar
-                  v-if="task.assigneeUser && task.assigneeUser.avatar"
-                  :size="36"
-                  :src="task.assigneeUser.avatar"
-                />
-                <el-avatar v-else-if="task.assigneeUser && task.assigneeUser.nickname">
-                  {{ task.assigneeUser.nickname.substring(0, 1) }}
-                </el-avatar>
-                <el-avatar
-                  v-else-if="task.ownerUser && task.ownerUser.avatar"
-                  :src="task.ownerUser.avatar"
-                />
-                <el-avatar v-else-if="task.ownerUser && task.ownerUser.nickname">
-                  {{ task.ownerUser.nickname.substring(0, 1) }}
-                </el-avatar>
-                <!-- 信息：任务 ICON -->
+            <div class="flex flex-col pr-2 gap2">
+              <div
+                class="position-relative flex flex-wrap gap2"
+                v-if="task.assigneeUser || task.ownerUser"
+              >
+                <!-- 信息：头像昵称 -->
                 <div
-                  class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
+                  class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
                 >
-                  <Icon
-                    :size="12"
-                    :icon="statusIconMap2[task.status]?.icon"
-                    :color="statusIconMap2[task.status]?.color"
-                  />
+                  <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+                    <el-avatar
+                      :size="28"
+                      v-if="task.assigneeUser?.avatar"
+                      :src="task.assigneeUser?.avatar"
+                    />
+                    <el-avatar :size="28" v-else>
+                      {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                    </el-avatar>
+                    {{ task.assigneeUser?.nickname }}
+                  </template>
+                  <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+                    <el-avatar
+                      :size="28"
+                      v-if="task.ownerUser?.avatar"
+                      :src="task.ownerUser?.avatar"
+                    />
+                    <el-avatar :size="28" v-else>
+                      {{ task.ownerUser?.nickname.substring(0, 1) }}
+                    </el-avatar>
+                    {{ task.ownerUser?.nickname }}
+                  </template>
+                  <!-- 信息：任务 ICON -->
+                  <div
+                    v-if="onlyStatusIconShow.includes(task.status)"
+                    class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+                  >
+                    <Icon
+                      :size="12"
+                      :icon="statusIconMap2[task.status]?.icon"
+                      :color="statusIconMap2[task.status]?.color"
+                    />
+                  </div>
                 </div>
-              </div>
-              <div class="flex flex-col mt-1">
-                <!-- 信息：昵称 -->
+                <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
                 <div
-                  v-if="task.assigneeUser && task.assigneeUser.nickname"
-                  class="text-12px text-align-center"
+                  v-for="(user, idx1) in activity.candidateUsers"
+                  :key="idx1"
+                  class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
                 >
-                  {{ task.assigneeUser.nickname }}
-                </div>
-                <div
-                  v-else-if="task.ownerUser && task.ownerUser.nickname"
-                  class="text-10px text-align-center"
-                >
-                  {{ task.ownerUser.nickname }}
-                </div>
-                <div
-                  v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
-                  class="text-#a5a5a5 text-13px mt-1"
-                >
-                  审批意见：{{ task.reason }}
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
-          <div
-            v-for="(user, idx1) in activity.candidateUsers"
-            :key="idx1"
-            class="flex items-center self-start"
-          >
-            <div class="flex items-center flex-col pr-2">
-              <div class="position-relative">
-                <!-- 信息：头像 -->
-                <el-avatar :size="36" v-if="user.avatar" :src="user.avatar" />
-                <el-avatar v-else-if="user.nickname && user.nickname">
-                  {{ user.nickname.substring(0, 1) }}
-                </el-avatar>
-                <!-- 信息：任务 ICON -->
-                <div
-                  class="position-absolute top-26px left-26px bg-#fff rounded-full flex items-center p-2px"
-                >
-                  <Icon
-                    :size="12"
-                    :icon="statusIconMap2['-1']?.icon"
-                    :color="statusIconMap2['-1']?.color"
-                  />
-                </div>
-              </div>
-              <div class="flex flex-col mt-1">
-                <!-- 信息：昵称 -->
-                <div v-if="user.nickname" class="text-10px text-align-center">
+                  <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
+                  <el-avatar :size="28" v-else>
+                    {{ user.nickname.substring(0, 1) }}
+                  </el-avatar>
                   {{ user.nickname }}
+
+                  <!-- 信息：任务 ICON -->
+                  <div
+                    v-if="onlyStatusIconShow.includes(task.status)"
+                    class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+                  >
+                    <Icon
+                      :size="12"
+                      :icon="statusIconMap2['-1']?.icon"
+                      :color="statusIconMap2['-1']?.color"
+                    />
+                  </div>
                 </div>
               </div>
+              <div
+                v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
+                class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
+              >
+                审批意见：{{ task.reason }}
+              </div>
             </div>
           </div>
         </div>
@@ -141,93 +133,9 @@ import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-// defineProps<{
-//   approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-// }>()
-const approveNodes = [
-  {
-    id: 1,
-    name: '发起审批',
-    nodeType: NodeType.START_USER_NODE,
-    status: TaskStatusEnum.NOT_START,
-    startTime: new Date('2024-10-01 10:00:00'),
-    endTime: null,
-    candidateUsers: [],
-    tasks: []
-  },
-  {
-    id: 2,
-    name: '经理审批',
-    nodeType: NodeType.USER_TASK_NODE,
-    status: TaskStatusEnum.RUNNING, // 审批中
-    startTime: new Date('2024-10-02 11:00:00'),
-    endTime: null,
-    candidateUsers: [
-      {
-        nickname: '张经理',
-        avatar: 'https://picsum.photos/200?r=1'
-      },
-      {
-        nickname: '张经理',
-        avatar: 'https://picsum.photos/200?r=1'
-      },
-      {
-        nickname: '张经理',
-        avatar: 'https://picsum.photos/200?r=1'
-      },
-      {
-        nickname: '张经理',
-        avatar: 'https://picsum.photos/200?r=1'
-      }
-    ],
-    tasks: [
-      {
-        assigneeUser: {
-          nickname: '李经理',
-          avatar: 'https://picsum.photos/200?r=1'
-        },
-        ownerUser: null,
-        status: TaskStatusEnum.RUNNING, // 审批中
-        reason: '同意'
-      }
-    ]
-  },
-  {
-    id: 3,
-    name: '财务审批',
-    nodeType: NodeType.USER_TASK_NODE,
-    status: TaskStatusEnum.APPROVE, // 审批通过
-    startTime: new Date('2024-10-03 14:00:00'),
-    endTime: new Date('2024-10-03 15:00:00'),
-    candidateUsers: [],
-    tasks: [
-      {
-        assigneeUser: {
-          nickname: '王财务',
-          avatar: 'https://picsum.photos/200?r=1'
-        },
-        ownerUser: null,
-        status: TaskStatusEnum.APPROVE, // 审批通过
-        reason: '审批通过'
-      }
-    ]
-  },
-  {
-    id: 4,
-    name: '总经理审批',
-    nodeType: NodeType.USER_TASK_NODE,
-    status: TaskStatusEnum.NOT_START, // 未开始
-    startTime: null,
-    endTime: null,
-    candidateUsers: [
-      {
-        nickname: '总经理',
-        avatar: 'https://picsum.photos/200?r=1'
-      }
-    ],
-    tasks: []
-  }
-]
+defineProps<{
+  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+}>()
 
 // 审批节点
 const statusIconMap2 = {
@@ -273,17 +181,21 @@ const statusIconMap = {
 
 const nodeTypeSvgMap = {
   // 发起人节点
-  [NodeType.START_USER_NODE]: { color: '', svg: starterSvg },
+  [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
   // 审批人节点
-  [NodeType.USER_TASK_NODE]: { color: '', svg: auditorSvg },
+  [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
   // 抄送人节点
-  [NodeType.COPY_TASK_NODE]: { color: '', svg: copySvg },
+  [NodeType.COPY_TASK_NODE]: { color: '#3296fb', svg: copySvg },
   // 条件分支节点
-  [NodeType.CONDITION_NODE]: { color: '', svg: conditionSvg },
+  [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
   // 并行分支节点
-  [NodeType.PARALLEL_BRANCH_NODE]: { color: '', svg: parallelSvg }
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
 }
 
+// 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
+const onlyStatusIconShow = [-1, 0, 1]
+
+// timeline时间线上icon图标
 const getApprovalNodeImg = (nodeType: NodeType) => {
   return nodeTypeSvgMap[nodeType]?.svg
 }

From bd4ac52a2d71e910ae5313d9cb4df17c1cdb7439 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 25 Oct 2024 15:17:31 +0800
Subject: [PATCH 041/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E6=A8=A1=E5=9D=97-=E7=AC=AC=E4=B8=80=E6=AD=A5?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=B5=81=E7=A8=8B=E5=88=86=E7=B1=BB=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=AF=B9=E5=BA=94=E7=9A=84=E6=B5=81=E7=A8=8B=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=B8=83=E5=B1=80=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index_new.vue  | 294 ++++++++++++++++++
 src/views/bpm/processInstance/create/mock.js  | 108 +++++++
 2 files changed, 402 insertions(+)
 create mode 100644 src/views/bpm/processInstance/create/index_new.vue
 create mode 100644 src/views/bpm/processInstance/create/mock.js

diff --git a/src/views/bpm/processInstance/create/index_new.vue b/src/views/bpm/processInstance/create/index_new.vue
new file mode 100644
index 00000000..164e6cf2
--- /dev/null
+++ b/src/views/bpm/processInstance/create/index_new.vue
@@ -0,0 +1,294 @@
+<template>
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap
+    class="process-definition-container position-relative pb-20px"
+    v-if="!selectProcessDefinition"
+    v-loading="loading"
+  >
+    <el-row :gutter="20" class="!flex-nowrap">
+      <el-col :span="5">
+        <div class="flex flex-col">
+          <div
+            v-for="category in categoryList"
+            :key="category.code"
+            class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+            :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+            @click="handleCategoryClick(category)"
+          >
+            {{ category.name }}
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <h3 class="text-16px font-bold mb-10px mt-5px">{{ categoryActive.name }}</h3>
+        <div class="grid grid-cols-3 gap3" v-if="categoryProcessDefinitionList.length">
+          <el-card
+            v-for="definition in categoryProcessDefinitionList"
+            :key="definition.id"
+            shadow="hover"
+            class="cursor-pointer definition-item-card"
+            @click="handleSelect(definition)"
+          >
+            <template #default>
+              <div class="flex">
+                <el-image :src="definition.icon" class="w-32px h-32px" />
+                <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+              </div>
+            </template>
+          </el-card>
+        </div>
+        <el-empty v-else />
+      </el-col>
+    </el-row>
+  </ContentWrap>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="16" :offset="6" style="margin-top: 20px">
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          v-model="detailForm.value"
+          :option="detailForm.option"
+          @submit="submitForm"
+        >
+          <template #type-startUserSelect>
+            <el-col :span="24">
+              <el-card class="mb-10px">
+                <template #header>指定审批人</template>
+                <el-form
+                  :model="startUserSelectAssignees"
+                  :rules="startUserSelectAssigneesFormRules"
+                  ref="startUserSelectAssigneesFormRef"
+                >
+                  <el-form-item
+                    v-for="userTask in startUserSelectTasks"
+                    :key="userTask.id"
+                    :label="`任务【${userTask.name}】`"
+                    :prop="userTask.id"
+                  >
+                    <el-select
+                      v-model="startUserSelectAssignees[userTask.id]"
+                      multiple
+                      placeholder="请选择审批人"
+                    >
+                      <el-option
+                        v-for="user in userList"
+                        :key="user.id"
+                        :label="user.nickname"
+                        :value="user.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </template>
+        </form-create>
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as UserApi from '@/api/system/user'
+import { categoryList as cl, processDefinitionList as pl } from './mock'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息
+const { delView } = useTagsViewStore() // 视图操作
+
+const processInstanceId: any = route.query.processInstanceId
+const loading = ref(true) // 加载中
+const categoryList: any = ref([]) // 分类的列表
+const categoryActive: any = ref({}) // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    // 测试数据
+    categoryList.value = cl
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0]
+    }
+    console.log('[ categoryActive.value ] >', categoryActive.value)
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+    // 测试数据
+    processDefinitionList.value = pl as any
+
+    // 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
+      if (!processInstance) {
+        message.error('重新发起流程失败，原因：流程实例不存在')
+        return
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item: any) => item.key == processInstance.processDefinition?.key
+      )
+      if (!processDefinition) {
+        message.error('重新发起流程失败，原因：流程定义不存在')
+        return
+      }
+      await handleSelect(processDefinition, processInstance.formVariables)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList: any = computed(() => {
+  return processDefinitionList.value.filter(
+    (item: any) => item.category == categoryActive.value.code
+  )
+})
+
+// ========== 表单相关 ==========
+const fApi = ref<ApiAttrs>()
+const detailForm: any = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const selectProcessDefinition = ref() // 选择的流程定义
+
+// 指定审批人
+const bpmnXML: any = ref(null) // BPMN 数据
+const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables?) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row
+
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+  startUserSelectAssigneesFormRules.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+      // 设置指定审批人
+      if (startUserSelectTasks.value?.length > 0) {
+        detailForm.value.rule.push({
+          type: 'startUserSelect',
+          props: {
+            title: '指定审批人'
+          }
+        })
+        // 设置校验规则
+        for (const userTask of startUserSelectTasks.value) {
+          startUserSelectAssignees.value[userTask.id] = []
+          startUserSelectAssigneesFormRules.value[userTask.id] = [
+            { required: true, message: '请选择审批人', trigger: 'blur' }
+          ]
+        }
+        // 加载用户列表
+        userList.value = await UserApi.getSimpleUserList()
+      }
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessDefinition.value) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: selectProcessDefinition.value.id,
+      variables: formData,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+// 左侧分类切换
+const handleCategoryClick = (val) => {
+  categoryActive.value = val
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
+
+<style lang="scss" scoped>
+.process-definition-container::before {
+  content: '';
+  border-left: 1px solid #e6e6e6;
+  position: absolute;
+  left: 20.8%;
+  height: 100%;
+}
+:deep() {
+  .definition-item-card {
+    .el-card__body {
+      padding: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/create/mock.js b/src/views/bpm/processInstance/create/mock.js
new file mode 100644
index 00000000..67861662
--- /dev/null
+++ b/src/views/bpm/processInstance/create/mock.js
@@ -0,0 +1,108 @@
+// 模拟流程分类数据
+export const categoryList = [
+  { name: '审批流程', code: 'approval' },
+  { name: '管理流程', code: 'management' }
+]
+
+// 模拟流程定义数据
+export const processDefinitionList = [
+  {
+    id: '1',
+    key: 'process_1',
+    name: '请假申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=1',
+    formType: 10,
+    formConf: {}, // 根据需要定义表单配置
+    formFields: [], // 根据需要定义表单字段
+    startUserSelectTasks: [
+      { id: 'task1', name: '部门经理' },
+      { id: 'task2', name: '人力资源' }
+    ]
+  },
+  {
+    id: '2',
+    key: 'process_2',
+    name: '报销申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=2',
+    formType: 10,
+    formConf: {},
+    formFields: [],
+    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
+  },
+  {
+    id: '3',
+    key: 'process_1',
+    name: '请假申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=1',
+    formType: 10,
+    formConf: {}, // 根据需要定义表单配置
+    formFields: [], // 根据需要定义表单字段
+    startUserSelectTasks: [
+      { id: 'task1', name: '部门经理' },
+      { id: 'task2', name: '人力资源' }
+    ]
+  },
+  {
+    id: '4',
+    key: 'process_2',
+    name: '报销申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=2',
+    formType: 10,
+    formConf: {},
+    formFields: [],
+    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
+  },{
+    id: '5',
+    key: 'process_1',
+    name: '请假申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=1',
+    formType: 10,
+    formConf: {}, // 根据需要定义表单配置
+    formFields: [], // 根据需要定义表单字段
+    startUserSelectTasks: [
+      { id: 'task1', name: '部门经理' },
+      { id: 'task2', name: '人力资源' }
+    ]
+  },
+  {
+    id: '6',
+    key: 'process_2',
+    name: '报销申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=2',
+    formType: 10,
+    formConf: {},
+    formFields: [],
+    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
+  },
+  {
+    id: '7',
+    key: 'process_1',
+    name: '请假申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=1',
+    formType: 10,
+    formConf: {}, // 根据需要定义表单配置
+    formFields: [], // 根据需要定义表单字段
+    startUserSelectTasks: [
+      { id: 'task1', name: '部门经理' },
+      { id: 'task2', name: '人力资源' }
+    ]
+  },
+  {
+    id: '8',
+    key: 'process_2',
+    name: '报销申请',
+    category: 'approval',
+    icon: 'https://picsum.photos/200?r=2',
+    formType: 10,
+    formConf: {},
+    formFields: [],
+    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
+  }
+]

From dca54d0760afc1e5079caab13f9416d349e5933f Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 26 Oct 2024 21:30:59 +0800
Subject: [PATCH 042/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E8=AF=A6=E6=83=85=E7=95=8C=E9=9D=A2=EF=BC=8C=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=20end=20=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/end.svg                           |  1 +
 .../detail/ProcessInstanceTimeline.vue                | 11 +++++++++--
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/svgs/bpm/end.svg

diff --git a/src/assets/svgs/bpm/end.svg b/src/assets/svgs/bpm/end.svg
new file mode 100644
index 00000000..21bd3a30
--- /dev/null
+++ b/src/assets/svgs/bpm/end.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729949323056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12570" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#333333" opacity=".01" p-id="12571"></path><path d="M512 0a32 32 0 0 0-32 32v448a32 32 0 0 0 64 0v-448A32 32 0 0 0 512 0zM282.688 109.696a32 32 0 0 0-44.544-7.936 480 480 0 1 0 549.12 0.96 32 32 0 1 0-36.8 52.352 416 416 0 1 1-475.776-0.832 32 32 0 0 0 8-44.544z" fill="#e6e6e6" p-id="12572" data-spm-anchor-id="a313x.search_index.0.i5.3c163a81TFKD3L" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 7c87d55f..329eab53 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -131,6 +131,7 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
 import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import endSvg from '@/assets/svgs/bpm/end.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
 defineProps<{
@@ -189,7 +190,9 @@ const nodeTypeSvgMap = {
   // 条件分支节点
   [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
   // 并行分支节点
-  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: endSvg }
 }
 
 // 只有只有状态是 -1、0、1 才展示头像右小角状态小icon
@@ -205,7 +208,11 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: NodeType) => {
     return statusIconMap[taskStatus]?.icon
   }
 
-  if (nodeType === NodeType.START_USER_NODE || nodeType === NodeType.USER_TASK_NODE) {
+  if (
+    nodeType === NodeType.START_USER_NODE ||
+    nodeType === NodeType.USER_TASK_NODE ||
+    nodeType === NodeType.END_EVENT_NODE
+  ) {
     return statusIconMap[taskStatus]?.icon
   }
 }

From d599134de662bdec7b1e29eda56c4ee0a463659a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 26 Oct 2024 22:55:28 +0800
Subject: [PATCH 043/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E8=AF=A6=E6=83=85=20approve-nodes=20=3D>=20activity-n?=
 =?UTF-8?q?odes=20=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../processInstance/detail/ProcessInstanceTimeline.vue   | 9 ++++++---
 src/views/bpm/processInstance/detail/index.vue           | 6 +++---
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 329eab53..d2a7a357 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -3,7 +3,7 @@
   <el-timeline class="pt-20px">
     <!-- 遍历每个审批节点 -->
     <el-timeline-item
-      v-for="(activity, index) in approveNodes"
+      v-for="(activity, index) in activityNodes"
       :key="index"
       size="large"
       :icon="getApprovalNodeIcon(activity.status, activity.nodeType)"
@@ -107,7 +107,10 @@
                 </div>
               </div>
               <div
-                v-if="task.reason && activity.nodeType === NodeType.USER_TASK_NODE"
+                v-if="
+                  task.reason &&
+                  [NodeType.USER_TASK_NODE, NodeType.END_EVENT_NODE].includes(activity.nodeType)
+                "
                 class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
               >
                 审批意见：{{ task.reason }}
@@ -135,7 +138,7 @@ import endSvg from '@/assets/svgs/bpm/end.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
 defineProps<{
-  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+  activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
 }>()
 
 // 审批节点
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index ab04d4a9..6a1d7425 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -65,7 +65,7 @@
                   </el-col>
                   <el-col :span="7">
                     <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" />
+                    <ProcessInstanceTimeline ref="timelineRef" :activity-nodes="activityNodes" />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -229,7 +229,7 @@ const getApprovalDetail = async () => {
     }
 
     // 获取审批节点，显示 Timeline 的数据
-    approveNodes.value = data.approveNodes
+    activityNodes.value = data.activityNodes
 
     // 获取待办任务显示操作按钮
     operationButtonRef.value?.loadTodoTask(data.todoTask)
@@ -239,7 +239,7 @@ const getApprovalDetail = async () => {
 }
 
 // 审批节点信息
-const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**
  * 设置表单权限
  */

From 137b33e7cfe675e6bf5c7149590fc24fe3baa400 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 28 Oct 2024 10:02:35 +0800
Subject: [PATCH 044/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=20=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=9E=8B=E5=A2=9E=E5=8A=A0=E6=B5=8F=E8=A7=88?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |   3 +
 .../src/ProcessNodeTree.vue                   |   2 +-
 .../src/SimpleProcessDesigner.vue             |   3 +-
 .../src/SimpleProcessViewer.vue               |  63 +++++++
 .../SimpleProcessDesignerV2/src/consts.ts     |   4 +-
 .../SimpleProcessDesignerV2/src/index.ts      |   3 +-
 .../SimpleProcessDesignerV2/src/node.ts       |  24 +++
 .../src/nodes/CopyTaskNode.vue                |  14 +-
 .../src/nodes/EndEventNode.vue                |  16 +-
 .../src/nodes/ExclusiveNode.vue               |  27 ++-
 .../src/nodes/InclusiveNode.vue               |  16 +-
 .../src/nodes/ParallelNode.vue                |  21 +--
 .../src/nodes/StartUserNode.vue               |  18 +-
 .../src/nodes/UserTaskNode.vue                |  21 ++-
 .../theme/simple-process-designer.scss        |  94 ++++++++--
 .../detail/ProcessInstanceSimpleViewer.vue    | 160 ++++++++++++++++++
 src/views/bpm/simpleWorkflow/index.vue        |   5 +-
 17 files changed, 436 insertions(+), 58 deletions(-)
 create mode 100644 src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
 create mode 100644 src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 1e9dca6e..9505bfb3 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -6,6 +6,7 @@
         v-model:visible="popoverShow"
         placement="right-start"
         width="auto"
+        v-if="!readonly"
       >
         <div class="handler-item-wrapper">
           <div class="handler-item" @click="addNode(NodeType.USER_TASK_NODE)">
@@ -78,6 +79,8 @@ const props = defineProps({
 
 const emits = defineEmits(['update:childNode'])
 
+const readonly = inject<Boolean>('readonly') // 是否只读
+
 const addNode = (type: number) => {
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index 8c3e6f0f..b1b97e9b 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -47,7 +47,7 @@
   />
 
   <!-- 结束节点 -->
-  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" />
+  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" :flow-node="currentNode" />
 </template>
 <script setup lang="ts">
 import StartUserNode from './nodes/StartUserNode.vue'
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index ae53284b..3415ff0b 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -57,7 +57,7 @@ const props = defineProps({
     required: true
   }
 })
-const loading = ref(true)
+const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
 const roleOptions = ref<RoleApi.RoleVO[]>([]) // 角色列表
@@ -66,6 +66,7 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
 const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
+provide('readonly', false)
 provide('formFields', formFields)
 provide('formType', formType)
 provide('roleList', roleOptions)
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
new file mode 100644
index 00000000..e3181c40
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="simple-flow-canvas" v-loading="loading">
+    <div  class="simple-flow-container">
+      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
+        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProcessNodeTree from './ProcessNodeTree.vue'
+import { SimpleFlowNode } from './consts'
+
+defineOptions({
+  name: 'SimpleProcessRender'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  }
+})
+const loading = ref(false)
+
+watch(
+  () => props.flowNode,
+  (newValue) => {
+    processNodeTree.value = newValue
+  }
+)
+const processNodeTree = ref<SimpleFlowNode | undefined>(props.flowNode)
+provide('readonly', true)
+let scaleValue = ref(100)
+const MAX_SCALE_VALUE = 200
+const MIN_SCALE_VALUE = 50
+// 放大
+const zoomOut = () => {
+  if (scaleValue.value == MAX_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value += 10
+}
+// 缩小
+const zoomIn = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  scaleValue.value -= 10
+}
+
+// onMounted(async () => {
+//   try {
+//     loading.value = true
+//     if (props.view) {
+//       processNodeTree.value = props.view.simpleModel
+//     }
+//   } finally {
+//     loading.value = false
+//   }
+// })
+</script>
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 3611ef91..2bd4660c 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -1,6 +1,6 @@
 // @ts-ignore
 import { DictDataVO } from '@/api/system/dict/types'
-
+import { TaskStatusEnum } from '@/api/bpm/task'
 /**
  * 节点类型
  */
@@ -96,6 +96,8 @@ export interface SimpleFlowNode {
   conditionGroups?: ConditionGroup
   // 是否默认的条件
   defaultFlow?: boolean
+  // 活动的状态，用于前端节点状态展示
+  activityStatus? : TaskStatusEnum
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
diff --git a/src/components/SimpleProcessDesignerV2/src/index.ts b/src/components/SimpleProcessDesignerV2/src/index.ts
index a53dcf38..cacfbc12 100644
--- a/src/components/SimpleProcessDesignerV2/src/index.ts
+++ b/src/components/SimpleProcessDesignerV2/src/index.ts
@@ -1,4 +1,5 @@
 import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
+import SimpleProcessViewer from './SimpleProcessViewer.vue'
 import '../theme/simple-process-designer.scss'
 
-export { SimpleProcessDesigner }
\ No newline at end of file
+export { SimpleProcessDesigner, SimpleProcessViewer }
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 816d9b19..d10173bb 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -1,4 +1,5 @@
 import { cloneDeep } from 'lodash-es'
+import { TaskStatusEnum } from '@/api/bpm/task'
 import * as RoleApi from '@/api/system/role'
 import * as DeptApi from '@/api/system/dept'
 import * as PostApi from '@/api/system/post'
@@ -476,3 +477,26 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
     blurEvent
   }
 }
+
+/**
+ * @description 根据节点任务状态，获取节点任务状态样式
+ */
+export function  useTaskStatusClass(taskStatus: TaskStatusEnum | undefined) : string {
+  if (!taskStatus) {
+    return ''
+  }
+  if (taskStatus === TaskStatusEnum.APPROVE ) {
+    return 'status-pass'
+  }
+  if (taskStatus === TaskStatusEnum.RUNNING ) {
+    return 'status-running'
+  }
+  if (taskStatus === TaskStatusEnum.REJECT ) {
+    return 'status-reject'
+  }
+  if (taskStatus === TaskStatusEnum.CANCEL ) {
+    return 'status-cancel'
+  }
+   
+  return '';
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 14a85a29..e6e4045f 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -5,7 +5,7 @@
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
           <input
-            v-if="showInput"
+            v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
@@ -24,9 +24,9 @@
           <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.COPY_TASK_NODE) }}
           </div>
-          <Icon icon="ep:arrow-right-bold" />
+          <Icon v-if="!readonly" icon="ep:arrow-right-bold" />
         </div>
-        <div class="node-toolbar">
+        <div v-if="!readonly" class="node-toolbar">
           <div class="toolbar-icon"
             ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
           /></div>
@@ -36,7 +36,7 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <CopyTaskNodeConfig v-if="currentNode" ref="nodeSetting" :flow-node="currentNode" />
+    <CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
   </div>
 </template>
 <script setup lang="ts">
@@ -57,7 +57,8 @@ const props = defineProps({
 const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
-
+// 是否只读
+const readonly = inject<Boolean>('readonly') 
 // 监控节点的变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑
@@ -66,6 +67,9 @@ const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
   nodeSetting.value.showCopyTaskNodeConfig(currentNode.value)
   nodeSetting.value.openDrawer()
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
index 3278e7b8..c2818cc6 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -1,13 +1,27 @@
 <template>
   <div class="end-node-wrapper">
-    <div class="end-node-box">
+    <div class="end-node-box" :class="taskStatusClass">
       <span class="node-fixed-name" title="结束">结束</span>
     </div>
   </div>
 </template>
 <script setup lang="ts">
+import { SimpleFlowNode } from '../consts'
+import { useWatchNode, useTaskStatusClass } from '../node'
+
 defineOptions({
   name: 'EndEventNode'
 })
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    default: () => null
+  }
+})
+// 监控节点变化
+const currentNode = useWatchNode(props)
+// 节点任务状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
+
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index b0b12050..9d307acc 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <el-button class="branch-node-add" color="#67c23a" @click="addCondition"  plain>添加条件</el-button>
+      <div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
+        <span class="iconfont icon-exclusive icon-size"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
+        >添加条件</el-button
+      >
+
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -17,9 +23,9 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
+            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
               <div class="branch-node-title-container">
-                <div v-if="showInputs[index]">
+                <div v-if="!readonly && showInputs[index]">
                   <input
                     type="text"
                     class="input-max-width editable-title-input"
@@ -39,7 +45,10 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
+              <div
+                class="node-toolbar"
+                v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length"
+              >
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -87,6 +96,7 @@ import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import { getDefaultConditionNodeName } from '../utils'
+import { useTaskStatusClass } from '../node'
 import { generateUUID } from '@/utils'
 import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
 const { proxy } = getCurrentInstance() as any
@@ -109,9 +119,11 @@ const emits = defineEmits<{
     nodeType: number
   ]
 }>()
-
+// 是否只读
+const readonly = inject<Boolean>('readonly') 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// const conditionNodes = computed(() => currentNode.value.conditionNodes);
+// 节点状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 
 watch(
   () => props.flowNode,
@@ -135,6 +147,9 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return
+  }
   const conditionNode = proxy.$refs[nodeId][0]
   conditionNode.open()
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
index 15c5ef68..830a4d43 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <el-button class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
+      <div v-if="readonly" class="branch-node-readonly">
+        <span class="iconfont icon-inclusive icon-size"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -38,7 +41,7 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div class="node-toolbar" v-if="index + 1 !== currentNode.conditionNodes?.length">
+              <div class="node-toolbar" v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length">
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -50,7 +53,7 @@
               </div>
               <div
                 class="branch-node-move move-node-left"
-                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length"
+                v-if="!readonly && index != 0 && index + 1 !== currentNode.conditionNodes?.length"
                 @click="moveNode(index, -1)"
               >
                 <Icon icon="ep:arrow-left" />
@@ -58,7 +61,7 @@
 
               <div
                 class="branch-node-move move-node-right"
-                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                v-if="!readonly && currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
                 @click="moveNode(index, 1)"
               >
                 <Icon icon="ep:arrow-right" />
@@ -108,6 +111,8 @@ const emits = defineEmits<{
     nodeType: number
   ]
 }>()
+// 是否只读
+const readonly = inject<Boolean>('readonly')
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 
@@ -133,6 +138,9 @@ const clickEvent = (index: number) => {
 }
 
 const conditionNodeConfig = (nodeId: string) => {
+  if (readonly) {
+    return
+  }
   const conditionNode = proxy.$refs[nodeId][0]
   conditionNode.open()
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 848b2b46..7f63344e 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <el-button class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
+      <div v-if="readonly" class="branch-node-readonly">
+        <span class="iconfont icon-parallel icon-size"></span>
+      </div>
+      <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -39,7 +42,7 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div class="node-toolbar">
+              <div  v-if="!readonly" class="node-toolbar">
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -49,18 +52,6 @@
                   />
                 </div>
               </div>
-              <!-- <div 
-                class="branch-node-move move-node-left"
-                v-if="index != 0 && index + 1 !== currentNode.conditionNodes?.length" @click="moveNode(index, -1)">
-                <Icon icon="ep:arrow-left" />
-              </div> -->
-
-              <!-- <div 
-                class="branch-node-move move-node-right"
-                v-if="currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
-                @click="moveNode(index, 1)">
-                <Icon icon="ep:arrow-right" />
-              </div> -->
             </div>
             <NodeHandler v-model:child-node="item.childNode" />
           </div>
@@ -106,6 +97,8 @@ const emits = defineEmits<{
 }>()
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
+// 是否只读
+const readonly = inject<Boolean>('readonly') 
 
 watch(
   () => props.flowNode,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 51116781..13be6b72 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
+      <div
+        class="node-box"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+      >
         <div class="node-title-container">
           <div class="node-title-icon start-user"
             ><span class="iconfont icon-start-user"></span
@@ -26,18 +29,18 @@
           <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.START_USER_NODE) }}
           </div>
-          <Icon icon="ep:arrow-right-bold" />
+          <Icon icon="ep:arrow-right-bold" v-if="!readonly" />
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
   </div>
-  <StartUserNodeConfig v-if="currentNode" ref="nodeSetting" :flow-node="currentNode" />
+  <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
 </template>
 <script setup lang="ts">
 import NodeHandler from '../NodeHandler.vue'
-import { useWatchNode, useNodeName2 } from '../node'
+import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
 import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
 defineOptions({
@@ -49,21 +52,28 @@ const props = defineProps({
     default: () => null
   }
 })
+const readonly = inject<Boolean>('readonly') // 是否只读
 // 定义事件，更新父组件。
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]
 }>()
 // 监控节点变化
 const currentNode = useWatchNode(props)
+// 节点任务状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
   // 把当前节点传递给配置组件
   nodeSetting.value.showStartUserNodeConfig(currentNode.value)
   nodeSetting.value.openDrawer()
 }
+
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index c817cbe2..ea4a4b8d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -1,11 +1,14 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
+      <div
+        class="node-box"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+      >
         <div class="node-title-container">
           <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
           <input
-            v-if="showInput"
+            v-if="!readonly && showInput"
             type="text"
             class="editable-title-input"
             @blur="blurEvent()"
@@ -24,9 +27,9 @@
           <div class="node-text" v-else>
             {{ NODE_DEFAULT_TEXT.get(NodeType.USER_TASK_NODE) }}
           </div>
-          <Icon icon="ep:arrow-right-bold" />
+          <Icon icon="ep:arrow-right-bold" v-if="!readonly" />
         </div>
-        <div class="node-toolbar">
+        <div v-if="!readonly" class="node-toolbar">
           <div class="toolbar-icon"
             ><Icon color="#0089ff" icon="ep:circle-close-filled" :size="18" @click="deleteNode"
           /></div>
@@ -45,7 +48,7 @@
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
-import { useWatchNode, useNodeName2 } from '../node'
+import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
 defineOptions({
@@ -61,13 +64,21 @@ const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
   'find:parentNode': [nodeList: SimpleFlowNode[], nodeType: NodeType]
 }>()
+
+// 是否只读
+const readonly = inject<Boolean>('readonly')
 // 监控节点变化
 const currentNode = useWatchNode(props)
+// 节点状态样式
+const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
 // 打开节点配置
 const openNodeConfig = () => {
+  if (readonly) {
+    return
+  }
   // 把当前节点传递给配置组件
   nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
   nodeSetting.value.openDrawer()
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 7fa2abff..c5b5710c 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1,10 +1,8 @@
 .simple-flow-canvas {
-  position: absolute;
-  inset: 0;
   z-index: 1;
   overflow: auto;
   background-color: #fafafa;
-  user-select: none;
+  // user-select: none;
 
   .simple-flow-container {
     position: relative;
@@ -84,12 +82,32 @@
         background-color: #fff;
         flex-direction: column;
         border: 2px solid transparent;
-        // border-color: #0089ff;
         border-radius: 8px;
-        // border-color: #0089ff;
         box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+        &.status-pass {
+          border-color: #67c23a;
+          background-color: #a9da90;
+        }
+        &.status-pass:hover {
+          border-color: #67c23a;
+        }
+        &.status-running {
+          border-color: #5a9cf8;
+          background-color: #e7f0fe;
+        }
+        &.status-running:hover {
+          border-color: #5a9cf8;
+        }
+        &.status-reject {
+          border-color: #e47470;
+          background-color: #f6e5e5;
+        }
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
         &:hover {
           border-color: #0089ff;
           .node-toolbar {
@@ -280,15 +298,10 @@
 
         &::before {
           position: absolute;
-          top: 0;
-          right: 0;
-          left: 0;
-          // bottom: 5px;
-          bottom: 0px;
+          top:0;
           z-index: 0;
           width: 2px;
           height: 100%;
-          // height: calc(100% - 5px);
           margin: auto;
           background-color: #dedede;
           content: '';
@@ -361,6 +374,36 @@
             transform-origin: center center;
           }
 
+          .branch-node-readonly {
+            position: absolute;
+            top: -18px;
+            left: 50%;
+            z-index: 1;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 2px solid #dedede;
+            background-color: #fff;
+            border-radius: 50%;
+            transform: translateX(-50%);
+            transform-origin: center center;
+            
+            &.status-pass {
+              border-color: #6bb63c;
+              background-color: #e9f4e2;
+            }
+            &.status-pass:hover {
+              border-color: #6bb63c;
+            }
+
+            .icon-size {
+              font-size: 22px;
+              color: #67c23a;
+            }
+          }
+
           .branch-node-item {
             position: relative;
             display: flex;
@@ -454,7 +497,6 @@
             padding: 3px 4px;
             color: #212121;
             cursor: pointer;
-            // background: #2c2c2c;
             background: #fafafa;
             border-radius: 30px;
             box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
@@ -473,12 +515,36 @@
           align-items: center;
           width: 80px;
           height: 36px;
+          border: 2px solid #fafafa;
           color: #212121;
-          // background: #6e6e6e;
-          background: #fafafa;
           border-radius: 30px;
           box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
           box-sizing: border-box;
+
+          &.status-pass {
+            border-color: #6bb63c;
+            background-color: #a9da90;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          &.status-reject {
+            border-color: #e47470;
+            background-color: #f6e5e5;
+          }
+          &.status-reject:hover {
+            border-color: #e47470;
+          }
+
+          &.status-cancel {
+            border-color: #919398;
+            background-color: #eaeaeb
+          }
+          &.status-cancel:hover {
+            border-color: #919398;
+          }
         }
       }
 
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
new file mode 100644
index 00000000..29ea24dd
--- /dev/null
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -0,0 +1,160 @@
+<template>
+  <el-card v-loading="loading" class="box-card">
+    <SimpleProcessViewer :flow-node="simpleModel" />
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { propTypes } from '@/utils/propTypes'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import { BpmProcessInstanceStatus } from '@/utils/constants'
+import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+
+defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
+
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  id: propTypes.string // 流程实例的编号
+})
+
+// const view = ref({
+//   simpleModel: undefined
+// }) // simple 模型数据
+
+const simpleModel = ref()
+
+/** 只有 loading 完成时，才去加载流程列表 */
+watch(
+  () => props.loading,
+  async (value) => {
+    if (value && props.id) {
+      const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+      if (modelView) {
+        // 已经拒绝的活动节点编号集合，只包括 UserTask
+        const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
+        // 进行中的活动节点编号集合， 只包括 UserTask
+        const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
+        // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+        const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
+        // 已经完成的连线节点编号集合，只包括 SequenceFlow
+        const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
+        setSimpleModelNodeTaskStatus(
+          modelView.simpleModel,
+          modelView.processInstance.status,
+          rejectedTaskActivityIds,
+          unfinishedTaskActivityIds,
+          finishedActivityIds,
+          finishedSequenceFlowActivityIds
+        )
+        console.log("modelView.simpleModel==>", modelView.simpleModel)
+        simpleModel.value = modelView.simpleModel
+      }
+    }
+  }
+)
+
+const setSimpleModelNodeTaskStatus = (
+  simpleModel: SimpleFlowNode | undefined,
+  processStatus: number,
+  rejectedTaskActivityIds: string[],
+  unfinishedTaskActivityIds: string[],
+  finishedActivityIds: string[],
+  finishedSequenceFlowActivityIds: string[],
+  
+) => {
+  if (!simpleModel) {
+    return
+  }
+  // 结束节点
+  if (simpleModel.type === NodeType.END_EVENT_NODE) {
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = processStatus
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    return
+  }
+  
+  // 审批节点
+  if (
+    simpleModel.type === NodeType.START_USER_NODE ||
+    simpleModel.type === NodeType.USER_TASK_NODE
+  ) {
+    simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    if (rejectedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.REJECT
+    } else if(unfinishedTaskActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.RUNNING
+    } else if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    }
+    // TODO 是不是还缺一个 cancel 的状态
+  }
+
+  // 抄送节点
+  if (simpleModel.type === NodeType.COPY_TASK_NODE) {
+    // 抄送节点 只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+  // 条件节点 对应 SequenceFlow
+  if (simpleModel.type === NodeType.CONDITION_NODE) {
+    // 条件节点。只有通过和未执行状态
+    if (finishedSequenceFlowActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+  }
+
+  // 网关节点
+  if (
+    simpleModel.type === NodeType.CONDITION_BRANCH_NODE ||
+    simpleModel.type === NodeType.PARALLEL_BRANCH_NODE ||
+    simpleModel.type === NodeType.INCLUSIVE_BRANCH_NODE
+  ) {
+    // 网关节点。只有通过和未执行状态
+    if (finishedActivityIds.includes(simpleModel.id)) {
+      simpleModel.activityStatus = TaskStatusEnum.APPROVE
+    } else {
+      simpleModel.activityStatus = TaskStatusEnum.NOT_START
+    }
+    simpleModel.conditionNodes?.forEach((node) => {
+      setSimpleModelNodeTaskStatus(
+        node,
+        processStatus,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+    })
+  }
+
+  setSimpleModelNodeTaskStatus(
+    simpleModel.childNode,
+    processStatus,
+    rejectedTaskActivityIds,
+    unfinishedTaskActivityIds,
+    finishedActivityIds,
+    finishedSequenceFlowActivityIds
+  )
+}
+/** 监听 bpmnXml */
+// watch(
+//   () => props.bpmnXml,
+//   (value) => {
+//     view.value.bpmnXml = value
+//   }
+// )
+</script>
+<style>
+.box-card {
+  width: 100%;
+  margin-bottom: 20px;
+}
+</style>
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simpleWorkflow/index.vue
index 691cf2e5..df5073d4 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simpleWorkflow/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <SimpleProcessDesigner :model-id="modelId" />
+   <ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative">
+      <SimpleProcessDesigner :model-id="modelId" />
+   </ContentWrap>
+ 
 </template>
 <script setup lang="ts">
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'

From c1109e90c4c44be0e7c50e06f77bdeaf1066da25 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Mon, 28 Oct 2024 16:17:14 +0800
Subject: [PATCH 045/109] =?UTF-8?q?feat:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B-=E5=A1=AB=E5=86=99=E8=A1=A8=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8D=95=E7=8B=AC=E6=8A=BD=E5=8F=96=E5=AD=90=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=EF=BC=8C=E6=80=BB=E4=BD=93=E5=B8=83=E5=B1=80=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E4=B8=8E=E6=A0=B7=E5=BC=8F=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 247 ++++++++++++++++++
 .../bpm/processInstance/create/index_new.vue  | 161 +-----------
 src/views/bpm/processInstance/create/mock.js  |  19 +-
 3 files changed, 272 insertions(+), 155 deletions(-)
 create mode 100644 src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
new file mode 100644
index 00000000..19962c86
--- /dev/null
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -0,0 +1,247 @@
+<template>
+  <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }">
+    <div class="processInstance-wrap-main">
+      <el-scrollbar>
+        <div class="text-#878c93 h-15px">编号：{{ selectProcessDefinition.id }}</div>
+        <el-divider class="!my-8px" />
+
+        <div class="flex items-center justify-between gap-5 mb-10px h-40px">
+          <div class="text-26px font-bold mb-5px">{{ selectProcessDefinition.name }}</div>
+          <el-button style="float: right" type="primary" @click="handleCancel">
+            <Icon icon="ep:delete" /> 选择其它流程
+          </el-button>
+        </div>
+        <!-- 中间主要内容tab栏 -->
+        <el-tabs v-model="activeTab">
+          <!-- 表单信息 -->
+          <el-tab-pane label="表单填写" name="form">
+            <div class="form-scroll-area">
+              <el-scrollbar>
+                <el-row>
+                  <el-col :span="17">
+                    <form-create
+                      :rule="detailForm.rule"
+                      v-model:api="fApi"
+                      v-model="detailForm.value"
+                      :option="detailForm.option"
+                      @submit="submitForm"
+                    >
+                      <template #type-startUserSelect>
+                        <el-col :span="24">
+                          <el-card class="mb-10px">
+                            <template #header>指定审批人</template>
+                            <el-form
+                              :model="startUserSelectAssignees"
+                              :rules="startUserSelectAssigneesFormRules"
+                              ref="startUserSelectAssigneesFormRef"
+                            >
+                              <el-form-item
+                                v-for="userTask in startUserSelectTasks"
+                                :key="userTask.id"
+                                :label="`任务【${userTask.name}】`"
+                                :prop="userTask.id"
+                              >
+                                <el-select
+                                  v-model="startUserSelectAssignees[userTask.id]"
+                                  multiple
+                                  placeholder="请选择审批人"
+                                >
+                                  <el-option
+                                    v-for="user in userList"
+                                    :key="user.id"
+                                    :label="user.nickname"
+                                    :value="user.id"
+                                  />
+                                </el-select>
+                              </el-form-item>
+                            </el-form>
+                          </el-card>
+                        </el-col>
+                      </template>
+                    </form-create>
+                  </el-col>
+
+                  <el-col :span="7">
+                    <!-- 审批记录时间线 -->
+                    <!-- <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" /> -->
+                  </el-col>
+                </el-row>
+              </el-scrollbar>
+            </div>
+          </el-tab-pane>
+          <!-- 流程图 -->
+          <el-tab-pane label="流程图" name="diagram">
+            <div class="form-scroll-area">
+              <!-- 流程图预览 -->
+              <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+
+        <!-- 底部操作栏 -->
+        <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
+          <!-- 操作栏按钮 -->
+          <div
+            class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
+          >
+            <el-button plain type="success" @click="submitForm">
+              <Icon icon="ep:select" />&nbsp; 发起
+            </el-button>
+            <el-button plain type="danger" @click="handleCancel">
+              <Icon icon="ep:close" />&nbsp; 取消
+            </el-button>
+          </div>
+        </div>
+      </el-scrollbar>
+    </div>
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import { setConfAndFields2 } from '@/utils/formCreate'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'ProcessDefinitionDetail' })
+const props = defineProps<{
+  selectProcessDefinition: any
+}>()
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息弹窗
+const { delView } = useTagsViewStore() // 视图操作
+
+const detailForm: any = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const fApi = ref<ApiAttrs>()
+// 指定审批人
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+const bpmnXML: any = ref(null) // BPMN 数据
+
+/** 当前的Tab */
+const activeTab = ref('form')
+const emit = defineEmits(['cancel'])
+/** 处理选择流程的按钮操作 **/
+const initProcessInfo = async (row, formVariables?) => {
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+  startUserSelectAssigneesFormRules.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+      // 设置指定审批人
+      if (startUserSelectTasks.value?.length > 0) {
+        detailForm.value.rule.push({
+          type: 'startUserSelect',
+          props: {
+            title: '指定审批人'
+          }
+        })
+        // 设置校验规则
+        for (const userTask of startUserSelectTasks.value) {
+          startUserSelectAssignees.value[userTask.id] = []
+          startUserSelectAssigneesFormRules.value[userTask.id] = [
+            { required: true, message: '请选择审批人', trigger: 'blur' }
+          ]
+        }
+        // 加载用户列表
+        userList.value = await UserApi.getSimpleUserList()
+      }
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || props.selectProcessDefinition) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: formData || detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+
+defineExpose({ initProcessInfo })
+</script>
+
+<style lang="scss" scoped>
+$wrap-padding-height: 20px;
+$wrap-margin-height: 15px;
+$button-height: 51px;
+$process-header-height: 194px;
+
+.processInstance-wrap-main {
+  height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  max-height: calc(
+    100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px
+  );
+  overflow: auto;
+
+  .form-scroll-area {
+    height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    max-height: calc(
+      100vh - var(--top-tool-height) - var(--tags-view-height) - var(--app-footer-height) - 35px -
+        $process-header-height - 40px
+    );
+    overflow: auto;
+  }
+}
+
+.form-box {
+  :deep(.el-card) {
+    border: none;
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/create/index_new.vue b/src/views/bpm/processInstance/create/index_new.vue
index 164e6cf2..097c5b40 100644
--- a/src/views/bpm/processInstance/create/index_new.vue
+++ b/src/views/bpm/processInstance/create/index_new.vue
@@ -43,86 +43,31 @@
   </ContentWrap>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
-  <ContentWrap v-else>
-    <el-card class="box-card">
-      <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
-        </el-button>
-      </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
-          v-model:api="fApi"
-          v-model="detailForm.value"
-          :option="detailForm.option"
-          @submit="submitForm"
-        >
-          <template #type-startUserSelect>
-            <el-col :span="24">
-              <el-card class="mb-10px">
-                <template #header>指定审批人</template>
-                <el-form
-                  :model="startUserSelectAssignees"
-                  :rules="startUserSelectAssigneesFormRules"
-                  ref="startUserSelectAssigneesFormRef"
-                >
-                  <el-form-item
-                    v-for="userTask in startUserSelectTasks"
-                    :key="userTask.id"
-                    :label="`任务【${userTask.name}】`"
-                    :prop="userTask.id"
-                  >
-                    <el-select
-                      v-model="startUserSelectAssignees[userTask.id]"
-                      multiple
-                      placeholder="请选择审批人"
-                    >
-                      <el-option
-                        v-for="user in userList"
-                        :key="user.id"
-                        :label="user.nickname"
-                        :value="user.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-card>
-            </el-col>
-          </template>
-        </form-create>
-      </el-col>
-    </el-card>
-    <!-- 流程图预览 -->
-    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
-  </ContentWrap>
+  <ProcessDefinitionDetail
+    v-else
+    ref="processDefinitionDetailRef"
+    :selectProcessDefinition="selectProcessDefinition"
+    @cancel="selectProcessDefinition = undefined"
+  />
 </template>
 
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import { CategoryApi } from '@/api/bpm/category'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as UserApi from '@/api/system/user'
+import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { categoryList as cl, processDefinitionList as pl } from './mock'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
 const route = useRoute() // 路由
-const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息
-const { delView } = useTagsViewStore() // 视图操作
 
 const processInstanceId: any = route.query.processInstanceId
 const loading = ref(true) // 加载中
 const categoryList: any = ref([]) // 分类的列表
 const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -134,7 +79,6 @@ const getList = async () => {
     if (categoryList.value.length > 0) {
       categoryActive.value = categoryList.value[0]
     }
-    console.log('[ categoryActive.value ] >', categoryActive.value)
     // 流程定义
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
       suspensionState: 1
@@ -171,100 +115,17 @@ const categoryProcessDefinitionList: any = computed(() => {
 })
 
 // ========== 表单相关 ==========
-const fApi = ref<ApiAttrs>()
-const detailForm: any = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程表单详情
 const selectProcessDefinition = ref() // 选择的流程定义
-
-// 指定审批人
-const bpmnXML: any = ref(null) // BPMN 数据
-const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
+const processDefinitionDetailRef = ref()
 
 /** 处理选择流程的按钮操作 **/
 const handleSelect = async (row, formVariables?) => {
   // 设置选择的流程
   selectProcessDefinition.value = row
-
-  // 重置指定审批人
-  startUserSelectTasks.value = []
-  startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
-
-  // 情况一：流程表单
-  if (row.formType == 10) {
-    // 设置表单
-    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-    // 加载流程图
-    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
-    if (processDefinitionDetail) {
-      bpmnXML.value = processDefinitionDetail.bpmnXml
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
-        }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
-      }
-    }
-    // 情况二：业务表单
-  } else if (row.formCustomCreatePath) {
-    await push({
-      path: row.formCustomCreatePath
-    })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-  }
+  // 初始化流程定义详情
+  await nextTick()
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
-
-/** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessDefinition.value) {
-    return
-  }
-  // 如果有指定审批人，需要校验
-  if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
-  }
-
-  // 提交请求
-  fApi.value.btn.loading(true)
-  try {
-    await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessDefinition.value.id,
-      variables: formData,
-      startUserSelectAssignees: startUserSelectAssignees.value
-    })
-    // 提示
-    message.success('发起流程成功')
-    // 跳转回去
-    delView(unref(currentRoute))
-    await push({
-      name: 'BpmProcessInstanceMy'
-    })
-  } finally {
-    fApi.value.btn.loading(false)
-  }
-}
-
 // 左侧分类切换
 const handleCategoryClick = (val) => {
   categoryActive.value = val
diff --git a/src/views/bpm/processInstance/create/mock.js b/src/views/bpm/processInstance/create/mock.js
index 67861662..b222f8cf 100644
--- a/src/views/bpm/processInstance/create/mock.js
+++ b/src/views/bpm/processInstance/create/mock.js
@@ -13,8 +13,12 @@ export const processDefinitionList = [
     category: 'approval',
     icon: 'https://picsum.photos/200?r=1',
     formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
+    formConf:
+      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
+    formFields: [
+      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
+    ],
     startUserSelectTasks: [
       { id: 'task1', name: '部门经理' },
       { id: 'task2', name: '人力资源' }
@@ -27,8 +31,12 @@ export const processDefinitionList = [
     category: 'approval',
     icon: 'https://picsum.photos/200?r=2',
     formType: 10,
-    formConf: {},
-    formFields: [],
+    formConf:
+      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
+    formFields: [
+      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
+    ],
     startUserSelectTasks: [{ id: 'task3', name: '财务' }]
   },
   {
@@ -55,7 +63,8 @@ export const processDefinitionList = [
     formConf: {},
     formFields: [],
     startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },{
+  },
+  {
     id: '5',
     key: 'process_1',
     name: '请假申请',

From 67430a83fbf460e2296ab3fecd10c8ea81a3d0d2 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 28 Oct 2024 19:02:20 +0800
Subject: [PATCH 046/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=A1=E6=89=B9=E4=B8=8D=E9=80=9A=E8=BF=87=E5=90=8E?=
 =?UTF-8?q?=EF=BC=8C=E9=87=8D=E5=90=AF=E5=8F=91=E8=B5=B7=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E7=9B=B4=E6=8E=A5=E6=8A=A5=E9=94=99=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/definition/index.vue            | 22 +++++++------------
 .../bpm/processInstance/create/index.vue      | 12 +++++++++-
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/views/bpm/definition/index.vue b/src/views/bpm/definition/index.vue
index 1e7794b3..55da993d 100644
--- a/src/views/bpm/definition/index.vue
+++ b/src/views/bpm/definition/index.vue
@@ -70,13 +70,7 @@
 
   <!-- 弹窗：流程模型图的预览 -->
   <Dialog title="流程图" v-model="bpmnDetailVisible" width="800">
-    <MyProcessViewer
-      key="designer"
-      v-model="bpmnXml"
-      :value="bpmnXml as any"
-      v-bind="bpmnControlForm"
-      :prefix="bpmnControlForm.prefix"
-    />
+    <MyProcessViewer style="height: 700px" key="designer" :xml="bpmnXml" />
   </Dialog>
 </template>
 
@@ -118,7 +112,7 @@ const formDetailPreview = ref({
   rule: [],
   option: {}
 })
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(formDetailPreview, row.formConf, row.formFields)
@@ -133,13 +127,13 @@ const handleFormDetail = async (row) => {
 
 /** 流程图的详情按钮操作 */
 const bpmnDetailVisible = ref(false)
-const bpmnXml = ref(null)
-const bpmnControlForm = ref({
-  prefix: 'flowable'
-})
-const handleBpmnDetail = async (row) => {
-  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
+const bpmnXml = ref('')
+const handleBpmnDetail = async (row: any) => {
+  // 设置可见
+  bpmnXml.value = ''
   bpmnDetailVisible.value = true
+  // 加载 BPMN XML
+  bpmnXml.value = (await DefinitionApi.getProcessDefinition(row.id))?.bpmnXml
 }
 
 /** 初始化 **/
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index cc588881..83e1ff46 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -95,7 +95,7 @@
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { setConfAndFields2 } from '@/utils/formCreate'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import { CategoryApi } from '@/api/bpm/category'
@@ -185,7 +185,17 @@ const handleSelect = async (row, formVariables) => {
   // 情况一：流程表单
   if (row.formType == 10) {
     // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+
     // 加载流程图
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
     if (processDefinitionDetail) {

From c9b12c8b39743bb7980122a1f5a4cad0e6657830 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Oct 2024 10:52:46 +0800
Subject: [PATCH 047/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/simple-process-bg.svg     |    1 +
 .../src/ProcessNodeTree.vue                   |    5 +-
 .../src/SimpleProcessDesigner.vue             |   99 +-
 .../src/SimpleProcessModel.vue                |  141 ++
 .../src/SimpleProcessViewer.vue               |   56 +-
 .../SimpleProcessDesignerV2/src/index.ts      |    2 +-
 .../theme/simple-process-designer.scss        | 1559 +++++++++++------
 src/router/modules/remaining.ts               |    6 +-
 .../bpm/model/CategoryDraggableModel.vue      |    6 +-
 src/views/bpm/model/index_old.vue             |    2 +-
 .../detail/ProcessInstanceSimpleViewer.vue    |   28 +-
 .../bpm/processInstance/detail/index.vue      |    9 +-
 .../SimpleModelDesign.vue}                    |   13 +-
 13 files changed, 1263 insertions(+), 664 deletions(-)
 create mode 100644 src/assets/svgs/bpm/simple-process-bg.svg
 create mode 100644 src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
 rename src/views/bpm/{simpleWorkflow/index.vue => simple/SimpleModelDesign.vue} (50%)

diff --git a/src/assets/svgs/bpm/simple-process-bg.svg b/src/assets/svgs/bpm/simple-process-bg.svg
new file mode 100644
index 00000000..eb23ab5a
--- /dev/null
+++ b/src/assets/svgs/bpm/simple-process-bg.svg
@@ -0,0 +1 @@
+<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#FAFAFA" d="M0 0h22v22H0z"/><circle fill="#919BAE" cx="1" cy="1" r="1"/></g></svg>
\ No newline at end of file
diff --git a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
index b1b97e9b..9b1d65aa 100644
--- a/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
+++ b/src/components/SimpleProcessDesignerV2/src/ProcessNodeTree.vue
@@ -47,7 +47,10 @@
   />
 
   <!-- 结束节点 -->
-  <EndEventNode v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE" :flow-node="currentNode" />
+  <EndEventNode
+    v-if="currentNode && currentNode.type === NodeType.END_EVENT_NODE"
+    :flow-node="currentNode"
+  />
 </template>
 <script setup lang="ts">
 import StartUserNode from './nodes/StartUserNode.vue'
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index 3415ff0b..bfe3e501 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -1,23 +1,11 @@
 <template>
-  <div class="simple-flow-canvas" v-loading="loading">
-    <div class="simple-flow-container">
-      <div class="top-area-container">
-        <div class="top-actions">
-          <div class="canvas-control">
-            <span class="control-scale-group">
-              <span class="control-scale-button"> <Icon icon="ep:plus" @click="zoomOut()" /></span>
-              <span class="control-scale-label">{{ scaleValue }}%</span>
-              <span class="control-scale-button"><Icon icon="ep:minus" @click="zoomIn()" /></span>
-            </span>
-          </div>
-          <el-button type="primary" @click="saveSimpleFlowModel">保存</el-button>
-          <!-- <el-button type="primary">全局设置</el-button> -->
-        </div>
-      </div>
-      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
-      </div>
-    </div>
+  <div v-loading="loading">
+    <SimpleProcessModel
+      v-if="processNodeTree"
+      :flow-node="processNodeTree"
+      :readonly="false"
+      @save="saveSimpleFlowModel"
+    />
     <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
       <div class="mb-2">以下节点内容不完善，请修改后保存</div>
       <div
@@ -35,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue'
+import SimpleProcessModel from './SimpleProcessModel.vue'
 import { updateBpmSimpleModel, getBpmSimpleModel } from '@/api/bpm/simple'
 import { SimpleFlowNode, NodeType, NodeId, NODE_DEFAULT_TEXT } from './consts'
 import { getModel } from '@/api/bpm/model'
@@ -50,13 +38,15 @@ import * as UserGroupApi from '@/api/bpm/userGroup'
 defineOptions({
   name: 'SimpleProcessDesigner'
 })
-const router = useRouter() // 路由
+const emits = defineEmits(['success']) // 保存成功事件
+
 const props = defineProps({
   modelId: {
     type: String,
     required: true
   }
 })
+
 const loading = ref(false)
 const formFields = ref<string[]>([])
 const formType = ref(20)
@@ -66,7 +56,6 @@ const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
 const deptOptions = ref<DeptApi.DeptVO[]>([]) // 部门列表
 const deptTreeOptions = ref()
 const userGroupOptions = ref<UserGroupApi.UserGroupVO[]>([]) // 用户组列表
-provide('readonly', false)
 provide('formFields', formFields)
 provide('formType', formType)
 provide('roleList', roleOptions)
@@ -80,28 +69,26 @@ const message = useMessage() // 国际化
 const processNodeTree = ref<SimpleFlowNode | undefined>()
 const errorDialogVisible = ref(false)
 let errorNodes: SimpleFlowNode[] = []
-const saveSimpleFlowModel = async () => {
-  if (!props.modelId) {
-    message.error('缺少模型 modelId 编号')
+const saveSimpleFlowModel = async (simpleModelNode: SimpleFlowNode) => {
+  if (!simpleModelNode) {
+    message.error('模型数据为空')
     return
   }
-  errorNodes = []
-  validateNode(processNodeTree.value, errorNodes)
-  if (errorNodes.length > 0) {
-    errorDialogVisible.value = true
-    return
-  }
-  const data = {
-    id: props.modelId,
-    simpleModel: processNodeTree.value
-  }
-
-  const result = await updateBpmSimpleModel(data)
-  if (result) {
-    message.success('修改成功')
-    close()
-  } else {
-    message.alert('修改失败')
+  try {
+    loading.value = true
+    const data = {
+      id: props.modelId,
+      simpleModel: simpleModelNode
+    }
+    const result = await updateBpmSimpleModel(data)
+    if (result) {
+      message.success('修改成功')
+      emits('success')
+    } else {
+      message.alert('修改失败')
+    }
+  } finally {
+    loading.value = false
   }
 }
 // 校验节点设置。 暂时以 showText 为空 未节点错误配置
@@ -126,12 +113,13 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
       }
       validateNode(node.childNode, errorNodes)
     }
-    
+
     if (
       type == NodeType.CONDITION_BRANCH_NODE ||
       type == NodeType.PARALLEL_BRANCH_NODE ||
       type == NodeType.INCLUSIVE_BRANCH_NODE
-    ) { // 分支节点
+    ) {
+      // 分支节点
       // 1. 先校验各个分支
       conditionNodes?.forEach((item) => {
         validateNode(item, errorNodes)
@@ -142,27 +130,6 @@ const validateNode = (node: SimpleFlowNode | undefined, errorNodes: SimpleFlowNo
   }
 }
 
-const close = () => {
-  router.push({ path: '/bpm/manager/model' })
-}
-let scaleValue = ref(100)
-const MAX_SCALE_VALUE = 200
-const MIN_SCALE_VALUE = 50
-// 放大
-const zoomOut = () => {
-  if (scaleValue.value == MAX_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value += 10
-}
-// 缩小
-const zoomIn = () => {
-  if (scaleValue.value == MIN_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value -= 10
-}
-
 onMounted(async () => {
   try {
     loading.value = true
@@ -188,7 +155,7 @@ onMounted(async () => {
     // 获取用户组列表
     userGroupOptions.value = await UserGroupApi.getUserGroupSimpleList()
 
-    // 获取 SIMPLE 设计器模型
+    //获取 SIMPLE 设计器模型
     const result = await getBpmSimpleModel(props.modelId)
     if (result) {
       processNodeTree.value = result
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
new file mode 100644
index 00000000..a14203e4
--- /dev/null
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -0,0 +1,141 @@
+<template>
+  <div
+    class="simple-process-model-container position-relative"
+    :style="`transform: scale(${scaleValue / 100});`"
+  >
+    <div class="position-absolute top-0px right-0px bg-#fff">
+      <el-row type="flex" justify="end">
+        <el-button-group key="scale-control" size="default">
+          <el-button size="default" :icon="ScaleToOriginal" @click="processReZoom()" />
+          <el-button size="default" :plain="true" :icon="ZoomOut" @click="zoomOut()" />
+          <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>
+    <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+  </div>
+  <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
+    <div class="mb-2">以下节点内容不完善，请修改后保存</div>
+    <div
+      class="mb-3 b-rounded-1 bg-gray-100 p-2 line-height-normal"
+      v-for="(item, index) in errorNodes"
+      :key="index"
+    >
+      {{ item.name }} : {{ NODE_DEFAULT_TEXT.get(item.type) }}
+    </div>
+    <template #footer>
+      <el-button type="primary" @click="errorDialogVisible = false">知道了</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+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'
+defineOptions({
+  name: 'SimpleProcessModel'
+})
+
+const props = defineProps({
+  flowNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
+  },
+  readonly: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+})
+const emits = defineEmits<{
+  'save': [node: SimpleFlowNode | undefined]
+}>()
+
+const processNodeTree = useWatchNode(props)
+
+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) {
+    return
+  }
+  scaleValue.value += 10
+}
+// 缩小
+const zoomOut = () => {
+  if (scaleValue.value == MIN_SCALE_VALUE) {
+    return
+  }
+  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) {
+    const { type, showText, conditionNodes } = node
+    if (type == NodeType.END_EVENT_NODE) {
+      return
+    }
+    if (type == NodeType.START_USER_NODE) {
+      // 发起人节点暂时不用校验，直接校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type === NodeType.USER_TASK_NODE ||
+      type === NodeType.COPY_TASK_NODE ||
+      type === NodeType.CONDITION_NODE
+    ) {
+      if (!showText) {
+        errorNodes.push(node)
+      }
+      validateNode(node.childNode, errorNodes)
+    }
+
+    if (
+      type == NodeType.CONDITION_BRANCH_NODE ||
+      type == NodeType.PARALLEL_BRANCH_NODE ||
+      type == NodeType.INCLUSIVE_BRANCH_NODE
+    ) {
+      // 分支节点
+      // 1. 先校验各个分支
+      conditionNodes?.forEach((item) => {
+        validateNode(item, errorNodes)
+      })
+      // 2. 校验孩子节点
+      validateNode(node.childNode, errorNodes)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
index e3181c40..e83c9e93 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
@@ -1,63 +1,25 @@
 <template>
-  <div class="simple-flow-canvas" v-loading="loading">
-    <div  class="simple-flow-container">
-      <div class="scale-container" :style="`transform: scale(${scaleValue / 100});`">
-        <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree"/>
-      </div>
-    </div>
-  </div>
+    <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
 </template>
 
 <script setup lang="ts">
-import ProcessNodeTree from './ProcessNodeTree.vue'
+import { useWatchNode } from './node'
 import { SimpleFlowNode } from './consts'
 
 defineOptions({
-  name: 'SimpleProcessRender'
+  name: 'SimpleProcessViewer'
 })
 
 const props = defineProps({
   flowNode: {
     type: Object as () => SimpleFlowNode,
     required: true
+  },
+  // 流程任务
+  tasks : {
+    type : Array,
+    default: () => [] as any[]
   }
 })
-const loading = ref(false)
-
-watch(
-  () => props.flowNode,
-  (newValue) => {
-    processNodeTree.value = newValue
-  }
-)
-const processNodeTree = ref<SimpleFlowNode | undefined>(props.flowNode)
-provide('readonly', true)
-let scaleValue = ref(100)
-const MAX_SCALE_VALUE = 200
-const MIN_SCALE_VALUE = 50
-// 放大
-const zoomOut = () => {
-  if (scaleValue.value == MAX_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value += 10
-}
-// 缩小
-const zoomIn = () => {
-  if (scaleValue.value == MIN_SCALE_VALUE) {
-    return
-  }
-  scaleValue.value -= 10
-}
-
-// onMounted(async () => {
-//   try {
-//     loading.value = true
-//     if (props.view) {
-//       processNodeTree.value = props.view.simpleModel
-//     }
-//   } finally {
-//     loading.value = false
-//   }
-// })
+const simpleModel = useWatchNode(props)
 </script>
diff --git a/src/components/SimpleProcessDesignerV2/src/index.ts b/src/components/SimpleProcessDesignerV2/src/index.ts
index cacfbc12..88de07fb 100644
--- a/src/components/SimpleProcessDesignerV2/src/index.ts
+++ b/src/components/SimpleProcessDesignerV2/src/index.ts
@@ -2,4 +2,4 @@ import SimpleProcessDesigner from './SimpleProcessDesigner.vue'
 import SimpleProcessViewer from './SimpleProcessViewer.vue'
 import '../theme/simple-process-designer.scss'
 
-export { SimpleProcessDesigner, SimpleProcessViewer }
+export { SimpleProcessDesigner, SimpleProcessViewer}
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index c5b5710c..39c475d5 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1,573 +1,573 @@
-.simple-flow-canvas {
-  z-index: 1;
-  overflow: auto;
-  background-color: #fafafa;
-  // user-select: none;
+// .simple-flow-canvas {
+//   z-index: 1;
+//   overflow: auto;
+//   background-color: #fafafa;
+//   // user-select: none;
 
-  .simple-flow-container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+//   .simple-flow-container {
+//     position: relative;
+//     display: flex;
+//     flex-direction: column;
+//     justify-content: center;
+//     align-items: center;
 
-    .top-area-container {
-      position: sticky;
-      inset: 0;
-      display: flex;
-      width: 100%;
-      height: 42px;
-      z-index: 1;
-      // padding: 4px 0;
-      background-color: #fff;
-      justify-content: flex-end;
-      align-items: center;
+//     .top-area-container {
+//       position: sticky;
+//       inset: 0;
+//       display: flex;
+//       width: 100%;
+//       height: 42px;
+//       z-index: 1;
+//       // padding: 4px 0;
+//       background-color: #fff;
+//       justify-content: flex-end;
+//       align-items: center;
 
-      .top-actions {
-        display: flex;
-        margin: 4px;
-        margin-right: 8px;
-        align-items: center;
+//       .top-actions {
+//         display: flex;
+//         margin: 4px;
+//         margin-right: 8px;
+//         align-items: center;
 
-        .canvas-control {
-          font-size: 16px;
+//         .canvas-control {
+//           font-size: 16px;
 
-          .control-scale-group {
-            display: inline-flex;
-            align-items: center;
-            margin-right: 8px;
+//           .control-scale-group {
+//             display: inline-flex;
+//             align-items: center;
+//             margin-right: 8px;
 
-            .control-scale-button {
-              display: inline-flex;
-              width: 28px;
-              height: 28px;
-              padding: 2px;
-              text-align: center;
-              cursor: pointer;
-              justify-content: center;
-              align-items: center;
-            }
+//             .control-scale-button {
+//               display: inline-flex;
+//               width: 28px;
+//               height: 28px;
+//               padding: 2px;
+//               text-align: center;
+//               cursor: pointer;
+//               justify-content: center;
+//               align-items: center;
+//             }
 
-            .control-scale-label {
-              margin: 0 4px;
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
+//             .control-scale-label {
+//               margin: 0 4px;
+//               font-size: 14px;
+//             }
+//           }
+//         }
+//       }
+//     }
 
-    .scale-container {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: 16px;
-      background-color: #fafafa;
-      transform-origin: 50% 0 0;
-      transform: scale(1);
-      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+//     .scale-container {
+//       display: flex;
+//       flex-direction: column;
+//       justify-content: center;
+//       align-items: center;
+//       margin-top: 16px;
+//       background-color: #fafafa;
+//       transform-origin: 50% 0 0;
+//       transform: scale(1);
+//       transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      // 节点容器 定义节点宽度
-      .node-container {
-        width: 200px;
-      }
-      // 节点
-      .node-box {
-        position: relative;
-        display: flex;
-        min-height: 70px;
-        padding: 5px 10px 8px;
-        cursor: pointer;
-        background-color: #fff;
-        flex-direction: column;
-        border: 2px solid transparent;
-        border-radius: 8px;
-        box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
-        transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+//       // 节点容器 定义节点宽度
+//       .node-container {
+//         width: 200px;
+//       }
+//       // 节点
+//       .node-box {
+//         position: relative;
+//         display: flex;
+//         min-height: 70px;
+//         padding: 5px 10px 8px;
+//         cursor: pointer;
+//         background-color: #fff;
+//         flex-direction: column;
+//         border: 2px solid transparent;
+//         border-radius: 8px;
+//         box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
+//         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-        &.status-pass {
-          border-color: #67c23a;
-          background-color: #a9da90;
-        }
-        &.status-pass:hover {
-          border-color: #67c23a;
-        }
-        &.status-running {
-          border-color: #5a9cf8;
-          background-color: #e7f0fe;
-        }
-        &.status-running:hover {
-          border-color: #5a9cf8;
-        }
-        &.status-reject {
-          border-color: #e47470;
-          background-color: #f6e5e5;
-        }
-        &.status-reject:hover {
-          border-color: #e47470;
-        }
+//         &.status-pass {
+//           border-color: #67c23a;
+//           background-color: #a9da90;
+//         }
+//         &.status-pass:hover {
+//           border-color: #67c23a;
+//         }
+//         &.status-running {
+//           border-color: #5a9cf8;
+//           background-color: #e7f0fe;
+//         }
+//         &.status-running:hover {
+//           border-color: #5a9cf8;
+//         }
+//         &.status-reject {
+//           border-color: #e47470;
+//           background-color: #f6e5e5;
+//         }
+//         &.status-reject:hover {
+//           border-color: #e47470;
+//         }
 
-        &:hover {
-          border-color: #0089ff;
-          .node-toolbar {
-            opacity: 1;
-          }
+//         &:hover {
+//           border-color: #0089ff;
+//           .node-toolbar {
+//             opacity: 1;
+//           }
 
-          .branch-node-move {
-            display: flex;
-          }
-        }
+//           .branch-node-move {
+//             display: flex;
+//           }
+//         }
 
-        // 普通节点标题
-        .node-title-container {
-          display: flex;
-          padding: 4px;
-          cursor: pointer;
-          border-radius: 4px 4px 0 0;
-          align-items: center;
+//         // 普通节点标题
+//         .node-title-container {
+//           display: flex;
+//           padding: 4px;
+//           cursor: pointer;
+//           border-radius: 4px 4px 0 0;
+//           align-items: center;
 
-          .node-title-icon {
-            display: flex;
-            align-items: center;
+//           .node-title-icon {
+//             display: flex;
+//             align-items: center;
 
-            &.user-task {
-              color: #ff943e;
-            }
-            &.copy-task {
-              color: #3296fa;
-            }
-            &.start-user {
-              color: #676565;
-            }
-          }
+//             &.user-task {
+//               color: #ff943e;
+//             }
+//             &.copy-task {
+//               color: #3296fa;
+//             }
+//             &.start-user {
+//               color: #676565;
+//             }
+//           }
 
-          .node-title {
-            margin-left: 4px;
-            font-size: 14px;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: #1f1f1f;
-            line-height: 18px;
-            &:hover {
-              border-bottom: 1px dashed #f60;
-            }
-          }
-        }
+//           .node-title {
+//             margin-left: 4px;
+//             font-size: 14px;
+//             font-weight: 600;
+//             white-space: nowrap;
+//             overflow: hidden;
+//             text-overflow: ellipsis;
+//             color: #1f1f1f;
+//             line-height: 18px;
+//             &:hover {
+//               border-bottom: 1px dashed #f60;
+//             }
+//           }
+//         }
 
-        // 条件节点标题
-        .branch-node-title-container {
-          display: flex;
-          padding: 4px 0;
-          cursor: pointer;
-          border-radius: 4px 4px 0 0;
-          align-items: center;
-          justify-content: space-between;
+//         // 条件节点标题
+//         .branch-node-title-container {
+//           display: flex;
+//           padding: 4px 0;
+//           cursor: pointer;
+//           border-radius: 4px 4px 0 0;
+//           align-items: center;
+//           justify-content: space-between;
 
-          .input-max-width {
-            max-width: 115px !important;
-          }
+//           .input-max-width {
+//             max-width: 115px !important;
+//           }
 
-          .branch-title {
-            font-size: 13px;
-            font-weight: 600;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: #f60;
-            &:hover {
-              border-bottom: 1px dashed #000;
-            }
-          }
+//           .branch-title {
+//             font-size: 13px;
+//             font-weight: 600;
+//             white-space: nowrap;
+//             overflow: hidden;
+//             text-overflow: ellipsis;
+//             color: #f60;
+//             &:hover {
+//               border-bottom: 1px dashed #000;
+//             }
+//           }
 
-          .branch-priority {
-            min-width: 50px;
-            font-size: 12px;
-          }
-        }
+//           .branch-priority {
+//             min-width: 50px;
+//             font-size: 12px;
+//           }
+//         }
 
-        .node-content {
-          display: flex;
-          min-height: 32px;
-          padding: 4px 8px;
-          margin-top: 4px;
-          line-height: 32px;
-          justify-content: space-between;
-          align-items: center;
-          color: #111f2c;
-          background: rgba(0, 0, 0, 0.03);
-          border-radius: 4px;
+//         .node-content {
+//           display: flex;
+//           min-height: 32px;
+//           padding: 4px 8px;
+//           margin-top: 4px;
+//           line-height: 32px;
+//           justify-content: space-between;
+//           align-items: center;
+//           color: #111f2c;
+//           background: rgba(0, 0, 0, 0.03);
+//           border-radius: 4px;
 
-          .node-text {
-            display: -webkit-box;
-            overflow: hidden;
-            font-size: 14px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            word-break: break-all;
-            -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-            -webkit-box-orient: vertical;
-          }
-        }
+//           .node-text {
+//             display: -webkit-box;
+//             overflow: hidden;
+//             font-size: 14px;
+//             line-height: 24px;
+//             text-overflow: ellipsis;
+//             word-break: break-all;
+//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+//             -webkit-box-orient: vertical;
+//           }
+//         }
 
-        //条件节点内容
-        .branch-node-content {
-          display: flex;
-          min-height: 32px;
-          padding: 4px 0;
-          margin-top: 4px;
-          line-height: 32px;
-          align-items: center;
-          color: #111f2c;
-          border-radius: 4px;
+//         //条件节点内容
+//         .branch-node-content {
+//           display: flex;
+//           min-height: 32px;
+//           padding: 4px 0;
+//           margin-top: 4px;
+//           line-height: 32px;
+//           align-items: center;
+//           color: #111f2c;
+//           border-radius: 4px;
 
-          .branch-node-text {
-            overflow: hidden;
-            font-size: 12px;
-            line-height: 24px;
-            text-overflow: ellipsis;
-            word-break: break-all;
-            -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-            -webkit-box-orient: vertical;
-          }
-        }
+//           .branch-node-text {
+//             overflow: hidden;
+//             font-size: 12px;
+//             line-height: 24px;
+//             text-overflow: ellipsis;
+//             word-break: break-all;
+//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+//             -webkit-box-orient: vertical;
+//           }
+//         }
 
-        // 节点操作 ：删除
-        .node-toolbar {
-          opacity: 0;
-          position: absolute;
-          top: -20px;
-          right: 0px;
-          display: flex;
+//         // 节点操作 ：删除
+//         .node-toolbar {
+//           opacity: 0;
+//           position: absolute;
+//           top: -20px;
+//           right: 0px;
+//           display: flex;
 
-          .toolbar-icon {
-            text-align: center;
-            vertical-align: middle;
-          }
-        }
+//           .toolbar-icon {
+//             text-align: center;
+//             vertical-align: middle;
+//           }
+//         }
 
-        // 条件节点左右移动
-        .branch-node-move {
-          position: absolute;
-          width: 10px;
-          cursor: pointer;
-          display: none;
-          align-items: center;
-          height: 100%;
-          justify-content: center;
-        }
+//         // 条件节点左右移动
+//         .branch-node-move {
+//           position: absolute;
+//           width: 10px;
+//           cursor: pointer;
+//           display: none;
+//           align-items: center;
+//           height: 100%;
+//           justify-content: center;
+//         }
 
-        .move-node-left {
-          left: -2px;
-          top: 0px;
-          background: rgba(126, 134, 142, 0.08);
-          border-top-left-radius: 8px;
-          border-bottom-left-radius: 8px;
-        }
+//         .move-node-left {
+//           left: -2px;
+//           top: 0px;
+//           background: rgba(126, 134, 142, 0.08);
+//           border-top-left-radius: 8px;
+//           border-bottom-left-radius: 8px;
+//         }
 
-        .move-node-right {
-          right: -2px;
-          top: 0px;
-          background: rgba(126, 134, 142, 0.08);
-          border-top-right-radius: 6px;
-          border-bottom-right-radius: 6px;
-        }
-      }
+//         .move-node-right {
+//           right: -2px;
+//           top: 0px;
+//           background: rgba(126, 134, 142, 0.08);
+//           border-top-right-radius: 6px;
+//           border-bottom-right-radius: 6px;
+//         }
+//       }
 
-      .node-config-error {
-        border-color: #ff5219 !important;
-      }
-      // 普通节点包装
-      .node-wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      }
-      // 节点连线处理
-      .node-handler-wrapper {
-        position: relative;
-        display: flex;
-        height: 70px;
-        align-items: center;
-        user-select: none;
-        justify-content: center;
-        flex-direction: column;
+//       .node-config-error {
+//         border-color: #ff5219 !important;
+//       }
+//       // 普通节点包装
+//       .node-wrapper {
+//         display: flex;
+//         flex-direction: column;
+//         justify-content: center;
+//         align-items: center;
+//       }
+//       // 节点连线处理
+//       .node-handler-wrapper {
+//         position: relative;
+//         display: flex;
+//         height: 70px;
+//         align-items: center;
+//         user-select: none;
+//         justify-content: center;
+//         flex-direction: column;
 
-        &::before {
-          position: absolute;
-          top:0;
-          z-index: 0;
-          width: 2px;
-          height: 100%;
-          margin: auto;
-          background-color: #dedede;
-          content: '';
-        }
+//         &::before {
+//           position: absolute;
+//           top: 0;
+//           z-index: 0;
+//           width: 2px;
+//           height: 100%;
+//           margin: auto;
+//           background-color: #dedede;
+//           content: '';
+//         }
 
-        .node-handler {
-          .add-icon {
-            position: relative;
-            top: -5px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            width: 25px;
-            height: 25px;
-            color: #fff;
-            background-color: #0089ff;
-            border-radius: 50%;
+//         .node-handler {
+//           .add-icon {
+//             position: relative;
+//             top: -5px;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             cursor: pointer;
+//             width: 25px;
+//             height: 25px;
+//             color: #fff;
+//             background-color: #0089ff;
+//             border-radius: 50%;
 
-            &:hover {
-              transform: scale(1.1);
-            }
-          }
-        }
+//             &:hover {
+//               transform: scale(1.1);
+//             }
+//           }
+//         }
 
-        .node-handler-arrow {
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          display: flex;
-          transform: translateX(-50%);
-        }
-      }
+//         .node-handler-arrow {
+//           position: absolute;
+//           bottom: 0;
+//           left: 50%;
+//           display: flex;
+//           transform: translateX(-50%);
+//         }
+//       }
 
-      // 条件节点包装
-      .branch-node-wrapper {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        margin-top: 16px;
+//       // 条件节点包装
+//       .branch-node-wrapper {
+//         position: relative;
+//         display: flex;
+//         flex-direction: column;
+//         justify-content: center;
+//         align-items: center;
+//         margin-top: 16px;
 
-        .branch-node-container {
-          position: relative;
-          display: flex;
+//         .branch-node-container {
+//           position: relative;
+//           display: flex;
 
-          &::before {
-            position: absolute;
-            height: 100%;
-            width: 4px;
-            background-color: #fafafa;
-            content: '';
-            left: 50%;
-            transform: translate(-50%);
-          }
+//           &::before {
+//             position: absolute;
+//             height: 100%;
+//             width: 4px;
+//             background-color: #fafafa;
+//             content: '';
+//             left: 50%;
+//             transform: translate(-50%);
+//           }
 
-          .branch-node-add {
-            position: absolute;
-            top: -18px;
-            left: 50%;
-            z-index: 1;
-            height: 36px;
-            padding: 0 10px;
-            font-size: 12px;
-            line-height: 36px;
-            border: 2px solid #dedede;
-            border-radius: 18px;
-            transform: translateX(-50%);
-            transform-origin: center center;
-          }
+//           .branch-node-add {
+//             position: absolute;
+//             top: -18px;
+//             left: 50%;
+//             z-index: 1;
+//             height: 36px;
+//             padding: 0 10px;
+//             font-size: 12px;
+//             line-height: 36px;
+//             border: 2px solid #dedede;
+//             border-radius: 18px;
+//             transform: translateX(-50%);
+//             transform-origin: center center;
+//           }
 
-          .branch-node-readonly {
-            position: absolute;
-            top: -18px;
-            left: 50%;
-            z-index: 1;
-            width: 36px;
-            height: 36px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: 2px solid #dedede;
-            background-color: #fff;
-            border-radius: 50%;
-            transform: translateX(-50%);
-            transform-origin: center center;
-            
-            &.status-pass {
-              border-color: #6bb63c;
-              background-color: #e9f4e2;
-            }
-            &.status-pass:hover {
-              border-color: #6bb63c;
-            }
+//           .branch-node-readonly {
+//             position: absolute;
+//             top: -18px;
+//             left: 50%;
+//             z-index: 1;
+//             width: 36px;
+//             height: 36px;
+//             display: flex;
+//             align-items: center;
+//             justify-content: center;
+//             border: 2px solid #dedede;
+//             background-color: #fff;
+//             border-radius: 50%;
+//             transform: translateX(-50%);
+//             transform-origin: center center;
 
-            .icon-size {
-              font-size: 22px;
-              color: #67c23a;
-            }
-          }
+//             &.status-pass {
+//               border-color: #6bb63c;
+//               background-color: #e9f4e2;
+//             }
+//             &.status-pass:hover {
+//               border-color: #6bb63c;
+//             }
 
-          .branch-node-item {
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            min-width: 280px;
-            padding: 40px 40px 0;
-            background: transparent;
-            border-top: 2px solid #dedede;
-            border-bottom: 2px solid #dedede;
+//             .icon-size {
+//               font-size: 22px;
+//               color: #67c23a;
+//             }
+//           }
 
-            &::before {
-              position: absolute;
-              width: 2px;
-              height: 100%;
-              margin: auto;
-              inset: 0;
-              background-color: #dedede;
-              content: '';
-            }
-          }
-          // 覆盖条件节点第一个节点左上角的线
-          .branch-line-first-top {
-            position: absolute;
-            top: -5px;
-            left: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点第一个节点左下角的线
-          .branch-line-first-bottom {
-            position: absolute;
-            bottom: -5px;
-            left: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点最后一个节点右上角的线
-          .branch-line-last-top {
-            position: absolute;
-            top: -5px;
-            right: -1px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-          // 覆盖条件节点最后一个节点右下角的线
-          .branch-line-last-bottom {
-            position: absolute;
-            right: -1px;
-            bottom: -5px;
-            width: 50%;
-            height: 7px;
-            background-color: #fafafa;
-            content: '';
-          }
-        }
-      }
+//           .branch-node-item {
+//             position: relative;
+//             display: flex;
+//             flex-direction: column;
+//             align-items: center;
+//             min-width: 280px;
+//             padding: 40px 40px 0;
+//             background: transparent;
+//             border-top: 2px solid #dedede;
+//             border-bottom: 2px solid #dedede;
 
-      .node-fixed-name {
-        display: inline-block;
-        width: auto;
-        padding: 0 4px;
-        overflow: hidden;
-        text-align: center;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-      // 开始节点包装
-      .start-node-wrapper {
-        position: relative;
-        margin-top: 16px;
+//             &::before {
+//               position: absolute;
+//               width: 2px;
+//               height: 100%;
+//               margin: auto;
+//               inset: 0;
+//               background-color: #dedede;
+//               content: '';
+//             }
+//           }
+//           // 覆盖条件节点第一个节点左上角的线
+//           .branch-line-first-top {
+//             position: absolute;
+//             top: -5px;
+//             left: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点第一个节点左下角的线
+//           .branch-line-first-bottom {
+//             position: absolute;
+//             bottom: -5px;
+//             left: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点最后一个节点右上角的线
+//           .branch-line-last-top {
+//             position: absolute;
+//             top: -5px;
+//             right: -1px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//           // 覆盖条件节点最后一个节点右下角的线
+//           .branch-line-last-bottom {
+//             position: absolute;
+//             right: -1px;
+//             bottom: -5px;
+//             width: 50%;
+//             height: 7px;
+//             background-color: #fafafa;
+//             content: '';
+//           }
+//         }
+//       }
 
-        .start-node-container {
-          display: flex;
-          flex-direction: column;
-          justify-content: center;
-          align-items: center;
+//       .node-fixed-name {
+//         display: inline-block;
+//         width: auto;
+//         padding: 0 4px;
+//         overflow: hidden;
+//         text-align: center;
+//         text-overflow: ellipsis;
+//         white-space: nowrap;
+//       }
+//       // 开始节点包装
+//       .start-node-wrapper {
+//         position: relative;
+//         margin-top: 16px;
 
-          .start-node-box {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 90px;
-            height: 36px;
-            padding: 3px 4px;
-            color: #212121;
-            cursor: pointer;
-            background: #fafafa;
-            border-radius: 30px;
-            box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-            box-sizing: border-box;
-          }
-        }
-      }
+//         .start-node-container {
+//           display: flex;
+//           flex-direction: column;
+//           justify-content: center;
+//           align-items: center;
 
-      // 结束节点包装
-      .end-node-wrapper {
-        margin-bottom: 16px;
+//           .start-node-box {
+//             display: flex;
+//             justify-content: center;
+//             align-items: center;
+//             width: 90px;
+//             height: 36px;
+//             padding: 3px 4px;
+//             color: #212121;
+//             cursor: pointer;
+//             background: #fafafa;
+//             border-radius: 30px;
+//             box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+//             box-sizing: border-box;
+//           }
+//         }
+//       }
 
-        .end-node-box {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          width: 80px;
-          height: 36px;
-          border: 2px solid #fafafa;
-          color: #212121;
-          border-radius: 30px;
-          box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-          box-sizing: border-box;
+//       // 结束节点包装
+//       .end-node-wrapper {
+//         margin-bottom: 16px;
 
-          &.status-pass {
-            border-color: #6bb63c;
-            background-color: #a9da90;
-          }
+//         .end-node-box {
+//           display: flex;
+//           justify-content: center;
+//           align-items: center;
+//           width: 80px;
+//           height: 36px;
+//           border: 2px solid #fafafa;
+//           color: #212121;
+//           border-radius: 30px;
+//           box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
+//           box-sizing: border-box;
 
-          &.status-pass:hover {
-            border-color: #6bb63c;
-          }
+//           &.status-pass {
+//             border-color: #6bb63c;
+//             background-color: #a9da90;
+//           }
 
-          &.status-reject {
-            border-color: #e47470;
-            background-color: #f6e5e5;
-          }
-          &.status-reject:hover {
-            border-color: #e47470;
-          }
+//           &.status-pass:hover {
+//             border-color: #6bb63c;
+//           }
 
-          &.status-cancel {
-            border-color: #919398;
-            background-color: #eaeaeb
-          }
-          &.status-cancel:hover {
-            border-color: #919398;
-          }
-        }
-      }
+//           &.status-reject {
+//             border-color: #e47470;
+//             background-color: #f6e5e5;
+//           }
+//           &.status-reject:hover {
+//             border-color: #e47470;
+//           }
 
-      // 可编辑的 title 输入框
-      .editable-title-input {
-        height: 20px;
-        max-width: 145px;
-        line-height: 20px;
-        font-size: 12px;
-        margin-left: 4px;
-        border: 1px solid #d9d9d9;
-        border-radius: 4px;
-        transition: all 0.3s;
+//           &.status-cancel {
+//             border-color: #919398;
+//             background-color: #eaeaeb;
+//           }
+//           &.status-cancel:hover {
+//             border-color: #919398;
+//           }
+//         }
+//       }
 
-        &:focus {
-          border-color: #40a9ff;
-          outline: 0;
-          box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-        }
-      }
-    }
-  }
-}
+//       // 可编辑的 title 输入框
+//       .editable-title-input {
+//         height: 20px;
+//         max-width: 145px;
+//         line-height: 20px;
+//         font-size: 12px;
+//         margin-left: 4px;
+//         border: 1px solid #d9d9d9;
+//         border-radius: 4px;
+//         transition: all 0.3s;
+
+//         &:focus {
+//           border-color: #40a9ff;
+//           outline: 0;
+//           box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+//         }
+//       }
+//     }
+//   }
+// }
 
 // 配置节点头部
 .config-header {
@@ -740,6 +740,531 @@
   }
 }
 
+.simple-process-model-container {
+  height: 100%;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 16px;
+  background-color: #fafafa;
+  transform-origin: 50% 0 0;
+  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;
+  // 节点容器 定义节点宽度
+  .node-container {
+    width: 200px;
+  }
+  // 节点
+  .node-box {
+    position: relative;
+    display: flex;
+    min-height: 70px;
+    padding: 5px 10px 8px;
+    cursor: pointer;
+    background-color: #fff;
+    flex-direction: column;
+    border: 2px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+    &.status-pass {
+      background-color: #a9da90;
+      border-color: #67c23a;
+    }
+
+    &.status-pass:hover {
+      border-color: #67c23a;
+    }
+
+    &.status-running {
+      background-color: #e7f0fe;
+      border-color: #5a9cf8;
+    }
+
+    &.status-running:hover {
+      border-color: #5a9cf8;
+    }
+
+    &.status-reject {
+      background-color: #f6e5e5;
+      border-color: #e47470;
+    }
+
+    &.status-reject:hover {
+      border-color: #e47470;
+    }
+
+    &:hover {
+      border-color: #0089ff;
+
+      .node-toolbar {
+        opacity: 1;
+      }
+
+      .branch-node-move {
+        display: flex;
+      }
+    }
+
+    // 普通节点标题
+    .node-title-container {
+      display: flex;
+      padding: 4px;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      align-items: center;
+
+      .node-title-icon {
+        display: flex;
+        align-items: center;
+
+        &.user-task {
+          color: #ff943e;
+        }
+
+        &.copy-task {
+          color: #3296fa;
+        }
+
+        &.start-user {
+          color: #676565;
+        }
+      }
+
+      .node-title {
+        margin-left: 4px;
+        overflow: hidden;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 18px;
+        color: #1f1f1f;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+          border-bottom: 1px dashed #f60;
+        }
+      }
+    }
+
+    // 条件节点标题
+    .branch-node-title-container {
+      display: flex;
+      padding: 4px 0;
+      cursor: pointer;
+      border-radius: 4px 4px 0 0;
+      align-items: center;
+      justify-content: space-between;
+
+      .input-max-width {
+        max-width: 115px !important;
+      }
+
+      .branch-title {
+        overflow: hidden;
+        font-size: 13px;
+        font-weight: 600;
+        color: #f60;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+
+        &:hover {
+          border-bottom: 1px dashed #000;
+        }
+      }
+
+      .branch-priority {
+        min-width: 50px;
+        font-size: 12px;
+      }
+    }
+
+    .node-content {
+      display: flex;
+      min-height: 32px;
+      padding: 4px 8px;
+      margin-top: 4px;
+      line-height: 32px;
+      justify-content: space-between;
+      align-items: center;
+      color: #111f2c;
+      background: rgb(0 0 0 / 3%);
+      border-radius: 4px;
+
+      .node-text {
+        display: -webkit-box;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    //条件节点内容
+    .branch-node-content {
+      display: flex;
+      min-height: 32px;
+      padding: 4px 0;
+      margin-top: 4px;
+      line-height: 32px;
+      align-items: center;
+      color: #111f2c;
+      border-radius: 4px;
+
+      .branch-node-text {
+        overflow: hidden;
+        font-size: 12px;
+        line-height: 24px;
+        text-overflow: ellipsis;
+        word-break: break-all;
+        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+        -webkit-box-orient: vertical;
+      }
+    }
+
+    // 节点操作 ：删除
+    .node-toolbar {
+      position: absolute;
+      top: -20px;
+      right: 0;
+      display: flex;
+      opacity: 0;
+
+      .toolbar-icon {
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    // 条件节点左右移动
+    .branch-node-move {
+      position: absolute;
+      display: none;
+      width: 10px;
+      height: 100%;
+      cursor: pointer;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .move-node-left {
+      top: 0;
+      left: -2px;
+      background: rgb(126 134 142 / 8%);
+      border-bottom-left-radius: 8px;
+      border-top-left-radius: 8px;
+    }
+
+    .move-node-right {
+      top: 0;
+      right: -2px;
+      background: rgb(126 134 142 / 8%);
+      border-top-right-radius: 6px;
+      border-bottom-right-radius: 6px;
+    }
+  }
+
+  .node-config-error {
+    border-color: #ff5219 !important;
+  }
+  // 普通节点包装
+  .node-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  // 节点连线处理
+  .node-handler-wrapper {
+    position: relative;
+    display: flex;
+    height: 70px;
+    align-items: center;
+    user-select: none;
+    justify-content: center;
+    flex-direction: column;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      z-index: 0;
+      width: 2px;
+      height: 100%;
+      margin: auto;
+      background-color: #dedede;
+      content: '';
+    }
+
+    .node-handler {
+      .add-icon {
+        position: relative;
+        top: -5px;
+        display: flex;
+        width: 25px;
+        height: 25px;
+        color: #fff;
+        cursor: pointer;
+        background-color: #0089ff;
+        border-radius: 50%;
+        align-items: center;
+        justify-content: center;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+
+    .node-handler-arrow {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      display: flex;
+      transform: translateX(-50%);
+    }
+  }
+
+  // 条件节点包装
+  .branch-node-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-top: 16px;
+
+    .branch-node-container {
+      position: relative;
+      display: flex;
+
+      &::before {
+        position: absolute;
+        left: 50%;
+        width: 4px;
+        height: 100%;
+        background-color: #fafafa;
+        content: '';
+        transform: translate(-50%);
+      }
+
+      .branch-node-add {
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        z-index: 1;
+        height: 36px;
+        padding: 0 10px;
+        font-size: 12px;
+        line-height: 36px;
+        border: 2px solid #dedede;
+        border-radius: 18px;
+        transform: translateX(-50%);
+        transform-origin: center center;
+      }
+
+      .branch-node-readonly {
+        position: absolute;
+        top: -18px;
+        left: 50%;
+        z-index: 1;
+        display: flex;
+        width: 36px;
+        height: 36px;
+        background-color: #fff;
+        border: 2px solid #dedede;
+        border-radius: 50%;
+        transform: translateX(-50%);
+        align-items: center;
+        justify-content: center;
+        transform-origin: center center;
+
+        &.status-pass {
+          background-color: #e9f4e2;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        .icon-size {
+          font-size: 22px;
+          color: #67c23a;
+        }
+      }
+
+      .branch-node-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        min-width: 280px;
+        padding: 40px 40px 0;
+        background: transparent;
+        border-top: 2px solid #dedede;
+        border-bottom: 2px solid #dedede;
+
+        &::before {
+          position: absolute;
+          width: 2px;
+          height: 100%;
+          margin: auto;
+          inset: 0;
+          background-color: #dedede;
+          content: '';
+        }
+      }
+      // 覆盖条件节点第一个节点左上角的线
+      .branch-line-first-top {
+        position: absolute;
+        top: -5px;
+        left: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点第一个节点左下角的线
+      .branch-line-first-bottom {
+        position: absolute;
+        bottom: -5px;
+        left: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点最后一个节点右上角的线
+      .branch-line-last-top {
+        position: absolute;
+        top: -5px;
+        right: -1px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+      // 覆盖条件节点最后一个节点右下角的线
+      .branch-line-last-bottom {
+        position: absolute;
+        right: -1px;
+        bottom: -5px;
+        width: 50%;
+        height: 7px;
+        background-color: #fafafa;
+        content: '';
+      }
+    }
+  }
+
+  .node-fixed-name {
+    display: inline-block;
+    width: auto;
+    padding: 0 4px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  // 开始节点包装
+  .start-node-wrapper {
+    position: relative;
+    margin-top: 16px;
+
+    .start-node-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .start-node-box {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 90px;
+        height: 36px;
+        padding: 3px 4px;
+        color: #212121;
+        cursor: pointer;
+        background: #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  // 结束节点包装
+  .end-node-wrapper {
+    margin-bottom: 16px;
+
+    .end-node-box {
+      display: flex;
+      width: 80px;
+      height: 36px;
+      color: #212121;
+      border: 2px solid #fafafa;
+      border-radius: 30px;
+      box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+      box-sizing: border-box;
+      justify-content: center;
+      align-items: center;
+
+      &.status-pass {
+        background-color: #a9da90;
+        border-color: #6bb63c;
+      }
+
+      &.status-pass:hover {
+        border-color: #6bb63c;
+      }
+
+      &.status-reject {
+        background-color: #f6e5e5;
+        border-color: #e47470;
+      }
+
+      &.status-reject:hover {
+        border-color: #e47470;
+      }
+
+      &.status-cancel {
+        background-color: #eaeaeb;
+        border-color: #919398;
+      }
+
+      &.status-cancel:hover {
+        border-color: #919398;
+      }
+    }
+  }
+
+  // 可编辑的 title 输入框
+  .editable-title-input {
+    height: 20px;
+    max-width: 145px;
+    margin-left: 4px;
+    font-size: 12px;
+    line-height: 20px;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    transition: all 0.3s;
+
+    &:focus {
+      border-color: #40a9ff;
+      outline: 0;
+      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+    }
+  }
+}
+
 // iconfont 样式
 @font-face {
   font-family: 'iconfont'; /* Project id 4495938 */
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index a61fd166..f0ce322e 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -267,9 +267,9 @@ const remainingRouter: AppRouteRecordRaw[] = [
         }
       },
       {
-        path: 'manager/simple/workflow/model/edit',
-        component: () => import('@/views/bpm/simpleWorkflow/index.vue'),
-        name: 'SimpleWorkflowDesignEditor',
+        path: 'manager/simple/model',
+        component: () => import('@/views/bpm/simple/SimpleModelDesign.vue'),
+        name: 'SimpleModelDesign',
         meta: {
           noCache: true,
           hidden: true,
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index c6c87da5..75a2d55d 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -342,7 +342,7 @@ const handleDesign = (row: any) => {
     })
   } else {
     push({
-      name: 'SimpleWorkflowDesignEditor',
+      name: 'SimpleModelDesign',
       query: {
         modelId: row.id
       }
@@ -492,9 +492,11 @@ watch(
 <style lang="scss">
 .rename-dialog.el-dialog {
   padding: 0 !important;
+
   .el-dialog__header {
     border-bottom: none;
   }
+
   .el-dialog__footer {
     border-top: none !important;
   }
@@ -503,8 +505,8 @@ watch(
 <style lang="scss" scoped>
 :deep() {
   .el-table__cell {
-    border-bottom: none !important;
     overflow: hidden;
+    border-bottom: none !important;
   }
 }
 </style>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
index 4534ec61..8b5f84df 100644
--- a/src/views/bpm/model/index_old.vue
+++ b/src/views/bpm/model/index_old.vue
@@ -338,7 +338,7 @@ const handleDesign = (row: any) => {
     })
   } else {
     push({
-      name: 'SimpleWorkflowDesignEditor',
+      name: 'SimpleModelDesign',
       query: {
         modelId: row.id
       }
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 29ea24dd..6ec91a09 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,12 +1,11 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <SimpleProcessViewer :flow-node="simpleModel" />
-  </el-card>
+  <div v-loading="loading" class="mb-20px">
+      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
+  </div>
 </template>
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { TaskStatusEnum } from '@/api/bpm/task'
-import { BpmProcessInstanceStatus } from '@/utils/constants'
 import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -18,10 +17,7 @@ const props = defineProps({
   id: propTypes.string // 流程实例的编号
 })
 
-// const view = ref({
-//   simpleModel: undefined
-// }) // simple 模型数据
-
+const tasks = ref([])
 const simpleModel = ref()
 
 /** 只有 loading 完成时，才去加载流程列表 */
@@ -31,6 +27,7 @@ watch(
     if (value && props.id) {
       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
       if (modelView) {
+        tasks.value = modelView.tasks;
         // 已经拒绝的活动节点编号集合，只包括 UserTask
         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
         // 进行中的活动节点编号集合， 只包括 UserTask
@@ -47,7 +44,7 @@ watch(
           finishedActivityIds,
           finishedSequenceFlowActivityIds
         )
-        console.log("modelView.simpleModel==>", modelView.simpleModel)
+        console.log('modelView.simpleModel==>', modelView.simpleModel)
         simpleModel.value = modelView.simpleModel
       }
     }
@@ -60,8 +57,7 @@ const setSimpleModelNodeTaskStatus = (
   rejectedTaskActivityIds: string[],
   unfinishedTaskActivityIds: string[],
   finishedActivityIds: string[],
-  finishedSequenceFlowActivityIds: string[],
-  
+  finishedSequenceFlowActivityIds: string[]
 ) => {
   if (!simpleModel) {
     return
@@ -75,7 +71,7 @@ const setSimpleModelNodeTaskStatus = (
     }
     return
   }
-  
+
   // 审批节点
   if (
     simpleModel.type === NodeType.START_USER_NODE ||
@@ -84,7 +80,7 @@ const setSimpleModelNodeTaskStatus = (
     simpleModel.activityStatus = TaskStatusEnum.NOT_START
     if (rejectedTaskActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.REJECT
-    } else if(unfinishedTaskActivityIds.includes(simpleModel.id)) {
+    } else if (unfinishedTaskActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.RUNNING
     } else if (finishedActivityIds.includes(simpleModel.id)) {
       simpleModel.activityStatus = TaskStatusEnum.APPROVE
@@ -152,9 +148,3 @@ const setSimpleModelNodeTaskStatus = (
 //   }
 // )
 </script>
-<style>
-.box-card {
-  width: 100%;
-  margin-bottom: 20px;
-}
-</style>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 6a1d7425..6fe4565e 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -75,11 +75,14 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <ProcessInstanceBpmnViewer
+              <ProcessInstanceSimpleViewer
+                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE"
                 :id="`${id}`"
                 :loading="processInstanceLoading"
-                :show-header="false"
               />
+              <ProcessInstanceBpmnViewer
+                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN"
+                :id="`${id}`" :loading="processInstanceLoading" />
             </div>
           </el-tab-pane>
 
@@ -122,11 +125,13 @@
 <script lang="ts" setup>
 import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
+import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as TaskApi from '@/api/bpm/task'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
diff --git a/src/views/bpm/simpleWorkflow/index.vue b/src/views/bpm/simple/SimpleModelDesign.vue
similarity index 50%
rename from src/views/bpm/simpleWorkflow/index.vue
rename to src/views/bpm/simple/SimpleModelDesign.vue
index df5073d4..1740e03f 100644
--- a/src/views/bpm/simpleWorkflow/index.vue
+++ b/src/views/bpm/simple/SimpleModelDesign.vue
@@ -1,16 +1,19 @@
 <template>
-   <ContentWrap :bodyStyle="{ padding: '0px 0px' }" class="position-relative">
-      <SimpleProcessDesigner :model-id="modelId" />
-   </ContentWrap>
- 
+  <ContentWrap :bodyStyle="{ padding: '20px 16px' }">
+    <SimpleProcessDesigner :model-id="modelId" @success="close" />
+  </ContentWrap>
 </template>
 <script setup lang="ts">
 import { SimpleProcessDesigner } from '@/components/SimpleProcessDesignerV2/src/'
 
 defineOptions({
-  name: 'SimpleWorkflowDesignEditor'
+  name: 'SimpleModelDesign'
 })
+const router = useRouter() // 路由
 const { query } = useRoute() // 路由的查询
 const modelId = query.modelId as string
+const close = () => {
+  router.push({ path: '/bpm/manager/model' })
+}
 </script>
 <style lang="scss" scoped></style>

From a57840c8043a2c219fedd6e6519e3e4105129930 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 29 Oct 2024 16:32:08 +0800
Subject: [PATCH 048/109] =?UTF-8?q?feat:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E6=B5=81=E7=A8=8B=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=BA=BF=E7=9A=84=E6=95=B0=E6=8D=AE=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E6=8E=A5=E5=8F=A3=E8=81=94=E8=B0=83=E4=B8=8E=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/finish.svg                |   1 +
 .../create/ProcessDefinitionDetail.vue        |  41 +++++-
 .../bpm/processInstance/create/index_new.vue  |   5 -
 src/views/bpm/processInstance/create/mock.js  | 117 ------------------
 .../detail/ProcessInstanceTimeline.vue        |  16 ++-
 5 files changed, 50 insertions(+), 130 deletions(-)
 create mode 100644 src/assets/svgs/bpm/finish.svg
 delete mode 100644 src/views/bpm/processInstance/create/mock.js

diff --git a/src/assets/svgs/bpm/finish.svg b/src/assets/svgs/bpm/finish.svg
new file mode 100644
index 00000000..674c6df6
--- /dev/null
+++ b/src/assets/svgs/bpm/finish.svg
@@ -0,0 +1 @@
+<svg t="1730189225011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2651" id="mx_n_1730189225011" width="200" height="200"><path d="M793.889347 200.380242c27.648573 20.615681 42.196018 32.710677 63.781037 56.119312 25.313864 27.453234 43.242957 48.52047 64.502857 86.507991 44.537416 79.580127 53.527718 136.949077 53.517684 212.063821 0 64.933675-15.452562 130.459388-40.138263 187.311893-22.076044 50.841799-61.545336 104.359483-101.886297 138.933914-45.506755 39.001681-81.214423 60.462941-137.605337 81.826531-55.699867 21.102023-114.070267 28.641326-181.379458 27.791064-68.274516-0.862973-129.364283-11.040029-180.533878-31.80489-46.159002-18.731189-98.338744-46.827973-141.596418-87.541551-43.946046-41.361142-70.369064-75.958317-93.88139-127.198155-26.157437-57.004361-40.094111-129.065922-39.680686-191.781288 0-36.980719 4.033895-70.902234 12.252873-105.241856 8.532726-35.651474 20.069131-69.572989 38.13135-102.35257 18.856956-34.221214 36.754607-62.067803 58.869452-88.973149 23.248751-28.285434 39.2104-46.417894 64.295476-63.475987 18.297696-12.442861 36.879036-9.295353 47.199252-2.306612 4.403836 2.982273 8.919391 6.577992 12.933218 12.933217 9.572307 15.156208-0.334486 29.769212-6.69038 38.465836-7.148625 9.781026-23.130343 26.023643-38.738775 43.218205-38.192895 42.075603-55.133918 65.965228-74.986303 106.965794-30.772668 63.552249-37.495827 115.718611-38.131349 166.573791-0.668971 53.517684 9.995096 99.647251 27.427813 140.483919 33.916163 80.572211 94.807915 144.44289 175.270414 178.615938 41.108271 17.845472 113.812713 37.319888 181.960793 38.13135 56.193568 0.668971 125.919751-11.321666 166.574459-28.096784 45.935566-18.954626 97.223569-56.862539 127.10383-94.324918 23.013273-28.852721 52.179742-70.910931 64.413884-105.694749 14.863868-42.260239 24.806784-87.661297 24.559934-132.458943 0-54.414105-11.53373-108.417461-36.918505-156.856317-20.16747-38.483228-46.480777-74.607665-84.66899-108.048189-13.377414-11.714352-23.822728-20.067124-38.808348-31.619586-10.191774-7.857065-36.059546-25.027545-28.923632-47.326356 4.970455-15.53217 18.303717-25.294464 31.887843-27.205046 19.456354-2.736092 28.565733 2.427027 43.705885 12.041479l6.179955 4.322891zM510.755379 531.65738c-8.696624-0.668971-10.034566-0.446204-20.738102-6.689711-11.031333-6.434832-17.839451-21.183637-16.514219-35.175166V92.220334c0-18.178619 0.386665-22.815926 8.988295-31.685813 5.351768-5.519011 10.963097-11.381873 26.08987-11.539751 16.055305-0.167243 21.407073 3.846584 27.929542 9.700081 9.70677 8.711341 10.703537 17.56049 10.377078 33.525483v397.5715c-0.509756 15.273947 0.326458 22.967114-11.380535 33.502739-3.884046 3.495374-8.027653 7.693167-20.96087 8.362138l-3.791059 0.000669z m4.453341 0.573308" p-id="2652" fill="#ffffff"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 19962c86..e56c75e3 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -61,9 +61,14 @@
                     </form-create>
                   </el-col>
 
-                  <el-col :span="7">
-                    <!-- 审批记录时间线 -->
-                    <!-- <ProcessInstanceTimeline ref="timelineRef" :approve-nodes="approveNodes" /> -->
+                  <el-col :span="6" :offset="1">
+                    <!-- 流程时间线 -->
+                    <ProcessInstanceTimeline
+                      ref="timelineRef"
+                      :approve-nodes="approveNodes"
+                      :show-status-icon="false"
+                      candidateField="candidateUserList"
+                    />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -82,6 +87,7 @@
         <div class="b-t-solid border-t-1px border-[var(--el-border-color)]">
           <!-- 操作栏按钮 -->
           <div
+            v-if="activeTab === 'form'"
             class="h-50px bottom-10 text-14px flex items-center color-#32373c dark:color-#fff font-bold btn-container"
           >
             <el-button plain type="success" @click="submitForm">
@@ -99,6 +105,7 @@
 <script lang="ts" setup>
 import { setConfAndFields2 } from '@/utils/formCreate'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -126,11 +133,13 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
-
 /** 当前的Tab */
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
-/** 处理选择流程的按钮操作 **/
+// 审批节点信息
+const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+
+/** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row, formVariables?) => {
   // 重置指定审批人
   startUserSelectTasks.value = []
@@ -141,6 +150,11 @@ const initProcessInfo = async (row, formVariables?) => {
   if (row.formType == 10) {
     // 设置表单
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+    await nextTick()
+    fApi.value?.btn.show(false) // 隐藏提交按钮
+    // 获取流程审批信息
+    getApprovalDetail(row)
+
     // 加载流程图
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
     if (processDefinitionDetail) {
@@ -174,6 +188,23 @@ const initProcessInfo = async (row, formVariables?) => {
     // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
   }
 }
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row) => {
+  try {
+    const param = {
+      processDefinitionId: row.id
+    }
+    const data = await ProcessInstanceApi.getApprovalDetail(param)
+    if (!data) {
+      message.error('查询不到审批详情信息！')
+      return
+    }
+    // 获取审批节点，显示 Timeline 的数据
+    approveNodes.value = data.approveNodes
+  } finally {
+  }
+}
 /** 提交按钮 */
 const submitForm = async (formData) => {
   if (!fApi.value || props.selectProcessDefinition) {
diff --git a/src/views/bpm/processInstance/create/index_new.vue b/src/views/bpm/processInstance/create/index_new.vue
index 097c5b40..fae0d768 100644
--- a/src/views/bpm/processInstance/create/index_new.vue
+++ b/src/views/bpm/processInstance/create/index_new.vue
@@ -56,7 +56,6 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
-import { categoryList as cl, processDefinitionList as pl } from './mock'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
@@ -74,8 +73,6 @@ const getList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 测试数据
-    categoryList.value = cl
     if (categoryList.value.length > 0) {
       categoryActive.value = categoryList.value[0]
     }
@@ -83,8 +80,6 @@ const getList = async () => {
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
       suspensionState: 1
     })
-    // 测试数据
-    processDefinitionList.value = pl as any
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
diff --git a/src/views/bpm/processInstance/create/mock.js b/src/views/bpm/processInstance/create/mock.js
deleted file mode 100644
index b222f8cf..00000000
--- a/src/views/bpm/processInstance/create/mock.js
+++ /dev/null
@@ -1,117 +0,0 @@
-// 模拟流程分类数据
-export const categoryList = [
-  { name: '审批流程', code: 'approval' },
-  { name: '管理流程', code: 'management' }
-]
-
-// 模拟流程定义数据
-export const processDefinitionList = [
-  {
-    id: '1',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '2',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf:
-      '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    formFields: [
-      '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-      '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    ],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '3',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '4',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '5',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '6',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  },
-  {
-    id: '7',
-    key: 'process_1',
-    name: '请假申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=1',
-    formType: 10,
-    formConf: {}, // 根据需要定义表单配置
-    formFields: [], // 根据需要定义表单字段
-    startUserSelectTasks: [
-      { id: 'task1', name: '部门经理' },
-      { id: 'task2', name: '人力资源' }
-    ]
-  },
-  {
-    id: '8',
-    key: 'process_2',
-    name: '报销申请',
-    category: 'approval',
-    icon: 'https://picsum.photos/200?r=2',
-    formType: 10,
-    formConf: {},
-    formFields: [],
-    startUserSelectTasks: [{ id: 'task3', name: '财务' }]
-  }
-]
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 7c87d55f..62b8eafb 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -15,6 +15,7 @@
         >
           <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
           <div
+            v-if="showStatusIcon"
             class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
           >
             <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
@@ -131,11 +132,18 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
 import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
+import finishSvg from '@/assets/svgs/bpm/finish.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
-  approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
+withDefaults(
+  defineProps<{
+    approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    showStatusIcon?: boolean // 是否显示头像右下角状态图标
+  }>(),
+  {
+    showStatusIcon: true // 默认值为 true
+  }
+)
 
 // 审批节点
 const statusIconMap2 = {
@@ -180,6 +188,8 @@ const statusIconMap = {
 }
 
 const nodeTypeSvgMap = {
+  // 结束节点
+  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
   // 发起人节点
   [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
   // 审批人节点

From 0284893b4ac532447e56d9f44546acd659a7718e Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Oct 2024 21:24:03 +0800
Subject: [PATCH 049/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=B5=8F=E8=A7=88=E5=8A=9F=E8=83=BD=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes/CopyTaskNode.vue                    | 15 +++++++++++----
 .../src/nodes/EndEventNode.vue                    |  4 +---
 .../src/nodes/ExclusiveNode.vue                   |  7 ++-----
 .../src/nodes/InclusiveNode.vue                   |  7 ++++---
 .../src/nodes/ParallelNode.vue                    |  8 ++++----
 .../src/nodes/StartUserNode.vue                   |  4 +---
 .../src/nodes/UserTaskNode.vue                    |  5 ++---
 .../theme/simple-process-designer.scss            | 10 +++++++++-
 8 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index e6e4045f..70dc17ae 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="node-wrapper">
     <div class="node-container">
-      <div class="node-box" :class="{ 'node-config-error': !currentNode.showText }">
+      <div
+        class="node-box"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
+      >
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
           <input
@@ -36,13 +39,17 @@
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
       <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
     </div>
-    <CopyTaskNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+    <CopyTaskNodeConfig
+      v-if="!readonly && currentNode"
+      ref="nodeSetting"
+      :flow-node="currentNode"
+    />
   </div>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import NodeHandler from '../NodeHandler.vue'
-import { useNodeName2, useWatchNode } from '../node'
+import { useNodeName2, useWatchNode, useTaskStatusClass } from '../node'
 import CopyTaskNodeConfig from '../nodes-config/CopyTaskNodeConfig.vue'
 defineOptions({
   name: 'CopyTaskNode'
@@ -58,7 +65,7 @@ const emits = defineEmits<{
   'update:flowNode': [node: SimpleFlowNode | undefined]
 }>()
 // 是否只读
-const readonly = inject<Boolean>('readonly') 
+const readonly = inject<Boolean>('readonly')
 // 监控节点的变化
 const currentNode = useWatchNode(props)
 // 节点名称编辑
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
index c2818cc6..3652b0e7 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="end-node-wrapper">
-    <div class="end-node-box" :class="taskStatusClass">
+    <div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
       <span class="node-fixed-name" title="结束">结束</span>
     </div>
   </div>
@@ -20,8 +20,6 @@ const props = defineProps({
 })
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点任务状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 9d307acc..32e9bbd4 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly" :class="taskStatusClass">
-        <span class="iconfont icon-exclusive icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+        <span class="iconfont icon-exclusive icon-size condition"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
         >添加条件</el-button
@@ -122,9 +122,6 @@ const emits = defineEmits<{
 // 是否只读
 const readonly = inject<Boolean>('readonly') 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
-// 节点状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
-
 watch(
   () => props.flowNode,
   (newValue) => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
index 830a4d43..bc388751 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly">
-        <span class="iconfont icon-inclusive icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
+        <span class="iconfont icon-inclusive icon-size inclusive"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
       <div
@@ -20,7 +20,7 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="{ 'node-config-error': !item.showText }">
+            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <input
@@ -88,6 +88,7 @@
 import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useTaskStatusClass } from '../node'
 import { getDefaultInclusiveConditionNodeName } from '../utils'
 import { generateUUID } from '@/utils'
 import ConditionNodeConfig from '../nodes-config/ConditionNodeConfig.vue'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 7f63344e..789ad655 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly">
-        <span class="iconfont icon-parallel icon-size"></span>
+      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+        <span class="iconfont icon-parallel icon-size parallel"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
       <div
@@ -20,7 +20,7 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box">
+            <div class="node-box" :class="`${useTaskStatusClass(item.activityStatus)}`">
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <input
@@ -73,8 +73,8 @@
 import NodeHandler from '../NodeHandler.vue'
 import ProcessNodeTree from '../ProcessNodeTree.vue'
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
+import { useTaskStatusClass } from '../node'
 import { generateUUID } from '@/utils'
-
 const { proxy } = getCurrentInstance() as any
 defineOptions({
   name: 'ParallelNode'
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 13be6b72..3fab63d9 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -3,7 +3,7 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
       >
         <div class="node-title-container">
           <div class="node-title-icon start-user"
@@ -59,8 +59,6 @@ const emits = defineEmits<{
 }>()
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点任务状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index ea4a4b8d..75440067 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -3,7 +3,7 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${taskStatusClass}`]"
+        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
       >
         <div class="node-title-container">
           <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
@@ -69,8 +69,7 @@ const emits = defineEmits<{
 const readonly = inject<Boolean>('readonly')
 // 监控节点变化
 const currentNode = useWatchNode(props)
-// 节点状态样式
-const taskStatusClass = useTaskStatusClass(currentNode.value?.activityStatus)
+
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 39c475d5..1219380f 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1096,7 +1096,15 @@
 
         .icon-size {
           font-size: 22px;
-          color: #67c23a;
+          &.condition {
+            color: #67c23a;
+          }
+          &.parallel {
+            color: #626aef;
+          }
+          &.inclusive {
+            color: #345da2;
+          }
         }
       }
 

From 8465f8fada9d496b3545fd9ef3e898305f0e462a Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Tue, 29 Oct 2024 23:54:51 +0800
Subject: [PATCH 050/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E4=BB=BF=E9=92=89=E9=92=89=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E6=B5=8F=E8=A7=88=EF=BC=8C=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=98=BE=E7=A4=BA=E7=94=A8=E6=88=B7=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessViewer.vue               |  29 +-
 .../src/nodes/EndEventNode.vue                |  81 ++-
 .../src/nodes/StartUserNode.vue               |  93 ++-
 .../src/nodes/UserTaskNode.vue                |  98 ++-
 .../theme/simple-process-designer.scss        | 572 +-----------------
 .../detail/ProcessInstanceSimpleViewer.vue    |  20 +-
 6 files changed, 287 insertions(+), 606 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
index e83c9e93..abf73b48 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessViewer.vue
@@ -1,5 +1,5 @@
 <template>
-    <SimpleProcessModel :flow-node="simpleModel" :readonly="true"/>
+  <SimpleProcessModel :flow-node="simpleModel" :readonly="true" />
 </template>
 
 <script setup lang="ts">
@@ -16,10 +16,33 @@ const props = defineProps({
     required: true
   },
   // 流程任务
-  tasks : {
-    type : Array,
+  tasks: {
+    type: Array,
     default: () => [] as any[]
+  },
+  // 流程实例
+  processInstance: {
+    type: Object,
+    default: () => undefined
   }
 })
+const approveTasks = ref<any[]>(props.tasks)
+const currentProcessInstance = ref(props.processInstance)
 const simpleModel = useWatchNode(props)
+watch(
+  () => props.tasks,
+  (newValue) => {
+    approveTasks.value = newValue
+  }
+)
+watch(
+  () => props.processInstance,
+  (newValue) => {
+    currentProcessInstance.value = newValue
+  }
+)
+
+provide('tasks', approveTasks)
+provide('processInstance', currentProcessInstance)
 </script>
+p
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
index 3652b0e7..63aa24e4 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/EndEventNode.vue
@@ -1,14 +1,69 @@
 <template>
   <div class="end-node-wrapper">
-    <div class="end-node-box" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+    <div class="end-node-box cursor-pointer" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" @click="nodeClick">
       <span class="node-fixed-name" title="结束">结束</span>
     </div>
   </div>
+  <el-dialog title="审批信息" v-model="dialogVisible" width="1000px" append-to-body>
+      <el-row>
+        <el-table
+          :data="processInstanceInfos"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="发起人"
+            prop="assigneeUser.nickname"
+            min-width="100"
+            align="center"
+          />
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+         
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+    </el-dialog>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode } from '../consts'
 import { useWatchNode, useTaskStatusClass } from '../node'
-
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
   name: 'EndEventNode'
 })
@@ -20,6 +75,28 @@ const props = defineProps({
 })
 // 监控节点变化
 const currentNode = useWatchNode(props)
+// 是否只读
+const readonly = inject<Boolean>('readonly')
+const processInstance = inject<Ref<any>>('processInstance')
+// 审批信息的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const processInstanceInfos = ref<any[]>([]) // 流程的审批信息
 
+const nodeClick = () => {
+  if (readonly) { 
+    if(processInstance && processInstance.value){
+      processInstanceInfos.value = [
+      {
+        assigneeUser: processInstance.value.startUser,
+        createTime: processInstance.value.startTime,
+        endTime: processInstance.value.endTime,
+        status: processInstance.value.status,
+        durationInMillis: processInstance.value.durationInMillis
+      }
+    ]
+      dialogVisible.value = true
+    }
+  }
+}
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 3fab63d9..7c24e6c6 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -22,7 +22,7 @@
             {{ currentNode.name }}
           </div>
         </div>
-        <div class="node-content" @click="openNodeConfig">
+        <div class="node-content" @click="nodeClick">
           <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
             {{ currentNode.showText }}
           </div>
@@ -37,12 +37,78 @@
     </div>
   </div>
   <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
+   <!-- 审批记录 -->
+   <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            min-width="100"
+            align="center"
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
+         
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="审批建议"
+            prop="reason"
+            min-width="120"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import NodeHandler from '../NodeHandler.vue'
 import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import { SimpleFlowNode, NODE_DEFAULT_TEXT, NodeType } from '../consts'
 import StartUserNodeConfig from '../nodes-config/StartUserNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
   name: 'StartEventNode'
 })
@@ -53,6 +119,7 @@ const props = defineProps({
   }
 })
 const readonly = inject<Boolean>('readonly') // 是否只读
+const tasks = inject<Ref<any[]>>('tasks')
 // 定义事件，更新父组件。
 const emits = defineEmits<{
   'update:modelValue': [node: SimpleFlowNode | undefined]
@@ -63,15 +130,27 @@ const currentNode = useWatchNode(props)
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
 const nodeSetting = ref()
-// 打开节点配置
-const openNodeConfig = () => {
+// 
+const nodeClick = () => {
   if (readonly) {
-    return
+    // 只读模式，弹窗显示任务信息
+    if(tasks && tasks.value){
+      dialogTitle.value = currentNode.value.name
+      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      dialogVisible.value = true
+    }
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showStartUserNodeConfig(currentNode.value)
+    nodeSetting.value.openDrawer()
   }
-  // 把当前节点传递给配置组件
-  nodeSetting.value.showStartUserNodeConfig(currentNode.value)
-  nodeSetting.value.openDrawer()
+ 
 }
 
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
+
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 75440067..ce8d0ebe 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -20,7 +20,7 @@
             {{ currentNode.name }}
           </div>
         </div>
-        <div class="node-content" @click="openNodeConfig">
+        <div class="node-content" @click="nodeClick">
           <div class="node-text" :title="currentNode.showText" v-if="currentNode.showText">
             {{ currentNode.showText }}
           </div>
@@ -45,12 +45,78 @@
     :flow-node="currentNode"
     @find:return-task-nodes="findReturnTaskNodes"
   />
+  <!-- 审批记录 -->
+  <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
+      <el-row>
+        <el-table
+          :data="selectTasks"
+          size="small"
+          border
+          header-cell-class-name="table-header-gray"
+        >
+          <el-table-column
+            label="序号"
+            header-align="center"
+            align="center"
+            type="index"
+            width="50"
+          />
+          <el-table-column
+            label="审批人"
+            min-width="100"
+            align="center"
+          >
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+            </template>
+          </el-table-column>
+         
+          <el-table-column label="部门" min-width="100" align="center">
+            <template #default="scope">
+              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="开始时间"
+            prop="createTime"
+            min-width="140"
+          />
+          <el-table-column
+            :formatter="dateFormatter"
+            align="center"
+            label="结束时间"
+            prop="endTime"
+            min-width="140"
+          />
+          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column
+            align="center"
+            label="审批建议"
+            prop="reason"
+            min-width="120"
+          />
+          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+            <template #default="scope">
+              {{ formatPast2(scope.row.durationInMillis) }}
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-row>
+  </el-dialog>
 </template>
 <script setup lang="ts">
 import { SimpleFlowNode, NodeType, NODE_DEFAULT_TEXT } from '../consts'
 import { useWatchNode, useNodeName2, useTaskStatusClass } from '../node'
 import NodeHandler from '../NodeHandler.vue'
 import UserTaskNodeConfig from '../nodes-config/UserTaskNodeConfig.vue'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { DICT_TYPE } from '@/utils/dict'
 defineOptions({
   name: 'UserTaskNode'
 })
@@ -67,26 +133,32 @@ const emits = defineEmits<{
 
 // 是否只读
 const readonly = inject<Boolean>('readonly')
+const tasks = inject<Ref<any[]>>('tasks')
 // 监控节点变化
 const currentNode = useWatchNode(props)
-
 // 节点名称编辑
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
-// 打开节点配置
-const openNodeConfig = () => {
-  if (readonly) {
-    return
+
+
+const nodeClick = () => {
+  if (readonly) { 
+    if(tasks && tasks.value){
+      dialogTitle.value = currentNode.value.name
+      // 只读模式，弹窗显示任务信息
+      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      dialogVisible.value = true
+    }
+  } else { 
+     // 编辑模式，打开节点配置、把当前节点传递给配置组件
+    nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
+    nodeSetting.value.openDrawer()
   }
-  // 把当前节点传递给配置组件
-  nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
-  nodeSetting.value.openDrawer()
 }
 
 const deleteNode = () => {
   emits('update:flowNode', currentNode.value.childNode)
 }
-
 // 查找可以驳回用户节点
 const findReturnTaskNodes = (
   matchNodeList: SimpleFlowNode[] // 匹配的节点
@@ -94,5 +166,11 @@ const findReturnTaskNodes = (
   // 从父节点查找
   emits('find:parentNode', matchNodeList, NodeType.USER_TASK_NODE)
 }
+
+// 任务的弹窗显示，用于只读模式
+const dialogVisible = ref(false) // 弹窗可见性
+const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
+const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
+
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 1219380f..91cf42ec 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1,573 +1,3 @@
-// .simple-flow-canvas {
-//   z-index: 1;
-//   overflow: auto;
-//   background-color: #fafafa;
-//   // user-select: none;
-
-//   .simple-flow-container {
-//     position: relative;
-//     display: flex;
-//     flex-direction: column;
-//     justify-content: center;
-//     align-items: center;
-
-//     .top-area-container {
-//       position: sticky;
-//       inset: 0;
-//       display: flex;
-//       width: 100%;
-//       height: 42px;
-//       z-index: 1;
-//       // padding: 4px 0;
-//       background-color: #fff;
-//       justify-content: flex-end;
-//       align-items: center;
-
-//       .top-actions {
-//         display: flex;
-//         margin: 4px;
-//         margin-right: 8px;
-//         align-items: center;
-
-//         .canvas-control {
-//           font-size: 16px;
-
-//           .control-scale-group {
-//             display: inline-flex;
-//             align-items: center;
-//             margin-right: 8px;
-
-//             .control-scale-button {
-//               display: inline-flex;
-//               width: 28px;
-//               height: 28px;
-//               padding: 2px;
-//               text-align: center;
-//               cursor: pointer;
-//               justify-content: center;
-//               align-items: center;
-//             }
-
-//             .control-scale-label {
-//               margin: 0 4px;
-//               font-size: 14px;
-//             }
-//           }
-//         }
-//       }
-//     }
-
-//     .scale-container {
-//       display: flex;
-//       flex-direction: column;
-//       justify-content: center;
-//       align-items: center;
-//       margin-top: 16px;
-//       background-color: #fafafa;
-//       transform-origin: 50% 0 0;
-//       transform: scale(1);
-//       transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-//       // 节点容器 定义节点宽度
-//       .node-container {
-//         width: 200px;
-//       }
-//       // 节点
-//       .node-box {
-//         position: relative;
-//         display: flex;
-//         min-height: 70px;
-//         padding: 5px 10px 8px;
-//         cursor: pointer;
-//         background-color: #fff;
-//         flex-direction: column;
-//         border: 2px solid transparent;
-//         border-radius: 8px;
-//         box-shadow: 0 1px 4px 0 rgba(10, 30, 65, 0.16);
-//         transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-//         &.status-pass {
-//           border-color: #67c23a;
-//           background-color: #a9da90;
-//         }
-//         &.status-pass:hover {
-//           border-color: #67c23a;
-//         }
-//         &.status-running {
-//           border-color: #5a9cf8;
-//           background-color: #e7f0fe;
-//         }
-//         &.status-running:hover {
-//           border-color: #5a9cf8;
-//         }
-//         &.status-reject {
-//           border-color: #e47470;
-//           background-color: #f6e5e5;
-//         }
-//         &.status-reject:hover {
-//           border-color: #e47470;
-//         }
-
-//         &:hover {
-//           border-color: #0089ff;
-//           .node-toolbar {
-//             opacity: 1;
-//           }
-
-//           .branch-node-move {
-//             display: flex;
-//           }
-//         }
-
-//         // 普通节点标题
-//         .node-title-container {
-//           display: flex;
-//           padding: 4px;
-//           cursor: pointer;
-//           border-radius: 4px 4px 0 0;
-//           align-items: center;
-
-//           .node-title-icon {
-//             display: flex;
-//             align-items: center;
-
-//             &.user-task {
-//               color: #ff943e;
-//             }
-//             &.copy-task {
-//               color: #3296fa;
-//             }
-//             &.start-user {
-//               color: #676565;
-//             }
-//           }
-
-//           .node-title {
-//             margin-left: 4px;
-//             font-size: 14px;
-//             font-weight: 600;
-//             white-space: nowrap;
-//             overflow: hidden;
-//             text-overflow: ellipsis;
-//             color: #1f1f1f;
-//             line-height: 18px;
-//             &:hover {
-//               border-bottom: 1px dashed #f60;
-//             }
-//           }
-//         }
-
-//         // 条件节点标题
-//         .branch-node-title-container {
-//           display: flex;
-//           padding: 4px 0;
-//           cursor: pointer;
-//           border-radius: 4px 4px 0 0;
-//           align-items: center;
-//           justify-content: space-between;
-
-//           .input-max-width {
-//             max-width: 115px !important;
-//           }
-
-//           .branch-title {
-//             font-size: 13px;
-//             font-weight: 600;
-//             white-space: nowrap;
-//             overflow: hidden;
-//             text-overflow: ellipsis;
-//             color: #f60;
-//             &:hover {
-//               border-bottom: 1px dashed #000;
-//             }
-//           }
-
-//           .branch-priority {
-//             min-width: 50px;
-//             font-size: 12px;
-//           }
-//         }
-
-//         .node-content {
-//           display: flex;
-//           min-height: 32px;
-//           padding: 4px 8px;
-//           margin-top: 4px;
-//           line-height: 32px;
-//           justify-content: space-between;
-//           align-items: center;
-//           color: #111f2c;
-//           background: rgba(0, 0, 0, 0.03);
-//           border-radius: 4px;
-
-//           .node-text {
-//             display: -webkit-box;
-//             overflow: hidden;
-//             font-size: 14px;
-//             line-height: 24px;
-//             text-overflow: ellipsis;
-//             word-break: break-all;
-//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-//             -webkit-box-orient: vertical;
-//           }
-//         }
-
-//         //条件节点内容
-//         .branch-node-content {
-//           display: flex;
-//           min-height: 32px;
-//           padding: 4px 0;
-//           margin-top: 4px;
-//           line-height: 32px;
-//           align-items: center;
-//           color: #111f2c;
-//           border-radius: 4px;
-
-//           .branch-node-text {
-//             overflow: hidden;
-//             font-size: 12px;
-//             line-height: 24px;
-//             text-overflow: ellipsis;
-//             word-break: break-all;
-//             -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-//             -webkit-box-orient: vertical;
-//           }
-//         }
-
-//         // 节点操作 ：删除
-//         .node-toolbar {
-//           opacity: 0;
-//           position: absolute;
-//           top: -20px;
-//           right: 0px;
-//           display: flex;
-
-//           .toolbar-icon {
-//             text-align: center;
-//             vertical-align: middle;
-//           }
-//         }
-
-//         // 条件节点左右移动
-//         .branch-node-move {
-//           position: absolute;
-//           width: 10px;
-//           cursor: pointer;
-//           display: none;
-//           align-items: center;
-//           height: 100%;
-//           justify-content: center;
-//         }
-
-//         .move-node-left {
-//           left: -2px;
-//           top: 0px;
-//           background: rgba(126, 134, 142, 0.08);
-//           border-top-left-radius: 8px;
-//           border-bottom-left-radius: 8px;
-//         }
-
-//         .move-node-right {
-//           right: -2px;
-//           top: 0px;
-//           background: rgba(126, 134, 142, 0.08);
-//           border-top-right-radius: 6px;
-//           border-bottom-right-radius: 6px;
-//         }
-//       }
-
-//       .node-config-error {
-//         border-color: #ff5219 !important;
-//       }
-//       // 普通节点包装
-//       .node-wrapper {
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: center;
-//         align-items: center;
-//       }
-//       // 节点连线处理
-//       .node-handler-wrapper {
-//         position: relative;
-//         display: flex;
-//         height: 70px;
-//         align-items: center;
-//         user-select: none;
-//         justify-content: center;
-//         flex-direction: column;
-
-//         &::before {
-//           position: absolute;
-//           top: 0;
-//           z-index: 0;
-//           width: 2px;
-//           height: 100%;
-//           margin: auto;
-//           background-color: #dedede;
-//           content: '';
-//         }
-
-//         .node-handler {
-//           .add-icon {
-//             position: relative;
-//             top: -5px;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//             cursor: pointer;
-//             width: 25px;
-//             height: 25px;
-//             color: #fff;
-//             background-color: #0089ff;
-//             border-radius: 50%;
-
-//             &:hover {
-//               transform: scale(1.1);
-//             }
-//           }
-//         }
-
-//         .node-handler-arrow {
-//           position: absolute;
-//           bottom: 0;
-//           left: 50%;
-//           display: flex;
-//           transform: translateX(-50%);
-//         }
-//       }
-
-//       // 条件节点包装
-//       .branch-node-wrapper {
-//         position: relative;
-//         display: flex;
-//         flex-direction: column;
-//         justify-content: center;
-//         align-items: center;
-//         margin-top: 16px;
-
-//         .branch-node-container {
-//           position: relative;
-//           display: flex;
-
-//           &::before {
-//             position: absolute;
-//             height: 100%;
-//             width: 4px;
-//             background-color: #fafafa;
-//             content: '';
-//             left: 50%;
-//             transform: translate(-50%);
-//           }
-
-//           .branch-node-add {
-//             position: absolute;
-//             top: -18px;
-//             left: 50%;
-//             z-index: 1;
-//             height: 36px;
-//             padding: 0 10px;
-//             font-size: 12px;
-//             line-height: 36px;
-//             border: 2px solid #dedede;
-//             border-radius: 18px;
-//             transform: translateX(-50%);
-//             transform-origin: center center;
-//           }
-
-//           .branch-node-readonly {
-//             position: absolute;
-//             top: -18px;
-//             left: 50%;
-//             z-index: 1;
-//             width: 36px;
-//             height: 36px;
-//             display: flex;
-//             align-items: center;
-//             justify-content: center;
-//             border: 2px solid #dedede;
-//             background-color: #fff;
-//             border-radius: 50%;
-//             transform: translateX(-50%);
-//             transform-origin: center center;
-
-//             &.status-pass {
-//               border-color: #6bb63c;
-//               background-color: #e9f4e2;
-//             }
-//             &.status-pass:hover {
-//               border-color: #6bb63c;
-//             }
-
-//             .icon-size {
-//               font-size: 22px;
-//               color: #67c23a;
-//             }
-//           }
-
-//           .branch-node-item {
-//             position: relative;
-//             display: flex;
-//             flex-direction: column;
-//             align-items: center;
-//             min-width: 280px;
-//             padding: 40px 40px 0;
-//             background: transparent;
-//             border-top: 2px solid #dedede;
-//             border-bottom: 2px solid #dedede;
-
-//             &::before {
-//               position: absolute;
-//               width: 2px;
-//               height: 100%;
-//               margin: auto;
-//               inset: 0;
-//               background-color: #dedede;
-//               content: '';
-//             }
-//           }
-//           // 覆盖条件节点第一个节点左上角的线
-//           .branch-line-first-top {
-//             position: absolute;
-//             top: -5px;
-//             left: -1px;
-//             width: 50%;
-//             height: 7px;
-//             background-color: #fafafa;
-//             content: '';
-//           }
-//           // 覆盖条件节点第一个节点左下角的线
-//           .branch-line-first-bottom {
-//             position: absolute;
-//             bottom: -5px;
-//             left: -1px;
-//             width: 50%;
-//             height: 7px;
-//             background-color: #fafafa;
-//             content: '';
-//           }
-//           // 覆盖条件节点最后一个节点右上角的线
-//           .branch-line-last-top {
-//             position: absolute;
-//             top: -5px;
-//             right: -1px;
-//             width: 50%;
-//             height: 7px;
-//             background-color: #fafafa;
-//             content: '';
-//           }
-//           // 覆盖条件节点最后一个节点右下角的线
-//           .branch-line-last-bottom {
-//             position: absolute;
-//             right: -1px;
-//             bottom: -5px;
-//             width: 50%;
-//             height: 7px;
-//             background-color: #fafafa;
-//             content: '';
-//           }
-//         }
-//       }
-
-//       .node-fixed-name {
-//         display: inline-block;
-//         width: auto;
-//         padding: 0 4px;
-//         overflow: hidden;
-//         text-align: center;
-//         text-overflow: ellipsis;
-//         white-space: nowrap;
-//       }
-//       // 开始节点包装
-//       .start-node-wrapper {
-//         position: relative;
-//         margin-top: 16px;
-
-//         .start-node-container {
-//           display: flex;
-//           flex-direction: column;
-//           justify-content: center;
-//           align-items: center;
-
-//           .start-node-box {
-//             display: flex;
-//             justify-content: center;
-//             align-items: center;
-//             width: 90px;
-//             height: 36px;
-//             padding: 3px 4px;
-//             color: #212121;
-//             cursor: pointer;
-//             background: #fafafa;
-//             border-radius: 30px;
-//             box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-//             box-sizing: border-box;
-//           }
-//         }
-//       }
-
-//       // 结束节点包装
-//       .end-node-wrapper {
-//         margin-bottom: 16px;
-
-//         .end-node-box {
-//           display: flex;
-//           justify-content: center;
-//           align-items: center;
-//           width: 80px;
-//           height: 36px;
-//           border: 2px solid #fafafa;
-//           color: #212121;
-//           border-radius: 30px;
-//           box-shadow: 0 1px 5px 0 rgba(10, 30, 65, 0.08);
-//           box-sizing: border-box;
-
-//           &.status-pass {
-//             border-color: #6bb63c;
-//             background-color: #a9da90;
-//           }
-
-//           &.status-pass:hover {
-//             border-color: #6bb63c;
-//           }
-
-//           &.status-reject {
-//             border-color: #e47470;
-//             background-color: #f6e5e5;
-//           }
-//           &.status-reject:hover {
-//             border-color: #e47470;
-//           }
-
-//           &.status-cancel {
-//             border-color: #919398;
-//             background-color: #eaeaeb;
-//           }
-//           &.status-cancel:hover {
-//             border-color: #919398;
-//           }
-//         }
-//       }
-
-//       // 可编辑的 title 输入框
-//       .editable-title-input {
-//         height: 20px;
-//         max-width: 145px;
-//         line-height: 20px;
-//         font-size: 12px;
-//         margin-left: 4px;
-//         border: 1px solid #d9d9d9;
-//         border-radius: 4px;
-//         transition: all 0.3s;
-
-//         &:focus {
-//           border-color: #40a9ff;
-//           outline: 0;
-//           box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-//         }
-//       }
-//     }
-//   }
-// }
 
 // 配置节点头部
 .config-header {
@@ -739,7 +169,7 @@
     font-size: 13px;
   }
 }
-
+// Simple 流程模型样式
 .simple-process-model-container {
   height: 100%;
   overflow: auto;
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 6ec91a09..0e225106 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-loading="loading" class="mb-20px">
-      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks"/>
+      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks" :process-instance="processInstance"/>
   </div>
 </template>
 <script lang="ts" setup>
@@ -16,10 +16,11 @@ const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
   id: propTypes.string // 流程实例的编号
 })
-
-const tasks = ref([])
 const simpleModel = ref()
-
+// 用户任务
+const tasks = ref([])
+// 流程实例
+const processInstance = ref()
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
   () => props.loading,
@@ -27,7 +28,8 @@ watch(
     if (value && props.id) {
       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
       if (modelView) {
-        tasks.value = modelView.tasks;
+        tasks.value = modelView.tasks
+        processInstance.value = modelView.processInstance
         // 已经拒绝的活动节点编号集合，只包括 UserTask
         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
         // 进行中的活动节点编号集合， 只包括 UserTask
@@ -44,7 +46,6 @@ watch(
           finishedActivityIds,
           finishedSequenceFlowActivityIds
         )
-        console.log('modelView.simpleModel==>', modelView.simpleModel)
         simpleModel.value = modelView.simpleModel
       }
     }
@@ -140,11 +141,4 @@ const setSimpleModelNodeTaskStatus = (
     finishedSequenceFlowActivityIds
   )
 }
-/** 监听 bpmnXml */
-// watch(
-//   () => props.bpmnXml,
-//   (value) => {
-//     view.value.bpmnXml = value
-//   }
-// )
 </script>

From 812e5b5865a7292aab243b5a6c4b0861ad91150b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 31 Oct 2024 22:47:10 +0800
Subject: [PATCH 051/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E6=B5=81=E7=A8=8B=E9=A2=84=E6=B5=8B=E7=9A=84=20candid?=
 =?UTF-8?q?ateUsers=20=E5=B1=95=E7=A4=BA=E4=B8=8D=E6=AD=A3=E7=A1=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue |  2 +-
 .../detail/ProcessInstanceTimeline.vue        | 47 +++++++++----------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index 4233d05c..dfbd6928 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -334,7 +334,7 @@
     <div
       @click="openChildrenTask()"
       class="hover-bg-gray-100 rounded-xl p-6px"
-      v-if="runningTask?.children"
+      v-if="runningTask?.children.length > 0"
     >
       <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
     </div>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index d2a7a357..0862f502 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -81,30 +81,6 @@
                     />
                   </div>
                 </div>
-                <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
-                <div
-                  v-for="(user, idx1) in activity.candidateUsers"
-                  :key="idx1"
-                  class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
-                >
-                  <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
-                  <el-avatar :size="28" v-else>
-                    {{ user.nickname.substring(0, 1) }}
-                  </el-avatar>
-                  {{ user.nickname }}
-
-                  <!-- 信息：任务 ICON -->
-                  <div
-                    v-if="onlyStatusIconShow.includes(task.status)"
-                    class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
-                  >
-                    <Icon
-                      :size="12"
-                      :icon="statusIconMap2['-1']?.icon"
-                      :color="statusIconMap2['-1']?.color"
-                    />
-                  </div>
-                </div>
               </div>
               <div
                 v-if="
@@ -117,6 +93,29 @@
               </div>
             </div>
           </div>
+          <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
+          <div
+            v-for="(user, idx1) in activity.candidateUsers"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+          >
+            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+
+            <!-- 信息：任务 ICON -->
+            <div
+              class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+            >
+              <Icon
+                :size="12"
+                :icon="statusIconMap2['-1']?.icon"
+                :color="statusIconMap2['-1']?.color"
+              />
+            </div>
+          </div>
         </div>
       </div>
     </el-timeline-item>

From e504be7d42662a2154e33f12d1d2421523e8a219 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 1 Nov 2024 23:04:00 +0800
Subject: [PATCH 052/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF=E3=80=81?=
 =?UTF-8?q?=E5=8C=85=E5=AE=B9=E5=88=86=E6=94=AF=E5=90=8E=E9=9D=A2=E4=B8=8D?=
 =?UTF-8?q?=E5=85=81=E8=AE=B8=E7=9B=B4=E6=8E=A5=E6=B7=BB=E5=8A=A0=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=8C=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       | 23 +++++++++++--------
 .../src/nodes/CopyTaskNode.vue                |  2 +-
 .../src/nodes/ExclusiveNode.vue               |  4 ++--
 .../src/nodes/InclusiveNode.vue               |  4 ++--
 .../src/nodes/ParallelNode.vue                |  4 ++--
 .../src/nodes/StartUserNode.vue               |  2 +-
 .../src/nodes/UserTaskNode.vue                |  2 +-
 7 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index 9505bfb3..c7707a1c 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="node-handler-wrapper">
-    <div class="node-handler" v-if="props.showAdd">
+    <div class="node-handler">
       <el-popover
         trigger="hover"
         v-model:visible="popoverShow"
@@ -27,7 +27,14 @@
             </div>
             <div class="handler-item-text">条件分支</div>
           </div>
-          <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
+          <div
+            class="handler-item"
+            @click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
+            v-if="
+              NodeType.CONDITION_BRANCH_NODE !== currentNode?.type &&
+              NodeType.INCLUSIVE_BRANCH_NODE !== currentNode?.type
+            "
+          >
             <div class="handler-item-icon parallel">
               <span class="iconfont icon-size icon-parallel"></span>
             </div>
@@ -70,13 +77,11 @@ const props = defineProps({
     type: Object as () => SimpleFlowNode,
     default: null
   },
-  showAdd: {
-    // 是否显示添加节点
-    type: Boolean,
-    default: true
+  currentNode: {
+    type: Object as () => SimpleFlowNode,
+    required: true
   }
 })
-
 const emits = defineEmits(['update:childNode'])
 
 const readonly = inject<Boolean>('readonly') // 是否只读
@@ -131,7 +136,6 @@ const addNode = (type: number) => {
           childNode: undefined,
           conditionType: 1,
           defaultFlow: false
-          
         },
         {
           id: 'Flow_' + generateUUID(),
@@ -183,7 +187,8 @@ const addNode = (type: number) => {
           name: '包容条件1',
           showText: '',
           type: NodeType.CONDITION_NODE,
-          childNode: undefined
+          childNode: undefined,
+          defaultFlow: false
         },
         {
           id: 'Flow_' + generateUUID(),
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 70dc17ae..0c627b0a 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -37,7 +37,7 @@
       </div>
 
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode"/>
     </div>
     <CopyTaskNodeConfig
       v-if="!readonly && currentNode"
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index 32e9bbd4..d8b6aa7d 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -74,7 +74,7 @@
                 <Icon icon="ep:arrow-right" />
               </div>
             </div>
-            <NodeHandler v-model:child-node="item.childNode" />
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
           </div>
         </div>
         <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
@@ -87,7 +87,7 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
   </div>
 </template>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
index bc388751..cd06b358 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -67,7 +67,7 @@
                 <Icon icon="ep:arrow-right" />
               </div>
             </div>
-            <NodeHandler v-model:child-node="item.childNode" />
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item"/>
           </div>
         </div>
         <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
@@ -80,7 +80,7 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode"/>
   </div>
 </template>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index 789ad655..ca711707 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -53,7 +53,7 @@
                 </div>
               </div>
             </div>
-            <NodeHandler v-model:child-node="item.childNode" />
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item"/>
           </div>
         </div>
         <!-- 递归显示子节点  -->
@@ -65,7 +65,7 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
   </div>
 </template>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 7c24e6c6..0ae8e1e29 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -33,7 +33,7 @@
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
     </div>
   </div>
   <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index ce8d0ebe..10eb678b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -36,7 +36,7 @@
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" />
+      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
     </div>
   </div>
   <UserTaskNodeConfig

From a097560f81a04faaa64548187b62cca21e243536 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 09:11:19 +0800
Subject: [PATCH 053/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=9D=A1=E4=BB=B6=E5=88=86=E6=94=AF=E3=80=81?=
 =?UTF-8?q?=E5=8C=85=E5=AE=B9=E5=88=86=E6=94=AF=E5=90=8E=E9=9D=A2=E4=B8=8D?=
 =?UTF-8?q?=E5=85=81=E8=AE=B8=E7=9B=B4=E6=8E=A5=E6=B7=BB=E5=8A=A0=E5=B9=B6?=
 =?UTF-8?q?=E8=A1=8C=E5=88=86=E6=94=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/NodeHandler.vue                       |  24 +--
 .../src/nodes/CopyTaskNode.vue                |  11 +-
 .../src/nodes/ExclusiveNode.vue               |  22 ++-
 .../src/nodes/InclusiveNode.vue               |  37 ++++-
 .../src/nodes/ParallelNode.vue                |  22 ++-
 .../src/nodes/StartUserNode.vue               | 140 +++++++++--------
 .../src/nodes/UserTaskNode.vue                | 142 +++++++++---------
 7 files changed, 227 insertions(+), 171 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
index c7707a1c..853a0aa6 100644
--- a/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
+++ b/src/components/SimpleProcessDesignerV2/src/NodeHandler.vue
@@ -27,14 +27,7 @@
             </div>
             <div class="handler-item-text">条件分支</div>
           </div>
-          <div
-            class="handler-item"
-            @click="addNode(NodeType.PARALLEL_BRANCH_NODE)"
-            v-if="
-              NodeType.CONDITION_BRANCH_NODE !== currentNode?.type &&
-              NodeType.INCLUSIVE_BRANCH_NODE !== currentNode?.type
-            "
-          >
+          <div class="handler-item" @click="addNode(NodeType.PARALLEL_BRANCH_NODE)">
             <div class="handler-item-icon parallel">
               <span class="iconfont icon-size icon-parallel"></span>
             </div>
@@ -70,8 +63,10 @@ import { generateUUID } from '@/utils'
 defineOptions({
   name: 'NodeHandler'
 })
-const popoverShow = ref(false)
 
+const message = useMessage() // 消息弹窗
+
+const popoverShow = ref(false)
 const props = defineProps({
   childNode: {
     type: Object as () => SimpleFlowNode,
@@ -87,6 +82,17 @@ const emits = defineEmits(['update:childNode'])
 const readonly = inject<Boolean>('readonly') // 是否只读
 
 const addNode = (type: number) => {
+  // 校验：条件分支、包容分支后面，不允许直接添加并行分支
+  if (
+    type === NodeType.PARALLEL_BRANCH_NODE &&
+    [NodeType.CONDITION_BRANCH_NODE, NodeType.INCLUSIVE_BRANCH_NODE].includes(
+      props.currentNode?.type
+    )
+  ) {
+    message.error('条件分支、包容分支后面，不允许直接添加并行分支')
+    return
+  }
+
   popoverShow.value = false
   if (type === NodeType.USER_TASK_NODE) {
     const id = 'Activity_' + generateUUID()
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
index 0c627b0a..8b97ee5b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/CopyTaskNode.vue
@@ -3,7 +3,10 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
       >
         <div class="node-title-container">
           <div class="node-title-icon copy-task"><span class="iconfont icon-copy"></span></div>
@@ -37,7 +40,11 @@
       </div>
 
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode"/>
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
     </div>
     <CopyTaskNodeConfig
       v-if="!readonly && currentNode"
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
index d8b6aa7d..adeae77b 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ExclusiveNode.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
         <span class="iconfont icon-exclusive icon-size condition"></span>
       </div>
       <el-button v-else class="branch-node-add" color="#67c23a" @click="addCondition" plain
@@ -23,7 +27,13 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`
+              ]"
+            >
               <div class="branch-node-title-container">
                 <div v-if="!readonly && showInputs[index]">
                   <input
@@ -87,7 +97,11 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
   </div>
 </template>
 
@@ -120,7 +134,7 @@ const emits = defineEmits<{
   ]
 }>()
 // 是否只读
-const readonly = inject<Boolean>('readonly') 
+const readonly = inject<Boolean>('readonly')
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 watch(
   () => props.flowNode,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
index cd06b358..f1445d83 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/InclusiveNode.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`" >
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
         <span class="iconfont icon-inclusive icon-size inclusive"></span>
       </div>
-      <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition"  plain>添加条件</el-button>
+      <el-button v-else class="branch-node-add" color="#345da2" @click="addCondition" plain
+        >添加条件</el-button
+      >
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -20,7 +26,13 @@
         </template>
         <div class="node-wrapper">
           <div class="node-container">
-            <div class="node-box" :class="[{ 'node-config-error': !item.showText }, `${useTaskStatusClass(item.activityStatus)}`]">
+            <div
+              class="node-box"
+              :class="[
+                { 'node-config-error': !item.showText },
+                `${useTaskStatusClass(item.activityStatus)}`
+              ]"
+            >
               <div class="branch-node-title-container">
                 <div v-if="showInputs[index]">
                   <input
@@ -41,7 +53,10 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div class="node-toolbar" v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length">
+              <div
+                class="node-toolbar"
+                v-if="!readonly && index + 1 !== currentNode.conditionNodes?.length"
+              >
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -61,13 +76,17 @@
 
               <div
                 class="branch-node-move move-node-right"
-                v-if="!readonly && currentNode.conditionNodes && index < currentNode.conditionNodes.length - 2"
+                v-if="
+                  !readonly &&
+                  currentNode.conditionNodes &&
+                  index < currentNode.conditionNodes.length - 2
+                "
                 @click="moveNode(index, 1)"
               >
                 <Icon icon="ep:arrow-right" />
               </div>
             </div>
-            <NodeHandler v-model:child-node="item.childNode" :current-node="item"/>
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
           </div>
         </div>
         <ConditionNodeConfig :node-index="index" :condition-node="item" :ref="item.id" />
@@ -80,7 +99,11 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode"/>
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
   </div>
 </template>
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
index ca711707..7aa67933 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/ParallelNode.vue
@@ -1,10 +1,16 @@
 <template>
   <div class="branch-node-wrapper">
     <div class="branch-node-container">
-      <div v-if="readonly" class="branch-node-readonly" :class="`${useTaskStatusClass(currentNode?.activityStatus)}`">
+      <div
+        v-if="readonly"
+        class="branch-node-readonly"
+        :class="`${useTaskStatusClass(currentNode?.activityStatus)}`"
+      >
         <span class="iconfont icon-parallel icon-size parallel"></span>
       </div>
-      <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition"  plain>添加分支</el-button>
+      <el-button v-else class="branch-node-add" color="#626aef" @click="addCondition" plain
+        >添加分支</el-button
+      >
       <div
         class="branch-node-item"
         v-for="(item, index) in currentNode.conditionNodes"
@@ -42,7 +48,7 @@
                   {{ NODE_DEFAULT_TEXT.get(NodeType.CONDITION_NODE) }}
                 </div>
               </div>
-              <div  v-if="!readonly" class="node-toolbar">
+              <div v-if="!readonly" class="node-toolbar">
                 <div class="toolbar-icon">
                   <Icon
                     color="#0089ff"
@@ -53,7 +59,7 @@
                 </div>
               </div>
             </div>
-            <NodeHandler v-model:child-node="item.childNode" :current-node="item"/>
+            <NodeHandler v-model:child-node="item.childNode" :current-node="item" />
           </div>
         </div>
         <!-- 递归显示子节点  -->
@@ -65,7 +71,11 @@
         />
       </div>
     </div>
-    <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
+    <NodeHandler
+      v-if="currentNode"
+      v-model:child-node="currentNode.childNode"
+      :current-node="currentNode"
+    />
   </div>
 </template>
 
@@ -98,7 +108,7 @@ const emits = defineEmits<{
 
 const currentNode = ref<SimpleFlowNode>(props.flowNode)
 // 是否只读
-const readonly = inject<Boolean>('readonly') 
+const readonly = inject<Boolean>('readonly')
 
 watch(
   () => props.flowNode,
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
index 0ae8e1e29..89a57d04 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/StartUserNode.vue
@@ -3,7 +3,10 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
       >
         <div class="node-title-container">
           <div class="node-title-icon start-user"
@@ -33,73 +36,68 @@
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
     </div>
   </div>
   <StartUserNodeConfig v-if="!readonly && currentNode" ref="nodeSetting" :flow-node="currentNode" />
-   <!-- 审批记录 -->
-   <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
-      <el-row>
-        <el-table
-          :data="selectTasks"
-          size="small"
-          border
-          header-cell-class-name="table-header-gray"
-        >
-          <el-table-column
-            label="序号"
-            header-align="center"
-            align="center"
-            type="index"
-            width="50"
-          />
-          <el-table-column
-            label="审批人"
-            min-width="100"
-            align="center"
-          >
-            <template #default="scope">
-              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
-            </template>
-          </el-table-column>
-         
-          <el-table-column label="部门" min-width="100" align="center">
-            <template #default="scope">
-              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            :formatter="dateFormatter"
-            align="center"
-            label="开始时间"
-            prop="createTime"
-            min-width="140"
-          />
-          <el-table-column
-            :formatter="dateFormatter"
-            align="center"
-            label="结束时间"
-            prop="endTime"
-            min-width="140"
-          />
-          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="审批建议"
-            prop="reason"
-            min-width="120"
-          />
-          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
-            <template #default="scope">
-              {{ formatPast2(scope.row.durationInMillis) }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-row>
+  <!-- 审批记录 -->
+  <el-dialog
+    :title="dialogTitle || '审批记录'"
+    v-model="dialogVisible"
+    width="1000px"
+    append-to-body
+  >
+    <el-row>
+      <el-table :data="selectTasks" size="small" border header-cell-class-name="table-header-gray">
+        <el-table-column
+          label="序号"
+          header-align="center"
+          align="center"
+          type="index"
+          width="50"
+        />
+        <el-table-column label="审批人" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="部门" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="开始时间"
+          prop="createTime"
+          min-width="140"
+        />
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="结束时间"
+          prop="endTime"
+          min-width="140"
+        />
+        <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="审批建议" prop="reason" min-width="120" />
+        <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+          <template #default="scope">
+            {{ formatPast2(scope.row.durationInMillis) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
   </el-dialog>
 </template>
 <script setup lang="ts">
@@ -130,13 +128,15 @@ const currentNode = useWatchNode(props)
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 
 const nodeSetting = ref()
-// 
+//
 const nodeClick = () => {
   if (readonly) {
     // 只读模式，弹窗显示任务信息
-    if(tasks && tasks.value){
+    if (tasks && tasks.value) {
       dialogTitle.value = currentNode.value.name
-      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      selectTasks.value = tasks.value.filter(
+        (item: any) => item?.taskDefinitionKey === currentNode.value.id
+      )
       dialogVisible.value = true
     }
   } else {
@@ -144,13 +144,11 @@ const nodeClick = () => {
     nodeSetting.value.showStartUserNodeConfig(currentNode.value)
     nodeSetting.value.openDrawer()
   }
- 
 }
 
 // 任务的弹窗显示，用于只读模式
 const dialogVisible = ref(false) // 弹窗可见性
 const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
-const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
-
+const selectTasks = ref<any[] | undefined>([]) // 选中的任务数组
 </script>
 <style lang="scss" scoped></style>
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
index 10eb678b..761a6743 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes/UserTaskNode.vue
@@ -3,7 +3,10 @@
     <div class="node-container">
       <div
         class="node-box"
-        :class="[{ 'node-config-error': !currentNode.showText }, `${useTaskStatusClass(currentNode?.activityStatus)}`]"
+        :class="[
+          { 'node-config-error': !currentNode.showText },
+          `${useTaskStatusClass(currentNode?.activityStatus)}`
+        ]"
       >
         <div class="node-title-container">
           <div class="node-title-icon user-task"><span class="iconfont icon-approve"></span></div>
@@ -36,7 +39,11 @@
         </div>
       </div>
       <!-- 传递子节点给添加节点组件。会在子节点前面添加节点 -->
-      <NodeHandler v-if="currentNode" v-model:child-node="currentNode.childNode" :current-node="currentNode" />
+      <NodeHandler
+        v-if="currentNode"
+        v-model:child-node="currentNode.childNode"
+        :current-node="currentNode"
+      />
     </div>
   </div>
   <UserTaskNodeConfig
@@ -46,68 +53,59 @@
     @find:return-task-nodes="findReturnTaskNodes"
   />
   <!-- 审批记录 -->
-  <el-dialog :title="dialogTitle || '审批记录'" v-model="dialogVisible" width="1000px"  append-to-body>
-      <el-row>
-        <el-table
-          :data="selectTasks"
-          size="small"
-          border
-          header-cell-class-name="table-header-gray"
-        >
-          <el-table-column
-            label="序号"
-            header-align="center"
-            align="center"
-            type="index"
-            width="50"
-          />
-          <el-table-column
-            label="审批人"
-            min-width="100"
-            align="center"
-          >
-            <template #default="scope">
-              {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
-            </template>
-          </el-table-column>
-         
-          <el-table-column label="部门" min-width="100" align="center">
-            <template #default="scope">
-              {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
-            </template>
-          </el-table-column>
-          <el-table-column
-            :formatter="dateFormatter"
-            align="center"
-            label="开始时间"
-            prop="createTime"
-            min-width="140"
-          />
-          <el-table-column
-            :formatter="dateFormatter"
-            align="center"
-            label="结束时间"
-            prop="endTime"
-            min-width="140"
-          />
-          <el-table-column align="center" label="审批状态" prop="status" min-width="90">
-            <template #default="scope">
-              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
-            </template>
-          </el-table-column>
-          <el-table-column
-            align="center"
-            label="审批建议"
-            prop="reason"
-            min-width="120"
-          />
-          <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
-            <template #default="scope">
-              {{ formatPast2(scope.row.durationInMillis) }}
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-row>
+  <el-dialog
+    :title="dialogTitle || '审批记录'"
+    v-model="dialogVisible"
+    width="1000px"
+    append-to-body
+  >
+    <el-row>
+      <el-table :data="selectTasks" size="small" border header-cell-class-name="table-header-gray">
+        <el-table-column
+          label="序号"
+          header-align="center"
+          align="center"
+          type="index"
+          width="50"
+        />
+        <el-table-column label="审批人" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="部门" min-width="100" align="center">
+          <template #default="scope">
+            {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="开始时间"
+          prop="createTime"
+          min-width="140"
+        />
+        <el-table-column
+          :formatter="dateFormatter"
+          align="center"
+          label="结束时间"
+          prop="endTime"
+          min-width="140"
+        />
+        <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+          <template #default="scope">
+            <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+          </template>
+        </el-table-column>
+        <el-table-column align="center" label="审批建议" prop="reason" min-width="120" />
+        <el-table-column align="center" label="耗时" prop="durationInMillis" width="100">
+          <template #default="scope">
+            {{ formatPast2(scope.row.durationInMillis) }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
   </el-dialog>
 </template>
 <script setup lang="ts">
@@ -140,17 +138,18 @@ const currentNode = useWatchNode(props)
 const { showInput, blurEvent, clickTitle } = useNodeName2(currentNode, NodeType.START_USER_NODE)
 const nodeSetting = ref()
 
-
 const nodeClick = () => {
-  if (readonly) { 
-    if(tasks && tasks.value){
+  if (readonly) {
+    if (tasks && tasks.value) {
       dialogTitle.value = currentNode.value.name
       // 只读模式，弹窗显示任务信息
-      selectTasks.value = tasks.value.filter((item: any) => item?.taskDefinitionKey === currentNode.value.id)
+      selectTasks.value = tasks.value.filter(
+        (item: any) => item?.taskDefinitionKey === currentNode.value.id
+      )
       dialogVisible.value = true
     }
-  } else { 
-     // 编辑模式，打开节点配置、把当前节点传递给配置组件
+  } else {
+    // 编辑模式，打开节点配置、把当前节点传递给配置组件
     nodeSetting.value.showUserTaskNodeConfig(currentNode.value)
     nodeSetting.value.openDrawer()
   }
@@ -170,7 +169,6 @@ const findReturnTaskNodes = (
 // 任务的弹窗显示，用于只读模式
 const dialogVisible = ref(false) // 弹窗可见性
 const dialogTitle = ref<string | undefined>(undefined) // 弹窗标题
-const selectTasks = ref<any[]|undefined>([]) // 选中的任务数组
-
+const selectTasks = ref<any[] | undefined>([]) // 选中的任务数组
 </script>
 <style lang="scss" scoped></style>

From 3202378b043ea926c206f2196072e9270777ecfc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 09:32:35 +0800
Subject: [PATCH 054/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=E5=AE=A1=E6=89=B9=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=A1=E6=89=B9=E9=80=9A=E8=BF=87=E5=90=8E=EF=BC=8C?=
 =?UTF-8?q?bpmn=20=E4=B8=8D=E4=BC=9A=E9=87=8D=E6=96=B0=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E9=AB=98=E4=BA=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceBpmnViewer.vue             |  5 +++++
 src/views/bpm/processInstance/detail/index.vue       | 12 +++++++++---
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 33520627..7ffe11b8 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -24,6 +24,11 @@ const view = ref({
 watch(
   () => props.loading,
   async (value) => {
+    // 重置
+    view.value = {
+      bpmnXml: ''
+    }
+    // 加载最新
     if (value && props.id) {
       view.value = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
     }
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 6fe4565e..9890f698 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -76,13 +76,19 @@
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
               <ProcessInstanceSimpleViewer
-                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE"
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE
+                "
                 :id="`${id}`"
                 :loading="processInstanceLoading"
               />
               <ProcessInstanceBpmnViewer
-                v-show="processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN"
-                :id="`${id}`" :loading="processInstanceLoading" />
+                v-show="
+                  processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN
+                "
+                :id="`${id}`"
+                :loading="processInstanceLoading"
+              />
             </div>
           </el-tab-pane>
 

From 5121d5694d86178dd23ecae779f245ee12f164a5 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 10:52:31 +0800
Subject: [PATCH 055/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=90=88?=
 =?UTF-8?q?=E5=B9=B6=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E6=B5=81=E7=A8=8B=EF=BC=8C=E4=BD=BF=E7=94=A8=E6=96=B0?=
 =?UTF-8?q?=E7=9A=84=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/end.svg                   |   1 -
 .../create/ProcessDefinitionDetail.vue        |  38 +--
 .../bpm/processInstance/create/index.vue      | 275 +++++-------------
 .../bpm/processInstance/create/index_new.vue  | 150 ----------
 .../bpm/processInstance/create/index_old.vue  | 267 +++++++++++++++++
 .../detail/ProcessInstanceTimeline.vue        |  10 +-
 6 files changed, 369 insertions(+), 372 deletions(-)
 delete mode 100644 src/assets/svgs/bpm/end.svg
 delete mode 100644 src/views/bpm/processInstance/create/index_new.vue
 create mode 100644 src/views/bpm/processInstance/create/index_old.vue

diff --git a/src/assets/svgs/bpm/end.svg b/src/assets/svgs/bpm/end.svg
deleted file mode 100644
index 21bd3a30..00000000
--- a/src/assets/svgs/bpm/end.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1729949323056" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12570" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#333333" opacity=".01" p-id="12571"></path><path d="M512 0a32 32 0 0 0-32 32v448a32 32 0 0 0 64 0v-448A32 32 0 0 0 512 0zM282.688 109.696a32 32 0 0 0-44.544-7.936 480 480 0 1 0 549.12 0.96 32 32 0 1 0-36.8 52.352 416 416 0 1 1-475.776-0.832 32 32 0 0 0 8-44.544z" fill="#e6e6e6" p-id="12572" data-spm-anchor-id="a313x.search_index.0.i5.3c163a81TFKD3L" class="selected"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index e56c75e3..35044965 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -2,16 +2,10 @@
   <ContentWrap :bodyStyle="{ padding: '10px 20px 0' }">
     <div class="processInstance-wrap-main">
       <el-scrollbar>
-        <div class="text-#878c93 h-15px">编号：{{ selectProcessDefinition.id }}</div>
+        <div class="text-#878c93 h-15px">流程：{{ selectProcessDefinition.name }}</div>
         <el-divider class="!my-8px" />
 
-        <div class="flex items-center justify-between gap-5 mb-10px h-40px">
-          <div class="text-26px font-bold mb-5px">{{ selectProcessDefinition.name }}</div>
-          <el-button style="float: right" type="primary" @click="handleCancel">
-            <Icon icon="ep:delete" /> 选择其它流程
-          </el-button>
-        </div>
-        <!-- 中间主要内容tab栏 -->
+        <!-- 中间主要内容 tab 栏 -->
         <el-tabs v-model="activeTab">
           <!-- 表单信息 -->
           <el-tab-pane label="表单填写" name="form">
@@ -65,7 +59,7 @@
                     <!-- 流程时间线 -->
                     <ProcessInstanceTimeline
                       ref="timelineRef"
-                      :approve-nodes="approveNodes"
+                      :activity-nodes="activityNodes"
                       :show-status-icon="false"
                       candidateField="candidateUserList"
                     />
@@ -103,7 +97,7 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { setConfAndFields2 } from '@/utils/formCreate'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
@@ -137,10 +131,10 @@ const bpmnXML: any = ref(null) // BPMN 数据
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
 // 审批节点信息
-const approveNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 
 /** 设置表单信息、获取流程图数据 **/
-const initProcessInfo = async (row, formVariables?) => {
+const initProcessInfo = async (row: any, formVariables?: any) => {
   // 重置指定审批人
   startUserSelectTasks.value = []
   startUserSelectAssignees.value = {}
@@ -149,11 +143,20 @@ const initProcessInfo = async (row, formVariables?) => {
   // 情况一：流程表单
   if (row.formType == 10) {
     // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
     setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
     await nextTick()
     fApi.value?.btn.show(false) // 隐藏提交按钮
     // 获取流程审批信息
-    getApprovalDetail(row)
+    await getApprovalDetail(row)
 
     // 加载流程图
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
@@ -190,7 +193,7 @@ const initProcessInfo = async (row, formVariables?) => {
 }
 
 /** 获取审批详情 */
-const getApprovalDetail = async (row) => {
+const getApprovalDetail = async (row: any) => {
   try {
     const param = {
       processDefinitionId: row.id
@@ -201,13 +204,14 @@ const getApprovalDetail = async (row) => {
       return
     }
     // 获取审批节点，显示 Timeline 的数据
-    approveNodes.value = data.approveNodes
+    activityNodes.value = data.activityNodes
   } finally {
   }
 }
 /** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || props.selectProcessDefinition) {
+const submitForm = async (formData: any) => {
+  debugger
+  if (!fApi.value || !props.selectProcessDefinition) {
     return
   }
   // 如果有指定审批人，需要校验
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 83e1ff46..9e6fcb48 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -1,120 +1,72 @@
 <template>
-  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
-
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
-    <el-tabs tab-position="left" v-model="categoryActive">
-      <el-tab-pane
-        :label="category.name"
-        :name="category.code"
-        :key="category.code"
-        v-for="category in categoryList"
-      >
-        <el-row :gutter="20">
-          <el-col
-            :lg="6"
-            :sm="12"
-            :xs="24"
+  <ContentWrap
+    class="process-definition-container position-relative pb-20px"
+    v-if="!selectProcessDefinition"
+    v-loading="loading"
+  >
+    <el-row :gutter="20" class="!flex-nowrap">
+      <el-col :span="5">
+        <div class="flex flex-col">
+          <div
+            v-for="category in categoryList"
+            :key="category.code"
+            class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+            :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+            @click="handleCategoryClick(category)"
+          >
+            {{ category.name }}
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="19">
+        <h3 class="text-16px font-bold mb-10px mt-5px">{{ categoryActive.name }}</h3>
+        <div class="grid grid-cols-3 gap3" v-if="categoryProcessDefinitionList.length">
+          <el-card
             v-for="definition in categoryProcessDefinitionList"
             :key="definition.id"
+            shadow="hover"
+            class="cursor-pointer definition-item-card"
+            @click="handleSelect(definition)"
           >
-            <el-card
-              shadow="hover"
-              class="mb-20px cursor-pointer"
-              @click="handleSelect(definition)"
-            >
-              <template #default>
-                <div class="flex">
-                  <el-image :src="definition.icon" class="w-32px h-32px" />
-                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
-                </div>
-              </template>
-            </el-card>
-          </el-col>
-        </el-row>
-      </el-tab-pane>
-    </el-tabs>
+            <template #default>
+              <div class="flex">
+                <el-image :src="definition.icon" class="w-32px h-32px" />
+                <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+              </div>
+            </template>
+          </el-card>
+        </div>
+        <el-empty v-else />
+      </el-col>
+    </el-row>
   </ContentWrap>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
-  <ContentWrap v-else>
-    <el-card class="box-card">
-      <div class="clearfix">
-        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
-        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
-          <Icon icon="ep:delete" /> 选择其它流程
-        </el-button>
-      </div>
-      <el-col :span="16" :offset="6" style="margin-top: 20px">
-        <form-create
-          :rule="detailForm.rule"
-          v-model:api="fApi"
-          v-model="detailForm.value"
-          :option="detailForm.option"
-          @submit="submitForm"
-        >
-          <template #type-startUserSelect>
-            <el-col :span="24">
-              <el-card class="mb-10px">
-                <template #header>指定审批人</template>
-                <el-form
-                  :model="startUserSelectAssignees"
-                  :rules="startUserSelectAssigneesFormRules"
-                  ref="startUserSelectAssigneesFormRef"
-                >
-                  <el-form-item
-                    v-for="userTask in startUserSelectTasks"
-                    :key="userTask.id"
-                    :label="`任务【${userTask.name}】`"
-                    :prop="userTask.id"
-                  >
-                    <el-select
-                      v-model="startUserSelectAssignees[userTask.id]"
-                      multiple
-                      placeholder="请选择审批人"
-                    >
-                      <el-option
-                        v-for="user in userList"
-                        :key="user.id"
-                        :label="user.nickname"
-                        :value="user.id"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-form>
-              </el-card>
-            </el-col>
-          </template>
-        </form-create>
-      </el-col>
-    </el-card>
-    <!-- 流程图预览 -->
-    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
-  </ContentWrap>
+  <ProcessDefinitionDetail
+    v-else
+    ref="processDefinitionDetailRef"
+    :selectProcessDefinition="selectProcessDefinition"
+    @cancel="selectProcessDefinition = undefined"
+  />
 </template>
+
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
-import type { ApiAttrs } from '@form-create/element-ui/types/config'
-import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import { CategoryApi } from '@/api/bpm/category'
-import { useTagsViewStore } from '@/store/modules/tagsView'
-import * as UserApi from '@/api/system/user'
+import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
 const route = useRoute() // 路由
-const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息
-const { delView } = useTagsViewStore() // 视图操作
 
-const processInstanceId = route.query.processInstanceId
+const processInstanceId: any = route.query.processInstanceId
 const loading = ref(true) // 加载中
-const categoryList = ref([]) // 分类的列表
-const categoryActive = ref('') // 选中的分类
+const categoryList: any = ref([]) // 分类的列表
+const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
-
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -122,7 +74,7 @@ const getList = async () => {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
     if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0].code
+      categoryActive.value = categoryList.value[0]
     }
     // 流程定义
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
@@ -137,7 +89,7 @@ const getList = async () => {
         return
       }
       const processDefinition = processDefinitionList.value.find(
-        (item) => item.key == processInstance.processDefinition?.key
+        (item: any) => item.key == processInstance.processDefinition?.key
       )
       if (!processDefinition) {
         message.error('重新发起流程失败，原因：流程定义不存在')
@@ -151,113 +103,27 @@ const getList = async () => {
 }
 
 /** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList = computed(() => {
-  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+const categoryProcessDefinitionList: any = computed(() => {
+  return processDefinitionList.value.filter(
+    (item: any) => item.category == categoryActive.value.code
+  )
 })
 
 // ========== 表单相关 ==========
-const fApi = ref<ApiAttrs>()
-const detailForm = ref({
-  rule: [],
-  option: {},
-  value: {}
-}) // 流程表单详情
 const selectProcessDefinition = ref() // 选择的流程定义
-
-// 指定审批人
-const bpmnXML = ref(null) // BPMN 数据
-const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
-const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
+const processDefinitionDetailRef = ref()
 
 /** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables) => {
+const handleSelect = async (row, formVariables?) => {
   // 设置选择的流程
   selectProcessDefinition.value = row
-
-  // 重置指定审批人
-  startUserSelectTasks.value = []
-  startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
-
-  // 情况一：流程表单
-  if (row.formType == 10) {
-    // 设置表单
-    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
-    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
-    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
-    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
-    for (const key in formVariables) {
-      if (!allowedFields.includes(key)) {
-        delete formVariables[key]
-      }
-    }
-    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
-
-    // 加载流程图
-    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
-    if (processDefinitionDetail) {
-      bpmnXML.value = processDefinitionDetail.bpmnXml
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
-        }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
-      }
-    }
-    // 情况二：业务表单
-  } else if (row.formCustomCreatePath) {
-    await push({
-      path: row.formCustomCreatePath
-    })
-    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
-  }
+  // 初始化流程定义详情
+  await nextTick()
+  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
-
-/** 提交按钮 */
-const submitForm = async (formData) => {
-  if (!fApi.value || !selectProcessDefinition.value) {
-    return
-  }
-  // 如果有指定审批人，需要校验
-  if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
-  }
-
-  // 提交请求
-  fApi.value.btn.loading(true)
-  try {
-    await ProcessInstanceApi.createProcessInstance({
-      processDefinitionId: selectProcessDefinition.value.id,
-      variables: formData,
-      startUserSelectAssignees: startUserSelectAssignees.value
-    })
-    // 提示
-    message.success('发起流程成功')
-    // 跳转回去
-    delView(unref(currentRoute))
-    await push({
-      name: 'BpmProcessInstanceMy'
-    })
-  } finally {
-    fApi.value.btn.loading(false)
-  }
+// 左侧分类切换
+const handleCategoryClick = (val: number) => {
+  categoryActive.value = val
 }
 
 /** 初始化 */
@@ -265,3 +131,20 @@ onMounted(() => {
   getList()
 })
 </script>
+
+<style lang="scss" scoped>
+.process-definition-container::before {
+  content: '';
+  border-left: 1px solid #e6e6e6;
+  position: absolute;
+  left: 20.8%;
+  height: 100%;
+}
+:deep() {
+  .definition-item-card {
+    .el-card__body {
+      padding: 14px;
+    }
+  }
+}
+</style>
diff --git a/src/views/bpm/processInstance/create/index_new.vue b/src/views/bpm/processInstance/create/index_new.vue
deleted file mode 100644
index fae0d768..00000000
--- a/src/views/bpm/processInstance/create/index_new.vue
+++ /dev/null
@@ -1,150 +0,0 @@
-<template>
-  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap
-    class="process-definition-container position-relative pb-20px"
-    v-if="!selectProcessDefinition"
-    v-loading="loading"
-  >
-    <el-row :gutter="20" class="!flex-nowrap">
-      <el-col :span="5">
-        <div class="flex flex-col">
-          <div
-            v-for="category in categoryList"
-            :key="category.code"
-            class="flex items-center p-10px cursor-pointer text-14px rounded-md"
-            :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
-            @click="handleCategoryClick(category)"
-          >
-            {{ category.name }}
-          </div>
-        </div>
-      </el-col>
-      <el-col :span="19">
-        <h3 class="text-16px font-bold mb-10px mt-5px">{{ categoryActive.name }}</h3>
-        <div class="grid grid-cols-3 gap3" v-if="categoryProcessDefinitionList.length">
-          <el-card
-            v-for="definition in categoryProcessDefinitionList"
-            :key="definition.id"
-            shadow="hover"
-            class="cursor-pointer definition-item-card"
-            @click="handleSelect(definition)"
-          >
-            <template #default>
-              <div class="flex">
-                <el-image :src="definition.icon" class="w-32px h-32px" />
-                <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
-              </div>
-            </template>
-          </el-card>
-        </div>
-        <el-empty v-else />
-      </el-col>
-    </el-row>
-  </ContentWrap>
-
-  <!-- 第二步，填写表单，进行流程的提交 -->
-  <ProcessDefinitionDetail
-    v-else
-    ref="processDefinitionDetailRef"
-    :selectProcessDefinition="selectProcessDefinition"
-    @cancel="selectProcessDefinition = undefined"
-  />
-</template>
-
-<script lang="ts" setup>
-import * as DefinitionApi from '@/api/bpm/definition'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
-import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
-
-defineOptions({ name: 'BpmProcessInstanceCreate' })
-
-const route = useRoute() // 路由
-const message = useMessage() // 消息
-
-const processInstanceId: any = route.query.processInstanceId
-const loading = ref(true) // 加载中
-const categoryList: any = ref([]) // 分类的列表
-const categoryActive: any = ref({}) // 选中的分类
-const processDefinitionList = ref([]) // 流程定义的列表
-/** 查询列表 */
-const getList = async () => {
-  loading.value = true
-  try {
-    // 流程分类
-    categoryList.value = await CategoryApi.getCategorySimpleList()
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0]
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
-
-    // 如果 processInstanceId 非空，说明是重新发起
-    if (processInstanceId?.length > 0) {
-      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
-      if (!processInstance) {
-        message.error('重新发起流程失败，原因：流程实例不存在')
-        return
-      }
-      const processDefinition = processDefinitionList.value.find(
-        (item: any) => item.key == processInstance.processDefinition?.key
-      )
-      if (!processDefinition) {
-        message.error('重新发起流程失败，原因：流程定义不存在')
-        return
-      }
-      await handleSelect(processDefinition, processInstance.formVariables)
-    }
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList: any = computed(() => {
-  return processDefinitionList.value.filter(
-    (item: any) => item.category == categoryActive.value.code
-  )
-})
-
-// ========== 表单相关 ==========
-const selectProcessDefinition = ref() // 选择的流程定义
-const processDefinitionDetailRef = ref()
-
-/** 处理选择流程的按钮操作 **/
-const handleSelect = async (row, formVariables?) => {
-  // 设置选择的流程
-  selectProcessDefinition.value = row
-  // 初始化流程定义详情
-  await nextTick()
-  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
-}
-// 左侧分类切换
-const handleCategoryClick = (val) => {
-  categoryActive.value = val
-}
-
-/** 初始化 */
-onMounted(() => {
-  getList()
-})
-</script>
-
-<style lang="scss" scoped>
-.process-definition-container::before {
-  content: '';
-  border-left: 1px solid #e6e6e6;
-  position: absolute;
-  left: 20.8%;
-  height: 100%;
-}
-:deep() {
-  .definition-item-card {
-    .el-card__body {
-      padding: 14px;
-    }
-  }
-}
-</style>
diff --git a/src/views/bpm/processInstance/create/index_old.vue b/src/views/bpm/processInstance/create/index_old.vue
new file mode 100644
index 00000000..83e1ff46
--- /dev/null
+++ b/src/views/bpm/processInstance/create/index_old.vue
@@ -0,0 +1,267 @@
+<template>
+  <doc-alert title="流程发起、取消、重新发起" url="https://doc.iocoder.cn/bpm/process-instance/" />
+
+  <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
+  <ContentWrap v-if="!selectProcessDefinition" v-loading="loading">
+    <el-tabs tab-position="left" v-model="categoryActive">
+      <el-tab-pane
+        :label="category.name"
+        :name="category.code"
+        :key="category.code"
+        v-for="category in categoryList"
+      >
+        <el-row :gutter="20">
+          <el-col
+            :lg="6"
+            :sm="12"
+            :xs="24"
+            v-for="definition in categoryProcessDefinitionList"
+            :key="definition.id"
+          >
+            <el-card
+              shadow="hover"
+              class="mb-20px cursor-pointer"
+              @click="handleSelect(definition)"
+            >
+              <template #default>
+                <div class="flex">
+                  <el-image :src="definition.icon" class="w-32px h-32px" />
+                  <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                </div>
+              </template>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-tab-pane>
+    </el-tabs>
+  </ContentWrap>
+
+  <!-- 第二步，填写表单，进行流程的提交 -->
+  <ContentWrap v-else>
+    <el-card class="box-card">
+      <div class="clearfix">
+        <span class="el-icon-document">申请信息【{{ selectProcessDefinition.name }}】</span>
+        <el-button style="float: right" type="primary" @click="selectProcessDefinition = undefined">
+          <Icon icon="ep:delete" /> 选择其它流程
+        </el-button>
+      </div>
+      <el-col :span="16" :offset="6" style="margin-top: 20px">
+        <form-create
+          :rule="detailForm.rule"
+          v-model:api="fApi"
+          v-model="detailForm.value"
+          :option="detailForm.option"
+          @submit="submitForm"
+        >
+          <template #type-startUserSelect>
+            <el-col :span="24">
+              <el-card class="mb-10px">
+                <template #header>指定审批人</template>
+                <el-form
+                  :model="startUserSelectAssignees"
+                  :rules="startUserSelectAssigneesFormRules"
+                  ref="startUserSelectAssigneesFormRef"
+                >
+                  <el-form-item
+                    v-for="userTask in startUserSelectTasks"
+                    :key="userTask.id"
+                    :label="`任务【${userTask.name}】`"
+                    :prop="userTask.id"
+                  >
+                    <el-select
+                      v-model="startUserSelectAssignees[userTask.id]"
+                      multiple
+                      placeholder="请选择审批人"
+                    >
+                      <el-option
+                        v-for="user in userList"
+                        :key="user.id"
+                        :label="user.nickname"
+                        :value="user.id"
+                      />
+                    </el-select>
+                  </el-form-item>
+                </el-form>
+              </el-card>
+            </el-col>
+          </template>
+        </form-create>
+      </el-col>
+    </el-card>
+    <!-- 流程图预览 -->
+    <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML as any" />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as DefinitionApi from '@/api/bpm/definition'
+import * as ProcessInstanceApi from '@/api/bpm/processInstance'
+import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import type { ApiAttrs } from '@form-create/element-ui/types/config'
+import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import { CategoryApi } from '@/api/bpm/category'
+import { useTagsViewStore } from '@/store/modules/tagsView'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'BpmProcessInstanceCreate' })
+
+const route = useRoute() // 路由
+const { push, currentRoute } = useRouter() // 路由
+const message = useMessage() // 消息
+const { delView } = useTagsViewStore() // 视图操作
+
+const processInstanceId = route.query.processInstanceId
+const loading = ref(true) // 加载中
+const categoryList = ref([]) // 分类的列表
+const categoryActive = ref('') // 选中的分类
+const processDefinitionList = ref([]) // 流程定义的列表
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0].code
+    }
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+
+    // 如果 processInstanceId 非空，说明是重新发起
+    if (processInstanceId?.length > 0) {
+      const processInstance = await ProcessInstanceApi.getProcessInstance(processInstanceId)
+      if (!processInstance) {
+        message.error('重新发起流程失败，原因：流程实例不存在')
+        return
+      }
+      const processDefinition = processDefinitionList.value.find(
+        (item) => item.key == processInstance.processDefinition?.key
+      )
+      if (!processDefinition) {
+        message.error('重新发起流程失败，原因：流程定义不存在')
+        return
+      }
+      await handleSelect(processDefinition, processInstance.formVariables)
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 选中分类对应的流程定义列表 */
+const categoryProcessDefinitionList = computed(() => {
+  return processDefinitionList.value.filter((item) => item.category == categoryActive.value)
+})
+
+// ========== 表单相关 ==========
+const fApi = ref<ApiAttrs>()
+const detailForm = ref({
+  rule: [],
+  option: {},
+  value: {}
+}) // 流程表单详情
+const selectProcessDefinition = ref() // 选择的流程定义
+
+// 指定审批人
+const bpmnXML = ref(null) // BPMN 数据
+const startUserSelectTasks = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
+const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
+const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
+const userList = ref<any[]>([]) // 用户列表
+
+/** 处理选择流程的按钮操作 **/
+const handleSelect = async (row, formVariables) => {
+  // 设置选择的流程
+  selectProcessDefinition.value = row
+
+  // 重置指定审批人
+  startUserSelectTasks.value = []
+  startUserSelectAssignees.value = {}
+  startUserSelectAssigneesFormRules.value = {}
+
+  // 情况一：流程表单
+  if (row.formType == 10) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field)
+    for (const key in formVariables) {
+      if (!allowedFields.includes(key)) {
+        delete formVariables[key]
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables)
+
+    // 加载流程图
+    const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml
+      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
+
+      // 设置指定审批人
+      if (startUserSelectTasks.value?.length > 0) {
+        detailForm.value.rule.push({
+          type: 'startUserSelect',
+          props: {
+            title: '指定审批人'
+          }
+        })
+        // 设置校验规则
+        for (const userTask of startUserSelectTasks.value) {
+          startUserSelectAssignees.value[userTask.id] = []
+          startUserSelectAssigneesFormRules.value[userTask.id] = [
+            { required: true, message: '请选择审批人', trigger: 'blur' }
+          ]
+        }
+        // 加载用户列表
+        userList.value = await UserApi.getSimpleUserList()
+      }
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await push({
+      path: row.formCustomCreatePath
+    })
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+}
+
+/** 提交按钮 */
+const submitForm = async (formData) => {
+  if (!fApi.value || !selectProcessDefinition.value) {
+    return
+  }
+  // 如果有指定审批人，需要校验
+  if (startUserSelectTasks.value?.length > 0) {
+    await startUserSelectAssigneesFormRef.value.validate()
+  }
+
+  // 提交请求
+  fApi.value.btn.loading(true)
+  try {
+    await ProcessInstanceApi.createProcessInstance({
+      processDefinitionId: selectProcessDefinition.value.id,
+      variables: formData,
+      startUserSelectAssignees: startUserSelectAssignees.value
+    })
+    // 提示
+    message.success('发起流程成功')
+    // 跳转回去
+    delView(unref(currentRoute))
+    await push({
+      name: 'BpmProcessInstanceMy'
+    })
+  } finally {
+    fApi.value.btn.loading(false)
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 5fb1c745..8415a2b1 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -134,16 +134,12 @@ import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
 import copySvg from '@/assets/svgs/bpm/copy.svg'
 import conditionSvg from '@/assets/svgs/bpm/condition.svg'
 import parallelSvg from '@/assets/svgs/bpm/parallel.svg'
-import endSvg from '@/assets/svgs/bpm/end.svg'
 import finishSvg from '@/assets/svgs/bpm/finish.svg'
 
 defineOptions({ name: 'BpmProcessInstanceTimeline' })
-defineProps<{
-  activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
-}>()
 withDefaults(
   defineProps<{
-    approveNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
+    activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
   }>(),
   {
@@ -205,9 +201,7 @@ const nodeTypeSvgMap = {
   // 条件分支节点
   [NodeType.CONDITION_NODE]: { color: '#14bb83', svg: conditionSvg },
   // 并行分支节点
-  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg },
-  // 结束节点
-  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: endSvg }
+  [NodeType.PARALLEL_BRANCH_NODE]: { color: '#14bb83', svg: parallelSvg }
 }
 
 // 只有只有状态是 -1、0、1 才展示头像右小角状态小icon

From 98e9ba49ae5c00df54c38cd1ffbcfc662ec611c6 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 11:58:34 +0800
Subject: [PATCH 056/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=AE=A1=E6=89=B9=E8=AF=A6=E6=83=85=E7=9A=84=E2=80=9C?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E8=AE=B0=E5=BD=95=E2=80=9D=EF=BC=8C=E4=BB=8E?=
 =?UTF-8?q?=20timeline=20=E6=94=B9=E6=88=90=20list=20table?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTaskList.vue        | 173 ++++++------------
 .../bpm/processInstance/detail/index.vue      |  55 +-----
 2 files changed, 67 insertions(+), 161 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
index b164f337..8690e58f 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTaskList.vue
@@ -1,71 +1,49 @@
 <template>
-  <el-card v-loading="loading" class="box-card">
-    <el-col>
-      <div class="block">
-        <el-timeline>
-          <el-timeline-item
-            v-if="processInstance.endTime"
-            :type="getProcessInstanceTimelineItemType(processInstance)"
-          >
-            <p style="font-weight: 700">
-              结束流程：在 {{ formatDate(processInstance?.endTime) }} 结束
-              <dict-tag
-                :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS"
-                :value="processInstance.status"
-              />
-            </p>
-          </el-timeline-item>
-          <el-timeline-item
-            v-for="(item, index) in tasks"
-            :key="index"
-            :type="getTaskTimelineItemType(item)"
-          >
-            <p style="font-weight: 700">
-              审批任务：{{ item.name }}
-              <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="item.status" />
-              <el-button
-                class="ml-10px"
-                size="small"
-                v-if="item.formId > 0"
-                @click="handleFormDetail(item)"
-              >
-                <Icon icon="ep:document" /> 查看表单
-              </el-button>
-            </p>
-            <el-card :body-style="{ padding: '10px' }">
-              <label v-if="item.assigneeUser" style="margin-right: 30px; font-weight: normal">
-                审批人：{{ item.assigneeUser.nickname }}
-                <el-tag size="small" type="info">{{ item.assigneeUser.deptName }}</el-tag>
-              </label>
-              <label v-if="item.createTime" style="font-weight: normal">创建时间：</label>
-              <label style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.createTime) }}
-              </label>
-              <label v-if="item.endTime" style="margin-left: 30px; font-weight: normal">
-                审批时间：
-              </label>
-              <label v-if="item.endTime" style="font-weight: normal; color: #8a909c">
-                {{ formatDate(item?.endTime) }}
-              </label>
-              <label v-if="item.durationInMillis" style="margin-left: 30px; font-weight: normal">
-                耗时：
-              </label>
-              <label v-if="item.durationInMillis" style="font-weight: normal; color: #8a909c">
-                {{ formatPast2(item?.durationInMillis) }}
-              </label>
-              <p v-if="item.reason"> 审批建议：{{ item.reason }} </p>
-            </el-card>
-          </el-timeline-item>
-          <el-timeline-item type="success">
-            <p style="font-weight: 700">
-              发起流程：【{{ processInstance.startUser?.nickname }}】在
-              {{ formatDate(processInstance?.startTime) }} 发起【 {{ processInstance.name }} 】流程
-            </p>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-    </el-col>
-  </el-card>
+  <el-table :data="tasks" border header-cell-class-name="table-header-gray">
+    <el-table-column label="审批节点" prop="name" min-width="120" align="center" />
+    <el-table-column label="审批人" min-width="100" align="center">
+      <template #default="scope">
+        {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
+      </template>
+    </el-table-column>
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="开始时间"
+      prop="createTime"
+      min-width="140"
+    />
+    <el-table-column
+      :formatter="dateFormatter"
+      align="center"
+      label="结束时间"
+      prop="endTime"
+      min-width="140"
+    />
+    <el-table-column align="center" label="审批状态" prop="status" min-width="90">
+      <template #default="scope">
+        <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="审批建议" prop="reason" min-width="200">
+      <template #default="scope">
+        {{ scope.row.reason }}
+        <el-button
+          class="ml-10px"
+          size="small"
+          v-if="scope.row.formId > 0"
+          @click="handleFormDetail(scope.row)"
+        >
+          <Icon icon="ep:document" /> 查看表单
+        </el-button>
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="耗时" prop="durationInMillis" min-width="100">
+      <template #default="scope">
+        {{ formatPast2(scope.row.durationInMillis) }}
+      </template>
+    </el-table-column>
+  </el-table>
 
   <!-- 弹窗：表单 -->
   <Dialog title="表单详情" v-model="taskFormVisible" width="600">
@@ -78,53 +56,20 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { formatDate, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { propTypes } from '@/utils/propTypes'
 import { DICT_TYPE } from '@/utils/dict'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import * as TaskApi from '@/api/bpm/task'
 
 defineOptions({ name: 'BpmProcessInstanceTaskList' })
 
-defineProps({
-  loading: propTypes.bool, // 是否加载中
-  processInstance: propTypes.object, // 流程实例
-  tasks: propTypes.arrayOf(propTypes.object) // 流程任务的数组
+const props = defineProps({
+  loading: propTypes.bool.def(false), // 是否加载中
+  id: propTypes.string // 流程实例的编号
 })
-
-/** 获得流程实例对应的颜色 */
-const getProcessInstanceTimelineItemType = (item: any) => {
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'warning'
-  }
-  return ''
-}
-
-/** 获得任务对应的颜色 */
-const getTaskTimelineItemType = (item: any) => {
-  if ([0, 1, 6, 7].includes(item.status)) {
-    return 'primary'
-  }
-  if (item.status === 2) {
-    return 'success'
-  }
-  if (item.status === 3) {
-    return 'danger'
-  }
-  if (item.status === 4) {
-    return 'info'
-  }
-  if (item.status === 5) {
-    return 'warning'
-  }
-  return ''
-}
+const tasks = ref([]) // 流程任务的数组
 
 /** 查看表单 */
 const fApi = ref<ApiAttrs>() // form-create 的 API 操作类
@@ -134,7 +79,7 @@ const taskForm = ref({
   value: {}
 }) // 流程任务的表单详情
 const taskFormVisible = ref(false)
-const handleFormDetail = async (row) => {
+const handleFormDetail = async (row: any) => {
   // 设置表单
   setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables)
   // 弹窗打开
@@ -146,9 +91,13 @@ const handleFormDetail = async (row) => {
   fApi.value?.fapi?.disabled(true)
 }
 
-/** 刷新数据 */
-const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
-const refresh = () => {
-  emit('refresh')
-}
+/** 只有 loading 完成时，才去加载流程列表 */
+watch(
+  () => props.loading,
+  async (value) => {
+    if (value) {
+      tasks.value = await TaskApi.getTaskListByProcessInstanceId(props.id)
+    }
+  }
+)
 </script>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 9890f698..24c1ddda 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -65,7 +65,7 @@
                   </el-col>
                   <el-col :span="7">
                     <!-- 审批记录时间线 -->
-                    <ProcessInstanceTimeline ref="timelineRef" :activity-nodes="activityNodes" />
+                    <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </el-col>
                 </el-row>
               </el-scrollbar>
@@ -96,12 +96,7 @@
           <el-tab-pane label="流转记录" name="record">
             <div class="form-scroll-area">
               <el-scrollbar>
-                <ProcessInstanceTaskList
-                  :loading="tasksLoad"
-                  :process-instance="processInstance"
-                  :tasks="tasks"
-                  :show-header="false"
-                />
+                <ProcessInstanceTaskList :loading="processInstanceLoading" :id="id" />
               </el-scrollbar>
             </div>
           </el-tab-pane>
@@ -135,14 +130,14 @@ import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import * as TaskApi from '@/api/bpm/task'
+import * as UserApi from '@/api/system/user'
 import ProcessInstanceBpmnViewer from './ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from './ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
-import * as UserApi from '@/api/system/user'
 import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
+// TODO 代码优化，换个明确的 icon 名字
 import audit1 from '@/assets/svgs/bpm/audit1.svg'
 import audit2 from '@/assets/svgs/bpm/audit2.svg'
 import audit3 from '@/assets/svgs/bpm/audit3.svg'
@@ -158,11 +153,8 @@ const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const processDefinition = ref<any>({}) // 流程定义
-const timelineRef = ref()
-// 操作按钮组件 ref
-const operationButtonRef = ref()
-const tasksLoad = ref(true) // 任务的加载中
-const tasks = ref<any[]>([]) // 任务列表
+
+const operationButtonRef = ref() // 操作按钮组件 ref
 const auditIcons = {
   1: audit1,
   2: audit2,
@@ -180,10 +172,7 @@ const detailForm = ref({
 
 /** 获得详情 */
 const getDetail = () => {
-  // 1. 获取审批详情
   getApprovalDetail()
-  // 2. 获得流程任务列表
-  getTaskList()
 }
 
 /** 加载流程实例 */
@@ -269,38 +258,6 @@ const setFieldPermission = (field: string, permission: string) => {
   }
 }
 
-/** 加载任务列表 */
-const getTaskList = async () => {
-  try {
-    // 获得未取消的任务
-    tasksLoad.value = true
-    const data = await TaskApi.getTaskListByProcessInstanceId(props.id)
-    tasks.value = []
-    // 1.1 移除已取消的审批
-    data.forEach((task: any) => {
-      if (task.status !== 4) {
-        tasks.value.push(task)
-      }
-    })
-    // 1.2 排序，将未完成的排在前面，已完成的排在后面；
-    tasks.value.sort((a, b) => {
-      // 有已完成的情况，按照完成时间倒序
-      if (a.endTime && b.endTime) {
-        return b.endTime - a.endTime
-      } else if (a.endTime) {
-        return 1
-      } else if (b.endTime) {
-        return -1
-        // 都是未完成，按照创建时间倒序
-      } else {
-        return b.createTime - a.createTime
-      }
-    })
-  } finally {
-    tasksLoad.value = false
-  }
-}
-
 /**
  * 操作成功后刷新
  */

From 2df0aa20ffb8d89e2e131eacb316cdf1e1a5f934 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 14:02:03 +0800
Subject: [PATCH 057/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84=20debugger=20=E6=96=AD?=
 =?UTF-8?q?=E7=82=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/ProcessDefinitionDetail.vue      | 2 +-
 src/views/bpm/processInstance/detail/index.vue                  | 2 +-
 src/views/bpm/processInstance/index.vue                         | 1 -
 src/views/pay/app/components/channel/WeixinChannelForm.vue      | 1 -
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 35044965..df3705ac 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -208,9 +208,9 @@ const getApprovalDetail = async (row: any) => {
   } finally {
   }
 }
+
 /** 提交按钮 */
 const submitForm = async (formData: any) => {
-  debugger
   if (!fApi.value || !props.selectProcessDefinition) {
     return
   }
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 24c1ddda..dc9517d6 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -204,7 +204,7 @@ const getApprovalDetail = async () => {
       const formFieldsPermission = data.formFieldsPermission
 
       if (detailForm.value.rule.length > 0) {
-        // 避免刷新 form-create 显示不了，
+        // 避免刷新 form-create 显示不了
         detailForm.value.value = processInstance.value.formVariables
       } else {
         setConfAndFields2(
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 4b72e395..f3b7439b 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -222,7 +222,6 @@ const handleCreate = async (row?: ProcessInstanceVO) => {
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
       row.processDefinitionId
     )
-    debugger
     if (processDefinitionDetail.formType === 20) {
       message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
       return
diff --git a/src/views/pay/app/components/channel/WeixinChannelForm.vue b/src/views/pay/app/components/channel/WeixinChannelForm.vue
index 3d211107..15c37ef4 100644
--- a/src/views/pay/app/components/channel/WeixinChannelForm.vue
+++ b/src/views/pay/app/components/channel/WeixinChannelForm.vue
@@ -257,7 +257,6 @@ const resetForm = (appId, code) => {
 const fileBeforeUpload = (file, fileAccept) => {
   let format = '.' + file.name.split('.')[1]
   if (format !== fileAccept) {
-    debugger
     message.error('请上传指定格式"' + fileAccept + '"文件')
     return false
   }

From fec7af453f9277513cbdeb70b28fd07d6279ea58 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 14:12:05 +0800
Subject: [PATCH 058/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4=20DELEGATE=20=E5=A7=94=E6=89=98=E4=B8=AD=E7=9A=84?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=EF=BC=8C=E9=80=82=E5=90=88=E9=80=9A=E8=BF=87?=
 =?UTF-8?q?=20DELEGATE=20STATE=20=E8=AF=BB=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/task/index.ts                                 | 8 --------
 .../detail/ProcessInstanceOperationButton.vue             | 5 +----
 2 files changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/api/bpm/task/index.ts b/src/api/bpm/task/index.ts
index 8a5829e3..d4c10380 100644
--- a/src/api/bpm/task/index.ts
+++ b/src/api/bpm/task/index.ts
@@ -35,20 +35,12 @@ export enum TaskStatusEnum {
    * 已退回
    */
   RETURN = 5,
-  /**
-   * 委派中
-   */
-  DELEGATE = 6,
   /**
    * 审批通过中
    */
   APPROVING = 7
 }
 
-export type TaskVO = {
-  id: number
-}
-
 export const getTaskTodoPage = async (params: any) => {
   return await request.get({ url: '/bpm/task/todo-page', params })
 }
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index dfbd6928..d387b78a 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -756,10 +756,7 @@ const reload = () => {
 /** 任务是否为处理中状态 */
 const isHandleTaskStatus = () => {
   let canHandle = false
-  if (
-    TaskApi.TaskStatusEnum.RUNNING === runningTask.value?.status ||
-    TaskApi.TaskStatusEnum.DELEGATE === runningTask.value?.status
-  ) {
+  if (TaskApi.TaskStatusEnum.RUNNING === runningTask.value?.status) {
     canHandle = true
   }
   return canHandle

From 1bb6a23ff84df31eb439bbb6c763c7d4d5fe754b Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 16:36:54 +0800
Subject: [PATCH 059/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=9E=8B=E7=9A=84=E5=88=86=E7=B1=BB=E3=80=81?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E8=AF=BB=E5=8F=96=20list=20=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=20=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E7=9A=84=E5=88=86=E7=B1=BB=E5=90=8D=E7=9A=84?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml                                | 633 ++++++++++--------
 src/api/bpm/model/index.ts                    |   4 +-
 .../bpm/model/CategoryDraggableModel.vue      |  55 +-
 src/views/bpm/model/index.vue                 |  59 +-
 src/views/bpm/model/index_old.vue             |   2 +-
 5 files changed, 421 insertions(+), 332 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1790a46..fff5b427 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,13 +10,13 @@ importers:
     dependencies:
       '@element-plus/icons-vue':
         specifier: ^2.1.0
-        version: 2.3.1(vue@3.4.21(typescript@5.3.3))
+        version: 2.3.1(vue@3.5.12(typescript@5.3.3))
       '@form-create/designer':
-        specifier: ^3.1.3
-        version: 3.1.5(vue@3.4.21(typescript@5.3.3))
+        specifier: ^3.2.6
+        version: 3.2.8(vue@3.5.12(typescript@5.3.3))
       '@form-create/element-ui':
-        specifier: ^3.1.24
-        version: 3.1.29(vue@3.4.21(typescript@5.3.3))
+        specifier: ^3.2.11
+        version: 3.2.13(vue@3.5.12(typescript@5.3.3))
       '@iconify/iconify':
         specifier: ^3.1.1
         version: 3.1.1
@@ -25,16 +25,16 @@ importers:
         version: 2.0.1
       '@videojs-player/vue':
         specifier: ^1.0.0
-        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.5)(vue@3.4.21(typescript@5.3.3))
+        version: 1.0.0(@types/video.js@7.3.58)(video.js@7.21.5)(vue@3.5.12(typescript@5.3.3))
       '@vueuse/core':
         specifier: ^10.9.0
-        version: 10.9.0(vue@3.4.21(typescript@5.3.3))
+        version: 10.9.0(vue@3.5.12(typescript@5.3.3))
       '@wangeditor/editor':
         specifier: ^5.1.23
         version: 5.1.23
       '@wangeditor/editor-for-vue':
         specifier: ^5.1.10
-        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.4.21(typescript@5.3.3))
+        version: 5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12(typescript@5.3.3))
       '@zxcvbn-ts/core':
         specifier: ^3.0.4
         version: 3.0.4
@@ -76,7 +76,7 @@ importers:
         version: 2.1.0(echarts@5.5.0)
       element-plus:
         specifier: 2.8.4
-        version: 2.8.4(vue@3.4.21(typescript@5.3.3))
+        version: 2.8.4(vue@3.5.12(typescript@5.3.3))
       fast-xml-parser:
         specifier: ^4.3.2
         version: 4.3.6
@@ -115,10 +115,10 @@ importers:
         version: 0.2.0
       pinia:
         specifier: ^2.1.7
-        version: 2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3))
+        version: 2.1.7(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))
       pinia-plugin-persistedstate:
         specifier: ^3.2.1
-        version: 3.2.1(pinia@2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3)))
+        version: 3.2.1(pinia@2.1.7(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3)))
       qrcode:
         specifier: ^1.5.3
         version: 1.5.3
@@ -138,23 +138,23 @@ importers:
         specifier: ^7.21.5
         version: 7.21.5
       vue:
-        specifier: 3.4.21
-        version: 3.4.21(typescript@5.3.3)
+        specifier: 3.5.12
+        version: 3.5.12(typescript@5.3.3)
       vue-dompurify-html:
         specifier: ^4.1.4
-        version: 4.1.4(vue@3.4.21(typescript@5.3.3))
+        version: 4.1.4(vue@3.5.12(typescript@5.3.3))
       vue-i18n:
         specifier: 9.10.2
-        version: 9.10.2(vue@3.4.21(typescript@5.3.3))
+        version: 9.10.2(vue@3.5.12(typescript@5.3.3))
       vue-router:
         specifier: ^4.3.0
-        version: 4.3.2(vue@3.4.21(typescript@5.3.3))
+        version: 4.3.2(vue@3.5.12(typescript@5.3.3))
       vue-types:
         specifier: ^5.1.1
-        version: 5.1.1(vue@3.4.21(typescript@5.3.3))
+        version: 5.1.1(vue@3.5.12(typescript@5.3.3))
       vuedraggable:
         specifier: ^4.1.0
-        version: 4.1.0(vue@3.4.21(typescript@5.3.3))
+        version: 4.1.0(vue@3.5.12(typescript@5.3.3))
       web-storage-cache:
         specifier: ^1.1.1
         version: 1.1.1
@@ -173,7 +173,7 @@ importers:
         version: 2.2.205
       '@intlify/unplugin-vue-i18n':
         specifier: ^2.0.0
-        version: 2.0.0(rollup@4.17.1)(vue-i18n@9.10.2(vue@3.4.21(typescript@5.3.3)))
+        version: 2.0.0(rollup@4.17.1)(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))
       '@purge-icons/generated':
         specifier: ^0.9.0
         version: 0.9.0
@@ -209,19 +209,19 @@ importers:
         version: 5.3.2(terser@5.30.4)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))
       '@vitejs/plugin-vue':
         specifier: ^5.0.4
-        version: 5.0.4(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.4.21(typescript@5.3.3))
+        version: 5.0.4(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.5.12(typescript@5.3.3))
       '@vitejs/plugin-vue-jsx':
         specifier: ^3.1.0
-        version: 3.1.0(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.4.21(typescript@5.3.3))
+        version: 3.1.0(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.5.12(typescript@5.3.3))
       autoprefixer:
         specifier: ^10.4.17
         version: 10.4.19(postcss@8.4.38)
       bpmn-js:
-        specifier: 8.9.0
-        version: 8.9.0
+        specifier: 8.10.0
+        version: 8.10.0
       bpmn-js-properties-panel:
         specifier: 0.46.0
-        version: 0.46.0(bpmn-js@8.9.0)
+        version: 0.46.0(bpmn-js@8.10.0)
       consola:
         specifier: ^3.2.3
         version: 3.2.3
@@ -293,13 +293,13 @@ importers:
         version: 0.58.9(postcss@8.4.38)(rollup@4.17.1)(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))
       unplugin-auto-import:
         specifier: ^0.16.7
-        version: 0.16.7(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@4.17.1)
+        version: 0.16.7(@vueuse/core@10.9.0(vue@3.5.12(typescript@5.3.3)))(rollup@4.17.1)
       unplugin-element-plus:
         specifier: ^0.8.0
         version: 0.8.0(rollup@4.17.1)
       unplugin-vue-components:
         specifier: ^0.25.2
-        version: 0.25.2(@babel/parser@7.24.4)(rollup@4.17.1)(vue@3.4.21(typescript@5.3.3))
+        version: 0.25.2(@babel/parser@7.26.2)(rollup@4.17.1)(vue@3.5.12(typescript@5.3.3))
       vite:
         specifier: 5.1.4
         version: 5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)
@@ -454,10 +454,18 @@ packages:
     resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==, tarball: https://registry.npmmirror.com/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-identifier@7.22.20':
     resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==, tarball: https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz}
+    engines: {node: '>=6.9.0'}
+
   '@babel/helper-validator-option@7.23.5':
     resolution: {integrity: sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==}
     engines: {node: '>=6.9.0'}
@@ -479,6 +487,11 @@ packages:
     engines: {node: '>=6.0.0'}
     hasBin: true
 
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==, tarball: https://registry.npmmirror.com/@babel/parser/-/parser-7.26.2.tgz}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4':
     resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==}
     engines: {node: '>=6.9.0'}
@@ -932,7 +945,7 @@ packages:
     resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==}
 
   '@babel/runtime-corejs3@7.24.4':
-    resolution: {integrity: sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==}
+    resolution: {integrity: sha512-VOQOexSilscN24VEY810G/PqtpFvx/z6UqDIjIWbDe2368HhDLkYN5TYwaEz/+eRCUkhJ2WaNLLmQAlxzfWj4w==, tarball: https://registry.npmmirror.com/@babel/runtime-corejs3/-/runtime-corejs3-7.24.4.tgz}
     engines: {node: '>=6.9.0'}
 
   '@babel/runtime@7.24.4':
@@ -951,6 +964,10 @@ packages:
     resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==, tarball: https://registry.npmmirror.com/@babel/types/-/types-7.26.0.tgz}
+    engines: {node: '>=6.9.0'}
+
   '@bpmn-io/diagram-js-ui@0.2.3':
     resolution: {integrity: sha512-OGyjZKvGK8tHSZ0l7RfeKhilGoOGtFDcoqSGYkX0uhFlo99OVZ9Jn1K7TJGzcE9BdKwvA5Y5kGqHEhdTxHvFfw==}
 
@@ -1068,139 +1085,139 @@ packages:
       vue: ^3.2.0
 
   '@esbuild/aix-ppc64@0.19.12':
-    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
+    resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==, tarball: https://registry.npmmirror.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [aix]
 
   '@esbuild/android-arm64@0.19.12':
-    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
+    resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==, tarball: https://registry.npmmirror.com/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [android]
 
   '@esbuild/android-arm@0.19.12':
-    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
+    resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==, tarball: https://registry.npmmirror.com/@esbuild/android-arm/-/android-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [android]
 
   '@esbuild/android-x64@0.19.12':
-    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
+    resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==, tarball: https://registry.npmmirror.com/@esbuild/android-x64/-/android-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [android]
 
   '@esbuild/darwin-arm64@0.19.12':
-    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
+    resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==, tarball: https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [darwin]
 
   '@esbuild/darwin-x64@0.19.12':
-    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
+    resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==, tarball: https://registry.npmmirror.com/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [darwin]
 
   '@esbuild/freebsd-arm64@0.19.12':
-    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
+    resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [freebsd]
 
   '@esbuild/freebsd-x64@0.19.12':
-    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
+    resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==, tarball: https://registry.npmmirror.com/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [freebsd]
 
   '@esbuild/linux-arm64@0.19.12':
-    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
+    resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [linux]
 
   '@esbuild/linux-arm@0.19.12':
-    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
+    resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm]
     os: [linux]
 
   '@esbuild/linux-ia32@0.19.12':
-    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
+    resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==, tarball: https://registry.npmmirror.com/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [linux]
 
   '@esbuild/linux-loong64@0.19.12':
-    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
+    resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==, tarball: https://registry.npmmirror.com/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [loong64]
     os: [linux]
 
   '@esbuild/linux-mips64el@0.19.12':
-    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
+    resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==, tarball: https://registry.npmmirror.com/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [mips64el]
     os: [linux]
 
   '@esbuild/linux-ppc64@0.19.12':
-    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
+    resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==, tarball: https://registry.npmmirror.com/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ppc64]
     os: [linux]
 
   '@esbuild/linux-riscv64@0.19.12':
-    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
+    resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==, tarball: https://registry.npmmirror.com/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [riscv64]
     os: [linux]
 
   '@esbuild/linux-s390x@0.19.12':
-    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
+    resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==, tarball: https://registry.npmmirror.com/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [s390x]
     os: [linux]
 
   '@esbuild/linux-x64@0.19.12':
-    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
+    resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==, tarball: https://registry.npmmirror.com/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [linux]
 
   '@esbuild/netbsd-x64@0.19.12':
-    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
+    resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==, tarball: https://registry.npmmirror.com/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [netbsd]
 
   '@esbuild/openbsd-x64@0.19.12':
-    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
+    resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==, tarball: https://registry.npmmirror.com/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [openbsd]
 
   '@esbuild/sunos-x64@0.19.12':
-    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
+    resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==, tarball: https://registry.npmmirror.com/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [sunos]
 
   '@esbuild/win32-arm64@0.19.12':
-    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
+    resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==, tarball: https://registry.npmmirror.com/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [arm64]
     os: [win32]
 
   '@esbuild/win32-ia32@0.19.12':
-    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
+    resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==, tarball: https://registry.npmmirror.com/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [ia32]
     os: [win32]
 
   '@esbuild/win32-x64@0.19.12':
-    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
+    resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==, tarball: https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz}
     engines: {node: '>=12'}
     cpu: [x64]
     os: [win32]
@@ -1232,48 +1249,50 @@ packages:
   '@floating-ui/utils@0.2.2':
     resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==}
 
-  '@form-create/component-elm-checkbox@3.1.29':
-    resolution: {integrity: sha512-tzqpwg+lq1X/V1wEsOkHBC9QxZyUsoymFRrWiEdqvstRcTQKQjntt/3gl8MQ3Tcq22dP2xJbQxjTeu1J8o6NCA==}
+  '@form-create/component-elm-checkbox@3.2.8':
+    resolution: {integrity: sha512-ol/SyzzeDueUTd87MPnYydOe7Sc6cL8S/Uhv5QmWofMY1TuuBet9DPb65JjyS6Lk51/cl3TabvtJj93EAxL6KA==, tarball: https://registry.npmmirror.com/@form-create/component-elm-checkbox/-/component-elm-checkbox-3.2.8.tgz}
 
-  '@form-create/component-elm-frame@3.1.29':
-    resolution: {integrity: sha512-PqOQLvGwxvOssT/IHFrTVcptVvWYYwA5OCMUfoaXqSf9HBQk++EwLd5sdsvAY6ILJMSIa9zHU8tuvSXFOWbg3w==}
+  '@form-create/component-elm-frame@3.2.0':
+    resolution: {integrity: sha512-XJnYRwZBaViqSF4oQpPucmQiMctG9mAPeNpggUJG8rYZv/IxPb4qNovWaZsqfiCY8wyKtRTkWqqZFe9r9ubGUg==, tarball: https://registry.npmmirror.com/@form-create/component-elm-frame/-/component-elm-frame-3.2.0.tgz}
 
-  '@form-create/component-elm-group@3.1.29':
-    resolution: {integrity: sha512-Hn4l0k1A/noqX3OWgPOnYV7OAAOlH/vNQFwxS9a/18QKuCpLU03MNeanPxwSQY1NL6Fk8NPQGBDcgeOBAcP9hg==}
+  '@form-create/component-elm-group@3.2.8':
+    resolution: {integrity: sha512-TiwBNP+zDfFhanAWrazfIWyhElXTKIccX/jk+3zYxYpmxh1OVPa1cGaJ9ovZyV3105iZBtGZG2zn2DjHzvEPsQ==, tarball: https://registry.npmmirror.com/@form-create/component-elm-group/-/component-elm-group-3.2.8.tgz}
 
-  '@form-create/component-elm-radio@3.1.29':
-    resolution: {integrity: sha512-AGAOb/T02uDaRPUhDUBe4iSM5uR24TftiOjxHjG1nGtfjRtP1WMsSpH5JcFrRTDMnSmw/YO6/5j7QiYyzpoj6g==}
+  '@form-create/component-elm-radio@3.2.8':
+    resolution: {integrity: sha512-6rWhja+Tjh8vsd5dmmWvzT4T8L/TSB27rpAdYuw+w8JvbpjfhMuYUTk+9y+L7EUGPWk8E1yTSKE6YNXVvFtyqQ==, tarball: https://registry.npmmirror.com/@form-create/component-elm-radio/-/component-elm-radio-3.2.8.tgz}
 
-  '@form-create/component-elm-select@3.1.29':
-    resolution: {integrity: sha512-3oSj5zpDIpdtBD53EOMgFsz5+DE7zRuSLHjaRjiQaYhn7HwZeq02TNQ+t+d5vMjtcc/CfDlPEckbBwg2YNIGFA==}
+  '@form-create/component-elm-select@3.2.0':
+    resolution: {integrity: sha512-jzrrUyLSVDRZHTap3MYVqNub/A00X+hpLn2DCiFj6hNPZC63fuScHhIKWjkQSF4KBDGPYNfi69kFI7SCYPhhjQ==, tarball: https://registry.npmmirror.com/@form-create/component-elm-select/-/component-elm-select-3.2.0.tgz}
 
-  '@form-create/component-elm-tree@3.1.29':
-    resolution: {integrity: sha512-aEu62P7VrgzVOuOigRGral8k5PsNQbtbJxZ6dd8cdbHxTsVVyh1rYTMAtNceR84DZYuRfth1H/lxU0JHRJT0rQ==}
+  '@form-create/component-elm-tree@3.2.9':
+    resolution: {integrity: sha512-5NG4YeFZ5jzN9Aa0JFuFD8OGKXBqSHSN0KRgxxUgdhzRg8hcRq/JODuN7yYMa7YrBP0ecTKyel8Q4ufR5Ct8iw==, tarball: https://registry.npmmirror.com/@form-create/component-elm-tree/-/component-elm-tree-3.2.9.tgz}
 
-  '@form-create/component-elm-upload@3.1.29':
-    resolution: {integrity: sha512-drYhUf7yRBKzAzPp5Mgb1A3Ik+vBmzGD9gGf61wsD7+iiQR9vC6LIF8bGUrzX99DqXLrGP++Xxb9Iii63srmKA==}
+  '@form-create/component-elm-upload@3.2.13':
+    resolution: {integrity: sha512-qngh1Hzb/Oo51gbh3LDiMmUnDaa2+k7sXS4GEZujoDuKCctBjG60y3pi214CmOqBq9PiynM8knf6yQKqpjlRqA==, tarball: https://registry.npmmirror.com/@form-create/component-elm-upload/-/component-elm-upload-3.2.13.tgz}
 
-  '@form-create/component-subform@3.1.5':
-    resolution: {integrity: sha512-JHNEFGuwpnjGvCJ0I0GCqPL5al0qXoN4ymnRBpm+oL+6MMo5bz1kUyoqMX1MutuC96gHTqpeqc67hssi8g2mIw==}
+  '@form-create/component-subform@3.1.34':
+    resolution: {integrity: sha512-OJcFH/7MTHx7JLEjDK/weS27qfuFWAI+OK+gXTJ2jIt9aZkGWF/EWkjetiJLt5a0KMw4Z15wOS2XCY9pVK9vlA==, tarball: https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-3.1.34.tgz}
 
   '@form-create/component-wangeditor@3.1.20':
-    resolution: {integrity: sha512-lAjpltmYfr3a2AeXasCehGsZNL/1WB6vWqqV9TIsJ4pleTr0/D/oPwEYQjfv+gG+NoB2Sa25SRGhtlnephjyhg==}
+    resolution: {integrity: sha512-lAjpltmYfr3a2AeXasCehGsZNL/1WB6vWqqV9TIsJ4pleTr0/D/oPwEYQjfv+gG+NoB2Sa25SRGhtlnephjyhg==, tarball: https://registry.npmmirror.com/@form-create/component-wangeditor/-/component-wangeditor-3.1.20.tgz}
 
-  '@form-create/core@3.1.29':
-    resolution: {integrity: sha512-nPFFdiEmATIKeocnP8pubKSwMSegc+tcN5PU+cSuXl5RJ1w3k0UZr80Dx2yPUmw8sv4XwSMmMUkHUojz10hqFg==}
+  '@form-create/core@3.2.13':
+    resolution: {integrity: sha512-HVLfZ5gf9DRO74OJTw3bt/GwFXhyBWvMmrOG9WkRTEQEMIeGOWudH843iaYp2ljgJN6jrn3RcCfONC9nzAmk8g==, tarball: https://registry.npmmirror.com/@form-create/core/-/core-3.2.13.tgz}
     peerDependencies:
       vue: ^3.1.0
 
-  '@form-create/designer@3.1.5':
-    resolution: {integrity: sha512-OSBXW8PfL9OpckCHA7VQ87HR1WOlzfJMz9mnDiMLjbb8Pkh6oYfAohZCuMCs+S68jW8eKaDjw977wBrKXqiylA==}
+  '@form-create/designer@3.2.8':
+    resolution: {integrity: sha512-SgrGiWOFaQTARAmysepHDtFyRi97rERrlkv1joz+DCOAzZME3RKRTXVqA7ALzJ2jI3psiCosGAK4rPSLh6EvgA==, tarball: https://registry.npmmirror.com/@form-create/designer/-/designer-3.2.8.tgz}
+    peerDependencies:
+      vue: ^3.1.5
 
-  '@form-create/element-ui@3.1.29':
-    resolution: {integrity: sha512-gG6RViw8/ZY72COHB2soNfiaoS55Il3gJ9C3lQ/J/8VccR3u6DtcK43ZoP5salQYxjQOFLyQmQidFQtmyphpgg==}
+  '@form-create/element-ui@3.2.13':
+    resolution: {integrity: sha512-b/ilL9/huwQhXhGM3irzKTqlF7n69ld/CPiLQzuzSEUFC4VqBNFcy8kpCQ9/j4+VvuEPCvro1ax3v4V7Mxol9g==, tarball: https://registry.npmmirror.com/@form-create/element-ui/-/element-ui-3.2.13.tgz}
     peerDependencies:
       vue: ^3.1.0
 
-  '@form-create/utils@3.1.29':
-    resolution: {integrity: sha512-CsD3htq2qyuvqc3kJipUk2OFZA5eg+Fwna9zZPoi8T8UuEKBkfgR5fp2s0AgZ87i2a5NgwCk87kfVntijnxvPw==}
+  '@form-create/utils@3.2.0':
+    resolution: {integrity: sha512-fqc7/l+US76NhloxMF3xE7UafYgxA8jU+t5WrAhmjaIAJ0vUNp6ScL/kdwN4nfOvjByZ/Q8BFQT0wqrp4lcgtw==, tarball: https://registry.npmmirror.com/@form-create/utils/-/utils-3.2.0.tgz}
 
   '@gera2ld/jsx-dom@2.2.2':
     resolution: {integrity: sha512-EOqf31IATRE6zS1W1EoWmXZhGfLAoO9FIlwTtHduSrBdud4npYBxYAkv8dZ5hudDPwJeeSjn40kbCL4wAzr8dA==}
@@ -1379,6 +1398,9 @@ packages:
   '@jridgewell/sourcemap-codec@1.4.15':
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
 
+  '@jridgewell/sourcemap-codec@1.5.0':
+    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==, tarball: https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz}
+
   '@jridgewell/trace-mapping@0.3.25':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
@@ -1398,7 +1420,7 @@ packages:
     engines: {node: '>= 8'}
 
   '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
+    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==, tarball: https://registry.npmmirror.com/@pkgjs/parseargs/-/parseargs-0.11.0.tgz}
     engines: {node: '>=14'}
 
   '@pkgr/core@0.1.1':
@@ -1440,91 +1462,91 @@ packages:
         optional: true
 
   '@rollup/rollup-android-arm-eabi@4.17.1':
-    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==}
+    resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz}
     cpu: [arm]
     os: [android]
 
   '@rollup/rollup-android-arm64@4.17.1':
-    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==}
+    resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.1.tgz}
     cpu: [arm64]
     os: [android]
 
   '@rollup/rollup-darwin-arm64@4.17.1':
-    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==}
+    resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.1.tgz}
     cpu: [arm64]
     os: [darwin]
 
   '@rollup/rollup-darwin-x64@4.17.1':
-    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==}
+    resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==, tarball: https://registry.npmmirror.com/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.1.tgz}
     cpu: [x64]
     os: [darwin]
 
   '@rollup/rollup-linux-arm-gnueabihf@4.17.1':
-    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==}
+    resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.1.tgz}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.17.1':
-    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==}
+    resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.1.tgz}
     cpu: [arm]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.17.1':
-    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==}
+    resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.1.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.17.1':
-    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==}
+    resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.1.tgz}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.17.1':
-    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==}
+    resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.1.tgz}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.17.1':
-    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==}
+    resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.1.tgz}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.17.1':
-    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==}
+    resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.1.tgz}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.17.1':
-    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==}
+    resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.1.tgz}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.17.1':
-    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==}
+    resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==, tarball: https://registry.npmmirror.com/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.1.tgz}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.17.1':
-    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==}
+    resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.1.tgz}
     cpu: [arm64]
     os: [win32]
 
   '@rollup/rollup-win32-ia32-msvc@4.17.1':
-    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==}
+    resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.1.tgz}
     cpu: [ia32]
     os: [win32]
 
   '@rollup/rollup-win32-x64-msvc@4.17.1':
-    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==}
+    resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==, tarball: https://registry.npmmirror.com/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.1.tgz}
     cpu: [x64]
     os: [win32]
 
@@ -1532,65 +1554,65 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
 
   '@swc/core-darwin-arm64@1.7.26':
-    resolution: {integrity: sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==}
+    resolution: {integrity: sha512-FF3CRYTg6a7ZVW4yT9mesxoVVZTrcSWtmZhxKCYJX9brH4CS/7PRPjAKNk6kzWgWuRoglP7hkjQcd6EpMcZEAw==, tarball: https://registry.npmmirror.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [darwin]
 
   '@swc/core-darwin-x64@1.7.26':
-    resolution: {integrity: sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==}
+    resolution: {integrity: sha512-az3cibZdsay2HNKmc4bjf62QVukuiMRh5sfM5kHR/JMTrLyS6vSw7Ihs3UTkZjUxkLTT8ro54LI6sV6sUQUbLQ==, tarball: https://registry.npmmirror.com/@swc/core-darwin-x64/-/core-darwin-x64-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [darwin]
 
   '@swc/core-linux-arm-gnueabihf@1.7.26':
-    resolution: {integrity: sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==}
+    resolution: {integrity: sha512-VYPFVJDO5zT5U3RpCdHE5v1gz4mmR8BfHecUZTmD2v1JeFY6fv9KArJUpjrHEEsjK/ucXkQFmJ0jaiWXmpOV9Q==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [arm]
     os: [linux]
 
   '@swc/core-linux-arm64-gnu@1.7.26':
-    resolution: {integrity: sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==}
+    resolution: {integrity: sha512-YKevOV7abpjcAzXrhsl+W48Z9mZvgoVs2eP5nY+uoMAdP2b3GxC0Df1Co0I90o2lkzO4jYBpTMcZlmUXLdXn+Q==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
   '@swc/core-linux-arm64-musl@1.7.26':
-    resolution: {integrity: sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==}
+    resolution: {integrity: sha512-3w8iZICMkQQON0uIcvz7+Q1MPOW6hJ4O5ETjA0LSP/tuKqx30hIniCGOgPDnv3UTMruLUnQbtBwVCZTBKR3Rkg==, tarball: https://registry.npmmirror.com/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
   '@swc/core-linux-x64-gnu@1.7.26':
-    resolution: {integrity: sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==}
+    resolution: {integrity: sha512-c+pp9Zkk2lqb06bNGkR2Looxrs7FtGDMA4/aHjZcCqATgp348hOKH5WPvNLBl+yPrISuWjbKDVn3NgAvfvpH4w==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
   '@swc/core-linux-x64-musl@1.7.26':
-    resolution: {integrity: sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==}
+    resolution: {integrity: sha512-PgtyfHBF6xG87dUSSdTJHwZ3/8vWZfNIXQV2GlwEpslrOkGqy+WaiiyE7Of7z9AvDILfBBBcJvJ/r8u980wAfQ==, tarball: https://registry.npmmirror.com/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
   '@swc/core-win32-arm64-msvc@1.7.26':
-    resolution: {integrity: sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==}
+    resolution: {integrity: sha512-9TNXPIJqFynlAOrRD6tUQjMq7KApSklK3R/tXgIxc7Qx+lWu8hlDQ/kVPLpU7PWvMMwC/3hKBW+p5f+Tms1hmA==, tarball: https://registry.npmmirror.com/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [arm64]
     os: [win32]
 
   '@swc/core-win32-ia32-msvc@1.7.26':
-    resolution: {integrity: sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==}
+    resolution: {integrity: sha512-9YngxNcG3177GYdsTum4V98Re+TlCeJEP4kEwEg9EagT5s3YejYdKwVAkAsJszzkXuyRDdnHUpYbTrPG6FiXrQ==, tarball: https://registry.npmmirror.com/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [ia32]
     os: [win32]
 
   '@swc/core-win32-x64-msvc@1.7.26':
-    resolution: {integrity: sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==}
+    resolution: {integrity: sha512-VR+hzg9XqucgLjXxA13MtV5O3C0bK0ywtLIBw/+a+O+Oc6mxFWHtdUeXDbIi5AiPbn0fjgVJMqYnyjGyyX8u0w==, tarball: https://registry.npmmirror.com/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.7.26.tgz}
     engines: {node: '>=10'}
     cpu: [x64]
     os: [win32]
@@ -1611,7 +1633,7 @@ packages:
     resolution: {integrity: sha512-wBJA+SdtkbFhHjTMYH+dEH1y4VpfGdAc2Kw/LK09i9bXd/K6j6PkDcFCEzb6iVfZMkPRrl/q0e3toqTAJdkIVA==}
 
   '@sxzz/popperjs-es@2.11.7':
-    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==, tarball: https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz}
 
   '@transloadit/prettier-bytes@0.0.7':
     resolution: {integrity: sha512-VeJbUb0wEKbcwaSlj5n+LscBl9IPgLPkHVGBkh00cztv6X4L/TJXK58LzFuBKX7/GAfiGhIwH67YTLTlzvIzBA==}
@@ -1759,7 +1781,7 @@ packages:
     resolution: {integrity: sha512-l4cmyPEckf8moNYHdJ+4wkHvFxjyW6ulm9l4YGaOxeyBWPhBOT0gvni1InpFPdzx1dKf/2s62qGITwxNWnPQng==}
 
   '@types/video.js@7.3.58':
-    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==}
+    resolution: {integrity: sha512-1CQjuSrgbv1/dhmcfQ83eVyYbvGyqhTvb2Opxr0QCV+iJ4J6/J+XWQ3Om59WiwCd1MN3rDUHasx5XRrpUtewYQ==, tarball: https://registry.npmmirror.com/@types/video.js/-/video.js-7.3.58.tgz}
 
   '@types/web-bluetooth@0.0.16':
     resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
@@ -2049,30 +2071,30 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
-  '@vue/compiler-core@3.4.21':
-    resolution: {integrity: sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==}
-
   '@vue/compiler-core@3.4.26':
     resolution: {integrity: sha512-N9Vil6Hvw7NaiyFUFBPXrAyETIGlQ8KcFMkyk6hW1Cl6NvoqvP+Y8p1Eqvx+UdqsnrnI9+HMUEJegzia3mhXmQ==}
 
-  '@vue/compiler-dom@3.4.21':
-    resolution: {integrity: sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==}
+  '@vue/compiler-core@3.5.12':
+    resolution: {integrity: sha512-ISyBTRMmMYagUxhcpyEH0hpXRd/KqDU4ymofPgl2XAkY9ZhQ+h0ovEZJIiPop13UmR/54oA2cgMDjgroRelaEw==, tarball: https://registry.npmmirror.com/@vue/compiler-core/-/compiler-core-3.5.12.tgz}
 
   '@vue/compiler-dom@3.4.26':
     resolution: {integrity: sha512-4CWbR5vR9fMg23YqFOhr6t6WB1Fjt62d6xdFPyj8pxrYub7d+OgZaObMsoxaF9yBUHPMiPFK303v61PwAuGvZA==}
 
-  '@vue/compiler-sfc@3.4.21':
-    resolution: {integrity: sha512-me7epoTxYlY+2CUM7hy9PCDdpMPfIwrOvAXud2Upk10g4YLv9UBW7kL798TvMeDhPthkZ0CONNrK2GoeI1ODiQ==}
+  '@vue/compiler-dom@3.5.12':
+    resolution: {integrity: sha512-9G6PbJ03uwxLHKQ3P42cMTi85lDRvGLB2rSGOiQqtXELat6uI4n8cNz9yjfVHRPIu+MsK6TE418Giruvgptckg==, tarball: https://registry.npmmirror.com/@vue/compiler-dom/-/compiler-dom-3.5.12.tgz}
 
   '@vue/compiler-sfc@3.4.26':
     resolution: {integrity: sha512-It1dp+FAOCgluYSVYlDn5DtZBxk1NCiJJfu2mlQqa/b+k8GL6NG/3/zRbJnHdhV2VhxFghaDq5L4K+1dakW6cw==}
 
-  '@vue/compiler-ssr@3.4.21':
-    resolution: {integrity: sha512-M5+9nI2lPpAsgXOGQobnIueVqc9sisBFexh5yMIMRAPYLa7+5wEJs8iqOZc1WAa9WQbx9GR2twgznU8LTIiZ4Q==}
+  '@vue/compiler-sfc@3.5.12':
+    resolution: {integrity: sha512-2k973OGo2JuAa5+ZlekuQJtitI5CgLMOwgl94BzMCsKZCX/xiqzJYzapl4opFogKHqwJk34vfsaKpfEhd1k5nw==, tarball: https://registry.npmmirror.com/@vue/compiler-sfc/-/compiler-sfc-3.5.12.tgz}
 
   '@vue/compiler-ssr@3.4.26':
     resolution: {integrity: sha512-FNwLfk7LlEPRY/g+nw2VqiDKcnDTVdCfBREekF8X74cPLiWHUX6oldktf/Vx28yh4STNy7t+/yuLoMBBF7YDiQ==}
 
+  '@vue/compiler-ssr@3.5.12':
+    resolution: {integrity: sha512-eLwc7v6bfGBSM7wZOGPmRavSWzNFF6+PdRhE+VFJhNCgHiF8AM7ccoqcv5kBXA2eWUfigD7byekvf/JsOfKvPA==, tarball: https://registry.npmmirror.com/@vue/compiler-ssr/-/compiler-ssr-3.5.12.tgz}
+
   '@vue/devtools-api@6.6.1':
     resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}
 
@@ -2084,26 +2106,26 @@ packages:
       typescript:
         optional: true
 
-  '@vue/reactivity@3.4.21':
-    resolution: {integrity: sha512-UhenImdc0L0/4ahGCyEzc/pZNwVgcglGy9HVzJ1Bq2Mm9qXOpP8RyNTjookw/gOCUlXSEtuZ2fUg5nrHcoqJcw==}
+  '@vue/reactivity@3.5.12':
+    resolution: {integrity: sha512-UzaN3Da7xnJXdz4Okb/BGbAaomRHc3RdoWqTzlvd9+WBR5m3J39J1fGcHes7U3za0ruYn/iYy/a1euhMEHvTAg==, tarball: https://registry.npmmirror.com/@vue/reactivity/-/reactivity-3.5.12.tgz}
 
-  '@vue/runtime-core@3.4.21':
-    resolution: {integrity: sha512-pQthsuYzE1XcGZznTKn73G0s14eCJcjaLvp3/DKeYWoFacD9glJoqlNBxt3W2c5S40t6CCcpPf+jG01N3ULyrA==}
+  '@vue/runtime-core@3.5.12':
+    resolution: {integrity: sha512-hrMUYV6tpocr3TL3Ad8DqxOdpDe4zuQY4HPY3X/VRh+L2myQO8MFXPAMarIOSGNu0bFAjh1yBkMPXZBqCk62Uw==, tarball: https://registry.npmmirror.com/@vue/runtime-core/-/runtime-core-3.5.12.tgz}
 
-  '@vue/runtime-dom@3.4.21':
-    resolution: {integrity: sha512-gvf+C9cFpevsQxbkRBS1NpU8CqxKw0ebqMvLwcGQrNpx6gqRDodqKqA+A2VZZpQ9RpK2f9yfg8VbW/EpdFUOJw==}
+  '@vue/runtime-dom@3.5.12':
+    resolution: {integrity: sha512-q8VFxR9A2MRfBr6/55Q3umyoN7ya836FzRXajPB6/Vvuv0zOPL+qltd9rIMzG/DbRLAIlREmnLsplEF/kotXKA==, tarball: https://registry.npmmirror.com/@vue/runtime-dom/-/runtime-dom-3.5.12.tgz}
 
-  '@vue/server-renderer@3.4.21':
-    resolution: {integrity: sha512-aV1gXyKSN6Rz+6kZ6kr5+Ll14YzmIbeuWe7ryJl5muJ4uwSwY/aStXTixx76TwkZFJLm1aAlA/HSWEJ4EyiMkg==}
+  '@vue/server-renderer@3.5.12':
+    resolution: {integrity: sha512-I3QoeDDeEPZm8yR28JtY+rk880Oqmj43hreIBVTicisFTx/Dl7JpG72g/X7YF8hnQD3IFhkky5i2bPonwrTVPg==, tarball: https://registry.npmmirror.com/@vue/server-renderer/-/server-renderer-3.5.12.tgz}
     peerDependencies:
-      vue: 3.4.21
-
-  '@vue/shared@3.4.21':
-    resolution: {integrity: sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==}
+      vue: 3.5.12
 
   '@vue/shared@3.4.26':
     resolution: {integrity: sha512-Fg4zwR0GNnjzodMt3KRy2AWGMKQXByl56+4HjN87soxLNU9P5xcJkstAlIeEF3cU6UYOzmJl1tV0dVPGIljCnQ==}
 
+  '@vue/shared@3.5.12':
+    resolution: {integrity: sha512-L2RPSAwUFbgZH20etwrXyVyCBu9OxRSi8T/38QsvnkJyvq2LufW2lDCOzm7t/U9C1mkhJGWYfCuFBCmIuNivrg==, tarball: https://registry.npmmirror.com/@vue/shared/-/shared-3.5.12.tgz}
+
   '@vueuse/core@10.9.0':
     resolution: {integrity: sha512-/1vjTol8SXnx6xewDEKfS0Ra//ncg4Hb0DaZiwKf7drgfMsKFExQ+FnnENcN6efPen+1kIzhLQoGSy0eDUVOMg==}
 
@@ -2413,11 +2435,11 @@ packages:
   bpmn-js-token-simulation@0.10.0:
     resolution: {integrity: sha512-QuZQ/KVXKt9Vl+XENyOBoTW2Aw+uKjuBlKdCJL6El7AyM7DkJ5bZkSYURshId1SkBDdYg2mJ1flSmsrhGuSfwg==}
 
-  bpmn-js@8.9.0:
-    resolution: {integrity: sha512-cthSxiJUpEHspiUKiL0YA8/mRCYngNKwALWieLKPtFo42n+vWTFgmxnASNRwhxpPEbSXjYuTah1lZ0lSyLWPpw==}
+  bpmn-js@8.10.0:
+    resolution: {integrity: sha512-NozeOi01qL0ZdVq8+5hWZcikyEvgrP1yzCBqlhSufJdHFsnEMBCwn2bJJ0B/6JgX+IBwy1sk/Uw+Ds8rQ8vfrw==, tarball: https://registry.npmmirror.com/bpmn-js/-/bpmn-js-8.10.0.tgz}
 
   bpmn-moddle@7.1.3:
-    resolution: {integrity: sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==}
+    resolution: {integrity: sha512-ZcBfw0NSOdYTSXFKEn7MOXHItz7VfLZTrFYKO8cK6V8ZzGjCcdiLIOiw7Lctw1PJsihhLiZQS8Htj2xKf+NwCg==, tarball: https://registry.npmmirror.com/bpmn-moddle/-/bpmn-moddle-7.1.3.tgz}
 
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
@@ -2532,6 +2554,10 @@ packages:
     resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
     engines: {node: '>=6'}
 
+  codemirror@6.65.7:
+    resolution: {integrity: sha512-HcfnUFJwI2FvH73YWVbbMh7ObWxZiHIycEhv9ZEXy6e8ZKDjtZKbbYFUtsLN46HFXPvU5V2Uvc2d55Z//oFW5A==, tarball: https://registry.npmmirror.com/codemirror/-/codemirror-6.65.7.tgz}
+    deprecated: This is an accidentally mis-tagged instance of 5.65.7
+
   collection-visit@1.0.0:
     resolution: {integrity: sha512-lNkKvzEeMBBjUGHZ+q6z9pSJla0KWAQPvtzhEV9+iGyQYG+pBpl7xKDhxoNSOZH2hhv0v5k0y2yAM4o4SjoSkw==}
     engines: {node: '>=0.10.0'}
@@ -2648,7 +2674,7 @@ packages:
     resolution: {integrity: sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==}
 
   core-js-pure@3.37.0:
-    resolution: {integrity: sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==}
+    resolution: {integrity: sha512-d3BrpyFr5eD4KcbRvQ3FTUx/KWmaDesr7+a3+1+P46IUnNoEt+oiLijPINZMEon7w9oGkIINWxrBAU9DEciwFQ==, tarball: https://registry.npmmirror.com/core-js-pure/-/core-js-pure-3.37.0.tgz}
 
   core-js@3.37.0:
     resolution: {integrity: sha512-fu5vHevQ8ZG4og+LXug8ulUtVxjOcEYvifJr7L5Bfq9GOztVqsKd9/59hUk2ZSbCrS3BqUr3EpaYGIYzq7g3Ug==}
@@ -2710,7 +2736,7 @@ packages:
     engines: {node: '>= 6'}
 
   css.escape@1.5.1:
-    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
+    resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==, tarball: https://registry.npmmirror.com/css.escape/-/css.escape-1.5.1.tgz}
 
   cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -2722,7 +2748,7 @@ packages:
     engines: {node: '>=8.0.0'}
 
   csstype@3.1.3:
-    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
+    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==, tarball: https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz}
 
   d3-array@3.2.4:
     resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==}
@@ -2945,7 +2971,7 @@ packages:
     resolution: {integrity: sha512-2N3BOUU4gYMpTP24s5rF5iP7BDr7uNTCs4ozw3kf/eKfvWSIu93GEBi5m427YoyJoeOzQ5smuu4nNAPGb8idSQ==}
 
   diagram-js-direct-editing@1.8.0:
-    resolution: {integrity: sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==}
+    resolution: {integrity: sha512-B4Xj+PJfgBjbPEzT3uZQEkZI5xHFB0Izc+7BhDFuHidzrEMzQKZrFGdA3PqfWhReHf3dp+iB6Tt11G9eGNjKMw==, tarball: https://registry.npmmirror.com/diagram-js-direct-editing/-/diagram-js-direct-editing-1.8.0.tgz}
     peerDependencies:
       diagram-js: '*'
 
@@ -2953,10 +2979,10 @@ packages:
     resolution: {integrity: sha512-LF9BiwjbOPpZd0ez5VSlYRbdbEA59YQX43bWvNDp1rLMv0xwZ5yIg4oaYDK82nIQ0kH1tjvoQRpNevMTCgQVyw==}
 
   diagram-js@7.9.0:
-    resolution: {integrity: sha512-o1yUtX5TXV1pmpevP55gxU/AEG6nCidOXGs/HLuxNXG0zMZ3jQta7kMqRxTK93rNw/XuHmP1eMOwdvdJ2RP5qA==}
+    resolution: {integrity: sha512-o1yUtX5TXV1pmpevP55gxU/AEG6nCidOXGs/HLuxNXG0zMZ3jQta7kMqRxTK93rNw/XuHmP1eMOwdvdJ2RP5qA==, tarball: https://registry.npmmirror.com/diagram-js/-/diagram-js-7.9.0.tgz}
 
   didi@5.2.1:
-    resolution: {integrity: sha512-IKNnajUlD4lWMy/Q9Emkk7H1qnzREgY4UyE3IhmOi/9IKua0JYtYldk928bOdt1yNxN8EiOy1sqtSozEYsmjCg==}
+    resolution: {integrity: sha512-IKNnajUlD4lWMy/Q9Emkk7H1qnzREgY4UyE3IhmOi/9IKua0JYtYldk928bOdt1yNxN8EiOy1sqtSozEYsmjCg==, tarball: https://registry.npmmirror.com/didi/-/didi-5.2.1.tgz}
 
   didi@9.0.2:
     resolution: {integrity: sha512-q2+aj+lnJcUweV7A9pdUrwFr4LHVmRPwTmQLtHPFz4aT7IBoryN6Iy+jmFku+oIzr5ebBkvtBCOb87+dJhb7bg==}
@@ -3379,7 +3405,7 @@ packages:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
   fsevents@2.3.3:
-    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==, tarball: https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
@@ -4081,6 +4107,9 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  magic-string@0.30.12:
+    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==, tarball: https://registry.npmmirror.com/magic-string/-/magic-string-0.30.12.tgz}
+
   map-cache@0.2.2:
     resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==}
     engines: {node: '>=0.10.0'}
@@ -4181,7 +4210,7 @@ packages:
     engines: {node: '>=12'}
 
   min-dash@3.8.1:
-    resolution: {integrity: sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==}
+    resolution: {integrity: sha512-evumdlmIlg9mbRVPbC4F5FuRhNmcMS5pvuBUbqb1G9v09Ro0ImPEgz5n3khir83lFok1inKqVDjnKEg3GpDxQg==, tarball: https://registry.npmmirror.com/min-dash/-/min-dash-3.8.1.tgz}
 
   min-dash@4.2.1:
     resolution: {integrity: sha512-to+unsToePnm7cUeR9TrMzFlETHd/UXmU+ELTRfWZj5XGT41KF6X3L233o3E/GdEs3sk2Tbw/lOLD1avmWkg8A==}
@@ -4234,10 +4263,10 @@ packages:
     resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
 
   moddle-xml@9.0.6:
-    resolution: {integrity: sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==}
+    resolution: {integrity: sha512-tl0reHpsY/aKlLGhXeFlQWlYAQHFxTkFqC8tq8jXRYpQSnLVw13T6swMaourLd7EXqHdWsc+5ggsB+fEep6xZQ==, tarball: https://registry.npmmirror.com/moddle-xml/-/moddle-xml-9.0.6.tgz}
 
   moddle@5.0.4:
-    resolution: {integrity: sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==}
+    resolution: {integrity: sha512-Kjb+hjuzO+YlojNGxEUXvdhLYTHTtAABDlDcJTtTcn5MbJF9Zkv4I1Fyvp3Ypmfgg1EfHDZ3PsCQTuML9JD6wg==, tarball: https://registry.npmmirror.com/moddle/-/moddle-5.0.4.tgz}
 
   mpd-parser@0.22.1:
     resolution: {integrity: sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==}
@@ -4338,7 +4367,7 @@ packages:
     engines: {node: '>= 0.4'}
 
   object-refs@0.3.0:
-    resolution: {integrity: sha512-eP0ywuoWOaDoiake/6kTJlPJhs+k0qNm4nYRzXLNHj6vh+5M3i9R1epJTdxIPGlhWc4fNRQ7a6XJNCX+/L4FOQ==}
+    resolution: {integrity: sha512-eP0ywuoWOaDoiake/6kTJlPJhs+k0qNm4nYRzXLNHj6vh+5M3i9R1epJTdxIPGlhWc4fNRQ7a6XJNCX+/L4FOQ==, tarball: https://registry.npmmirror.com/object-refs/-/object-refs-0.3.0.tgz}
 
   object-visit@1.0.1:
     resolution: {integrity: sha512-GBaMwwAVK9qbQN3Scdo0OyvgPW7l3lnaVMj84uTOZlswkX0KpF6fyDBJhtTthf7pymztoN36/KEr1DyhF96zEA==}
@@ -4465,6 +4494,9 @@ packages:
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
 
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==, tarball: https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz}
+
   picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
@@ -4560,6 +4592,10 @@ packages:
     resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.4.47:
+    resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==, tarball: https://registry.npmmirror.com/postcss/-/postcss-8.4.47.tgz}
+    engines: {node: ^10 || ^12 || >=14}
+
   posthtml-parser@0.2.1:
     resolution: {integrity: sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==}
 
@@ -4819,7 +4855,7 @@ packages:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
   saxen@8.1.2:
-    resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==}
+    resolution: {integrity: sha512-xUOiiFbc3Ow7p8KMxwsGICPx46ZQvy3+qfNVhrkwfz3Vvq45eGt98Ft5IQaA1R/7Tb5B5MKh9fUR9x3c3nDTxw==, tarball: https://registry.npmmirror.com/saxen/-/saxen-8.1.2.tgz}
 
   scroll-into-view-if-needed@2.2.31:
     resolution: {integrity: sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA==}
@@ -4930,6 +4966,10 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
+  source-map-js@1.2.1:
+    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==, tarball: https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz}
+    engines: {node: '>=0.10.0'}
+
   source-map-resolve@0.5.3:
     resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==}
     deprecated: See https://github.com/lydell/source-map-resolve#deprecated
@@ -5133,7 +5173,7 @@ packages:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
 
   tiny-svg@2.2.4:
-    resolution: {integrity: sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==}
+    resolution: {integrity: sha512-NOi39lBknf4UdDEahNkbEAJnzhu1ZcN2j75IS2vLRmIhsfxdZpTChfLKBcN1ShplVmPIXJAIafk6YY5/Aa80lQ==, tarball: https://registry.npmmirror.com/tiny-svg/-/tiny-svg-2.2.4.tgz}
 
   tiny-svg@3.0.1:
     resolution: {integrity: sha512-P8T4iwiW1t95vpHVHqrD36Brn7TqFYCPSHIWk9WLJtYK1X4aDd+5cgqcAADIWSjf1/i5idKnpCh9mim8hEdRBg==}
@@ -5475,8 +5515,8 @@ packages:
       vue:
         optional: true
 
-  vue@3.4.21:
-    resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
+  vue@3.5.12:
+    resolution: {integrity: sha512-CLVZtXtn2ItBIi/zHZ0Sg1Xkb7+PU32bJJ8Bmy7ts3jxXTcbfsEfBivFYYWz1Hur+lalqGAh65Coin0r+HRUfg==, tarball: https://registry.npmmirror.com/vue/-/vue-3.5.12.tgz}
     peerDependencies:
       typescript: '*'
     peerDependenciesMeta:
@@ -5489,7 +5529,7 @@ packages:
       vue: ^3.0.1
 
   wangeditor@4.7.15:
-    resolution: {integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==}
+    resolution: {integrity: sha512-aPTdREd8BxXVyJ5MI+LU83FQ7u1EPd341iXIorRNYSOvoimNoZ4nPg+yn3FGbB93/owEa6buLw8wdhYnMCJQLg==, tarball: https://registry.npmmirror.com/wangeditor/-/wangeditor-4.7.15.tgz}
 
   web-storage-cache@1.1.1:
     resolution: {integrity: sha512-D0MieGooOs8RpsrK+vnejXnvh4OOv/+lTFB35JRkJJQt+uOjPE08XpaE0QBLMTRu47B1KGT/Nq3Gbag3Orinzw==}
@@ -5778,8 +5818,12 @@ snapshots:
 
   '@babel/helper-string-parser@7.24.1': {}
 
+  '@babel/helper-string-parser@7.25.9': {}
+
   '@babel/helper-validator-identifier@7.22.20': {}
 
+  '@babel/helper-validator-identifier@7.25.9': {}
+
   '@babel/helper-validator-option@7.23.5': {}
 
   '@babel/helper-wrap-function@7.22.20':
@@ -5807,6 +5851,10 @@ snapshots:
     dependencies:
       '@babel/types': 7.24.0
 
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
   '@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.4)':
     dependencies:
       '@babel/core': 7.24.4
@@ -6376,6 +6424,11 @@ snapshots:
       '@babel/helper-validator-identifier': 7.22.20
       to-fast-properties: 2.0.0
 
+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
   '@bpmn-io/diagram-js-ui@0.2.3':
     dependencies:
       htm: 3.1.1
@@ -6523,9 +6576,9 @@ snapshots:
 
   '@dual-bundle/import-meta-resolve@4.0.0': {}
 
-  '@element-plus/icons-vue@2.3.1(vue@3.4.21(typescript@5.3.3))':
+  '@element-plus/icons-vue@2.3.1(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   '@esbuild/aix-ppc64@0.19.12':
     optional: true
@@ -6630,69 +6683,72 @@ snapshots:
 
   '@floating-ui/utils@0.2.2': {}
 
-  '@form-create/component-elm-checkbox@3.1.29':
+  '@form-create/component-elm-checkbox@3.2.8':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-frame@3.1.29':
+  '@form-create/component-elm-frame@3.2.0':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-group@3.1.29':
+  '@form-create/component-elm-group@3.2.8':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-radio@3.1.29':
+  '@form-create/component-elm-radio@3.2.8':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-select@3.1.29':
+  '@form-create/component-elm-select@3.2.0':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-tree@3.1.29':
+  '@form-create/component-elm-tree@3.2.9':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-elm-upload@3.1.29':
+  '@form-create/component-elm-upload@3.2.13':
     dependencies:
-      '@form-create/utils': 3.1.29
+      '@form-create/utils': 3.2.0
 
-  '@form-create/component-subform@3.1.5': {}
+  '@form-create/component-subform@3.1.34': {}
 
   '@form-create/component-wangeditor@3.1.20':
     dependencies:
       wangeditor: 4.7.15
 
-  '@form-create/core@3.1.29(vue@3.4.21(typescript@5.3.3))':
+  '@form-create/core@3.2.13(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      '@form-create/utils': 3.1.29
-      vue: 3.4.21(typescript@5.3.3)
+      '@form-create/utils': 3.2.0
+      vue: 3.5.12(typescript@5.3.3)
 
-  '@form-create/designer@3.1.5(vue@3.4.21(typescript@5.3.3))':
+  '@form-create/designer@3.2.8(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@form-create/component-wangeditor': 3.1.20
-      '@form-create/element-ui': 3.1.29(vue@3.4.21(typescript@5.3.3))
-      '@form-create/utils': 3.1.29
-      vuedraggable: 4.1.0(vue@3.4.21(typescript@5.3.3))
+      '@form-create/element-ui': 3.2.13(vue@3.5.12(typescript@5.3.3))
+      '@form-create/utils': 3.2.0
+      codemirror: 6.65.7
+      element-plus: 2.8.4(vue@3.5.12(typescript@5.3.3))
+      vue: 3.5.12(typescript@5.3.3)
+      vuedraggable: 4.1.0(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
-      - vue
+      - '@vue/composition-api'
 
-  '@form-create/element-ui@3.1.29(vue@3.4.21(typescript@5.3.3))':
+  '@form-create/element-ui@3.2.13(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      '@form-create/component-elm-checkbox': 3.1.29
-      '@form-create/component-elm-frame': 3.1.29
-      '@form-create/component-elm-group': 3.1.29
-      '@form-create/component-elm-radio': 3.1.29
-      '@form-create/component-elm-select': 3.1.29
-      '@form-create/component-elm-tree': 3.1.29
-      '@form-create/component-elm-upload': 3.1.29
-      '@form-create/component-subform': 3.1.5
-      '@form-create/core': 3.1.29(vue@3.4.21(typescript@5.3.3))
-      '@form-create/utils': 3.1.29
-      vue: 3.4.21(typescript@5.3.3)
+      '@form-create/component-elm-checkbox': 3.2.8
+      '@form-create/component-elm-frame': 3.2.0
+      '@form-create/component-elm-group': 3.2.8
+      '@form-create/component-elm-radio': 3.2.8
+      '@form-create/component-elm-select': 3.2.0
+      '@form-create/component-elm-tree': 3.2.9
+      '@form-create/component-elm-upload': 3.2.13
+      '@form-create/component-subform': 3.1.34
+      '@form-create/core': 3.2.13(vue@3.5.12(typescript@5.3.3))
+      '@form-create/utils': 3.2.0
+      vue: 3.5.12(typescript@5.3.3)
 
-  '@form-create/utils@3.1.29': {}
+  '@form-create/utils@3.2.0': {}
 
   '@gera2ld/jsx-dom@2.2.2':
     dependencies:
@@ -6739,7 +6795,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@intlify/bundle-utils@7.5.1(vue-i18n@9.10.2(vue@3.4.21(typescript@5.3.3)))':
+  '@intlify/bundle-utils@7.5.1(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))':
     dependencies:
       '@intlify/message-compiler': 9.13.1
       '@intlify/shared': 9.13.1
@@ -6752,7 +6808,7 @@ snapshots:
       source-map-js: 1.2.0
       yaml-eslint-parser: 1.2.2
     optionalDependencies:
-      vue-i18n: 9.10.2(vue@3.4.21(typescript@5.3.3))
+      vue-i18n: 9.10.2(vue@3.5.12(typescript@5.3.3))
 
   '@intlify/core-base@9.10.2':
     dependencies:
@@ -6773,9 +6829,9 @@ snapshots:
 
   '@intlify/shared@9.13.1': {}
 
-  '@intlify/unplugin-vue-i18n@2.0.0(rollup@4.17.1)(vue-i18n@9.10.2(vue@3.4.21(typescript@5.3.3)))':
+  '@intlify/unplugin-vue-i18n@2.0.0(rollup@4.17.1)(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))':
     dependencies:
-      '@intlify/bundle-utils': 7.5.1(vue-i18n@9.10.2(vue@3.4.21(typescript@5.3.3)))
+      '@intlify/bundle-utils': 7.5.1(vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)))
       '@intlify/shared': 9.13.1
       '@rollup/pluginutils': 5.1.0(rollup@4.17.1)
       '@vue/compiler-sfc': 3.4.26
@@ -6788,7 +6844,7 @@ snapshots:
       source-map-js: 1.2.0
       unplugin: 1.10.1
     optionalDependencies:
-      vue-i18n: 9.10.2(vue@3.4.21(typescript@5.3.3))
+      vue-i18n: 9.10.2(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -6823,6 +6879,8 @@ snapshots:
 
   '@jridgewell/sourcemap-codec@1.4.15': {}
 
+  '@jridgewell/sourcemap-codec@1.5.0': {}
+
   '@jridgewell/trace-mapping@0.3.25':
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
@@ -7510,11 +7568,11 @@ snapshots:
       '@uppy/utils': 4.1.3
       nanoid: 3.3.7
 
-  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.5)(vue@3.4.21(typescript@5.3.3))':
+  '@videojs-player/vue@1.0.0(@types/video.js@7.3.58)(video.js@7.21.5)(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/video.js': 7.3.58
       video.js: 7.21.5
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   '@videojs/http-streaming@2.16.2(video.js@7.21.5)':
     dependencies:
@@ -7554,20 +7612,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.4.21(typescript@5.3.3))':
+  '@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@babel/core': 7.24.4
       '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4)
       '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.4)
       vite: 5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-vue@5.0.4(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.4.21(typescript@5.3.3))':
+  '@vitejs/plugin-vue@5.0.4(vite@5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4))(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       vite: 5.1.4(@types/node@20.12.7)(sass@1.75.0)(terser@5.30.4)
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   '@volar/language-core@1.11.1':
     dependencies:
@@ -7611,14 +7669,6 @@ snapshots:
       '@babel/parser': 7.24.4
       '@vue/compiler-sfc': 3.4.26
 
-  '@vue/compiler-core@3.4.21':
-    dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.21
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.0
-
   '@vue/compiler-core@3.4.26':
     dependencies:
       '@babel/parser': 7.24.4
@@ -7627,27 +7677,23 @@ snapshots:
       estree-walker: 2.0.2
       source-map-js: 1.2.0
 
-  '@vue/compiler-dom@3.4.21':
+  '@vue/compiler-core@3.5.12':
     dependencies:
-      '@vue/compiler-core': 3.4.21
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.26.2
+      '@vue/shared': 3.5.12
+      entities: 4.5.0
+      estree-walker: 2.0.2
+      source-map-js: 1.2.0
 
   '@vue/compiler-dom@3.4.26':
     dependencies:
       '@vue/compiler-core': 3.4.26
       '@vue/shared': 3.4.26
 
-  '@vue/compiler-sfc@3.4.21':
+  '@vue/compiler-dom@3.5.12':
     dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/compiler-core': 3.4.21
-      '@vue/compiler-dom': 3.4.21
-      '@vue/compiler-ssr': 3.4.21
-      '@vue/shared': 3.4.21
-      estree-walker: 2.0.2
-      magic-string: 0.30.10
-      postcss: 8.4.38
-      source-map-js: 1.2.0
+      '@vue/compiler-core': 3.5.12
+      '@vue/shared': 3.5.12
 
   '@vue/compiler-sfc@3.4.26':
     dependencies:
@@ -7661,16 +7707,28 @@ snapshots:
       postcss: 8.4.38
       source-map-js: 1.2.0
 
-  '@vue/compiler-ssr@3.4.21':
+  '@vue/compiler-sfc@3.5.12':
     dependencies:
-      '@vue/compiler-dom': 3.4.21
-      '@vue/shared': 3.4.21
+      '@babel/parser': 7.26.2
+      '@vue/compiler-core': 3.5.12
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      estree-walker: 2.0.2
+      magic-string: 0.30.12
+      postcss: 8.4.47
+      source-map-js: 1.2.0
 
   '@vue/compiler-ssr@3.4.26':
     dependencies:
       '@vue/compiler-dom': 3.4.26
       '@vue/shared': 3.4.26
 
+  '@vue/compiler-ssr@3.5.12':
+    dependencies:
+      '@vue/compiler-dom': 3.5.12
+      '@vue/shared': 3.5.12
+
   '@vue/devtools-api@6.6.1': {}
 
   '@vue/language-core@1.8.27(typescript@5.3.3)':
@@ -7687,47 +7745,48 @@ snapshots:
     optionalDependencies:
       typescript: 5.3.3
 
-  '@vue/reactivity@3.4.21':
+  '@vue/reactivity@3.5.12':
     dependencies:
-      '@vue/shared': 3.4.21
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-core@3.4.21':
+  '@vue/runtime-core@3.5.12':
     dependencies:
-      '@vue/reactivity': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/reactivity': 3.5.12
+      '@vue/shared': 3.5.12
 
-  '@vue/runtime-dom@3.4.21':
+  '@vue/runtime-dom@3.5.12':
     dependencies:
-      '@vue/runtime-core': 3.4.21
-      '@vue/shared': 3.4.21
+      '@vue/reactivity': 3.5.12
+      '@vue/runtime-core': 3.5.12
+      '@vue/shared': 3.5.12
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.4.21(vue@3.4.21(typescript@5.3.3))':
+  '@vue/server-renderer@3.5.12(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      '@vue/compiler-ssr': 3.4.21
-      '@vue/shared': 3.4.21
-      vue: 3.4.21(typescript@5.3.3)
-
-  '@vue/shared@3.4.21': {}
+      '@vue/compiler-ssr': 3.5.12
+      '@vue/shared': 3.5.12
+      vue: 3.5.12(typescript@5.3.3)
 
   '@vue/shared@3.4.26': {}
 
-  '@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3))':
+  '@vue/shared@3.5.12': {}
+
+  '@vueuse/core@10.9.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
       '@vueuse/metadata': 10.9.0
-      '@vueuse/shared': 10.9.0(vue@3.4.21(typescript@5.3.3))
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      '@vueuse/shared': 10.9.0(vue@3.5.12(typescript@5.3.3))
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/core@9.13.0(vue@3.4.21(typescript@5.3.3))':
+  '@vueuse/core@9.13.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.16
       '@vueuse/metadata': 9.13.0
-      '@vueuse/shared': 9.13.0(vue@3.4.21(typescript@5.3.3))
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      '@vueuse/shared': 9.13.0(vue@3.5.12(typescript@5.3.3))
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7736,16 +7795,16 @@ snapshots:
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@10.9.0(vue@3.4.21(typescript@5.3.3))':
+  '@vueuse/shared@10.9.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/shared@9.13.0(vue@3.4.21(typescript@5.3.3))':
+  '@vueuse/shared@9.13.0(vue@3.5.12(typescript@5.3.3))':
     dependencies:
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -7791,10 +7850,10 @@ snapshots:
       slate-history: 0.66.0(slate@0.72.8)
       snabbdom: 3.6.2
 
-  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.4.21(typescript@5.3.3))':
+  '@wangeditor/editor-for-vue@5.1.12(@wangeditor/editor@5.1.23)(vue@3.5.12(typescript@5.3.3))':
     dependencies:
       '@wangeditor/editor': 5.1.23
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   '@wangeditor/editor@5.1.23':
     dependencies:
@@ -8055,11 +8114,11 @@ snapshots:
 
   boolbase@1.0.0: {}
 
-  bpmn-js-properties-panel@0.46.0(bpmn-js@8.9.0):
+  bpmn-js-properties-panel@0.46.0(bpmn-js@8.10.0):
     dependencies:
       '@bpmn-io/element-templates-validator': 0.2.0
       '@bpmn-io/extract-process-variables': 0.4.5
-      bpmn-js: 8.9.0
+      bpmn-js: 8.10.0
       ids: 1.0.5
       inherits: 2.0.4
       lodash: 4.17.21
@@ -8074,7 +8133,7 @@ snapshots:
       min-dom: 0.2.0
       svg.js: 2.7.1
 
-  bpmn-js@8.9.0:
+  bpmn-js@8.10.0:
     dependencies:
       bpmn-moddle: 7.1.3
       css.escape: 1.5.1
@@ -8251,6 +8310,8 @@ snapshots:
 
   clsx@2.1.1: {}
 
+  codemirror@6.65.7: {}
+
   collection-visit@1.0.0:
     dependencies:
       map-visit: 1.0.0
@@ -8801,15 +8862,15 @@ snapshots:
 
   electron-to-chromium@1.4.750: {}
 
-  element-plus@2.8.4(vue@3.4.21(typescript@5.3.3)):
+  element-plus@2.8.4(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@ctrl/tinycolor': 3.6.1
-      '@element-plus/icons-vue': 2.3.1(vue@3.4.21(typescript@5.3.3))
+      '@element-plus/icons-vue': 2.3.1(vue@3.5.12(typescript@5.3.3))
       '@floating-ui/dom': 1.6.4
       '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
       '@types/lodash': 4.17.0
       '@types/lodash-es': 4.17.12
-      '@vueuse/core': 9.13.0(vue@3.4.21(typescript@5.3.3))
+      '@vueuse/core': 9.13.0(vue@3.5.12(typescript@5.3.3))
       async-validator: 4.2.5
       dayjs: 1.11.11
       escape-html: 1.0.3
@@ -8818,7 +8879,7 @@ snapshots:
       lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
       memoize-one: 6.0.0
       normalize-wheel-es: 1.2.0
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -9914,6 +9975,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  magic-string@0.30.12:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   map-cache@0.2.2: {}
 
   map-visit@1.0.0:
@@ -10317,19 +10382,21 @@ snapshots:
 
   picocolors@1.0.0: {}
 
+  picocolors@1.1.1: {}
+
   picomatch@2.3.1: {}
 
   pidtree@0.6.0: {}
 
-  pinia-plugin-persistedstate@3.2.1(pinia@2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3))):
+  pinia-plugin-persistedstate@3.2.1(pinia@2.1.7(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))):
     dependencies:
-      pinia: 2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3))
+      pinia: 2.1.7(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3))
 
-  pinia@2.1.7(typescript@5.3.3)(vue@3.4.21(typescript@5.3.3)):
+  pinia@2.1.7(typescript@5.3.3)(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.21(typescript@5.3.3)
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      vue: 3.5.12(typescript@5.3.3)
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     optionalDependencies:
       typescript: 5.3.3
 
@@ -10398,6 +10465,12 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.2.0
 
+  postcss@8.4.47:
+    dependencies:
+      nanoid: 3.3.7
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   posthtml-parser@0.2.1:
     dependencies:
       htmlparser2: 3.10.1
@@ -10798,6 +10871,8 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
+  source-map-js@1.2.1: {}
+
   source-map-resolve@0.5.3:
     dependencies:
       atob: 2.1.2
@@ -11236,7 +11311,7 @@ snapshots:
       - rollup
       - supports-color
 
-  unplugin-auto-import@0.16.7(@vueuse/core@10.9.0(vue@3.4.21(typescript@5.3.3)))(rollup@4.17.1):
+  unplugin-auto-import@0.16.7(@vueuse/core@10.9.0(vue@3.5.12(typescript@5.3.3)))(rollup@4.17.1):
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0(rollup@4.17.1)
@@ -11247,7 +11322,7 @@ snapshots:
       unimport: 3.7.1(rollup@4.17.1)
       unplugin: 1.10.1
     optionalDependencies:
-      '@vueuse/core': 10.9.0(vue@3.4.21(typescript@5.3.3))
+      '@vueuse/core': 10.9.0(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - rollup
 
@@ -11260,7 +11335,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-vue-components@0.25.2(@babel/parser@7.24.4)(rollup@4.17.1)(vue@3.4.21(typescript@5.3.3)):
+  unplugin-vue-components@0.25.2(@babel/parser@7.26.2)(rollup@4.17.1)(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@antfu/utils': 0.7.7
       '@rollup/pluginutils': 5.1.0(rollup@4.17.1)
@@ -11272,9 +11347,9 @@ snapshots:
       minimatch: 9.0.4
       resolve: 1.22.8
       unplugin: 1.10.1
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
     optionalDependencies:
-      '@babel/parser': 7.24.4
+      '@babel/parser': 7.26.2
     transitivePeerDependencies:
       - rollup
       - supports-color
@@ -11414,15 +11489,15 @@ snapshots:
       sass: 1.75.0
       terser: 5.30.4
 
-  vue-demi@0.14.7(vue@3.4.21(typescript@5.3.3)):
+  vue-demi@0.14.7(vue@3.5.12(typescript@5.3.3)):
     dependencies:
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
-  vue-dompurify-html@4.1.4(vue@3.4.21(typescript@5.3.3)):
+  vue-dompurify-html@4.1.4(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       dompurify: 3.1.1
-      vue: 3.4.21(typescript@5.3.3)
-      vue-demi: 0.14.7(vue@3.4.21(typescript@5.3.3))
+      vue: 3.5.12(typescript@5.3.3)
+      vue-demi: 0.14.7(vue@3.5.12(typescript@5.3.3))
     transitivePeerDependencies:
       - '@vue/composition-api'
 
@@ -11439,17 +11514,17 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-i18n@9.10.2(vue@3.4.21(typescript@5.3.3)):
+  vue-i18n@9.10.2(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@intlify/core-base': 9.10.2
       '@intlify/shared': 9.10.2
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
-  vue-router@4.3.2(vue@3.4.21(typescript@5.3.3)):
+  vue-router@4.3.2(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       '@vue/devtools-api': 6.6.1
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   vue-template-compiler@2.7.16:
     dependencies:
@@ -11463,26 +11538,26 @@ snapshots:
       semver: 7.6.0
       typescript: 5.3.3
 
-  vue-types@5.1.1(vue@3.4.21(typescript@5.3.3)):
+  vue-types@5.1.1(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       is-plain-object: 5.0.0
     optionalDependencies:
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
-  vue@3.4.21(typescript@5.3.3):
+  vue@3.5.12(typescript@5.3.3):
     dependencies:
-      '@vue/compiler-dom': 3.4.21
-      '@vue/compiler-sfc': 3.4.21
-      '@vue/runtime-dom': 3.4.21
-      '@vue/server-renderer': 3.4.21(vue@3.4.21(typescript@5.3.3))
-      '@vue/shared': 3.4.21
+      '@vue/compiler-dom': 3.5.12
+      '@vue/compiler-sfc': 3.5.12
+      '@vue/runtime-dom': 3.5.12
+      '@vue/server-renderer': 3.5.12(vue@3.5.12(typescript@5.3.3))
+      '@vue/shared': 3.5.12
     optionalDependencies:
       typescript: 5.3.3
 
-  vuedraggable@4.1.0(vue@3.4.21(typescript@5.3.3)):
+  vuedraggable@4.1.0(vue@3.5.12(typescript@5.3.3)):
     dependencies:
       sortablejs: 1.14.0
-      vue: 3.4.21(typescript@5.3.3)
+      vue: 3.5.12(typescript@5.3.3)
 
   wangeditor@4.7.15:
     dependencies:
diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index 46728637..cbcb8a0f 100644
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -26,8 +26,8 @@ export type ModelVO = {
   bpmnXml: string
 }
 
-export const getModelPage = async (params) => {
-  return await request.get({ url: '/bpm/model/page', params })
+export const getModelList = async (name: string | undefined) => {
+  return await request.get({ url: '/bpm/model/list', params: { name } })
 }
 
 export const getModel = async (id: string) => {
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 75a2d55d..451365a2 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -39,7 +39,10 @@
             <Icon icon="fa:plus" class="mr-5px" />
             新建
           </el-button>
-          <el-dropdown @command="(command) => handleCategoryCommand(command)" placement="bottom">
+          <el-dropdown
+            @command="(command) => handleCategoryCommand(command, categoryInfo)"
+            placement="bottom"
+          >
             <el-button link type="info">
               <Icon icon="ep:setting" class="mr-5px" />
               分类
@@ -47,7 +50,7 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item command="handleRename"> 重命名 </el-dropdown-item>
-                <el-dropdown-item command="handleDeleteGroup"> 删除该类 </el-dropdown-item>
+                <el-dropdown-item command="handleDeleteCategory"> 删除该类 </el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -178,7 +181,7 @@
             </el-button>
             <el-dropdown
               class="!align-middle ml-5px"
-              @command="(command) => handleCommand(command, scope.row)"
+              @command="(command) => handleModelCommand(command, scope.row)"
               v-hasPermi="['bpm:process-definition:query', 'bpm:model:update', 'bpm:model:delete']"
             >
               <el-button type="primary" link>更多</el-button>
@@ -215,27 +218,28 @@
   </el-collapse-transition>
 
   <!-- 弹窗：重命名分类 -->
-  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameVisible" width="400">
+  <Dialog :fullscreen="false" class="rename-dialog" v-model="renameCategoryVisible" width="400">
     <template #title>
       <div class="pl-10px font-bold text-18px"> 重命名分类 </div>
     </template>
     <div class="px-30px">
-      <el-input v-model="renameVal" />
+      <el-input v-model="renameCategoryForm.name" />
     </div>
     <template #footer>
       <div class="pr-25px pb-25px">
-        <el-button @click="renameVisible = false">取 消</el-button>
+        <el-button @click="renameCategoryVisible = false">取 消</el-button>
         <el-button type="primary" @click="handleRenameConfirm">确 定</el-button>
       </div>
     </template>
   </Dialog>
+
   <!-- 表单弹窗：添加流程模型 -->
   <ModelForm :categoryId="categoryInfo.code" ref="modelFormRef" @success="emit('success')" />
 </template>
 
 <script lang="ts" setup>
 import ModelForm from './ModelForm.vue'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import Sortable from 'sortablejs'
 import { propTypes } from '@/utils/propTypes'
 import { formatDate } from '@/utils/formatTime'
@@ -250,7 +254,6 @@ import { cloneDeep } from 'lodash-es'
 
 defineOptions({ name: 'BpmModel' })
 
-const renameVisible = ref(false)
 const props = defineProps({
   // 分类后的数据
   categoryInfo: propTypes.object.def([]),
@@ -267,8 +270,9 @@ const isModelSorting = ref(false) // 是否正处于排序状态
 const tableData: any = ref([])
 const originalData: any = ref([]) // 原始数据
 const isExpand = ref(false) // 是否处于展开状态
+
 /** '更多'操作按钮 */
-const handleCommand = (command: string, row: any) => {
+const handleModelCommand = (command: string, row: any) => {
   switch (command) {
     case 'handleDefinitionList':
       handleDefinitionList(row)
@@ -284,15 +288,15 @@ const handleCommand = (command: string, row: any) => {
   }
 }
 
-/* '分类'操作按钮 */
-const handleCategoryCommand = (command: string) => {
+/** '分类'操作按钮 */
+const handleCategoryCommand = async (command: string, row: any) => {
   switch (command) {
     case 'handleRename':
-      renameVal.value = props.categoryInfo.name
-      renameVisible.value = true
+      renameCategoryForm.value = await CategoryApi.getCategory(row.id)
+      renameCategoryVisible.value = true
       break
-    case 'handleDeleteGroup':
-      handleDeleteGroup()
+    case 'handleDeleteCategory':
+      await handleDeleteCategory()
       break
     default:
       break
@@ -364,7 +368,7 @@ const handleDeploy = async (row: any) => {
 }
 
 /** 跳转到指定流程定义列表 */
-const handleDefinitionList = (row) => {
+const handleDefinitionList = (row: any) => {
   push({
     name: 'BpmProcessDefinition',
     query: {
@@ -450,16 +454,25 @@ const updateTableData = () => {
   }
 }
 
-const renameVal = ref('')
-// 重命名弹窗确定
-const handleRenameConfirm = () => {
-  if (!renameVal.value) {
+/** 重命名弹窗确定 */
+const renameCategoryVisible = ref(false)
+const renameCategoryForm = ref({
+  name: ''
+})
+const handleRenameConfirm = async () => {
+  if (renameCategoryForm.value?.name.length === 0) {
     return message.warning('请输入名称')
   }
+  // 发起修改
+  await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
+  message.success('修改成功')
+  // 刷新列表
+  renameCategoryVisible.value = false
+  emit('success')
 }
 
 // 删除分类
-const handleDeleteGroup = async () => {
+const handleDeleteCategory = async () => {
   try {
     if (props.categoryInfo.modelList.length > 0) {
       return message.warning('该分类下仍有流程定义,不允许删除')
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 97dca594..1eb41485 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -12,9 +12,9 @@
         label-width="68px"
         @submit.prevent
       >
-        <el-form-item align="right" prop="key" class="ml-auto">
+        <el-form-item prop="name" class="ml-auto">
           <el-input
-            v-model="queryParams.key"
+            v-model="queryParams.name"
             placeholder="搜索流程"
             clearable
             @keyup.enter="handleQuery"
@@ -25,12 +25,12 @@
             </template>
           </el-input>
         </el-form-item>
+        <!-- 右上角：新建模型、更多操作 -->
         <el-form-item>
           <el-button type="primary" @click="openForm('create')" v-hasPermi="['bpm:model:create']">
             <Icon icon="ep:plus" class="mr-5px" /> 新建模型
           </el-button>
         </el-form-item>
-
         <el-form-item>
           <el-dropdown @command="(command) => handleCommand(command)" placement="bottom-end">
             <el-button class="w-30px" plain>
@@ -59,7 +59,7 @@
 
     <el-divider />
 
-    <!-- 分类卡片组 -->
+    <!-- 按照分类，展示其所属的模型列表 -->
     <div class="px-15px">
       <draggable
         :disabled="!isCategorySorting"
@@ -75,7 +75,6 @@
             :key="element.id"
           >
             <CategoryDraggableModel
-              ref="categoryDraggableModelRef"
               :isCategorySorting="isCategorySorting"
               :categoryInfo="element"
               @success="getList"
@@ -88,7 +87,7 @@
 
   <!-- 表单弹窗：添加/修改流程 -->
   <ModelForm ref="formRef" @success="getList" />
-  <!-- 表单弹窗：添加/修改分类 -->
+  <!-- 表单弹窗：添加分类 -->
   <CategoryForm ref="categoryFormRef" @success="getList" />
   <!-- 弹窗：表单详情 -->
   <Dialog title="表单详情" v-model="formDetailVisible" width="800">
@@ -107,34 +106,30 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const categoryDraggableModelRef = ref()
 const categoryFormRef = ref()
 const loading = ref(true) // 列表的加载中
-const isCategorySorting = ref(false) // 是否正处于排序状态
+const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
-  pageNo: 1,
-  pageSize: 10,
-  key: undefined,
-  name: undefined,
-  category: undefined
+  name: undefined
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryGroup: any = ref([]) // 按照category分组的数据
-const originalData: any = ref([])
-// 查询所有分类数据
+const categoryGroup: any = ref([]) // 按照 category 分组的数据
+const originalData: any = ref([]) // 原始数据
+
+/** 查询所有分类 */
 const getAllCategory = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程分类接口
-  const data = await CategoryApi.getCategoryPage(queryParams)
-  categoryGroup.value = data.list.map((item) => ({ ...item, modelList: [] }))
+  const list = await CategoryApi.getCategorySimpleList()
+  categoryGroup.value = list.map((item: any) => ({ ...item, modelList: [] }))
 }
 
 /** 查询所有流程模型接口 */
 const getAllModel = async () => {
-  // TODO 芋艿：这里需要一个不分页查全部的流程模型接口
-  const data = await ModelApi.getModelPage(queryParams)
-  const groupedData = groupBy(data.list, 'categoryName')
+  // 查询所有流程模型
+  const list = await ModelApi.getModelList(queryParams.name)
+  // 按照 categoryName 分组
+  const groupedData = groupBy(list, 'categoryName')
   Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item) => item.name === key)
+    const category = categoryGroup.value.find((item: any) => item.name === key)
     if (category) {
       category.modelList = groupedData[key]
     }
@@ -143,7 +138,6 @@ const getAllModel = async () => {
 
 /** 搜索按钮操作 */
 const handleQuery = () => {
-  queryParams.pageNo = 1
   getList()
 }
 
@@ -152,6 +146,7 @@ const formRef = ref()
 const openForm = (type: string, id?: number) => {
   formRef.value.open(type, id)
 }
+
 /** 流程表单的详情按钮操作 */
 const formDetailVisible = ref(false)
 const formDetailPreview = ref({
@@ -173,27 +168,33 @@ const handleCommand = (command: string) => {
   }
 }
 
-// 新建分类
+/** 新建分类 */
 const handleAddCategory = () => {
   categoryFormRef.value.open('create')
 }
-// 分类排序
+
+// TODO 芋艿：需要实现
+/** 分类排序 */
 const handleSort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
 }
-// 取消排序
+
+// TODO 芋艿：需要实现
+/** 取消排序 */
 const cancelSort = () => {
   // 恢复初始数据
   categoryGroup.value = cloneDeep(originalData.value)
   isCategorySorting.value = false
 }
-// 保存排序
+
+/** 保存排序 */
 const saveSort = () => {
   // TODO 芋艿：这里需要一个保存分类排序接口
 }
 
+/** 加载数据 */
 const getList = async () => {
   loading.value = true
   try {
@@ -205,7 +206,7 @@ const getList = async () => {
 }
 
 /** 初始化 **/
-onMounted(async () => {
+onMounted(() => {
   getList()
 })
 </script>
diff --git a/src/views/bpm/model/index_old.vue b/src/views/bpm/model/index_old.vue
index 8b5f84df..9cb64206 100644
--- a/src/views/bpm/model/index_old.vue
+++ b/src/views/bpm/model/index_old.vue
@@ -252,7 +252,7 @@ const categoryList = ref([]) // 流程分类列表
 const getList = async () => {
   loading.value = true
   try {
-    const data = await ModelApi.getModelPage(queryParams)
+    const data = await ModelApi.getModelList(queryParams)
     list.value = data.list
     total.value = data.total
   } finally {

From 77062cb3911eb1c9c0f8a81bd4119ce81457ff18 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 16:58:32 +0800
Subject: [PATCH 060/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E5=88=86=E7=B1=BB=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20sort=20=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/category/index.ts                 | 10 +++++++
 .../bpm/model/CategoryDraggableModel.vue      |  6 ++--
 src/views/bpm/model/index.vue                 | 29 +++++++++++--------
 3 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/src/api/bpm/category/index.ts b/src/api/bpm/category/index.ts
index d1e109cb..1854f31c 100644
--- a/src/api/bpm/category/index.ts
+++ b/src/api/bpm/category/index.ts
@@ -36,6 +36,16 @@ export const CategoryApi = {
     return await request.put({ url: `/bpm/category/update`, data })
   },
 
+  // 批量修改流程分类的排序
+  updateCategorySortBatch: async (ids: number[]) => {
+    return await request.put({
+      url: `/bpm/category/update-sort-batch`,
+      params: {
+        ids: ids.join(',')
+      }
+    })
+  },
+
   // 删除流程分类
   deleteCategory: async (id: number) => {
     return await request.delete({ url: `/bpm/category/delete?id=` + id })
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 451365a2..db08aa58 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -465,13 +465,13 @@ const handleRenameConfirm = async () => {
   }
   // 发起修改
   await CategoryApi.updateCategory(renameCategoryForm.value as CategoryVO)
-  message.success('修改成功')
+  message.success('重命名成功')
   // 刷新列表
   renameCategoryVisible.value = false
   emit('success')
 }
 
-// 删除分类
+/** 删除分类 */
 const handleDeleteCategory = async () => {
   try {
     if (props.categoryInfo.modelList.length > 0) {
@@ -486,7 +486,7 @@ const handleDeleteCategory = async () => {
   } catch {}
 }
 
-// 添加流程模型弹窗
+/** 添加流程模型弹窗 */
 const modelFormRef = ref()
 const openModelForm = (type: string, id?: number) => {
   modelFormRef.value.open(type, id)
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 1eb41485..aad4d5c4 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -52,8 +52,8 @@
         </el-form-item>
       </el-form>
       <div class="mr-20px" v-else>
-        <el-button @click="cancelSort"> 取 消 </el-button>
-        <el-button type="primary" @click="saveSort"> 保存排序 </el-button>
+        <el-button @click="handleCategorySortCancel"> 取 消 </el-button>
+        <el-button type="primary" @click="handleCategorySortSubmit"> 保存排序 </el-button>
       </div>
     </div>
 
@@ -106,7 +106,7 @@ import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
 
-const categoryFormRef = ref()
+const message = useMessage() // 消息弹窗
 const loading = ref(true) // 列表的加载中
 const isCategorySorting = ref(false) // 是否 category 正处于排序状态
 const queryParams = reactive({
@@ -161,7 +161,7 @@ const handleCommand = (command: string) => {
       handleAddCategory()
       break
     case 'handleSort':
-      handleSort()
+      handleCategorySort()
       break
     default:
       break
@@ -169,29 +169,34 @@ const handleCommand = (command: string) => {
 }
 
 /** 新建分类 */
+const categoryFormRef = ref()
 const handleAddCategory = () => {
   categoryFormRef.value.open('create')
 }
 
-// TODO 芋艿：需要实现
-/** 分类排序 */
-const handleSort = () => {
+/** 分类排序的提交 */
+const handleCategorySort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(categoryGroup.value)
   isCategorySorting.value = true
 }
 
-// TODO 芋艿：需要实现
-/** 取消排序 */
-const cancelSort = () => {
+/** 分类排序的取消 */
+const handleCategorySortCancel = () => {
   // 恢复初始数据
   categoryGroup.value = cloneDeep(originalData.value)
   isCategorySorting.value = false
 }
 
 /** 保存排序 */
-const saveSort = () => {
-  // TODO 芋艿：这里需要一个保存分类排序接口
+const handleCategorySortSubmit = async () => {
+  // 保存排序
+  const ids = categoryGroup.value.map((item: any) => item.id)
+  await CategoryApi.updateCategorySortBatch(ids)
+  // 刷新列表
+  isCategorySorting.value = false
+  message.success('排序分类成功')
+  await getList()
 }
 
 /** 加载数据 */

From c3cf479f6f62e8abefc070149d59d83ece06bb5e Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 18:11:35 +0800
Subject: [PATCH 061/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=A8=A1=E5=9E=8B=E5=A2=9E=E5=8A=A0=E6=89=B9=E9=87=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20sort=20=E4=BA=A4=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/model/index.ts                    | 10 ++++++++
 .../bpm/model/CategoryDraggableModel.vue      | 25 +++++++++++--------
 src/views/bpm/model/index.vue                 |  2 +-
 3 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/api/bpm/model/index.ts b/src/api/bpm/model/index.ts
index cbcb8a0f..0c499dba 100644
--- a/src/api/bpm/model/index.ts
+++ b/src/api/bpm/model/index.ts
@@ -38,6 +38,16 @@ export const updateModel = async (data: ModelVO) => {
   return await request.put({ url: '/bpm/model/update', data: data })
 }
 
+// 批量修改流程分类的排序
+export const updateModelSortBatch = async (ids: number[]) => {
+  return await request.put({
+    url: `/bpm/model/update-sort-batch`,
+    params: {
+      ids: ids.join(',')
+    }
+  })
+}
+
 export const updateModelBpmn = async (data: ModelVO) => {
   return await request.put({ url: '/bpm/model/update-bpmn', data: data })
 }
diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index db08aa58..7f67a516 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -30,7 +30,7 @@
             link
             type="info"
             class="mr-20px"
-            @click.stop="handleSort"
+            @click.stop="handleModelSort"
           >
             <Icon icon="fa:sort-amount-desc" class="mr-5px" />
             排序
@@ -56,8 +56,8 @@
           </el-dropdown>
         </template>
         <template v-else>
-          <el-button @click.stop="cancelSort"> 取 消 </el-button>
-          <el-button type="primary" @click.stop="saveSort"> 保存排序 </el-button>
+          <el-button @click.stop="handleModelSortCancel"> 取 消 </el-button>
+          <el-button type="primary" @click.stop="handleModelSortSubmit"> 保存排序 </el-button>
         </template>
       </div>
     </div>
@@ -267,7 +267,7 @@ const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
 const isModelSorting = ref(false) // 是否正处于排序状态
-const tableData: any = ref([])
+const tableData: any = ref([]) // 模型列表
 const originalData: any = ref([]) // 原始数据
 const isExpand = ref(false) // 是否处于展开状态
 
@@ -403,22 +403,27 @@ const isManagerUser = (row: any) => {
   return row.managerUserIds && row.managerUserIds.includes(userId)
 }
 
-/* 排序 */
-const handleSort = () => {
+/** 处理模型的排序 **/
+const handleModelSort = () => {
   // 保存初始数据
   originalData.value = cloneDeep(props.categoryInfo.modelList)
   isModelSorting.value = true
   initSort()
 }
 
-const saveSort = () => {
-  // TODO 芋艿：这里需要一个保存分类下模型排序接口
+/** 处理模型的排序提交 */
+const handleModelSortSubmit = async () => {
+  // 保存排序
+  const ids = tableData.value.map((item: any) => item.id)
+  await ModelApi.updateModelSortBatch(ids)
   // 刷新列表
-  emit('success')
   isModelSorting.value = false
+  message.success('排序模型成功')
+  emit('success')
 }
 
-const cancelSort = () => {
+/** 处理模型的排序取消 */
+const handleModelSortCancel = () => {
   // 恢复初始数据
   tableData.value = cloneDeep(originalData.value)
   isModelSorting.value = false
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index aad4d5c4..1ecdabee 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -188,7 +188,7 @@ const handleCategorySortCancel = () => {
   isCategorySorting.value = false
 }
 
-/** 保存排序 */
+/** 分类排序的保存 */
 const handleCategorySortSubmit = async () => {
   // 保存排序
   const ids = categoryGroup.value.map((item: any) => item.id)

From 71de0c3ecfd43e0a2c32ebc7a9d2ba4676753a55 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 2 Nov 2024 19:55:13 +0800
Subject: [PATCH 062/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A1?=
 =?UTF-8?q?=EF=BC=89=E5=AE=8C=E5=96=84=E7=9B=B8=E5=85=B3=E6=B3=A8=E9=87=8A?=
 =?UTF-8?q?=EF=BC=9B2=EF=BC=89=E8=A7=A3=E5=86=B3=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E6=AF=8F=E6=AC=A1=E6=93=8D=E4=BD=9C=E5=90=8E=EF=BC=8C=E5=88=B7?=
 =?UTF-8?q?=E6=96=B0=E5=88=97=E8=A1=A8=E5=90=8E=EF=BC=8C=E9=87=8D=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E4=BC=9A=E5=AF=BC=E8=87=B4=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E7=9A=84=E4=BD=8D=E7=BD=AE=E4=B8=8D=E5=AF=B9=E7=9A=84=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/model/CategoryDraggableModel.vue      | 40 +++++++++--------
 src/views/bpm/model/index.vue                 | 45 +++++++------------
 2 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/src/views/bpm/model/CategoryDraggableModel.vue b/src/views/bpm/model/CategoryDraggableModel.vue
index 7f67a516..35465935 100644
--- a/src/views/bpm/model/CategoryDraggableModel.vue
+++ b/src/views/bpm/model/CategoryDraggableModel.vue
@@ -1,5 +1,6 @@
 <template>
   <div class="flex items-center h-50px">
+    <!-- 头部：分类名 -->
     <div class="flex items-center">
       <el-tooltip content="拖动排序" v-if="isCategorySorting">
         <Icon
@@ -11,6 +12,7 @@
       <h3 class="ml-20px mr-8px text-18px">{{ categoryInfo.name }}</h3>
       <div class="color-gray-600 text-16px"> ({{ categoryInfo.modelList?.length || 0 }}) </div>
     </div>
+    <!-- 头部：操作 -->
     <div class="flex-1 flex" v-if="!isCategorySorting">
       <div
         v-if="categoryInfo.modelList.length > 0"
@@ -62,6 +64,7 @@
       </div>
     </div>
   </div>
+  <!-- 模型列表 -->
   <el-collapse-transition>
     <div v-show="isExpand">
       <el-table
@@ -70,7 +73,7 @@
         :header-cell-style="{ backgroundColor: isDark ? '' : '#edeff0', paddingLeft: '10px' }"
         :cell-style="{ paddingLeft: '10px' }"
         :row-style="{ height: '68px' }"
-        :data="tableData"
+        :data="modelList"
         row-key="id"
       >
         <el-table-column label="流程名" prop="name" min-width="150">
@@ -110,7 +113,7 @@
         <el-table-column label="表单信息" prop="formType" min-width="200">
           <template #default="scope">
             <el-button
-              v-if="scope.row.formType === 10"
+              v-if="scope.row.formType === BpmModelFormType.NORMAL"
               type="primary"
               link
               @click="handleFormDetail(scope.row)"
@@ -118,7 +121,7 @@
               <span>{{ scope.row.formName }}</span>
             </el-button>
             <el-button
-              v-else-if="scope.row.formType === 20"
+              v-else-if="scope.row.formType === BpmModelFormType.CUSTOM"
               type="primary"
               link
               @click="handleFormDetail(scope.row)"
@@ -246,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 { BpmModelType } from '@/utils/constants'
+import { BpmModelFormType, BpmModelType } from '@/utils/constants'
 import { checkPermi } from '@/utils/permission'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { useAppStore } from '@/store/modules/app'
@@ -255,20 +258,19 @@ import { cloneDeep } from 'lodash-es'
 defineOptions({ name: 'BpmModel' })
 
 const props = defineProps({
-  // 分类后的数据
-  categoryInfo: propTypes.object.def([]),
-  isCategorySorting: propTypes.bool.def(false)
+  categoryInfo: propTypes.object.def([]), // 分类后的数据
+  isCategorySorting: propTypes.bool.def(false) // 是否分类在排序
 })
 const emit = defineEmits(['success'])
-const appStore = useAppStore()
 const message = useMessage() // 消息弹窗
-const isDark = computed(() => appStore.getIsDark)
 const { t } = useI18n() // 国际化
 const { push } = useRouter() // 路由
 const userStore = useUserStoreWithOut() // 用户信息缓存
+const isDark = computed(() => useAppStore().getIsDark) // 是否黑暗模式
+
 const isModelSorting = ref(false) // 是否正处于排序状态
-const tableData: any = ref([]) // 模型列表
 const originalData: any = ref([]) // 原始数据
+const modelList: any = ref([]) // 模型列表
 const isExpand = ref(false) // 是否处于展开状态
 
 /** '更多'操作按钮 */
@@ -414,7 +416,7 @@ const handleModelSort = () => {
 /** 处理模型的排序提交 */
 const handleModelSortSubmit = async () => {
   // 保存排序
-  const ids = tableData.value.map((item: any) => item.id)
+  const ids = modelList.value.map((item: any) => item.id)
   await ModelApi.updateModelSortBatch(ids)
   // 刷新列表
   isModelSorting.value = false
@@ -425,12 +427,12 @@ const handleModelSortSubmit = async () => {
 /** 处理模型的排序取消 */
 const handleModelSortCancel = () => {
   // 恢复初始数据
-  tableData.value = cloneDeep(originalData.value)
+  modelList.value = cloneDeep(originalData.value)
   isModelSorting.value = false
 }
 
+/** 创建拖拽实例 */
 const tableRef = ref()
-// 创建拖拽实例
 const initSort = () => {
   const table = document.querySelector(`.${props.categoryInfo.name} .el-table__body-wrapper tbody`)
   Sortable.create(table, {
@@ -441,19 +443,19 @@ const initSort = () => {
     // 结束拖动事件
     onEnd: ({ newDraggableIndex, oldDraggableIndex }) => {
       if (oldDraggableIndex !== newDraggableIndex) {
-        tableData.value.splice(
+        modelList.value.splice(
           newDraggableIndex,
           0,
-          tableData.value.splice(oldDraggableIndex, 1)[0]
+          modelList.value.splice(oldDraggableIndex, 1)[0]
         )
       }
     }
   })
 }
 
-// 更新表格数据
-const updateTableData = () => {
-  tableData.value = cloneDeep(props.categoryInfo.modelList)
+/** 更新 modelList 模型列表 */
+const updateModeList = () => {
+  modelList.value = cloneDeep(props.categoryInfo.modelList)
   if (props.categoryInfo.modelList.length > 0) {
     isExpand.value = true
   }
@@ -497,7 +499,7 @@ const openModelForm = (type: string, id?: number) => {
   modelFormRef.value.open(type, id)
 }
 
-watch(() => props.categoryInfo.modelList, updateTableData, { immediate: true })
+watch(() => props.categoryInfo.modelList, updateModeList, { immediate: true })
 watch(
   () => props.isCategorySorting,
   (val) => {
diff --git a/src/views/bpm/model/index.vue b/src/views/bpm/model/index.vue
index 1ecdabee..bf43d292 100644
--- a/src/views/bpm/model/index.vue
+++ b/src/views/bpm/model/index.vue
@@ -38,11 +38,11 @@
             </el-button>
             <template #dropdown>
               <el-dropdown-menu>
-                <el-dropdown-item command="handleAddCategory">
+                <el-dropdown-item command="handleCategoryAdd">
                   <Icon icon="ep:circle-plus" :size="13" class="mr-5px" />
                   新建分类
                 </el-dropdown-item>
-                <el-dropdown-item command="handleSort">
+                <el-dropdown-item command="handleCategorySort">
                   <Icon icon="fa:sort-amount-desc" :size="13" class="mr-5px" />
                   分类排序
                 </el-dropdown-item>
@@ -101,7 +101,7 @@ import { CategoryApi } from '@/api/bpm/category'
 import * as ModelApi from '@/api/bpm/model'
 import ModelForm from './ModelForm.vue'
 import CategoryForm from '../category/CategoryForm.vue'
-import { groupBy, cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'lodash-es'
 import CategoryDraggableModel from './CategoryDraggableModel.vue'
 
 defineOptions({ name: 'BpmModel' })
@@ -116,26 +116,6 @@ const queryFormRef = ref() // 搜索的表单
 const categoryGroup: any = ref([]) // 按照 category 分组的数据
 const originalData: any = ref([]) // 原始数据
 
-/** 查询所有分类 */
-const getAllCategory = async () => {
-  const list = await CategoryApi.getCategorySimpleList()
-  categoryGroup.value = list.map((item: any) => ({ ...item, modelList: [] }))
-}
-
-/** 查询所有流程模型接口 */
-const getAllModel = async () => {
-  // 查询所有流程模型
-  const list = await ModelApi.getModelList(queryParams.name)
-  // 按照 categoryName 分组
-  const groupedData = groupBy(list, 'categoryName')
-  Object.keys(groupedData).forEach((key) => {
-    const category = categoryGroup.value.find((item: any) => item.name === key)
-    if (category) {
-      category.modelList = groupedData[key]
-    }
-  })
-}
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   getList()
@@ -157,10 +137,10 @@ const formDetailPreview = ref({
 /** 右上角设置按钮 */
 const handleCommand = (command: string) => {
   switch (command) {
-    case 'handleAddCategory':
-      handleAddCategory()
+    case 'handleCategoryAdd':
+      handleCategoryAdd()
       break
-    case 'handleSort':
+    case 'handleCategorySort':
       handleCategorySort()
       break
     default:
@@ -170,7 +150,7 @@ const handleCommand = (command: string) => {
 
 /** 新建分类 */
 const categoryFormRef = ref()
-const handleAddCategory = () => {
+const handleCategoryAdd = () => {
   categoryFormRef.value.open('create')
 }
 
@@ -203,8 +183,15 @@ const handleCategorySortSubmit = async () => {
 const getList = async () => {
   loading.value = true
   try {
-    await getAllCategory()
-    await getAllModel()
+    // 查询模型 + 分裂的列表
+    const modelList = await ModelApi.getModelList(queryParams.name)
+    const categoryList = await CategoryApi.getCategorySimpleList()
+    // 按照 category 聚合
+    // 注意：必须一次性赋值给 categoryGroup，否则每次操作后，列表会重新渲染，滚动条的位置会偏离！！！
+    categoryGroup.value = categoryList.map((category: any) => ({
+      ...category,
+      modelList: modelList.filter((model: any) => model.categoryName == category.name)
+    }))
   } finally {
     loading.value = false
   }

From 21fc3fd7e6a75842d2458ecde213eeb4101228e0 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sat, 2 Nov 2024 22:30:05 +0800
Subject: [PATCH 063/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E3=80=91=E5=87=8F=E7=AD=BE=E5=8A=9F=E8=83=BD=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/nodes-config/CopyTaskNodeConfig.vue   |  4 +-
 .../detail/ProcessInstanceOperationButton.vue | 96 ++++++++++++++++---
 .../detail/ProcessInstanceTimeline.vue        |  2 +-
 3 files changed, 84 insertions(+), 18 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index af2d4989..c3006afc 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -261,9 +261,7 @@ const configForm = tempConfigForm as Ref<CopyTaskFormType>
 // 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
   return CANDIDATE_STRATEGY.filter(
-    (item) =>
-      item.value !== CandidateStrategy.START_USER_SELECT &&
-      item.value !== CandidateStrategy.START_USER
+    (item) => item.value !== CandidateStrategy.START_USER
   )
 })
 // 改变抄送人设置策略
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index d387b78a..cfa730f5 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -331,13 +331,57 @@
     </el-popover>
 
     <!-- 【减签】按钮 -->
-    <div
-      @click="openChildrenTask()"
-      class="hover-bg-gray-100 rounded-xl p-6px"
+    <el-popover
+      :visible="popOverVisible.deleteSign"
+      placement="top-start"
+      :width="420"
+      trigger="click"
       v-if="runningTask?.children.length > 0"
     >
-      <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
-    </div>
+      <template #reference>
+        <div @click="openPopover('deleteSign')" class="hover-bg-gray-100 rounded-xl p-6px">
+          <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
+        </div>
+      </template>
+
+      <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
+        <el-form
+          label-position="top"
+          class="mb-auto"
+          ref="formRef"
+          :model="genericForm"
+          :rules="genericRule"
+          label-width="100px"
+        >
+          <el-form-item label="减签人员" prop="deleteSignTaskId">
+            <el-select v-model="genericForm.deleteSignTaskId" clearable style="width: 100%">
+              <el-option
+                v-for="item in runningTask.children"
+                :key="item.id"
+                :label="getDeleteSignUserLabel(item)"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item label="审批意见" prop="reason">
+            <el-input
+              v-model="genericForm.reason"
+              clearable
+              placeholder="请输入审批意见"
+              type="textarea"
+              :rows="3"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button :disabled="formLoading" type="primary" @click="handlerDeleteSign()">
+              减签
+            </el-button>
+            <el-button @click="popOverVisible.deleteSign = false"> 取消 </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-popover>
 
     <!-- 【退回】按钮 -->
     <el-popover
@@ -446,13 +490,11 @@
     >
       <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
     </div>
-    <!-- 弹窗：子任务  -->
-    <TaskSignList ref="taskSignListRef" @success="reload" />
+    
   </div>
 </template>
 <script lang="ts" setup>
 import { useUserStoreWithOut } from '@/store/modules/user'
-import TaskSignList from './dialog/TaskSignList.vue'
 import { setConfAndFields2 } from '@/utils/formCreate'
 import * as TaskApi from '@/api/bpm/task'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
@@ -486,7 +528,8 @@ const popOverVisible = ref({
   addSign: false,
   return: false,
   copy: false,
-  cancel: false
+  cancel: false,
+  deleteSign: false
 }) // 气泡卡是否展示
 const returnList = ref([] as any) // 退回节点
 
@@ -504,6 +547,7 @@ const genericRule = reactive({
   assigneeUserId: [{ required: true, message: '新审批人不能为空', trigger: 'change' }],
   delegateUserId: [{ required: true, message: '接收人不能为空', trigger: 'change' }],
   addSignUserIds: [{ required: true, message: '加签处理人不能为空', trigger: 'change' }],
+  deleteSignTaskId: [{ required: true, message: '减签人员不能为空', trigger: 'change' }],
   targetTaskDefinitionKey: [{ required: true, message: '退回节点不能为空', trigger: 'change' }]
 }) // 表单校验规则
 
@@ -742,12 +786,36 @@ const handleReCreate = async () => {
   })
 }
 
-/** 子任务 */
-const taskSignListRef = ref()
-const openChildrenTask = () => {
-  taskSignListRef.value.open(runningTask.value)
+/** 获取减签人员标签 */
+const getDeleteSignUserLabel =  (task:any) : string => {
+  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName
+  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname
+  return  `${nickname} ( 所属部门：${deptName} )`;
+}
+/** 处理减签 */
+const handlerDeleteSign = async () => {
+  formLoading.value = true
+  try {
+    const deleteFormRef = proxy.$refs['formRef']
+    // 1.1 校验表单
+    const elForm = unref(deleteFormRef)
+    if (!elForm) return
+    const valid = await elForm.validate()
+    if (!valid) return
+    // 1.2 提交减签
+    const data = {
+      id: genericForm.value.deleteSignTaskId,
+      reason: genericForm.value.reason,
+    }
+    await TaskApi.signDeleteTask(data)
+    message.success('减签成功')
+    popOverVisible.value.deleteSign = false
+    // 2 加载最新数据
+    reload()
+  } finally {
+    formLoading.value = false
+  }
 }
-
 /** 重新加载数据 */
 const reload = () => {
   emit('success')
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 8415a2b1..9df395f6 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -41,7 +41,7 @@
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
             <div class="flex flex-col pr-2 gap2">
               <div
-                class="position-relative flex flex-wrap gap2"
+                class="position-relative pt-2 flex flex-wrap gap2"
                 v-if="task.assigneeUser || task.ownerUser"
               >
                 <!-- 信息：头像昵称 -->

From 13272c22938c7c7aac1303fff3fb890f404e97d1 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 3 Nov 2024 20:12:49 +0800
Subject: [PATCH 064/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=20Simple=20=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E7=BC=A9=E5=B0=8F=E7=95=99=E7=99=BD=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/SimpleProcessDesigner.vue             |   2 +-
 .../src/SimpleProcessModel.vue                |   9 +-
 .../theme/simple-process-designer.scss        | 993 +++++++++---------
 3 files changed, 502 insertions(+), 502 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
index bfe3e501..6b5ff997 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessDesigner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading">
+  <div v-loading="loading" class="overflow-auto">
     <SimpleProcessModel
       v-if="processNodeTree"
       :flow-node="processNodeTree"
diff --git a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
index a14203e4..3a18227a 100644
--- a/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
+++ b/src/components/SimpleProcessDesignerV2/src/SimpleProcessModel.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="simple-process-model-container position-relative"
-    :style="`transform: scale(${scaleValue / 100});`"
-  >
+  <div class="simple-process-model-container position-relative">
     <div class="position-absolute top-0px right-0px bg-#fff">
       <el-row type="flex" justify="end">
         <el-button-group key="scale-control" size="default">
@@ -22,7 +19,9 @@
         >
       </el-row>
     </div>
-    <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+    <div class="simple-process-model" :style="`transform: scale(${scaleValue / 100});`">
+      <ProcessNodeTree v-if="processNodeTree" v-model:flow-node="processNodeTree" />
+    </div>
   </div>
   <Dialog v-model="errorDialogVisible" title="保存失败" width="400" :fullscreen="false">
     <div class="mb-2">以下节点内容不完善，请修改后保存</div>
diff --git a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
index 91cf42ec..516756e2 100644
--- a/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
+++ b/src/components/SimpleProcessDesignerV2/theme/simple-process-designer.scss
@@ -1,4 +1,3 @@
-
 // 配置节点头部
 .config-header {
   display: flex;
@@ -172,496 +171,52 @@
 // Simple 流程模型样式
 .simple-process-model-container {
   height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding-top: 16px;
+  padding-top: 32px;
   background-color: #fafafa;
-  transform-origin: 50% 0 0;
-  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;
-  // 节点容器 定义节点宽度
-  .node-container {
-    width: 200px;
-  }
-  // 节点
-  .node-box {
-    position: relative;
-    display: flex;
-    min-height: 70px;
-    padding: 5px 10px 8px;
-    cursor: pointer;
-    background-color: #fff;
-    flex-direction: column;
-    border: 2px solid transparent;
-    border-radius: 8px;
-    box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
-    transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
-
-    &.status-pass {
-      background-color: #a9da90;
-      border-color: #67c23a;
-    }
-
-    &.status-pass:hover {
-      border-color: #67c23a;
-    }
-
-    &.status-running {
-      background-color: #e7f0fe;
-      border-color: #5a9cf8;
-    }
-
-    &.status-running:hover {
-      border-color: #5a9cf8;
-    }
-
-    &.status-reject {
-      background-color: #f6e5e5;
-      border-color: #e47470;
-    }
-
-    &.status-reject:hover {
-      border-color: #e47470;
-    }
-
-    &:hover {
-      border-color: #0089ff;
-
-      .node-toolbar {
-        opacity: 1;
-      }
-
-      .branch-node-move {
-        display: flex;
-      }
-    }
-
-    // 普通节点标题
-    .node-title-container {
-      display: flex;
-      padding: 4px;
-      cursor: pointer;
-      border-radius: 4px 4px 0 0;
-      align-items: center;
-
-      .node-title-icon {
-        display: flex;
-        align-items: center;
-
-        &.user-task {
-          color: #ff943e;
-        }
-
-        &.copy-task {
-          color: #3296fa;
-        }
-
-        &.start-user {
-          color: #676565;
-        }
-      }
-
-      .node-title {
-        margin-left: 4px;
-        overflow: hidden;
-        font-size: 14px;
-        font-weight: 600;
-        line-height: 18px;
-        color: #1f1f1f;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:hover {
-          border-bottom: 1px dashed #f60;
-        }
-      }
-    }
-
-    // 条件节点标题
-    .branch-node-title-container {
-      display: flex;
-      padding: 4px 0;
-      cursor: pointer;
-      border-radius: 4px 4px 0 0;
-      align-items: center;
-      justify-content: space-between;
-
-      .input-max-width {
-        max-width: 115px !important;
-      }
-
-      .branch-title {
-        overflow: hidden;
-        font-size: 13px;
-        font-weight: 600;
-        color: #f60;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        &:hover {
-          border-bottom: 1px dashed #000;
-        }
-      }
-
-      .branch-priority {
-        min-width: 50px;
-        font-size: 12px;
-      }
-    }
-
-    .node-content {
-      display: flex;
-      min-height: 32px;
-      padding: 4px 8px;
-      margin-top: 4px;
-      line-height: 32px;
-      justify-content: space-between;
-      align-items: center;
-      color: #111f2c;
-      background: rgb(0 0 0 / 3%);
-      border-radius: 4px;
-
-      .node-text {
-        display: -webkit-box;
-        overflow: hidden;
-        font-size: 14px;
-        line-height: 24px;
-        text-overflow: ellipsis;
-        word-break: break-all;
-        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    //条件节点内容
-    .branch-node-content {
-      display: flex;
-      min-height: 32px;
-      padding: 4px 0;
-      margin-top: 4px;
-      line-height: 32px;
-      align-items: center;
-      color: #111f2c;
-      border-radius: 4px;
-
-      .branch-node-text {
-        overflow: hidden;
-        font-size: 12px;
-        line-height: 24px;
-        text-overflow: ellipsis;
-        word-break: break-all;
-        -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
-        -webkit-box-orient: vertical;
-      }
-    }
-
-    // 节点操作 ：删除
-    .node-toolbar {
-      position: absolute;
-      top: -20px;
-      right: 0;
-      display: flex;
-      opacity: 0;
-
-      .toolbar-icon {
-        text-align: center;
-        vertical-align: middle;
-      }
-    }
-
-    // 条件节点左右移动
-    .branch-node-move {
-      position: absolute;
-      display: none;
-      width: 10px;
-      height: 100%;
-      cursor: pointer;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .move-node-left {
-      top: 0;
-      left: -2px;
-      background: rgb(126 134 142 / 8%);
-      border-bottom-left-radius: 8px;
-      border-top-left-radius: 8px;
-    }
-
-    .move-node-right {
-      top: 0;
-      right: -2px;
-      background: rgb(126 134 142 / 8%);
-      border-top-right-radius: 6px;
-      border-bottom-right-radius: 6px;
-    }
-  }
-
-  .node-config-error {
-    border-color: #ff5219 !important;
-  }
-  // 普通节点包装
-  .node-wrapper {
+  .simple-process-model {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-  }
-  // 节点连线处理
-  .node-handler-wrapper {
-    position: relative;
-    display: flex;
-    height: 70px;
-    align-items: center;
-    user-select: none;
-    justify-content: center;
-    flex-direction: column;
-
-    &::before {
-      position: absolute;
-      top: 0;
-      z-index: 0;
-      width: 2px;
-      height: 100%;
-      margin: auto;
-      background-color: #dedede;
-      content: '';
+    transform-origin: 50% 0 0;
+    overflow: auto;
+    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;
+    // 节点容器 定义节点宽度
+    .node-container {
+      width: 200px;
     }
-
-    .node-handler {
-      .add-icon {
-        position: relative;
-        top: -5px;
-        display: flex;
-        width: 25px;
-        height: 25px;
-        color: #fff;
-        cursor: pointer;
-        background-color: #0089ff;
-        border-radius: 50%;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-          transform: scale(1.1);
-        }
-      }
-    }
-
-    .node-handler-arrow {
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      display: flex;
-      transform: translateX(-50%);
-    }
-  }
-
-  // 条件节点包装
-  .branch-node-wrapper {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    margin-top: 16px;
-
-    .branch-node-container {
+    // 节点
+    .node-box {
       position: relative;
       display: flex;
-
-      &::before {
-        position: absolute;
-        left: 50%;
-        width: 4px;
-        height: 100%;
-        background-color: #fafafa;
-        content: '';
-        transform: translate(-50%);
-      }
-
-      .branch-node-add {
-        position: absolute;
-        top: -18px;
-        left: 50%;
-        z-index: 1;
-        height: 36px;
-        padding: 0 10px;
-        font-size: 12px;
-        line-height: 36px;
-        border: 2px solid #dedede;
-        border-radius: 18px;
-        transform: translateX(-50%);
-        transform-origin: center center;
-      }
-
-      .branch-node-readonly {
-        position: absolute;
-        top: -18px;
-        left: 50%;
-        z-index: 1;
-        display: flex;
-        width: 36px;
-        height: 36px;
-        background-color: #fff;
-        border: 2px solid #dedede;
-        border-radius: 50%;
-        transform: translateX(-50%);
-        align-items: center;
-        justify-content: center;
-        transform-origin: center center;
-
-        &.status-pass {
-          background-color: #e9f4e2;
-          border-color: #6bb63c;
-        }
-
-        &.status-pass:hover {
-          border-color: #6bb63c;
-        }
-
-        .icon-size {
-          font-size: 22px;
-          &.condition {
-            color: #67c23a;
-          }
-          &.parallel {
-            color: #626aef;
-          }
-          &.inclusive {
-            color: #345da2;
-          }
-        }
-      }
-
-      .branch-node-item {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        min-width: 280px;
-        padding: 40px 40px 0;
-        background: transparent;
-        border-top: 2px solid #dedede;
-        border-bottom: 2px solid #dedede;
-
-        &::before {
-          position: absolute;
-          width: 2px;
-          height: 100%;
-          margin: auto;
-          inset: 0;
-          background-color: #dedede;
-          content: '';
-        }
-      }
-      // 覆盖条件节点第一个节点左上角的线
-      .branch-line-first-top {
-        position: absolute;
-        top: -5px;
-        left: -1px;
-        width: 50%;
-        height: 7px;
-        background-color: #fafafa;
-        content: '';
-      }
-      // 覆盖条件节点第一个节点左下角的线
-      .branch-line-first-bottom {
-        position: absolute;
-        bottom: -5px;
-        left: -1px;
-        width: 50%;
-        height: 7px;
-        background-color: #fafafa;
-        content: '';
-      }
-      // 覆盖条件节点最后一个节点右上角的线
-      .branch-line-last-top {
-        position: absolute;
-        top: -5px;
-        right: -1px;
-        width: 50%;
-        height: 7px;
-        background-color: #fafafa;
-        content: '';
-      }
-      // 覆盖条件节点最后一个节点右下角的线
-      .branch-line-last-bottom {
-        position: absolute;
-        right: -1px;
-        bottom: -5px;
-        width: 50%;
-        height: 7px;
-        background-color: #fafafa;
-        content: '';
-      }
-    }
-  }
-
-  .node-fixed-name {
-    display: inline-block;
-    width: auto;
-    padding: 0 4px;
-    overflow: hidden;
-    text-align: center;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-  // 开始节点包装
-  .start-node-wrapper {
-    position: relative;
-    margin-top: 16px;
-
-    .start-node-container {
-      display: flex;
+      min-height: 70px;
+      padding: 5px 10px 8px;
+      cursor: pointer;
+      background-color: #fff;
       flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      .start-node-box {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 90px;
-        height: 36px;
-        padding: 3px 4px;
-        color: #212121;
-        cursor: pointer;
-        background: #fafafa;
-        border-radius: 30px;
-        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
-        box-sizing: border-box;
-      }
-    }
-  }
-
-  // 结束节点包装
-  .end-node-wrapper {
-    margin-bottom: 16px;
-
-    .end-node-box {
-      display: flex;
-      width: 80px;
-      height: 36px;
-      color: #212121;
-      border: 2px solid #fafafa;
-      border-radius: 30px;
-      box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
-      box-sizing: border-box;
-      justify-content: center;
-      align-items: center;
+      border: 2px solid transparent;
+      border-radius: 8px;
+      box-shadow: 0 1px 4px 0 rgb(10 30 65 / 16%);
+      transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
 
       &.status-pass {
         background-color: #a9da90;
-        border-color: #6bb63c;
+        border-color: #67c23a;
       }
 
       &.status-pass:hover {
-        border-color: #6bb63c;
+        border-color: #67c23a;
+      }
+
+      &.status-running {
+        background-color: #e7f0fe;
+        border-color: #5a9cf8;
+      }
+
+      &.status-running:hover {
+        border-color: #5a9cf8;
       }
 
       &.status-reject {
@@ -673,32 +228,478 @@
         border-color: #e47470;
       }
 
-      &.status-cancel {
-        background-color: #eaeaeb;
-        border-color: #919398;
+      &:hover {
+        border-color: #0089ff;
+
+        .node-toolbar {
+          opacity: 1;
+        }
+
+        .branch-node-move {
+          display: flex;
+        }
       }
 
-      &.status-cancel:hover {
-        border-color: #919398;
+      // 普通节点标题
+      .node-title-container {
+        display: flex;
+        padding: 4px;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+
+        .node-title-icon {
+          display: flex;
+          align-items: center;
+
+          &.user-task {
+            color: #ff943e;
+          }
+
+          &.copy-task {
+            color: #3296fa;
+          }
+
+          &.start-user {
+            color: #676565;
+          }
+        }
+
+        .node-title {
+          margin-left: 4px;
+          overflow: hidden;
+          font-size: 14px;
+          font-weight: 600;
+          line-height: 18px;
+          color: #1f1f1f;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #f60;
+          }
+        }
+      }
+
+      // 条件节点标题
+      .branch-node-title-container {
+        display: flex;
+        padding: 4px 0;
+        cursor: pointer;
+        border-radius: 4px 4px 0 0;
+        align-items: center;
+        justify-content: space-between;
+
+        .input-max-width {
+          max-width: 115px !important;
+        }
+
+        .branch-title {
+          overflow: hidden;
+          font-size: 13px;
+          font-weight: 600;
+          color: #f60;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          &:hover {
+            border-bottom: 1px dashed #000;
+          }
+        }
+
+        .branch-priority {
+          min-width: 50px;
+          font-size: 12px;
+        }
+      }
+
+      .node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 8px;
+        margin-top: 4px;
+        line-height: 32px;
+        justify-content: space-between;
+        align-items: center;
+        color: #111f2c;
+        background: rgb(0 0 0 / 3%);
+        border-radius: 4px;
+
+        .node-text {
+          display: -webkit-box;
+          overflow: hidden;
+          font-size: 14px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      //条件节点内容
+      .branch-node-content {
+        display: flex;
+        min-height: 32px;
+        padding: 4px 0;
+        margin-top: 4px;
+        line-height: 32px;
+        align-items: center;
+        color: #111f2c;
+        border-radius: 4px;
+
+        .branch-node-text {
+          overflow: hidden;
+          font-size: 12px;
+          line-height: 24px;
+          text-overflow: ellipsis;
+          word-break: break-all;
+          -webkit-line-clamp: 2; /* 这将限制文本显示为两行 */
+          -webkit-box-orient: vertical;
+        }
+      }
+
+      // 节点操作 ：删除
+      .node-toolbar {
+        position: absolute;
+        top: -20px;
+        right: 0;
+        display: flex;
+        opacity: 0;
+
+        .toolbar-icon {
+          text-align: center;
+          vertical-align: middle;
+        }
+      }
+
+      // 条件节点左右移动
+      .branch-node-move {
+        position: absolute;
+        display: none;
+        width: 10px;
+        height: 100%;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .move-node-left {
+        top: 0;
+        left: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-bottom-left-radius: 8px;
+        border-top-left-radius: 8px;
+      }
+
+      .move-node-right {
+        top: 0;
+        right: -2px;
+        background: rgb(126 134 142 / 8%);
+        border-top-right-radius: 6px;
+        border-bottom-right-radius: 6px;
       }
     }
-  }
 
-  // 可编辑的 title 输入框
-  .editable-title-input {
-    height: 20px;
-    max-width: 145px;
-    margin-left: 4px;
-    font-size: 12px;
-    line-height: 20px;
-    border: 1px solid #d9d9d9;
-    border-radius: 4px;
-    transition: all 0.3s;
+    .node-config-error {
+      border-color: #ff5219 !important;
+    }
+    // 普通节点包装
+    .node-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+    // 节点连线处理
+    .node-handler-wrapper {
+      position: relative;
+      display: flex;
+      height: 70px;
+      align-items: center;
+      user-select: none;
+      justify-content: center;
+      flex-direction: column;
 
-    &:focus {
-      border-color: #40a9ff;
-      outline: 0;
-      box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      &::before {
+        position: absolute;
+        top: 0;
+        z-index: 0;
+        width: 2px;
+        height: 100%;
+        margin: auto;
+        background-color: #dedede;
+        content: '';
+      }
+
+      .node-handler {
+        .add-icon {
+          position: relative;
+          top: -5px;
+          display: flex;
+          width: 25px;
+          height: 25px;
+          color: #fff;
+          cursor: pointer;
+          background-color: #0089ff;
+          border-radius: 50%;
+          align-items: center;
+          justify-content: center;
+
+          &:hover {
+            transform: scale(1.1);
+          }
+        }
+      }
+
+      .node-handler-arrow {
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        display: flex;
+        transform: translateX(-50%);
+      }
+    }
+
+    // 条件节点包装
+    .branch-node-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      margin-top: 16px;
+
+      .branch-node-container {
+        position: relative;
+        display: flex;
+
+        &::before {
+          position: absolute;
+          left: 50%;
+          width: 4px;
+          height: 100%;
+          background-color: #fafafa;
+          content: '';
+          transform: translate(-50%);
+        }
+
+        .branch-node-add {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          height: 36px;
+          padding: 0 10px;
+          font-size: 12px;
+          line-height: 36px;
+          border: 2px solid #dedede;
+          border-radius: 18px;
+          transform: translateX(-50%);
+          transform-origin: center center;
+        }
+
+        .branch-node-readonly {
+          position: absolute;
+          top: -18px;
+          left: 50%;
+          z-index: 1;
+          display: flex;
+          width: 36px;
+          height: 36px;
+          background-color: #fff;
+          border: 2px solid #dedede;
+          border-radius: 50%;
+          transform: translateX(-50%);
+          align-items: center;
+          justify-content: center;
+          transform-origin: center center;
+
+          &.status-pass {
+            background-color: #e9f4e2;
+            border-color: #6bb63c;
+          }
+
+          &.status-pass:hover {
+            border-color: #6bb63c;
+          }
+
+          .icon-size {
+            font-size: 22px;
+            &.condition {
+              color: #67c23a;
+            }
+            &.parallel {
+              color: #626aef;
+            }
+            &.inclusive {
+              color: #345da2;
+            }
+          }
+        }
+
+        .branch-node-item {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          min-width: 280px;
+          padding: 40px 40px 0;
+          background: transparent;
+          border-top: 2px solid #dedede;
+          border-bottom: 2px solid #dedede;
+
+          &::before {
+            position: absolute;
+            width: 2px;
+            height: 100%;
+            margin: auto;
+            inset: 0;
+            background-color: #dedede;
+            content: '';
+          }
+        }
+        // 覆盖条件节点第一个节点左上角的线
+        .branch-line-first-top {
+          position: absolute;
+          top: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点第一个节点左下角的线
+        .branch-line-first-bottom {
+          position: absolute;
+          bottom: -5px;
+          left: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右上角的线
+        .branch-line-last-top {
+          position: absolute;
+          top: -5px;
+          right: -1px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+        // 覆盖条件节点最后一个节点右下角的线
+        .branch-line-last-bottom {
+          position: absolute;
+          right: -1px;
+          bottom: -5px;
+          width: 50%;
+          height: 7px;
+          background-color: #fafafa;
+          content: '';
+        }
+      }
+    }
+
+    .node-fixed-name {
+      display: inline-block;
+      width: auto;
+      padding: 0 4px;
+      overflow: hidden;
+      text-align: center;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    // 开始节点包装
+    .start-node-wrapper {
+      position: relative;
+      margin-top: 16px;
+
+      .start-node-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .start-node-box {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 90px;
+          height: 36px;
+          padding: 3px 4px;
+          color: #212121;
+          cursor: pointer;
+          background: #fafafa;
+          border-radius: 30px;
+          box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+          box-sizing: border-box;
+        }
+      }
+    }
+
+    // 结束节点包装
+    .end-node-wrapper {
+      margin-bottom: 16px;
+
+      .end-node-box {
+        display: flex;
+        width: 80px;
+        height: 36px;
+        color: #212121;
+        border: 2px solid #fafafa;
+        border-radius: 30px;
+        box-shadow: 0 1px 5px 0 rgb(10 30 65 / 8%);
+        box-sizing: border-box;
+        justify-content: center;
+        align-items: center;
+
+        &.status-pass {
+          background-color: #a9da90;
+          border-color: #6bb63c;
+        }
+
+        &.status-pass:hover {
+          border-color: #6bb63c;
+        }
+
+        &.status-reject {
+          background-color: #f6e5e5;
+          border-color: #e47470;
+        }
+
+        &.status-reject:hover {
+          border-color: #e47470;
+        }
+
+        &.status-cancel {
+          background-color: #eaeaeb;
+          border-color: #919398;
+        }
+
+        &.status-cancel:hover {
+          border-color: #919398;
+        }
+      }
+    }
+
+    // 可编辑的 title 输入框
+    .editable-title-input {
+      height: 20px;
+      max-width: 145px;
+      margin-left: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      border: 1px solid #d9d9d9;
+      border-radius: 4px;
+      transition: all 0.3s;
+
+      &:focus {
+        border-color: #40a9ff;
+        outline: 0;
+        box-shadow: 0 0 0 2px rgb(24 144 255 / 20%);
+      }
     }
   }
 }

From 65f0b2f8abac326ada7b815006abc738a428c2d9 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 3 Nov 2024 22:06:35 +0800
Subject: [PATCH 065/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=E3=80=91=20=E4=BF=AE=E5=A4=8D=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=20=E8=AF=B7=E6=B1=82?=
 =?UTF-8?q?=E6=A8=A1=E5=9E=8B=E8=A7=86=E5=9B=BE=E6=8E=A5=E5=8F=A3=E4=B8=A4?=
 =?UTF-8?q?=E6=AC=A1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceBpmnViewer.vue      | 19 +++---
 .../detail/ProcessInstanceSimpleViewer.vue    | 62 +++++++++++++------
 .../bpm/processInstance/detail/index.vue      | 23 ++++++-
 3 files changed, 72 insertions(+), 32 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 7ffe11b8..7d0b9593 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -6,31 +6,28 @@
 <script lang="ts" setup>
 import { propTypes } from '@/utils/propTypes'
 import { MyProcessViewer } from '@/components/bpmnProcessDesigner/package'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'BpmProcessInstanceBpmnViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  id: propTypes.string, // 流程实例的编号
-  bpmnXml: propTypes.string // BPMN XML
+  bpmnXml: propTypes.string, // BPMN XML
+  modelView: propTypes.object
 })
 
 const view = ref({
   bpmnXml: ''
 }) // BPMN 流程图数据
 
+
 /** 只有 loading 完成时，才去加载流程列表 */
 watch(
-  () => props.loading,
-  async (value) => {
-    // 重置
-    view.value = {
-      bpmnXml: ''
-    }
+  () => props.modelView,
+  async (newModelView) => {
     // 加载最新
-    if (value && props.id) {
-      view.value = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+    if (newModelView) {
+      //@ts-ignore
+      view.value = newModelView
     }
   }
 )
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 0e225106..6fcad0ca 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -8,45 +8,71 @@ import { propTypes } from '@/utils/propTypes'
 import { TaskStatusEnum } from '@/api/bpm/task'
 import { SimpleFlowNode, NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
 import { SimpleProcessViewer } from '@/components/SimpleProcessDesignerV2/src/'
-import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-
 defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  id: propTypes.string // 流程实例的编号
+  modelView: propTypes.object
 })
 const simpleModel = ref()
 // 用户任务
 const tasks = ref([])
 // 流程实例
 const processInstance = ref()
-/** 只有 loading 完成时，才去加载流程列表 */
+// /** 只有 loading 完成时，才去加载流程列表 */
+// watch(
+//   () => props.loading,
+//   async (value) => {
+//     if (value && props.id) {
+//       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+//       if (modelView) {
+//         tasks.value = modelView.tasks
+//         processInstance.value = modelView.processInstance
+//         // 已经拒绝的活动节点编号集合，只包括 UserTask
+//         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
+//         // 进行中的活动节点编号集合， 只包括 UserTask
+//         const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
+//         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+//         const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
+//         // 已经完成的连线节点编号集合，只包括 SequenceFlow
+//         const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
+//         setSimpleModelNodeTaskStatus(
+//           modelView.simpleModel,
+//           modelView.processInstance.status,
+//           rejectedTaskActivityIds,
+//           unfinishedTaskActivityIds,
+//           finishedActivityIds,
+//           finishedSequenceFlowActivityIds
+//         )
+//         simpleModel.value = modelView.simpleModel
+//       }
+//     }
+//   }
+// )
 watch(
-  () => props.loading,
-  async (value) => {
-    if (value && props.id) {
-      const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
-      if (modelView) {
-        tasks.value = modelView.tasks
-        processInstance.value = modelView.processInstance
+  () => props.modelView,
+  async (newModelView) => {
+    if (newModelView) {
+      if (newModelView) {
+        tasks.value = newModelView.tasks
+        processInstance.value = newModelView.processInstance
         // 已经拒绝的活动节点编号集合，只包括 UserTask
-        const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
+        const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
         // 进行中的活动节点编号集合， 只包括 UserTask
-        const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
+        const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-        const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
+        const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
         // 已经完成的连线节点编号集合，只包括 SequenceFlow
-        const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
+        const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
         setSimpleModelNodeTaskStatus(
-          modelView.simpleModel,
-          modelView.processInstance.status,
+          newModelView.simpleModel,
+          newModelView.processInstance.status,
           rejectedTaskActivityIds,
           unfinishedTaskActivityIds,
           finishedActivityIds,
           finishedSequenceFlowActivityIds
         )
-        simpleModel.value = modelView.simpleModel
+        simpleModel.value = newModelView.simpleModel
       }
     }
   }
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index dc9517d6..26141f53 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -79,15 +79,15 @@
                 v-show="
                   processDefinition.modelType && processDefinition.modelType === BpmModelType.SIMPLE
                 "
-                :id="`${id}`"
                 :loading="processInstanceLoading"
+                :model-view="processModelView"
               />
               <ProcessInstanceBpmnViewer
                 v-show="
                   processDefinition.modelType && processDefinition.modelType === BpmModelType.BPMN
                 "
-                :id="`${id}`"
                 :loading="processInstanceLoading"
+                :model-view="processModelView"
               />
             </div>
           </el-tab-pane>
@@ -153,7 +153,7 @@ const message = useMessage() // 消息弹窗
 const processInstanceLoading = ref(false) // 流程实例的加载中
 const processInstance = ref<any>({}) // 流程实例
 const processDefinition = ref<any>({}) // 流程定义
-
+const processModelView = ref<any>({}) // 流程模型视图
 const operationButtonRef = ref() // 操作按钮组件 ref
 const auditIcons = {
   1: audit1,
@@ -173,6 +173,8 @@ const detailForm = ref({
 /** 获得详情 */
 const getDetail = () => {
   getApprovalDetail()
+
+  getProcessModelView()
 }
 
 /** 加载流程实例 */
@@ -238,6 +240,21 @@ const getApprovalDetail = async () => {
   }
 }
 
+/** 获取流程模型视图*/
+const getProcessModelView = async () => {
+
+  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
+    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
+    processModelView.value = {
+      bpmnXml: ''
+    }
+  }
+  const data = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
+  if (data) {
+    processModelView.value = data
+  }
+}
+
 // 审批节点信息
 const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
 /**

From 55da358336433ce971f007e9ae1e5fa8188ccea8 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 3 Nov 2024 23:12:13 +0800
Subject: [PATCH 066/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E3=80=91=E5=8F=91=E8=B5=B7=E6=B5=81=E7=A8=8B=E6=97=B6?=
 =?UTF-8?q?=EF=BC=8C=E5=A6=82=E6=9E=9C=E6=98=AF=20Simple=20=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E5=B1=95=E7=A4=BA=20Simple=20=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 17 +++-
 .../detail/ProcessInstanceSimpleViewer.vue    | 91 ++++++++-----------
 2 files changed, 52 insertions(+), 56 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index df3705ac..203ec25b 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -71,8 +71,17 @@
           <!-- 流程图 -->
           <el-tab-pane label="流程图" name="diagram">
             <div class="form-scroll-area">
-              <!-- 流程图预览 -->
-              <ProcessInstanceBpmnViewer :bpmn-xml="bpmnXML" />
+              <!-- BPMN 流程图预览 -->
+              <ProcessInstanceBpmnViewer 
+                :bpmn-xml="bpmnXML" 
+                v-if="BpmModelType.BPMN === selectProcessDefinition.modelType" 
+              />
+
+              <!-- Simple 流程图预览 -->
+              <ProcessInstanceSimpleViewer 
+                :simple-json="simpleJson" 
+                v-if="BpmModelType.SIMPLE === selectProcessDefinition.modelType" 
+              />
             </div>
           </el-tab-pane>
         </el-tabs>
@@ -98,7 +107,9 @@
 </template>
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
+import { BpmModelType } from '@/utils/constants'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
+import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
@@ -127,6 +138,7 @@ const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
 const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
+const simpleJson = ref<string|undefined>() // Simple 设计器数据 json 格式
 /** 当前的Tab */
 const activeTab = ref('form')
 const emit = defineEmits(['cancel'])
@@ -162,6 +174,7 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(row.id)
     if (processDefinitionDetail) {
       bpmnXML.value = processDefinitionDetail.bpmnXml
+      simpleJson.value = processDefinitionDetail.simpleModel
       startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
 
       // 设置指定审批人
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 6fcad0ca..22c21d69 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,6 +1,10 @@
 <template>
   <div v-loading="loading" class="mb-20px">
-      <SimpleProcessViewer :flow-node="simpleModel" :tasks="tasks" :process-instance="processInstance"/>
+    <SimpleProcessViewer
+      :flow-node="simpleModel"
+      :tasks="tasks"
+      :process-instance="processInstance"
+    />
   </div>
 </template>
 <script lang="ts" setup>
@@ -12,72 +16,51 @@ defineOptions({ name: 'BpmProcessInstanceSimpleViewer' })
 
 const props = defineProps({
   loading: propTypes.bool.def(false), // 是否加载中
-  modelView: propTypes.object
+  modelView: propTypes.object,
+  simpleJson: propTypes.string // Simple 模型结构数据 (json 格式)
 })
 const simpleModel = ref()
 // 用户任务
 const tasks = ref([])
 // 流程实例
 const processInstance = ref()
-// /** 只有 loading 完成时，才去加载流程列表 */
-// watch(
-//   () => props.loading,
-//   async (value) => {
-//     if (value && props.id) {
-//       const modelView = await ProcessInstanceApi.getProcessInstanceBpmnModelView(props.id)
-//       if (modelView) {
-//         tasks.value = modelView.tasks
-//         processInstance.value = modelView.processInstance
-//         // 已经拒绝的活动节点编号集合，只包括 UserTask
-//         const rejectedTaskActivityIds: string[] = modelView.rejectedTaskActivityIds
-//         // 进行中的活动节点编号集合， 只包括 UserTask
-//         const unfinishedTaskActivityIds: string[] = modelView.unfinishedTaskActivityIds
-//         // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-//         const finishedActivityIds: string[] = modelView.finishedTaskActivityIds
-//         // 已经完成的连线节点编号集合，只包括 SequenceFlow
-//         const finishedSequenceFlowActivityIds: string[] = modelView.finishedSequenceFlowActivityIds
-//         setSimpleModelNodeTaskStatus(
-//           modelView.simpleModel,
-//           modelView.processInstance.status,
-//           rejectedTaskActivityIds,
-//           unfinishedTaskActivityIds,
-//           finishedActivityIds,
-//           finishedSequenceFlowActivityIds
-//         )
-//         simpleModel.value = modelView.simpleModel
-//       }
-//     }
-//   }
-// )
+
+/** 监控模型视图 包括任务列表、进行中的活动节点编号等 */
 watch(
   () => props.modelView,
   async (newModelView) => {
     if (newModelView) {
-      if (newModelView) {
-        tasks.value = newModelView.tasks
-        processInstance.value = newModelView.processInstance
-        // 已经拒绝的活动节点编号集合，只包括 UserTask
-        const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
-        // 进行中的活动节点编号集合， 只包括 UserTask
-        const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
-        // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
-        const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
-        // 已经完成的连线节点编号集合，只包括 SequenceFlow
-        const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
-        setSimpleModelNodeTaskStatus(
-          newModelView.simpleModel,
-          newModelView.processInstance.status,
-          rejectedTaskActivityIds,
-          unfinishedTaskActivityIds,
-          finishedActivityIds,
-          finishedSequenceFlowActivityIds
-        )
-        simpleModel.value = newModelView.simpleModel
-      }
+      tasks.value = newModelView.tasks
+      processInstance.value = newModelView.processInstance
+      // 已经拒绝的活动节点编号集合，只包括 UserTask
+      const rejectedTaskActivityIds: string[] = newModelView.rejectedTaskActivityIds
+      // 进行中的活动节点编号集合， 只包括 UserTask
+      const unfinishedTaskActivityIds: string[] = newModelView.unfinishedTaskActivityIds
+      // 已经完成的活动节点编号集合， 包括 UserTask、Gateway 等
+      const finishedActivityIds: string[] = newModelView.finishedTaskActivityIds
+      // 已经完成的连线节点编号集合，只包括 SequenceFlow
+      const finishedSequenceFlowActivityIds: string[] = newModelView.finishedSequenceFlowActivityIds
+      setSimpleModelNodeTaskStatus(
+        newModelView.simpleModel,
+        newModelView.processInstance.status,
+        rejectedTaskActivityIds,
+        unfinishedTaskActivityIds,
+        finishedActivityIds,
+        finishedSequenceFlowActivityIds
+      )
+      simpleModel.value = newModelView.simpleModel
+    }
+  }
+)
+/** 监控模型结构数据 */
+watch(
+  () => props.simpleJson,
+  async (value) => {
+    if (value) {
+      simpleModel.value = JSON.parse(value)
     }
   }
 )
-
 const setSimpleModelNodeTaskStatus = (
   simpleModel: SimpleFlowNode | undefined,
   processStatus: number,

From 1e39af84d34339bb34a4e2bf12070e0adea0732c Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 5 Nov 2024 13:59:33 +0800
Subject: [PATCH 067/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=88=A0?=
 =?UTF-8?q?=E9=99=A4=E8=80=81=E7=9A=84=E5=8A=A0=E7=AD=BE=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceOperationButton.vue |  16 +--
 .../detail/dialog/TaskSignDeleteForm.vue      |  90 ---------------
 .../detail/dialog/TaskSignList.vue            | 107 ------------------
 3 files changed, 3 insertions(+), 210 deletions(-)
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
 delete mode 100644 src/views/bpm/processInstance/detail/dialog/TaskSignList.vue

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
index cfa730f5..b92be7e4 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceOperationButton.vue
@@ -154,7 +154,6 @@
               :rows="3"
             />
           </el-form-item>
-
           <el-form-item>
             <el-button :disabled="formLoading" type="primary" @click="handleCopy">
               {{ getButtonDisplayName(OperationButtonType.COPY) }}
@@ -207,7 +206,6 @@
               :rows="3"
             />
           </el-form-item>
-
           <el-form-item>
             <el-button :disabled="formLoading" type="primary" @click="handleTransfer()">
               {{ getButtonDisplayName(OperationButtonType.TRANSFER) }}
@@ -232,7 +230,6 @@
           {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
         </div>
       </template>
-
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -252,7 +249,6 @@
               />
             </el-select>
           </el-form-item>
-
           <el-form-item label="审批意见" prop="reason">
             <el-input
               v-model="genericForm.reason"
@@ -262,7 +258,6 @@
               :rows="3"
             />
           </el-form-item>
-
           <el-form-item>
             <el-button :disabled="formLoading" type="primary" @click="handleDelegate()">
               {{ getButtonDisplayName(OperationButtonType.DELEGATE) }}
@@ -287,7 +282,6 @@
           {{ getButtonDisplayName(OperationButtonType.ADD_SIGN) }}
         </div>
       </template>
-
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -307,7 +301,6 @@
               />
             </el-select>
           </el-form-item>
-
           <el-form-item label="审批意见" prop="reason">
             <el-input
               v-model="genericForm.reason"
@@ -343,7 +336,6 @@
           <Icon :size="14" icon="ep:semi-select" />&nbsp; 减签
         </div>
       </template>
-
       <div class="flex flex-col flex-1 pt-20px px-20px" v-loading="formLoading">
         <el-form
           label-position="top"
@@ -363,7 +355,6 @@
               />
             </el-select>
           </el-form-item>
-
           <el-form-item label="审批意见" prop="reason">
             <el-input
               v-model="genericForm.reason"
@@ -490,7 +481,6 @@
     >
       <Icon :size="14" icon="ep:refresh" />&nbsp; 再次提交
     </div>
-    
   </div>
 </template>
 <script lang="ts" setup>
@@ -787,10 +777,10 @@ const handleReCreate = async () => {
 }
 
 /** 获取减签人员标签 */
-const getDeleteSignUserLabel =  (task:any) : string => {
+const getDeleteSignUserLabel = (task: any): string => {
   const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName
   const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname
-  return  `${nickname} ( 所属部门：${deptName} )`;
+  return `${nickname} ( 所属部门：${deptName} )`
 }
 /** 处理减签 */
 const handlerDeleteSign = async () => {
@@ -805,7 +795,7 @@ const handlerDeleteSign = async () => {
     // 1.2 提交减签
     const data = {
       id: genericForm.value.deleteSignTaskId,
-      reason: genericForm.value.reason,
+      reason: genericForm.value.reason
     }
     await TaskApi.signDeleteTask(data)
     message.success('减签成功')
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
deleted file mode 100644
index 33d7ed76..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignDeleteForm.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<template>
-  <Dialog v-model="dialogVisible" title="减签" width="500">
-    <el-form
-      ref="formRef"
-      v-loading="formLoading"
-      :model="formData"
-      :rules="formRules"
-      label-width="110px"
-    >
-      <el-form-item label="减签任务" prop="id">
-        <el-radio-group v-model="formData.id">
-          <el-radio-button v-for="item in childrenTaskList" :key="item.id" :value="item.id">
-            {{ item.name }}
-            ({{ item.assigneeUser?.deptName || item.ownerUser?.deptName }} -
-            {{ item.assigneeUser?.nickname || item.ownerUser?.nickname }})
-          </el-radio-button>
-        </el-radio-group>
-      </el-form-item>
-      <el-form-item label="减签理由" prop="reason">
-        <el-input v-model="formData.reason" clearable placeholder="请输入减签理由" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
-      <el-button @click="dialogVisible = false">取 消</el-button>
-    </template>
-  </Dialog>
-</template>
-<script lang="ts" setup>
-import * as TaskApi from '@/api/bpm/task'
-import { isEmpty } from '@/utils/is'
-
-defineOptions({ name: 'TaskSignDeleteForm' })
-
-const message = useMessage() // 消息弹窗
-const dialogVisible = ref(false) // 弹窗的是否展示
-const formLoading = ref(false) // 表单的加载中
-const formData = ref({
-  id: '',
-  reason: ''
-})
-const formRules = ref({
-  id: [{ required: true, message: '必须选择减签任务', trigger: 'change' }],
-  reason: [{ required: true, message: '减签理由不能为空', trigger: 'blur' }]
-})
-
-const formRef = ref() // 表单 Ref
-const childrenTaskList = ref([])
-/** 打开弹窗 */
-const open = async (id: string) => {
-  childrenTaskList.value = await TaskApi.getChildrenTaskList(id)
-  if (isEmpty(childrenTaskList.value)) {
-    message.warning('当前没有可减签的任务')
-    return false
-  }
-  dialogVisible.value = true
-  resetForm()
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 提交表单 */
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const submitForm = async () => {
-  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
-  // 提交请求
-  formLoading.value = true
-  try {
-    await TaskApi.signDeleteTask(formData.value)
-    message.success('减签成功')
-    dialogVisible.value = false
-    // 发送操作成功的事件
-    emit('success')
-  } finally {
-    formLoading.value = false
-  }
-}
-
-/** 重置表单 */
-const resetForm = () => {
-  formData.value = {
-    id: '',
-    reason: ''
-  }
-  formRef.value?.resetFields()
-}
-// TODO @jason：新界面搞完，可以删除
-</script>
diff --git a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue b/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
deleted file mode 100644
index 57842a5e..00000000
--- a/src/views/bpm/processInstance/detail/dialog/TaskSignList.vue
+++ /dev/null
@@ -1,107 +0,0 @@
-<template>
-  <el-drawer v-model="drawerVisible" title="子任务" size="880px">
-    <!-- 当前任务 -->
-    <template #header>
-      <h4>【{{ parentTask.name }} 】审批人：{{ parentTask?.ownerUser?.nickname }}</h4>
-      <el-button
-        style="margin-left: 5px"
-        v-if="isSignDeleteButtonVisible(parentTask)"
-        type="danger"
-        plain
-        @click="handleSignDelete(parentTask)"
-      >
-        <Icon icon="ep:remove" /> 减签
-      </el-button>
-    </template>
-    <!-- 子任务列表 -->
-    <el-table :data="parentTask.children" style="width: 100%" row-key="id" border>
-      <el-table-column prop="assigneeUser.nickname" label="审批人" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.nickname || scope.row.ownerUser?.nickname }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="assigneeUser.deptName" label="所在部门" min-width="100">
-        <template #default="scope">
-          {{ scope.row.assigneeUser?.deptName || scope.row.ownerUser?.deptName }}
-        </template>
-      </el-table-column>
-      <el-table-column label="审批状态" prop="status" width="120">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.BPM_TASK_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="提交时间"
-        align="center"
-        prop="createTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column
-        label="结束时间"
-        align="center"
-        prop="endTime"
-        width="180"
-        :formatter="dateFormatter"
-      />
-      <el-table-column label="操作" prop="operation" width="90">
-        <template #default="scope">
-          <el-button
-            v-if="isSignDeleteButtonVisible(scope.row)"
-            type="danger"
-            plain
-            size="small"
-            @click="handleSignDelete(scope.row)"
-          >
-            <Icon icon="ep:remove" /> 减签
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <!-- 减签 -->
-    <TaskSignDeleteForm ref="taskSignDeleteFormRef" @success="handleSignDeleteSuccess" />
-  </el-drawer>
-</template>
-<script lang="ts" setup>
-import { isEmpty } from '@/utils/is'
-import { DICT_TYPE } from '@/utils/dict'
-import { dateFormatter } from '@/utils/formatTime'
-import TaskSignDeleteForm from './TaskSignDeleteForm.vue'
-
-defineOptions({ name: 'TaskSignList' })
-
-const message = useMessage() // 消息弹窗
-const drawerVisible = ref(false) // 抽屉的是否展示
-const parentTask = ref({} as any)
-
-/** 打开弹窗 */
-const open = async (task: any) => {
-  if (isEmpty(task.children)) {
-    message.warning('该任务没有子任务')
-    return
-  }
-  parentTask.value = task
-  // 展开抽屉
-  drawerVisible.value = true
-}
-defineExpose({ open }) // 提供 openModal 方法，用于打开弹窗
-
-/** 发起减签 */
-const taskSignDeleteFormRef = ref()
-const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
-const handleSignDelete = (item: any) => {
-  taskSignDeleteFormRef.value.open(item.id)
-}
-const handleSignDeleteSuccess = () => {
-  emit('success')
-  // 关闭抽屉
-  drawerVisible.value = false
-}
-
-/** 是否显示减签按钮 */
-const isSignDeleteButtonVisible = (task: any) => {
-  return task && task.children && !isEmpty(task.children)
-}
-// TODO @jason：新界面搞完，可以删除
-</script>

From cd69659c93ab8cf58f331afe9a1357b0882176a0 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 5 Nov 2024 17:22:12 +0800
Subject: [PATCH 068/109] =?UTF-8?q?feat:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E5=A2=9E=E5=8A=A0=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A1=86=E3=80=81=E5=89=8D=E7=AB=AF=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=AE=8C=E6=88=90=EF=BC=9B=E5=8F=B3=E4=BE=A7?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=89=80=E6=9C=89=E6=B5=81=E7=A8=8B=EF=BC=8C?=
 =?UTF-8?q?=E9=80=9A=E8=BF=87=E6=BB=9A=E5=8A=A8=E6=88=96=E8=80=85=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=EF=BC=8C=E5=8F=AF=E4=BB=A5=E5=88=87=E6=8D=A2=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=EF=BC=9B=E9=BC=A0=E6=A0=87hover=E6=97=B6=EF=BC=8C?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E6=8F=8F=E8=BF=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 283 ++++++++++++++----
 1 file changed, 227 insertions(+), 56 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 9e6fcb48..4909f3f7 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -1,46 +1,74 @@
 <template>
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
-  <ContentWrap
-    class="process-definition-container position-relative pb-20px"
-    v-if="!selectProcessDefinition"
-    v-loading="loading"
-  >
-    <el-row :gutter="20" class="!flex-nowrap">
-      <el-col :span="5">
-        <div class="flex flex-col">
-          <div
-            v-for="category in categoryList"
-            :key="category.code"
-            class="flex items-center p-10px cursor-pointer text-14px rounded-md"
-            :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
-            @click="handleCategoryClick(category)"
-          >
-            {{ category.name }}
+  <template v-if="!selectProcessDefinition">
+    <el-input
+      v-model="currentSearchKey"
+      class="!w-50% mb-15px"
+      placeholder="请输入流程名称"
+      clearable
+      @keyup.enter="handleQuery"
+      @clear="handleClear"
+    >
+      <template #prefix>
+        <Icon icon="ep:search" />
+      </template>
+    </el-input>
+    <ContentWrap
+      :class="{ 'process-definition-container': filteredProcessDefinitionList?.length }"
+      class="position-relative pb-20px h-700px"
+      v-loading="loading"
+    >
+      <el-row v-if="filteredProcessDefinitionList?.length" :gutter="20" class="!flex-nowrap">
+        <el-col :span="5">
+          <div class="flex flex-col">
+            <div
+              v-for="category in categoryList"
+              :key="category.code"
+              class="flex items-center p-10px cursor-pointer text-14px rounded-md"
+              :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
+              @click="handleCategoryClick(category)"
+            >
+              {{ category.name }}
+            </div>
           </div>
-        </div>
-      </el-col>
-      <el-col :span="19">
-        <h3 class="text-16px font-bold mb-10px mt-5px">{{ categoryActive.name }}</h3>
-        <div class="grid grid-cols-3 gap3" v-if="categoryProcessDefinitionList.length">
-          <el-card
-            v-for="definition in categoryProcessDefinitionList"
-            :key="definition.id"
-            shadow="hover"
-            class="cursor-pointer definition-item-card"
-            @click="handleSelect(definition)"
-          >
-            <template #default>
-              <div class="flex">
-                <el-image :src="definition.icon" class="w-32px h-32px" />
-                <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+        </el-col>
+        <el-col :span="19">
+          <el-scrollbar ref="scrollWrapper" height="700">
+            <div
+              class="mb-20px pl-10px"
+              v-for="(definitions, title) in processDefinitionGroup"
+              :key="title"
+              :ref="`category-${title}`"
+            >
+              <h3 class="text-18px font-bold mb-10px mt-5px">{{ title }}</h3>
+              <div class="grid grid-cols-3 gap3">
+                <el-tooltip
+                  v-for="definition in definitions"
+                  :key="definition.id"
+                  :content="definition.description"
+                  placement="top"
+                >
+                  <el-card
+                    shadow="hover"
+                    class="cursor-pointer definition-item-card"
+                    @click="handleSelect(definition)"
+                  >
+                    <template #default>
+                      <div class="flex">
+                        <el-image :src="definition.icon" class="w-32px h-32px" />
+                        <el-text class="!ml-10px" size="large">{{ definition.name }}</el-text>
+                      </div>
+                    </template>
+                  </el-card>
+                </el-tooltip>
               </div>
-            </template>
-          </el-card>
-        </div>
-        <el-empty v-else />
-      </el-col>
-    </el-row>
-  </ContentWrap>
+            </div>
+          </el-scrollbar>
+        </el-col>
+      </el-row>
+      <el-empty class="!py-200px" :image-size="200" description="没有找到搜索结果" v-else />
+    </ContentWrap>
+  </template>
 
   <!-- 第二步，填写表单，进行流程的提交 -->
   <ProcessDefinitionDetail
@@ -56,12 +84,14 @@ import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { CategoryApi } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
+import { groupBy } from 'lodash-es'
 
 defineOptions({ name: 'BpmProcessInstanceCreate' })
 
+const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
 const message = useMessage() // 消息
-
+const currentSearchKey = ref('') // 当前搜索关键字
 const processInstanceId: any = route.query.processInstanceId
 const loading = ref(true) // 加载中
 const categoryList: any = ref([]) // 分类的列表
@@ -71,15 +101,10 @@ const processDefinitionList = ref([]) // 流程定义的列表
 const getList = async () => {
   loading.value = true
   try {
-    // 流程分类
-    categoryList.value = await CategoryApi.getCategorySimpleList()
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0]
-    }
-    // 流程定义
-    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
-      suspensionState: 1
-    })
+    // 所有流程分类数据
+    await getCategoryList()
+    // 所有流程定义数据
+    await getDefinitionList()
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -102,11 +127,149 @@ const getList = async () => {
   }
 }
 
-/** 选中分类对应的流程定义列表 */
-const categoryProcessDefinitionList: any = computed(() => {
-  return processDefinitionList.value.filter(
-    (item: any) => item.category == categoryActive.value.code
-  )
+// 获取所有流程分类数据
+const getCategoryList = async () => {
+  try {
+    // 流程分类
+    categoryList.value = await CategoryApi.getCategorySimpleList()
+    if (categoryList.value.length > 0) {
+      categoryActive.value = categoryList.value[0]
+    }
+  } finally {
+  }
+}
+
+// 获取所有流程定义数据
+const getDefinitionList = async () => {
+  try {
+    // 流程定义
+    processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
+      suspensionState: 1
+    })
+    /* 测试数据 */
+    // processDefinitionList.value = [
+    //   {
+    //     id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
+    //     version: 3,
+    //     name: '商务管理',
+    //     key: 'business',
+    //     icon: 'https://picsum.photos/200?r=2',
+    //     description: '商务管理',
+    //     category: 'test0',
+    //     categoryName: '分类0',
+    //     formType: 10,
+    //     formId: 27,
+    //     formName: null,
+    //     formConf:
+    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
+    //     formFields: [
+    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}',
+    //       '{"type":"datePicker","field":"Finom2tsbwbpadc","title":"请假时间段","info":"","$required":false,"props":{"type":"datetimerange"},"_fc_id":"id_F028m2tsbwbpaec","name":"ref_F0okm2tsbwbpafc","display":true,"hidden":false,"_fc_drag_tag":"dateRange"}'
+    //     ],
+    //     formCustomCreatePath: '',
+    //     formCustomViewPath: '',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   },
+    //   {
+    //     id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
+    //     version: 1,
+    //     name: 'oa_leave',
+    //     key: 'oa_leave',
+    //     icon: null,
+    //     description: 'oa_leave',
+    //     category: 'etst',
+    //     categoryName: '分类1',
+    //     formType: 20,
+    //     formId: null,
+    //     formName: null,
+    //     formConf: null,
+    //     formFields: null,
+    //     formCustomCreatePath: '/bpm/oa/leave/create',
+    //     formCustomViewPath: '/bpm/oa/leave/detail',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   },
+    //   {
+    //     id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
+    //     version: 3,
+    //     name: '请假流程',
+    //     key: 'oa_leave',
+    //     icon: 'https://picsum.photos/200?r=1',
+    //     description: '请假流程',
+    //     category: 'test3',
+    //     categoryName: '分类3',
+    //     formType: 10,
+    //     formId: 27,
+    //     formName: null,
+    //     formConf:
+    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
+    //     formFields: [
+    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
+    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
+    //     ],
+    //     formCustomCreatePath: 'bpm/oa/leave/create',
+    //     formCustomViewPath: 'bpm/oa/leave/create',
+    //     suspensionState: 1,
+    //     deploymentTime: null,
+    //     bpmnXml: null,
+    //     startUserSelectTasks: null
+    //   }
+    // ]
+    /* 测试数据 */
+    // processDefinitionList.value = [
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value,
+    //   ...processDefinitionList.value
+    // ]
+    // 初始化过滤列表为全部流程定义
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  } finally {
+  }
+}
+
+const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
+// 直接进行前端搜索
+const handleQuery = () => {
+  if (currentSearchKey.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) =>
+        definition.name.toLowerCase().includes(currentSearchKey.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+    )
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    filteredProcessDefinitionList.value = processDefinitionList.value
+  }
+}
+
+// 监听input `clearable` 事件
+const handleClear = () => {
+  filteredProcessDefinitionList.value = processDefinitionList.value
+}
+
+// 流程定义的分组
+const processDefinitionGroup: any = computed(() => {
+  if (!processDefinitionList.value?.length) return {}
+  return groupBy(filteredProcessDefinitionList.value, 'categoryName')
 })
 
 // ========== 表单相关 ==========
@@ -122,8 +285,16 @@ const handleSelect = async (row, formVariables?) => {
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 // 左侧分类切换
-const handleCategoryClick = (val: number) => {
-  categoryActive.value = val
+const handleCategoryClick = (category) => {
+  categoryActive.value = category
+  const categoryRef = proxy.$refs[`category-${category.name}`] // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop
+
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
+  }
 }
 
 /** 初始化 */

From 0fbd98291e293421a3a6e17f195492eb2767a2e1 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 6 Nov 2024 15:55:48 +0800
Subject: [PATCH 069/109] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=BA=BF=E7=BB=84=E4=BB=B6=E4=B8=AD=E5=AD=98=E5=9C=A8?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E6=84=8F=E8=A7=81=E6=97=B6=EF=BC=8C=E5=80=99?=
 =?UTF-8?q?=E9=80=89=E4=BA=BA=E5=90=8D=E7=A7=B0=E5=A4=B4=E5=83=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=B8=83=E5=B1=80=E9=94=99=E4=BD=8D=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 94 -------------------
 .../detail/ProcessInstanceTimeline.vue        | 84 ++++++++---------
 2 files changed, 42 insertions(+), 136 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 4909f3f7..5daa22d8 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -146,100 +146,6 @@ const getDefinitionList = async () => {
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
       suspensionState: 1
     })
-    /* 测试数据 */
-    // processDefinitionList.value = [
-    //   {
-    //     id: 'business:3:fab1dceb-95be-11ef-8c7d-00a6181404fd',
-    //     version: 3,
-    //     name: '商务管理',
-    //     key: 'business',
-    //     icon: 'https://picsum.photos/200?r=2',
-    //     description: '商务管理',
-    //     category: 'test0',
-    //     categoryName: '分类0',
-    //     formType: 10,
-    //     formId: 27,
-    //     formName: null,
-    //     formConf:
-    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":false,"innerText":"提交"}}',
-    //     formFields: [
-    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}',
-    //       '{"type":"datePicker","field":"Finom2tsbwbpadc","title":"请假时间段","info":"","$required":false,"props":{"type":"datetimerange"},"_fc_id":"id_F028m2tsbwbpaec","name":"ref_F0okm2tsbwbpafc","display":true,"hidden":false,"_fc_drag_tag":"dateRange"}'
-    //     ],
-    //     formCustomCreatePath: '',
-    //     formCustomViewPath: '',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   },
-    //   {
-    //     id: 'oa_leave:1:6e5ac269-5f87-11ef-bdb6-00a6181404fd',
-    //     version: 1,
-    //     name: 'oa_leave',
-    //     key: 'oa_leave',
-    //     icon: null,
-    //     description: 'oa_leave',
-    //     category: 'etst',
-    //     categoryName: '分类1',
-    //     formType: 20,
-    //     formId: null,
-    //     formName: null,
-    //     formConf: null,
-    //     formFields: null,
-    //     formCustomCreatePath: '/bpm/oa/leave/create',
-    //     formCustomViewPath: '/bpm/oa/leave/detail',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   },
-    //   {
-    //     id: 'oa_leave:3:c9d06889-94fd-11ef-bf08-00a6181404fd',
-    //     version: 3,
-    //     name: '请假流程',
-    //     key: 'oa_leave',
-    //     icon: 'https://picsum.photos/200?r=1',
-    //     description: '请假流程',
-    //     category: 'test3',
-    //     categoryName: '分类3',
-    //     formType: 10,
-    //     formId: 27,
-    //     formName: null,
-    //     formConf:
-    //       '{"form":{"inline":false,"hideRequiredAsterisk":false,"labelPosition":"right","size":"default","labelWidth":"100px"},"resetBtn":{"show":false,"innerText":"重置"},"submitBtn":{"show":true,"innerText":"提交"}}',
-    //     formFields: [
-    //       '{"type":"input","field":"F1yrm2sosxgeabc","title":"请假原因","info":"","$required":false,"props":{"type":"text","placeholder":"请输入123"},"_fc_id":"id_Fhrbm2sosxgeacc","name":"ref_Festm2sosxgeadc","display":true,"hidden":false,"_fc_drag_tag":"input"}',
-    //       '{"type":"radio","field":"F9r3m2sp1b34aec","title":"请假类型","info":"","$required":false,"props":{"_optionType":2},"_fc_id":"id_F4nwm2sp1b34afc","name":"ref_Fkodm2sp1b34agc","display":true,"hidden":false,"_fc_drag_tag":"radio","options":[{"label":"事假","value":"1"},{"label":"婚假","value":"2"},{"label":"丧假","value":"3"}]}'
-    //     ],
-    //     formCustomCreatePath: 'bpm/oa/leave/create',
-    //     formCustomViewPath: 'bpm/oa/leave/create',
-    //     suspensionState: 1,
-    //     deploymentTime: null,
-    //     bpmnXml: null,
-    //     startUserSelectTasks: null
-    //   }
-    // ]
-    /* 测试数据 */
-    // processDefinitionList.value = [
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value,
-    //   ...processDefinitionList.value
-    // ]
     // 初始化过滤列表为全部流程定义
     filteredProcessDefinitionList.value = processDefinitionList.value
   } finally {
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 8415a2b1..3eb071ed 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -24,7 +24,7 @@
           </div>
         </div>
       </template>
-      <div class="flex flex-col items-start">
+      <div class="flex flex-col items-start gap2" :id="`activity-task-${activity.id}`">
         <!-- 第一行：节点名称、时间 -->
         <div class="flex w-full">
           <div class="font-bold"> {{ activity.name }}</div>
@@ -36,53 +36,53 @@
             {{ getApprovalNodeTime(activity) }}
           </div>
         </div>
-        <div class="flex items-center flex-wrap mt-1">
+        <div class="flex items-center flex-wrap mt-1 gap2">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
-          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex items-center">
-            <div class="flex flex-col pr-2 gap2">
+          <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
+            <div
+              class="position-relative flex flex-wrap gap2"
+              v-if="task.assigneeUser || task.ownerUser"
+            >
+              <!-- 信息：头像昵称 -->
               <div
-                class="position-relative flex flex-wrap gap2"
-                v-if="task.assigneeUser || task.ownerUser"
+                class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
               >
-                <!-- 信息：头像昵称 -->
+                <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
+                  <el-avatar
+                    :size="28"
+                    v-if="task.assigneeUser?.avatar"
+                    :src="task.assigneeUser?.avatar"
+                  />
+                  <el-avatar :size="28" v-else>
+                    {{ task.assigneeUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.assigneeUser?.nickname }}
+                </template>
+                <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
+                  <el-avatar
+                    :size="28"
+                    v-if="task.ownerUser?.avatar"
+                    :src="task.ownerUser?.avatar"
+                  />
+                  <el-avatar :size="28" v-else>
+                    {{ task.ownerUser?.nickname.substring(0, 1) }}
+                  </el-avatar>
+                  {{ task.ownerUser?.nickname }}
+                </template>
+                <!-- 信息：任务 ICON -->
                 <div
-                  class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+                  v-if="onlyStatusIconShow.includes(task.status)"
+                  class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
-                  <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
-                    <el-avatar
-                      :size="28"
-                      v-if="task.assigneeUser?.avatar"
-                      :src="task.assigneeUser?.avatar"
-                    />
-                    <el-avatar :size="28" v-else>
-                      {{ task.assigneeUser?.nickname.substring(0, 1) }}
-                    </el-avatar>
-                    {{ task.assigneeUser?.nickname }}
-                  </template>
-                  <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
-                    <el-avatar
-                      :size="28"
-                      v-if="task.ownerUser?.avatar"
-                      :src="task.ownerUser?.avatar"
-                    />
-                    <el-avatar :size="28" v-else>
-                      {{ task.ownerUser?.nickname.substring(0, 1) }}
-                    </el-avatar>
-                    {{ task.ownerUser?.nickname }}
-                  </template>
-                  <!-- 信息：任务 ICON -->
-                  <div
-                    v-if="onlyStatusIconShow.includes(task.status)"
-                    class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
-                  >
-                    <Icon
-                      :size="12"
-                      :icon="statusIconMap2[task.status]?.icon"
-                      :color="statusIconMap2[task.status]?.color"
-                    />
-                  </div>
+                  <Icon
+                    :size="12"
+                    :icon="statusIconMap2[task.status]?.icon"
+                    :color="statusIconMap2[task.status]?.color"
+                  />
                 </div>
               </div>
+            </div>
+            <teleport defer :to="`#activity-task-${activity.id}`">
               <div
                 v-if="
                   task.reason &&
@@ -92,7 +92,7 @@
               >
                 审批意见：{{ task.reason }}
               </div>
-            </div>
+            </teleport>
           </div>
           <!-- 情况二：遍历每个审批节点下的【候选的】task 任务。例如说，1）依次审批，2）未来的审批任务等 -->
           <div

From 92314ee9457ad6f9f6f0548780d286b93bd92073 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 6 Nov 2024 17:17:44 +0800
Subject: [PATCH 070/109] =?UTF-8?q?feat:=20=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E5=AE=A1=E6=89=B9=E4=BA=BA=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?TODO=EF=BC=8C=E9=80=89=E6=8B=A9=E7=94=A8=E6=88=B7=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E7=BB=98=E5=88=B6=E4=B8=8E=E9=80=89=E6=8B=A9=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92=E9=80=BB=E8=BE=91=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue       | 92 +++++++++++++++++++
 .../create/ProcessDefinitionDetail.vue        | 50 +++++-----
 src/views/bpm/processInstance/create/mock.ts  | 86 +++++++++++++++++
 .../detail/ProcessInstanceTimeline.vue        | 26 +++++-
 4 files changed, 228 insertions(+), 26 deletions(-)
 create mode 100644 src/components/UserSelectForm/index.vue
 create mode 100644 src/views/bpm/processInstance/create/mock.ts

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
new file mode 100644
index 00000000..2dc94587
--- /dev/null
+++ b/src/components/UserSelectForm/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <Dialog v-model="dialogVisible" title="人员选择" width="900">
+    <el-row>
+      <el-col :span="6">
+        <el-tree
+          ref="treeRef"
+          :data="deptList"
+          :expand-on-click-node="false"
+          :props="defaultProps"
+          default-expand-all
+          highlight-current
+          node-key="id"
+          @node-click="handleNodeClick"
+        />
+      </el-col>
+      <el-col :span="17" :offset="1">
+        <el-transfer
+          v-model="selectedUserList"
+          filterable
+          filter-placeholder="搜索成员"
+          :data="userList"
+          :props="{ label: 'nickname', key: 'id' }"
+        />
+      </el-col>
+    </el-row>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" setup>
+import { defaultProps, handleTree } from '@/utils/tree'
+import * as DeptApi from '@/api/system/dept'
+import * as UserApi from '@/api/system/user'
+
+defineOptions({ name: 'UserSelectForm' })
+const emit = defineEmits<{
+  confirm: [userList: any[]]
+}>()
+const { t } = useI18n() // 国际
+const deptList = ref<Tree[]>([]) // 部门树形结构化
+const userList: any = ref([]) // 用户列表
+const message = useMessage() // 消息弹窗
+const selectedUserList: any = ref([]) // 选中的用户列表
+const dialogVisible = ref(false) // 弹窗的是否展示
+const formLoading = ref(false) // 表单的加载中
+
+/** 打开弹窗 */
+const open = async () => {
+  resetForm()
+  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
+  await getUserList()
+  // 修改时，设置数据
+  dialogVisible.value = true
+}
+
+/* 获取用户列表 */
+const getUserList = async (deptId?) => {
+  try {
+    // @ts-ignore
+    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
+    userList.value = data.list
+  } finally {
+  }
+}
+
+const submitForm = async () => {
+  // 提交请求
+  formLoading.value = true
+  try {
+    message.success(t('common.updateSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('confirm', selectedUserList.value)
+  } finally {
+    formLoading.value = false
+  }
+}
+const resetForm = () => {
+  deptList.value = []
+  userList.value = []
+  selectedUserList.value = []
+}
+
+/** 处理部门被点击 */
+const handleNodeClick = async (row: { [key: string]: any }) => {
+  getUserList(row.id)
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+</script>
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 35044965..442cfffc 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -20,7 +20,7 @@
                       :option="detailForm.option"
                       @submit="submitForm"
                     >
-                      <template #type-startUserSelect>
+                      <!-- <template #type-startUserSelect>
                         <el-col :span="24">
                           <el-card class="mb-10px">
                             <template #header>指定审批人</template>
@@ -51,7 +51,7 @@
                             </el-form>
                           </el-card>
                         </el-col>
-                      </template>
+                      </template> -->
                     </form-create>
                   </el-col>
 
@@ -61,7 +61,7 @@
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
                       :show-status-icon="false"
-                      candidateField="candidateUserList"
+                      :startUserSelectTasks="startUserSelectTasks"
                     />
                   </el-col>
                 </el-row>
@@ -104,7 +104,8 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
-import * as UserApi from '@/api/system/user'
+// import * as UserApi from '@/api/system/user'
+import { activityNodes as aN, startUserSelectTasks as sUs } from './mock'
 
 defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
@@ -125,7 +126,7 @@ const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表
 const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-const userList = ref<any[]>([]) // 用户列表
+// const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
 /** 当前的Tab */
 const activeTab = ref('form')
@@ -163,25 +164,25 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     if (processDefinitionDetail) {
       bpmnXML.value = processDefinitionDetail.bpmnXml
       startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-
+      startUserSelectTasks.value = sUs
       // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        detailForm.value.rule.push({
-          type: 'startUserSelect',
-          props: {
-            title: '指定审批人'
-          }
-        })
-        // 设置校验规则
-        for (const userTask of startUserSelectTasks.value) {
-          startUserSelectAssignees.value[userTask.id] = []
-          startUserSelectAssigneesFormRules.value[userTask.id] = [
-            { required: true, message: '请选择审批人', trigger: 'blur' }
-          ]
-        }
-        // 加载用户列表
-        userList.value = await UserApi.getSimpleUserList()
-      }
+      // if (startUserSelectTasks.value?.length > 0) {
+      //   detailForm.value.rule.push({
+      //     type: 'startUserSelect',
+      //     props: {
+      //       title: '指定审批人'
+      //     }
+      //   })
+      //   // 设置校验规则
+      //   for (const userTask of startUserSelectTasks.value) {
+      //     startUserSelectAssignees.value[userTask.id] = []
+      //     startUserSelectAssigneesFormRules.value[userTask.id] = [
+      //       { required: true, message: '请选择审批人', trigger: 'blur' }
+      //     ]
+      //   }
+      //   // 加载用户列表
+      //   userList.value = await UserApi.getSimpleUserList()
+      // }
     }
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
@@ -205,6 +206,7 @@ const getApprovalDetail = async (row: any) => {
     }
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
+    activityNodes.value = aN
   } finally {
   }
 }
@@ -250,7 +252,7 @@ defineExpose({ initProcessInfo })
 $wrap-padding-height: 20px;
 $wrap-margin-height: 15px;
 $button-height: 51px;
-$process-header-height: 194px;
+$process-header-height: 105px;
 
 .processInstance-wrap-main {
   height: calc(
diff --git a/src/views/bpm/processInstance/create/mock.ts b/src/views/bpm/processInstance/create/mock.ts
new file mode 100644
index 00000000..2cb1394c
--- /dev/null
+++ b/src/views/bpm/processInstance/create/mock.ts
@@ -0,0 +1,86 @@
+import {  ProcessInstanceVO, User, ApprovalTaskInfo, ApprovalNodeInfo } from '@/api/bpm/processInstance';
+import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+
+const users: User[] = [
+  { id: 1, nickname: 'Alice', avatar: 'https://picsum.photos/200?r=1' },
+  { id: 2, nickname: 'Bob', avatar: 'https://picsum.photos/200?r=2' },
+  { id: 3, nickname: 'Charlie', avatar: 'https://picsum.photos/200?r=3' },
+  { id: 4, nickname: 'David', avatar: 'https://picsum.photos/200?r=4' }
+];
+
+const approvalTask1: ApprovalTaskInfo = {
+  id: 1,
+  ownerUser: users[0], // Alice is the owner (initiator)
+  assigneeUser: users[1], // Bob is the assignee
+  status: 1, // In Progress
+  reason: 'Please review and approve the request.'
+};
+
+const approvalTask2: ApprovalTaskInfo = {
+  id: 2,
+  ownerUser: users[1], // Bob is the owner (approver)
+  assigneeUser: users[2], // Charlie is the assignee
+  status: 0, // Pending approval
+  reason: 'Awaiting Bob’s decision.'
+};
+
+const approvalTask3: ApprovalTaskInfo = {
+  id: 3,
+  ownerUser: users[2], // Charlie is the owner (approver)
+  assigneeUser: users[3], // David is the assignee
+  status: 0, // Pending approval
+  reason: 'Awaiting Charlie’s decision.'
+};
+
+const approvalNode1: ApprovalNodeInfo = {
+  id: 101,
+  name: 'Start Review',
+  nodeType: NodeType.START_USER_NODE,
+  status: 1, // In Progress
+  startTime: new Date('2024-11-01T10:00:00Z'),
+  tasks: [approvalTask1]
+};
+
+const approvalNode2: ApprovalNodeInfo = {
+  id: 102,
+  name: 'First Review',
+  nodeType: NodeType.USER_TASK_NODE,
+  status: 0, // Pending approval
+  startTime: new Date('2024-11-01T11:00:00Z'),
+  tasks: [approvalTask2],
+  candidateUsers: [users[2], users[3]] // Candidate users: Charlie and David
+};
+
+const approvalNode3: ApprovalNodeInfo = {
+  id: 103,
+  name: 'Second Review',
+  nodeType: NodeType.USER_TASK_NODE,
+  status: 0, // Pending approval
+  startTime: new Date('2024-11-01T12:00:00Z'),
+  tasks: [approvalTask3],
+  candidateUsers: [users[1], users[3]] // Candidate users: Bob and David
+};
+
+const processInstance: ProcessInstanceVO = {
+  id: 1001,
+  name: 'Request Approval Process',
+  processDefinitionId: 'proc-2024-001',
+  category: 'Approval Process',
+  result: 0, // Ongoing
+  tasks: [{ id: '1', name: 'Start Review' }, { id: '2', name: 'First Review' }, { id: '3', name: 'Second Review' }],
+  fields: ['field1', 'field2'],
+  status: 1, // In Progress
+  remark: 'This is a sample approval process.',
+  businessKey: 'BUS-12345',
+  createTime: '2024-11-01T09:00:00Z',
+  endTime: '',
+  processDefinition: undefined // Not populated in this example
+};
+
+// 模拟的 activityNodes 数据，传递给 ProcessInstanceTimeline 组件
+const activityNodes: ApprovalNodeInfo[] = [approvalNode1, approvalNode2, approvalNode3];
+
+export { processInstance, activityNodes, users };
+
+
+export const startUserSelectTasks = users.map(user => ({id: user.id,name:user.nickname}))
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 3eb071ed..1d3e7a1c 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -36,7 +36,15 @@
             {{ getApprovalNodeTime(activity) }}
           </div>
         </div>
-        <div class="flex items-center flex-wrap mt-1 gap2">
+        <!-- 需要自定义选择审批人 -->
+        <div
+          v-if="startUserSelectTasks?.length > 0 && activity.nodeType === NodeType.USER_TASK_NODE"
+        >
+          <el-button class="!px-8px" @click="handleSelectUser">
+            <Icon icon="fa:user-plus" />
+          </el-button>
+        </div>
+        <div v-else class="flex items-center flex-wrap mt-1 gap2">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
           <div v-for="(task, idx) in activity.tasks" :key="idx" class="flex flex-col pr-2 gap2">
             <div
@@ -121,6 +129,8 @@
       </div>
     </el-timeline-item>
   </el-timeline>
+  <!-- 用户选择弹窗 -->
+  <UserSelectForm ref="userSelectFormRef" @confirm="handleUserSelectConfirm" />
 </template>
 
 <script lang="ts" setup>
@@ -141,9 +151,11 @@ withDefaults(
   defineProps<{
     activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
+    startUserSelectTasks?: any[] // 发起人需要选择审批人的用户任务列表
   }>(),
   {
-    showStatusIcon: true // 默认值为 true
+    showStatusIcon: true, // 默认值为 true
+    startUserSelectTasks: () => [] // 默认值为空数组
   }
 )
 
@@ -241,4 +253,14 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
     return `${formatDate(node.startTime)}`
   }
 }
+
+// 选择自定义审批人
+const userSelectFormRef = ref()
+const handleSelectUser = () => {
+  userSelectFormRef.value.open()
+}
+// 选择完成
+const handleUserSelectConfirm = (userList) => {
+  console.log('[ userList ] >', userList)
+}
 </script>

From 8b5740d05c908f8e23925c07570f2a73d99fd54a Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 7 Nov 2024 13:21:04 +0800
Subject: [PATCH 071/109] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E9=A1=B5=E9=9D=A2-=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E9=80=89=E6=8B=A9=E5=AE=A1=E6=89=B9?=
 =?UTF-8?q?=E4=BA=BA=E7=9A=84=E8=8A=82=E7=82=B9=E6=94=B9=E4=B8=BA=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=B3=E4=BE=A7timeline=E7=BB=84=E4=BB=B6=E4=B8=AD=E8=B7=B3?=
 =?UTF-8?q?=E5=87=BA=E5=BC=B9=E7=AA=97=E9=80=89=E6=8B=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue       | 24 ++++--
 .../create/ProcessDefinitionDetail.vue        | 82 +++++-------------
 src/views/bpm/processInstance/create/mock.ts  | 86 -------------------
 .../detail/ProcessInstanceTimeline.vue        | 39 +++++++--
 4 files changed, 69 insertions(+), 162 deletions(-)
 delete mode 100644 src/views/bpm/processInstance/create/mock.ts

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
index 2dc94587..d4cf6f2b 100644
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -15,7 +15,7 @@
       </el-col>
       <el-col :span="17" :offset="1">
         <el-transfer
-          v-model="selectedUserList"
+          v-model="selectedUserIdList"
           filterable
           filter-placeholder="搜索成员"
           :data="userList"
@@ -24,7 +24,12 @@
       </el-col>
     </el-row>
     <template #footer>
-      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button
+        :disabled="formLoading || !selectedUserIdList?.length"
+        type="primary"
+        @click="submitForm"
+        >确 定</el-button
+      >
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -36,21 +41,24 @@ import * as UserApi from '@/api/system/user'
 
 defineOptions({ name: 'UserSelectForm' })
 const emit = defineEmits<{
-  confirm: [userList: any[]]
+  confirm: [id: any, userList: any[]]
 }>()
 const { t } = useI18n() // 国际
 const deptList = ref<Tree[]>([]) // 部门树形结构化
 const userList: any = ref([]) // 用户列表
 const message = useMessage() // 消息弹窗
-const selectedUserList: any = ref([]) // 选中的用户列表
+const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
+const activityId = ref() // 主键id
 
 /** 打开弹窗 */
-const open = async () => {
+const open = async (id, selectedList?) => {
+  activityId.value = id
   resetForm()
   deptList.value = handleTree(await DeptApi.getSimpleDeptList())
   await getUserList()
+  selectedUserIdList.value = selectedList?.map((item) => item.id)
   // 修改时，设置数据
   dialogVisible.value = true
 }
@@ -71,8 +79,9 @@ const submitForm = async () => {
   try {
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
+    const emitUserList = userList.value.filter((user) => selectedUserIdList.value.includes(user.id))
     // 发送操作成功的事件
-    emit('confirm', selectedUserList.value)
+    emit('confirm', activityId.value, emitUserList)
   } finally {
     formLoading.value = false
   }
@@ -80,13 +89,12 @@ const submitForm = async () => {
 const resetForm = () => {
   deptList.value = []
   userList.value = []
-  selectedUserList.value = []
+  selectedUserIdList.value = []
 }
 
 /** 处理部门被点击 */
 const handleNodeClick = async (row: { [key: string]: any }) => {
   getUserList(row.id)
 }
-
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 442cfffc..18a3ba72 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -19,40 +19,7 @@
                       v-model="detailForm.value"
                       :option="detailForm.option"
                       @submit="submitForm"
-                    >
-                      <!-- <template #type-startUserSelect>
-                        <el-col :span="24">
-                          <el-card class="mb-10px">
-                            <template #header>指定审批人</template>
-                            <el-form
-                              :model="startUserSelectAssignees"
-                              :rules="startUserSelectAssigneesFormRules"
-                              ref="startUserSelectAssigneesFormRef"
-                            >
-                              <el-form-item
-                                v-for="userTask in startUserSelectTasks"
-                                :key="userTask.id"
-                                :label="`任务【${userTask.name}】`"
-                                :prop="userTask.id"
-                              >
-                                <el-select
-                                  v-model="startUserSelectAssignees[userTask.id]"
-                                  multiple
-                                  placeholder="请选择审批人"
-                                >
-                                  <el-option
-                                    v-for="user in userList"
-                                    :key="user.id"
-                                    :label="user.nickname"
-                                    :value="user.id"
-                                  />
-                                </el-select>
-                              </el-form-item>
-                            </el-form>
-                          </el-card>
-                        </el-col>
-                      </template> -->
-                    </form-create>
+                    />
                   </el-col>
 
                   <el-col :span="6" :offset="1">
@@ -62,6 +29,8 @@
                       :activity-nodes="activityNodes"
                       :show-status-icon="false"
                       :startUserSelectTasks="startUserSelectTasks"
+                      :startUserSelectAssignees="startUserSelectAssignees"
+                      @select-user-confirm="selectUserConfirm"
                     />
                   </el-col>
                 </el-row>
@@ -104,8 +73,7 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
-// import * as UserApi from '@/api/system/user'
-import { activityNodes as aN, startUserSelectTasks as sUs } from './mock'
+// import { activityNodes as aN, startUserSelectTasks as sUs } from './mock'
 
 defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
@@ -122,11 +90,8 @@ const detailForm: any = ref({
 }) // 流程表单详情
 const fApi = ref<ApiAttrs>()
 // 指定审批人
-const startUserSelectAssigneesFormRef = ref() // 发起人选择审批人的表单 Ref
 const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
-const startUserSelectAssigneesFormRules = ref({}) // 发起人选择审批人的表单 Rules
-// const userList = ref<any[]>([]) // 用户列表
 const bpmnXML: any = ref(null) // BPMN 数据
 /** 当前的Tab */
 const activeTab = ref('form')
@@ -139,7 +104,6 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
   // 重置指定审批人
   startUserSelectTasks.value = []
   startUserSelectAssignees.value = {}
-  startUserSelectAssigneesFormRules.value = {}
 
   // 情况一：流程表单
   if (row.formType == 10) {
@@ -164,25 +128,13 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     if (processDefinitionDetail) {
       bpmnXML.value = processDefinitionDetail.bpmnXml
       startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-      startUserSelectTasks.value = sUs
       // 设置指定审批人
-      // if (startUserSelectTasks.value?.length > 0) {
-      //   detailForm.value.rule.push({
-      //     type: 'startUserSelect',
-      //     props: {
-      //       title: '指定审批人'
-      //     }
-      //   })
-      //   // 设置校验规则
-      //   for (const userTask of startUserSelectTasks.value) {
-      //     startUserSelectAssignees.value[userTask.id] = []
-      //     startUserSelectAssigneesFormRules.value[userTask.id] = [
-      //       { required: true, message: '请选择审批人', trigger: 'blur' }
-      //     ]
-      //   }
-      //   // 加载用户列表
-      //   userList.value = await UserApi.getSimpleUserList()
-      // }
+      if (startUserSelectTasks.value?.length > 0) {
+        for (const userTask of startUserSelectTasks.value) {
+          // 初始化数据
+          startUserSelectAssignees.value[userTask.id] = []
+        }
+      }
     }
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
@@ -206,19 +158,23 @@ const getApprovalDetail = async (row: any) => {
     }
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
-    activityNodes.value = aN
   } finally {
   }
 }
 /** 提交按钮 */
 const submitForm = async (formData: any) => {
-  debugger
   if (!fApi.value || !props.selectProcessDefinition) {
     return
   }
   // 如果有指定审批人，需要校验
   if (startUserSelectTasks.value?.length > 0) {
-    await startUserSelectAssigneesFormRef.value.validate()
+    for (const userTask of startUserSelectTasks.value) {
+      if (
+        Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
+        startUserSelectAssignees.value[userTask.id].length === 0
+      )
+        return message.warning(`请选择${userTask.name}的审批人`)
+    }
   }
 
   // 提交请求
@@ -245,6 +201,10 @@ const handleCancel = () => {
   emit('cancel')
 }
 
+const selectUserConfirm = (id, userList) => {
+  startUserSelectAssignees.value[id] = userList?.map((item) => item.id)
+}
+
 defineExpose({ initProcessInfo })
 </script>
 
diff --git a/src/views/bpm/processInstance/create/mock.ts b/src/views/bpm/processInstance/create/mock.ts
deleted file mode 100644
index 2cb1394c..00000000
--- a/src/views/bpm/processInstance/create/mock.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import {  ProcessInstanceVO, User, ApprovalTaskInfo, ApprovalNodeInfo } from '@/api/bpm/processInstance';
-import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
-
-const users: User[] = [
-  { id: 1, nickname: 'Alice', avatar: 'https://picsum.photos/200?r=1' },
-  { id: 2, nickname: 'Bob', avatar: 'https://picsum.photos/200?r=2' },
-  { id: 3, nickname: 'Charlie', avatar: 'https://picsum.photos/200?r=3' },
-  { id: 4, nickname: 'David', avatar: 'https://picsum.photos/200?r=4' }
-];
-
-const approvalTask1: ApprovalTaskInfo = {
-  id: 1,
-  ownerUser: users[0], // Alice is the owner (initiator)
-  assigneeUser: users[1], // Bob is the assignee
-  status: 1, // In Progress
-  reason: 'Please review and approve the request.'
-};
-
-const approvalTask2: ApprovalTaskInfo = {
-  id: 2,
-  ownerUser: users[1], // Bob is the owner (approver)
-  assigneeUser: users[2], // Charlie is the assignee
-  status: 0, // Pending approval
-  reason: 'Awaiting Bob’s decision.'
-};
-
-const approvalTask3: ApprovalTaskInfo = {
-  id: 3,
-  ownerUser: users[2], // Charlie is the owner (approver)
-  assigneeUser: users[3], // David is the assignee
-  status: 0, // Pending approval
-  reason: 'Awaiting Charlie’s decision.'
-};
-
-const approvalNode1: ApprovalNodeInfo = {
-  id: 101,
-  name: 'Start Review',
-  nodeType: NodeType.START_USER_NODE,
-  status: 1, // In Progress
-  startTime: new Date('2024-11-01T10:00:00Z'),
-  tasks: [approvalTask1]
-};
-
-const approvalNode2: ApprovalNodeInfo = {
-  id: 102,
-  name: 'First Review',
-  nodeType: NodeType.USER_TASK_NODE,
-  status: 0, // Pending approval
-  startTime: new Date('2024-11-01T11:00:00Z'),
-  tasks: [approvalTask2],
-  candidateUsers: [users[2], users[3]] // Candidate users: Charlie and David
-};
-
-const approvalNode3: ApprovalNodeInfo = {
-  id: 103,
-  name: 'Second Review',
-  nodeType: NodeType.USER_TASK_NODE,
-  status: 0, // Pending approval
-  startTime: new Date('2024-11-01T12:00:00Z'),
-  tasks: [approvalTask3],
-  candidateUsers: [users[1], users[3]] // Candidate users: Bob and David
-};
-
-const processInstance: ProcessInstanceVO = {
-  id: 1001,
-  name: 'Request Approval Process',
-  processDefinitionId: 'proc-2024-001',
-  category: 'Approval Process',
-  result: 0, // Ongoing
-  tasks: [{ id: '1', name: 'Start Review' }, { id: '2', name: 'First Review' }, { id: '3', name: 'Second Review' }],
-  fields: ['field1', 'field2'],
-  status: 1, // In Progress
-  remark: 'This is a sample approval process.',
-  businessKey: 'BUS-12345',
-  createTime: '2024-11-01T09:00:00Z',
-  endTime: '',
-  processDefinition: undefined // Not populated in this example
-};
-
-// 模拟的 activityNodes 数据，传递给 ProcessInstanceTimeline 组件
-const activityNodes: ApprovalNodeInfo[] = [approvalNode1, approvalNode2, approvalNode3];
-
-export { processInstance, activityNodes, users };
-
-
-export const startUserSelectTasks = users.map(user => ({id: user.id,name:user.nickname}))
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 1d3e7a1c..10993735 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -38,11 +38,29 @@
         </div>
         <!-- 需要自定义选择审批人 -->
         <div
-          v-if="startUserSelectTasks?.length > 0 && activity.nodeType === NodeType.USER_TASK_NODE"
+          class="flex flex-wrap gap2 items-center"
+          v-if="
+            startUserSelectTasks?.length > 0 && Array.isArray(startUserSelectAssignees[activity.id])
+          "
         >
-          <el-button class="!px-8px" @click="handleSelectUser">
+          <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
+          <el-button
+            class="!px-8px"
+            @click="handleSelectUser(activity.id, customApprover[activity.id])"
+          >
             <Icon icon="fa:user-plus" />
           </el-button>
+          <div
+            v-for="(user, idx1) in customApprover[activity.id]"
+            :key="idx1"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+          >
+            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
+            <el-avatar :size="28" v-else>
+              {{ user.nickname.substring(0, 1) }}
+            </el-avatar>
+            {{ user.nickname }}
+          </div>
         </div>
         <div v-else class="flex items-center flex-wrap mt-1 gap2">
           <!-- 情况一：遍历每个审批节点下的【进行中】task 任务 -->
@@ -152,10 +170,12 @@ withDefaults(
     activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
     startUserSelectTasks?: any[] // 发起人需要选择审批人的用户任务列表
+    startUserSelectAssignees?: any // 发起人选择审批人的数据
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
-    startUserSelectTasks: () => [] // 默认值为空数组
+    startUserSelectTasks: () => [], // 默认值为空数组
+    startUserSelectAssignees: () => {}
   }
 )
 
@@ -256,11 +276,16 @@ const getApprovalNodeTime = (node: ProcessInstanceApi.ApprovalNodeInfo) => {
 
 // 选择自定义审批人
 const userSelectFormRef = ref()
-const handleSelectUser = () => {
-  userSelectFormRef.value.open()
+const handleSelectUser = (activityId, selectedList) => {
+  userSelectFormRef.value.open(activityId, selectedList)
 }
+const emit = defineEmits<{
+  selectUserConfirm: [id: any, userList: any[]]
+}>()
+const customApprover: any = ref({})
 // 选择完成
-const handleUserSelectConfirm = (userList) => {
-  console.log('[ userList ] >', userList)
+const handleUserSelectConfirm = (activityId, userList) => {
+  customApprover.value[activityId] = userList || []
+  emit('selectUserConfirm', activityId, userList)
 }
 </script>

From 8df599194036a02925b3ede3eeecf105b140d0ec Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 7 Nov 2024 13:49:18 +0800
Subject: [PATCH 072/109] =?UTF-8?q?fix:=20=E6=B5=81=E7=A8=8B=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E9=A1=B5=E9=9D=A2-=E4=BF=AE=E5=A4=8D=E9=87=8D?=
 =?UTF-8?q?=E6=96=B0=E5=8F=91=E8=B5=B7=E6=97=B6=E8=A1=A8=E5=8D=95=E6=95=B0?=
 =?UTF-8?q?=E6=8D=AE=E6=9C=AA=E5=9B=9E=E6=98=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/ProcessDefinitionDetail.vue    | 4 ++--
 src/views/bpm/processInstance/index.vue                       | 1 -
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 18a3ba72..6bdad332 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -162,7 +162,7 @@ const getApprovalDetail = async (row: any) => {
   }
 }
 /** 提交按钮 */
-const submitForm = async (formData: any) => {
+const submitForm = async () => {
   if (!fApi.value || !props.selectProcessDefinition) {
     return
   }
@@ -182,7 +182,7 @@ const submitForm = async (formData: any) => {
   try {
     await ProcessInstanceApi.createProcessInstance({
       processDefinitionId: props.selectProcessDefinition.id,
-      variables: formData || detailForm.value.value,
+      variables: detailForm.value.value,
       startUserSelectAssignees: startUserSelectAssignees.value
     })
     // 提示
diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index 4b72e395..f3b7439b 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -222,7 +222,6 @@ const handleCreate = async (row?: ProcessInstanceVO) => {
     const processDefinitionDetail = await DefinitionApi.getProcessDefinition(
       row.processDefinitionId
     )
-    debugger
     if (processDefinitionDetail.formType === 20) {
       message.error('重新发起流程失败，原因：该流程使用业务表单，不支持重新发起')
       return

From 6dd6f9c2a5e5a02579e3cde7f71a6ec0f3a5da36 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 7 Nov 2024 13:57:57 +0800
Subject: [PATCH 073/109] =?UTF-8?q?chore:=20=E5=88=A0=E9=99=A4=E6=A8=A1?=
 =?UTF-8?q?=E6=8B=9F=E5=81=87=E6=95=B0=E6=8D=AE=E5=BC=95=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 6bdad332..4ab280b5 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -73,7 +73,6 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
-// import { activityNodes as aN, startUserSelectTasks as sUs } from './mock'
 
 defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{

From 0fae9a4ba4ced6b01693a0de3cc142f6680c6f39 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 8 Nov 2024 09:53:19 +0800
Subject: [PATCH 074/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=96=B0?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E9=A1=B5=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/create/index.vue | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 5daa22d8..80291678 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -6,8 +6,8 @@
       class="!w-50% mb-15px"
       placeholder="请输入流程名称"
       clearable
-      @keyup.enter="handleQuery"
-      @clear="handleClear"
+      @input="handleQuery"
+      @clear="handleQuery"
     >
       <template #prefix>
         <Icon icon="ep:search" />
@@ -152,8 +152,8 @@ const getDefinitionList = async () => {
   }
 }
 
+/** 搜索流程 */
 const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
-// 直接进行前端搜索
 const handleQuery = () => {
   if (currentSearchKey.value.trim()) {
     // 如果有搜索关键字，进行过滤
@@ -167,11 +167,6 @@ const handleQuery = () => {
   }
 }
 
-// 监听input `clearable` 事件
-const handleClear = () => {
-  filteredProcessDefinitionList.value = processDefinitionList.value
-}
-
 // 流程定义的分组
 const processDefinitionGroup: any = computed(() => {
   if (!processDefinitionList.value?.length) return {}

From 1e6762ea69e90392627b9c7f03167cebf2a543b7 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Fri, 8 Nov 2024 13:21:57 +0800
Subject: [PATCH 075/109] =?UTF-8?q?fix:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E4=BF=AE=E5=A4=8D=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=88=86=E7=B1=BB=E5=90=8D=E7=A7=B0=E9=83=BD=E4=B8=BA?=
 =?UTF-8?q?null=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 80291678..3d863c61 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -36,11 +36,13 @@
           <el-scrollbar ref="scrollWrapper" height="700">
             <div
               class="mb-20px pl-10px"
-              v-for="(definitions, title) in processDefinitionGroup"
-              :key="title"
-              :ref="`category-${title}`"
+              v-for="(definitions, categoryCode) in processDefinitionGroup"
+              :key="categoryCode"
+              :ref="`category-${categoryCode}`"
             >
-              <h3 class="text-18px font-bold mb-10px mt-5px">{{ title }}</h3>
+              <h3 class="text-18px font-bold mb-10px mt-5px">
+                {{ getCategoryName(categoryCode) }}
+              </h3>
               <div class="grid grid-cols-3 gap3">
                 <el-tooltip
                   v-for="definition in definitions"
@@ -170,7 +172,7 @@ const handleQuery = () => {
 // 流程定义的分组
 const processDefinitionGroup: any = computed(() => {
   if (!processDefinitionList.value?.length) return {}
-  return groupBy(filteredProcessDefinitionList.value, 'categoryName')
+  return groupBy(filteredProcessDefinitionList.value, 'category')
 })
 
 // ========== 表单相关 ==========
@@ -188,7 +190,7 @@ const handleSelect = async (row, formVariables?) => {
 // 左侧分类切换
 const handleCategoryClick = (category) => {
   categoryActive.value = category
-  const categoryRef = proxy.$refs[`category-${category.name}`] // 获取点击分类对应的 DOM 元素
+  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
   if (categoryRef?.length) {
     const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
     const categoryOffsetTop = categoryRef[0].offsetTop
@@ -198,6 +200,11 @@ const handleCategoryClick = (category) => {
   }
 }
 
+// 通过分类code获取对应的名称
+const getCategoryName = (categoryCode) => {
+  return categoryList.value?.find((ctg) => ctg.code === categoryCode)?.name
+}
+
 /** 初始化 */
 onMounted(() => {
   getList()

From 066607ab08f61ac2cd6700926479711e61c7bf13 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 8 Nov 2024 23:01:23 +0800
Subject: [PATCH 076/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=96=B0?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E9=A1=B5=E7=9A=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue       | 35 +++++++----
 .../create/ProcessDefinitionDetail.vue        | 13 ++--
 .../bpm/processInstance/create/index.vue      | 60 ++++++++++---------
 .../detail/ProcessInstanceTimeline.vue        |  2 +-
 4 files changed, 65 insertions(+), 45 deletions(-)

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
index d4cf6f2b..2ba2a7ff 100644
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -16,6 +16,7 @@
       <el-col :span="17" :offset="1">
         <el-transfer
           v-model="selectedUserIdList"
+          :titles="['未选', '已选']"
           filterable
           filter-placeholder="搜索成员"
           :data="userList"
@@ -28,8 +29,9 @@
         :disabled="formLoading || !selectedUserIdList?.length"
         type="primary"
         @click="submitForm"
-        >确 定</el-button
       >
+        确 定
+      </el-button>
       <el-button @click="dialogVisible = false">取 消</el-button>
     </template>
   </Dialog>
@@ -44,48 +46,60 @@ const emit = defineEmits<{
   confirm: [id: any, userList: any[]]
 }>()
 const { t } = useI18n() // 国际
+const message = useMessage() // 消息弹窗
+
 const deptList = ref<Tree[]>([]) // 部门树形结构化
 const userList: any = ref([]) // 用户列表
-const message = useMessage() // 消息弹窗
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
-const activityId = ref() // 主键id
+const activityId = ref() // 关联的主键编号 TODO @goldenzqqq：这个 activityId 有没可能不传递。在使用 @submitForm="xxx()" 时，传递的参数。目的是，更加解耦一些。
 
 /** 打开弹窗 */
-const open = async (id, selectedList?) => {
+const open = async (id: number, selectedList?: any[]) => {
   activityId.value = id
+  // 重置表单
   resetForm()
+
+  // 加载相关数据
   deptList.value = handleTree(await DeptApi.getSimpleDeptList())
   await getUserList()
-  selectedUserIdList.value = selectedList?.map((item) => item.id)
-  // 修改时，设置数据
+  // 设置选中的用户列表
+  selectedUserIdList.value = selectedList?.map((item: any) => item.id)
+
+  // 设置可见
   dialogVisible.value = true
 }
 
-/* 获取用户列表 */
-const getUserList = async (deptId?) => {
+/** 获取用户列表 */
+const getUserList = async (deptId?: number) => {
   try {
     // @ts-ignore
+    // TODO @芋艿：替换到 simple List
     const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
     userList.value = data.list
   } finally {
   }
 }
 
+/** 提交选择 */
 const submitForm = async () => {
   // 提交请求
   formLoading.value = true
   try {
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
-    const emitUserList = userList.value.filter((user) => selectedUserIdList.value.includes(user.id))
+    const emitUserList = userList.value.filter((user: any) =>
+      selectedUserIdList.value.includes(user.id)
+    )
     // 发送操作成功的事件
     emit('confirm', activityId.value, emitUserList)
   } finally {
     formLoading.value = false
   }
 }
+
+/** 重置表单 */
 const resetForm = () => {
   deptList.value = []
   userList.value = []
@@ -93,8 +107,9 @@ const resetForm = () => {
 }
 
 /** 处理部门被点击 */
-const handleNodeClick = async (row: { [key: string]: any }) => {
+const handleNodeClick = (row: { [key: string]: any }) => {
   getUserList(row.id)
 }
+
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index bdd8e3f0..70aad873 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -24,6 +24,7 @@
 
                   <el-col :span="6" :offset="1">
                     <!-- 流程时间线 -->
+                    <!-- TODO @芋艿：selectUserConfirm 调整一下，改成 activityNodes 里面的东西。 -->
                     <ProcessInstanceTimeline
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
@@ -89,6 +90,8 @@ defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
   selectProcessDefinition: any
 }>()
+const emit = defineEmits(['cancel'])
+
 const { push, currentRoute } = useRouter() // 路由
 const message = useMessage() // 消息弹窗
 const { delView } = useTagsViewStore() // 视图操作
@@ -103,12 +106,10 @@ const fApi = ref<ApiAttrs>()
 const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const bpmnXML: any = ref(null) // BPMN 数据
-const simpleJson = ref<string|undefined>() // Simple 设计器数据 json 格式
-/** 当前的Tab */
-const activeTab = ref('form')
-const emit = defineEmits(['cancel'])
-// 审批节点信息
-const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([])
+const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
+
+const activeTab = ref('form') // 当前的 Tab
+const activityNodes = ref<ProcessInstanceApi.ApprovalNodeInfo[]>([]) // 审批节点信息
 
 /** 设置表单信息、获取流程图数据 **/
 const initProcessInfo = async (row: any, formVariables?: any) => {
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 3d863c61..92d68bf1 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -2,7 +2,7 @@
   <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
   <template v-if="!selectProcessDefinition">
     <el-input
-      v-model="currentSearchKey"
+      v-model="searchName"
       class="!w-50% mb-15px"
       placeholder="请输入流程名称"
       clearable
@@ -48,6 +48,7 @@
                   v-for="definition in definitions"
                   :key="definition.id"
                   :content="definition.description"
+                  :disabled="!definition.description || definition.description.trim().length === 0"
                   placement="top"
                 >
                   <el-card
@@ -93,12 +94,14 @@ defineOptions({ name: 'BpmProcessInstanceCreate' })
 const { proxy } = getCurrentInstance() as any
 const route = useRoute() // 路由
 const message = useMessage() // 消息
-const currentSearchKey = ref('') // 当前搜索关键字
-const processInstanceId: any = route.query.processInstanceId
+
+const searchName = ref('') // 当前搜索关键字
+const processInstanceId: any = route.query.processInstanceId // 流程实例编号。场景：重新发起时
 const loading = ref(true) // 加载中
 const categoryList: any = ref([]) // 分类的列表
 const categoryActive: any = ref({}) // 选中的分类
 const processDefinitionList = ref([]) // 流程定义的列表
+
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
@@ -106,7 +109,7 @@ const getList = async () => {
     // 所有流程分类数据
     await getCategoryList()
     // 所有流程定义数据
-    await getDefinitionList()
+    await getProcessDefinitionList()
 
     // 如果 processInstanceId 非空，说明是重新发起
     if (processInstanceId?.length > 0) {
@@ -129,11 +132,12 @@ const getList = async () => {
   }
 }
 
-// 获取所有流程分类数据
+/** 获取所有流程分类数据 */
 const getCategoryList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
+    // 选中首个分类
     if (categoryList.value.length > 0) {
       categoryActive.value = categoryList.value[0]
     }
@@ -141,8 +145,8 @@ const getCategoryList = async () => {
   }
 }
 
-// 获取所有流程定义数据
-const getDefinitionList = async () => {
+/** 获取所有流程定义数据 */
+const getProcessDefinitionList = async () => {
   try {
     // 流程定义
     processDefinitionList.value = await DefinitionApi.getProcessDefinitionList({
@@ -157,11 +161,10 @@ const getDefinitionList = async () => {
 /** 搜索流程 */
 const filteredProcessDefinitionList = ref([]) // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
-  if (currentSearchKey.value.trim()) {
+  if (searchName.value.trim()) {
     // 如果有搜索关键字，进行过滤
     filteredProcessDefinitionList.value = processDefinitionList.value.filter(
-      (definition: any) =>
-        definition.name.toLowerCase().includes(currentSearchKey.value.toLowerCase()) // 假设搜索依据是流程定义的名称
+      (definition: any) => definition.name.toLowerCase().includes(searchName.value.toLowerCase()) // 假设搜索依据是流程定义的名称
     )
   } else {
     // 如果没有搜索关键字，恢复所有数据
@@ -169,12 +172,30 @@ const handleQuery = () => {
   }
 }
 
-// 流程定义的分组
+/** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
   if (!processDefinitionList.value?.length) return {}
   return groupBy(filteredProcessDefinitionList.value, 'category')
 })
 
+/** 左侧分类切换 */
+const handleCategoryClick = (category: any) => {
+  categoryActive.value = category
+  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
+  if (categoryRef?.length) {
+    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
+    const categoryOffsetTop = categoryRef[0].offsetTop
+
+    // 滚动到对应位置
+    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
+  }
+}
+
+/** 通过分类 code 获取对应的名称 */
+const getCategoryName = (categoryCode: string) => {
+  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)?.name
+}
+
 // ========== 表单相关 ==========
 const selectProcessDefinition = ref() // 选择的流程定义
 const processDefinitionDetailRef = ref()
@@ -187,23 +208,6 @@ const handleSelect = async (row, formVariables?) => {
   await nextTick()
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
-// 左侧分类切换
-const handleCategoryClick = (category) => {
-  categoryActive.value = category
-  const categoryRef = proxy.$refs[`category-${category.code}`] // 获取点击分类对应的 DOM 元素
-  if (categoryRef?.length) {
-    const scrollWrapper = proxy.$refs.scrollWrapper // 获取右侧滚动容器
-    const categoryOffsetTop = categoryRef[0].offsetTop
-
-    // 滚动到对应位置
-    scrollWrapper.scrollTo({ top: categoryOffsetTop, behavior: 'smooth' })
-  }
-}
-
-// 通过分类code获取对应的名称
-const getCategoryName = (categoryCode) => {
-  return categoryList.value?.find((ctg) => ctg.code === categoryCode)?.name
-}
 
 /** 初始化 */
 onMounted(() => {
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index d770452f..31ec61d5 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -283,7 +283,7 @@ const handleSelectUser = (activityId, selectedList) => {
 const emit = defineEmits<{
   selectUserConfirm: [id: any, userList: any[]]
 }>()
-const customApprover: any = ref({})
+const customApprover: any = ref({}) // key：activityId，value：用户列表 TODO 芋艿：变量改下
 // 选择完成
 const handleUserSelectConfirm = (activityId, userList) => {
   customApprover.value[activityId] = userList || []

From 7d29c6319fcbd0c062e917d6a954301759282dc8 Mon Sep 17 00:00:00 2001
From: tuituji111 <tuituji111@163.com>
Date: Sat, 9 Nov 2024 18:47:42 +0800
Subject: [PATCH 077/109] =?UTF-8?q?=E3=80=90=E4=BC=98=E5=8C=96=E3=80=91BPM?=
 =?UTF-8?q?=20=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96=EF=BC=9A=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E7=A8=8B/=E5=AE=A1=E6=89=B9=E4=B8=AD?=
 =?UTF-8?q?=E5=BF=83/=E6=88=91=E7=9A=84=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/index.vue | 156 ++++++++++++++++--------
 1 file changed, 103 insertions(+), 53 deletions(-)

diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index f3b7439b..f57d159c 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -10,7 +10,7 @@
       :inline="true"
       label-width="68px"
     >
-      <el-form-item label="流程名称" prop="name">
+      <el-form-item label="" prop="name">
         <el-input
           v-model="queryParams.name"
           placeholder="请输入流程名称"
@@ -19,56 +19,7 @@
           class="!w-240px"
         />
       </el-form-item>
-      <el-form-item label="所属流程" prop="processDefinitionKey">
-        <el-input
-          v-model="queryParams.processDefinitionKey"
-          placeholder="请输入流程定义的标识"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="流程分类" prop="category">
-        <el-select
-          v-model="queryParams.category"
-          placeholder="请选择流程分类"
-          clearable
-          class="!w-240px"
-        >
-          <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="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择流程状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="发起时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
+      
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -81,6 +32,91 @@
           <Icon icon="ep:plus" class="mr-5px" /> 发起流程
         </el-button>
       </el-form-item>
+
+      <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
+          <el-select
+            v-model="queryParams.category"
+            placeholder="请选择流程分类"
+            clearable
+            class="!w-240px"
+          >
+            <el-option
+              v-for="category in categoryList"
+              :key="category.code"
+              :label="category.name"
+              :value="category.code"
+            />
+          </el-select>
+      </el-form-item>
+
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+      <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List" >
+        高级筛选
+      </el-button>
+
+      <el-popover
+        ref="popoverRef"
+        trigger="click"
+        virtual-triggering
+        persistent
+        :width="400"
+        :show-arrow="false"
+        placement="bottom-end"
+      >
+        <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">   
+          <el-select
+            v-model="queryParams.category"
+            placeholder="请选择流程发起人"
+            clearable
+            class="!w-390px"
+          >
+            <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="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey">
+        <el-input
+          v-model="queryParams.processDefinitionKey"
+          placeholder="请输入流程定义的标识"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-390px"
+        />
+        </el-form-item>
+        
+        <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择流程状态"
+            clearable
+            class="!w-390px"
+          >
+            <el-option
+              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            value-format="YYYY-MM-DD HH:mm:ss"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+          />
+        </el-form-item>
+      </el-popover>
+      </el-form-item>
+
     </el-form>
   </ContentWrap>
 
@@ -114,7 +150,7 @@
         width="180"
         :formatter="dateFormatter"
       />
-      <el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
+      <!--<el-table-column align="center" label="耗时" prop="durationInMillis" width="160">
         <template #default="scope">
           {{ scope.row.durationInMillis > 0 ? formatPast2(scope.row.durationInMillis) : '-' }}
         </template>
@@ -126,7 +162,7 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />
+      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />-->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -162,6 +198,7 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
+import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { dateFormatter, formatPast2 } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
@@ -270,4 +307,17 @@ onMounted(async () => {
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
+
+import { ref, unref } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
 </script>
+<style>
+.bold-label .el-form-item__label {
+  font-weight: bold; /* 将字体加粗 */
+}
+</style>
\ No newline at end of file

From 4ba5dad22e9def9a81c72d1e92239d89d87ea802 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 9 Nov 2024 21:36:43 +0800
Subject: [PATCH 078/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E6=88=91?=
 =?UTF-8?q?=E5=8F=91=E8=B5=B7=E7=9A=84=E5=AE=A1=E6=89=B9=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/index.vue | 208 ++++++++++++------------
 1 file changed, 105 insertions(+), 103 deletions(-)

diff --git a/src/views/bpm/processInstance/index.vue b/src/views/bpm/processInstance/index.vue
index f57d159c..48dfb58c 100644
--- a/src/views/bpm/processInstance/index.vue
+++ b/src/views/bpm/processInstance/index.vue
@@ -19,104 +19,102 @@
           class="!w-240px"
         />
       </el-form-item>
-      
+
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          v-hasPermi="['bpm:process-instance:query']"
-          @click="handleCreate(undefined)"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 发起流程
-        </el-button>
       </el-form-item>
 
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
       <el-form-item label="" prop="category" :style="{ position: 'absolute', right: '130px' }">
-          <el-select
-            v-model="queryParams.category"
-            placeholder="请选择流程分类"
-            clearable
-            class="!w-240px"
-          >
-            <el-option
-              v-for="category in categoryList"
-              :key="category.code"
-              :label="category.name"
-              :value="category.code"
-            />
-          </el-select>
-      </el-form-item>
-
-      <el-form-item :style="{ position: 'absolute', right: '0px' }">
-      <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List" >
-        高级筛选
-      </el-button>
-
-      <el-popover
-        ref="popoverRef"
-        trigger="click"
-        virtual-triggering
-        persistent
-        :width="400"
-        :show-arrow="false"
-        placement="bottom-end"
-      >
-        <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">   
-          <el-select
-            v-model="queryParams.category"
-            placeholder="请选择流程发起人"
-            clearable
-            class="!w-390px"
-          >
-            <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="所属流程" class="bold-label" label-position="top" prop="processDefinitionKey">
-        <el-input
-          v-model="queryParams.processDefinitionKey"
-          placeholder="请输入流程定义的标识"
+        <!-- TODO @tuituji：应该选择好分类，就触发搜索啦。 -->
+        <el-select
+          v-model="queryParams.category"
+          placeholder="请选择流程分类"
           clearable
-          @keyup.enter="handleQuery"
-          class="!w-390px"
-        />
-        </el-form-item>
-        
-        <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择流程状态"
-            clearable
-            class="!w-390px"
-          >
-            <el-option
-              v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
-              :key="dict.value"
-              :label="dict.label"
-              :value="dict.value"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
-          <el-date-picker
-            v-model="queryParams.createTime"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            type="daterange"
-            start-placeholder="开始日期"
-            end-placeholder="结束日期"
-            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-            class="!w-240px"
+          class="!w-155px"
+        >
+          <el-option
+            v-for="category in categoryList"
+            :key="category.code"
+            :label="category.name"
+            :value="category.code"
           />
-        </el-form-item>
-      </el-popover>
+        </el-select>
       </el-form-item>
 
+      <!-- 高级筛选 -->
+      <!-- TODO @ tuituji：style 可以使用 unocss -->
+      <el-form-item :style="{ position: 'absolute', right: '0px' }">
+        <el-button v-popover="popoverRef" v-click-outside="onClickOutside" :icon="List">
+          高级筛选
+        </el-button>
+        <el-popover
+          ref="popoverRef"
+          trigger="click"
+          virtual-triggering
+          persistent
+          :width="400"
+          :show-arrow="false"
+          placement="bottom-end"
+        >
+          <el-form-item label="流程发起人" class="bold-label" label-position="top" prop="category">
+            <el-select
+              v-model="queryParams.category"
+              placeholder="请选择流程发起人"
+              clearable
+              class="!w-390px"
+            >
+              <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="所属流程"
+            class="bold-label"
+            label-position="top"
+            prop="processDefinitionKey"
+          >
+            <el-input
+              v-model="queryParams.processDefinitionKey"
+              placeholder="请输入流程定义的标识"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-390px"
+            />
+          </el-form-item>
+          <el-form-item label="流程状态" class="bold-label" label-position="top" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="请选择流程状态"
+              clearable
+              class="!w-390px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="发起时间" class="bold-label" label-position="top" prop="createTime">
+            <el-date-picker
+              v-model="queryParams.createTime"
+              value-format="YYYY-MM-DD HH:mm:ss"
+              type="daterange"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+              class="!w-240px"
+            />
+          </el-form-item>
+        </el-popover>
+        <!-- TODO @tuituji：这里应该有确认，和取消、清空搜索条件，三个按钮。 -->
+      </el-form-item>
     </el-form>
   </ContentWrap>
 
@@ -131,6 +129,8 @@
         min-width="100"
         fixed="left"
       />
+      <!-- TODO @芋艿：摘要 -->
+      <!-- TODO @tuituji：流程状态。可见需求文档里  -->
       <el-table-column label="流程状态" prop="status" width="120">
         <template #default="scope">
           <dict-tag :type="DICT_TYPE.BPM_PROCESS_INSTANCE_STATUS" :value="scope.row.status" />
@@ -162,7 +162,7 @@
           </el-button>
         </template>
       </el-table-column>
-      <el-table-column label="流程编号" align="center" prop="id" min-width="320px" />-->
+      -->
       <el-table-column label="操作" align="center" fixed="right" width="180">
         <template #default="scope">
           <el-button
@@ -198,12 +198,13 @@
   </ContentWrap>
 </template>
 <script lang="ts" setup>
-import { Delete, Edit, Search, Share, Upload, List } from '@element-plus/icons-vue'
+// TODO @tuituji：List 改成 <Icon icon="ep:plus" class="mr-5px" /> 类似这种组件哈。
+import { List } from '@element-plus/icons-vue'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
-import { dateFormatter, formatPast2 } from '@/utils/formatTime'
+import { dateFormatter } from '@/utils/formatTime'
 import { ElMessageBox } from 'element-plus'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import { ProcessInstanceVO } from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
 
@@ -226,7 +227,7 @@ const queryParams = reactive({
   createTime: []
 })
 const queryFormRef = ref() // 搜索的表单
-const categoryList = ref([]) // 流程分类列表
+const categoryList = ref<CategoryVO[]>([]) // 流程分类列表
 
 /** 查询列表 */
 const getList = async () => {
@@ -297,6 +298,15 @@ const handleCancel = async (row) => {
   await getList()
 }
 
+// TODO @tuituji：这个 import 是不是没用哈？
+import { ClickOutside as vClickOutside } from 'element-plus'
+
+// TODO @tuituji：onClickAdvancedSearch。方法名叫这个，会更好一些哇？打开高级搜索。
+const popoverRef = ref()
+const onClickOutside = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
+
 /** 激活时 **/
 onActivated(() => {
   getList()
@@ -307,17 +317,9 @@ onMounted(async () => {
   await getList()
   categoryList.value = await CategoryApi.getCategorySimpleList()
 })
-
-import { ref, unref } from 'vue'
-import { ClickOutside as vClickOutside } from 'element-plus'
-
-const popoverRef = ref()
-const onClickOutside = () => {
-  unref(popoverRef).popperRef?.delayHide?.()
-}
 </script>
 <style>
 .bold-label .el-form-item__label {
   font-weight: bold; /* 将字体加粗 */
 }
-</style>
\ No newline at end of file
+</style>

From 81d2a38363b3472059cefd71d00e611d8dc17b0f Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 10 Nov 2024 09:30:30 +0800
Subject: [PATCH 079/109] =?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=E4=BA=BA=E8=87=AA=E9=80=89?=
 =?UTF-8?q?=E5=88=A4=E6=96=AD=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/bpm/processInstance/index.ts          |  3 ++-
 .../create/ProcessDefinitionDetail.vue        | 20 +++++++++----------
 .../detail/ProcessInstanceTimeline.vue        |  9 +++------
 3 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/src/api/bpm/processInstance/index.ts b/src/api/bpm/processInstance/index.ts
index e9256407..f97270f9 100644
--- a/src/api/bpm/processInstance/index.ts
+++ b/src/api/bpm/processInstance/index.ts
@@ -1,6 +1,6 @@
 import request from '@/config/axios'
 import { ProcessDefinitionVO } from '@/api/bpm/model'
-import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { NodeType, CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
 export type Task = {
   id: string
   name: string
@@ -43,6 +43,7 @@ export type ApprovalNodeInfo = {
   id: number
   name: string
   nodeType: NodeType
+  candidateStrategy?: CandidateStrategy
   status: number
   startTime?: Date
   endTime?: Date
diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 70aad873..7b8da933 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -29,7 +29,6 @@
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
                       :show-status-icon="false"
-                      :startUserSelectTasks="startUserSelectTasks"
                       :startUserSelectAssignees="startUserSelectAssignees"
                       @select-user-confirm="selectUserConfirm"
                     />
@@ -78,6 +77,7 @@
 <script lang="ts" setup>
 import { decodeFields, setConfAndFields2 } from '@/utils/formCreate'
 import { BpmModelType } from '@/utils/constants'
+import { CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
 import ProcessInstanceBpmnViewer from '../detail/ProcessInstanceBpmnViewer.vue'
 import ProcessInstanceSimpleViewer from '../detail/ProcessInstanceSimpleViewer.vue'
 import ProcessInstanceTimeline from '../detail/ProcessInstanceTimeline.vue'
@@ -103,7 +103,7 @@ const detailForm: any = ref({
 }) // 流程表单详情
 const fApi = ref<ApiAttrs>()
 // 指定审批人
-const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人的用户任务列表
+const startUserSelectTasks: any = ref([]) // 发起人需要选择审批人或抄送人的任务列表
 const startUserSelectAssignees = ref({}) // 发起人选择审批人的数据
 const bpmnXML: any = ref(null) // BPMN 数据
 const simpleJson = ref<string | undefined>() // Simple 设计器数据 json 格式
@@ -140,14 +140,6 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
     if (processDefinitionDetail) {
       bpmnXML.value = processDefinitionDetail.bpmnXml
       simpleJson.value = processDefinitionDetail.simpleModel
-      startUserSelectTasks.value = processDefinitionDetail.startUserSelectTasks
-      // 设置指定审批人
-      if (startUserSelectTasks.value?.length > 0) {
-        for (const userTask of startUserSelectTasks.value) {
-          // 初始化数据
-          startUserSelectAssignees.value[userTask.id] = []
-        }
-      }
     }
     // 情况二：业务表单
   } else if (row.formCustomCreatePath) {
@@ -169,6 +161,12 @@ const getApprovalDetail = async (row: any) => {
       message.error('查询不到审批详情信息！')
       return
     }
+    // 获取发起人自选的任务
+    startUserSelectTasks.value = data.activityNodes?.filter(node => CandidateStrategy.START_USER_SELECT === node.candidateStrategy )
+    for (const node of startUserSelectTasks.value) {
+      // 初始化数据
+      startUserSelectAssignees.value[node.id] = []
+    }
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
   } finally {
@@ -187,7 +185,7 @@ const submitForm = async () => {
         Array.isArray(startUserSelectAssignees.value[userTask.id]) &&
         startUserSelectAssignees.value[userTask.id].length === 0
       )
-        return message.warning(`请选择${userTask.name}的审批人`)
+        return message.warning(`请选择${userTask.name}的候选人`)
     }
   }
 
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 31ec61d5..49c7e4e1 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -39,9 +39,7 @@
         <!-- 需要自定义选择审批人 -->
         <div
           class="flex flex-wrap gap2 items-center"
-          v-if="
-            startUserSelectTasks?.length > 0 && Array.isArray(startUserSelectAssignees[activity.id])
-          "
+          v-if="isEmpty(activity.tasks) && isEmpty(activity.candidateUsers) && CandidateStrategy.START_USER_SELECT === activity.candidateStrategy"
         >
           <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
           <el-button
@@ -156,7 +154,8 @@
 import { formatDate } from '@/utils/formatTime'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import { TaskStatusEnum } from '@/api/bpm/task'
-import { NodeType } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { NodeType, CandidateStrategy } from '@/components/SimpleProcessDesignerV2/src/consts'
+import { isEmpty } from '@/utils/is'
 import { Check, Close, Loading, Clock, Minus, Delete } from '@element-plus/icons-vue'
 import starterSvg from '@/assets/svgs/bpm/starter.svg'
 import auditorSvg from '@/assets/svgs/bpm/auditor.svg'
@@ -170,12 +169,10 @@ withDefaults(
   defineProps<{
     activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
-    startUserSelectTasks?: any[] // 发起人需要选择审批人的用户任务列表
     startUserSelectAssignees?: any // 发起人选择审批人的数据
   }>(),
   {
     showStatusIcon: true, // 默认值为 true
-    startUserSelectTasks: () => [], // 默认值为空数组
     startUserSelectAssignees: () => {}
   }
 )

From 52a8c46a0abb9581c35acb63987857efa4e2b007 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 10 Nov 2024 11:46:45 +0800
Subject: [PATCH 080/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=8E=BB?=
 =?UTF-8?q?=E9=99=A4=E5=A4=9A=E4=BD=99=E7=9A=84=20:startUserSelectAssignee?=
 =?UTF-8?q?s=20=E4=BC=A0=E5=8F=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        | 21 ++++++++++---------
 .../detail/ProcessInstanceTimeline.vue        | 20 ++++++++++--------
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 7b8da933..50d3fbd7 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -24,12 +24,10 @@
 
                   <el-col :span="6" :offset="1">
                     <!-- 流程时间线 -->
-                    <!-- TODO @芋艿：selectUserConfirm 调整一下，改成 activityNodes 里面的东西。 -->
                     <ProcessInstanceTimeline
                       ref="timelineRef"
                       :activity-nodes="activityNodes"
                       :show-status-icon="false"
-                      :startUserSelectAssignees="startUserSelectAssignees"
                       @select-user-confirm="selectUserConfirm"
                     />
                   </el-col>
@@ -85,6 +83,7 @@ import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as DefinitionApi from '@/api/bpm/definition'
+import { ApprovalNodeInfo } from '@/api/bpm/processInstance'
 
 defineOptions({ name: 'ProcessDefinitionDetail' })
 const props = defineProps<{
@@ -153,20 +152,20 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
 /** 获取审批详情 */
 const getApprovalDetail = async (row: any) => {
   try {
-    const param = {
-      processDefinitionId: row.id
-    }
-    const data = await ProcessInstanceApi.getApprovalDetail(param)
+    const data = await ProcessInstanceApi.getApprovalDetail({ processDefinitionId: row.id })
     if (!data) {
       message.error('查询不到审批详情信息！')
       return
     }
+
     // 获取发起人自选的任务
-    startUserSelectTasks.value = data.activityNodes?.filter(node => CandidateStrategy.START_USER_SELECT === node.candidateStrategy )
+    startUserSelectTasks.value = data.activityNodes?.filter(
+      (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
+    )
     for (const node of startUserSelectTasks.value) {
-      // 初始化数据
       startUserSelectAssignees.value[node.id] = []
     }
+
     // 获取审批节点，显示 Timeline 的数据
     activityNodes.value = data.activityNodes
   } finally {
@@ -209,12 +208,14 @@ const submitForm = async () => {
   }
 }
 
+/** 取消发起审批 */
 const handleCancel = () => {
   emit('cancel')
 }
 
-const selectUserConfirm = (id, userList) => {
-  startUserSelectAssignees.value[id] = userList?.map((item) => item.id)
+/** 选择发起人 */
+const selectUserConfirm = (id: string, userList: any[]) => {
+  startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id)
 }
 
 defineExpose({ initProcessInfo })
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 49c7e4e1..bb5ccc43 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -39,17 +39,21 @@
         <!-- 需要自定义选择审批人 -->
         <div
           class="flex flex-wrap gap2 items-center"
-          v-if="isEmpty(activity.tasks) && isEmpty(activity.candidateUsers) && CandidateStrategy.START_USER_SELECT === activity.candidateStrategy"
+          v-if="
+            isEmpty(activity.tasks) &&
+            isEmpty(activity.candidateUsers) &&
+            CandidateStrategy.START_USER_SELECT === activity.candidateStrategy
+          "
         >
           <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
           <el-button
             class="!px-8px"
-            @click="handleSelectUser(activity.id, customApprover[activity.id])"
+            @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
           >
             <Icon icon="fa:user-plus" />
           </el-button>
           <div
-            v-for="(user, idx1) in customApprover[activity.id]"
+            v-for="(user, idx1) in customApproveUsers[activity.id]"
             :key="idx1"
             class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
           >
@@ -169,11 +173,9 @@ withDefaults(
   defineProps<{
     activityNodes: ProcessInstanceApi.ApprovalNodeInfo[] // 审批节点信息
     showStatusIcon?: boolean // 是否显示头像右下角状态图标
-    startUserSelectAssignees?: any // 发起人选择审批人的数据
   }>(),
   {
-    showStatusIcon: true, // 默认值为 true
-    startUserSelectAssignees: () => {}
+    showStatusIcon: true // 默认值为 true
   }
 )
 
@@ -280,10 +282,10 @@ const handleSelectUser = (activityId, selectedList) => {
 const emit = defineEmits<{
   selectUserConfirm: [id: any, userList: any[]]
 }>()
-const customApprover: any = ref({}) // key：activityId，value：用户列表 TODO 芋艿：变量改下
+const customApproveUsers: any = ref({}) // key：activityId，value：用户列表
 // 选择完成
-const handleUserSelectConfirm = (activityId, userList) => {
-  customApprover.value[activityId] = userList || []
+const handleUserSelectConfirm = (activityId: string, userList: any[]) => {
+  customApproveUsers.value[activityId] = userList || []
   emit('selectUserConfirm', activityId, userList)
 }
 </script>

From 5eb415437df45c524e5a1946266113c9618c06c4 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 12 Nov 2024 11:22:37 +0800
Subject: [PATCH 081/109] =?UTF-8?q?fix:=20=E8=A7=A3=E5=86=B3=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E6=B5=81=E7=A8=8B=E9=A1=B5=E9=9D=A2=E5=B7=A6=E4=BE=A7?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E4=B8=8E=E5=8F=B3=E4=BE=A7=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=88=86=E7=BB=84=E9=A1=BA=E5=BA=8F=E4=B8=8D=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/create/index.vue | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 92d68bf1..3a8a8810 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -41,7 +41,7 @@
               :ref="`category-${categoryCode}`"
             >
               <h3 class="text-18px font-bold mb-10px mt-5px">
-                {{ getCategoryName(categoryCode) }}
+                {{ getCategoryName(categoryCode as any) }}
               </h3>
               <div class="grid grid-cols-3 gap3">
                 <el-tooltip
@@ -175,7 +175,17 @@ const handleQuery = () => {
 /** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
   if (!processDefinitionList.value?.length) return {}
-  return groupBy(filteredProcessDefinitionList.value, 'category')
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+
+  const orderedGroup = {}
+  // 按照 categoryList 的顺序重新组织数据
+  categoryList.value.forEach((category: any) => {
+    if (grouped[category.code]) {
+      orderedGroup[category.code] = grouped[category.code]
+    }
+  })
+
+  return orderedGroup
 })
 
 /** 左侧分类切换 */

From e451f483c5bfea8f065634a938608eb10e608482 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 12 Nov 2024 11:34:55 +0800
Subject: [PATCH 082/109] =?UTF-8?q?feat:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=97=B6=E4=B8=8D=E5=B1=95=E7=A4=BAtimeline=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=A4=B4=E5=83=8F=E5=8F=B3=E4=B8=8B=E8=A7=92=E5=B0=8F?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/detail/ProcessInstanceTimeline.vue     | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index bb5ccc43..3307d1c4 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -99,7 +99,7 @@
                 </template>
                 <!-- 信息：任务 ICON -->
                 <div
-                  v-if="onlyStatusIconShow.includes(task.status)"
+                  v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
                   class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
                 >
                   <Icon
@@ -136,6 +136,7 @@
 
             <!-- 信息：任务 ICON -->
             <div
+              v-if="showStatusIcon"
               class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
             >
               <Icon

From d03fdecc26e58ad55ddb80aae00ecef13c2f8085 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 12 Nov 2024 13:25:50 +0800
Subject: [PATCH 083/109] =?UTF-8?q?fix:=20=E4=BA=BA=E9=80=89=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=A9=BF=E6=A2=AD=E6=A1=86=E7=BB=84=E4=BB=B6=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E9=83=A8=E9=97=A8=E4=B8=8D=E8=BF=87=E6=BB=A4=E5=B7=B2?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E6=95=B0=E6=8D=AE=E9=80=BB=E8=BE=91=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue | 114 ++++++++++++++++--------
 1 file changed, 79 insertions(+), 35 deletions(-)

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
index 2ba2a7ff..d2537e1e 100644
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -1,25 +1,27 @@
 <template>
-  <Dialog v-model="dialogVisible" title="人员选择" width="900">
-    <el-row>
+  <Dialog v-model="dialogVisible" title="人员选择" width="800">
+    <el-row class="gap2" v-loading="formLoading">
       <el-col :span="6">
-        <el-tree
-          ref="treeRef"
-          :data="deptList"
-          :expand-on-click-node="false"
-          :props="defaultProps"
-          default-expand-all
-          highlight-current
-          node-key="id"
-          @node-click="handleNodeClick"
-        />
+        <ContentWrap class="h-1/1">
+          <el-tree
+            ref="treeRef"
+            :data="deptList"
+            :expand-on-click-node="false"
+            :props="defaultProps"
+            default-expand-all
+            highlight-current
+            node-key="id"
+            @node-click="handleNodeClick"
+          />
+        </ContentWrap>
       </el-col>
-      <el-col :span="17" :offset="1">
+      <el-col :span="17">
         <el-transfer
           v-model="selectedUserIdList"
           :titles="['未选', '已选']"
           filterable
           filter-placeholder="搜索成员"
-          :data="userList"
+          :data="transferUserList"
           :props="{ label: 'nickname', key: 'id' }"
         />
       </el-col>
@@ -47,62 +49,87 @@ const emit = defineEmits<{
 }>()
 const { t } = useI18n() // 国际
 const message = useMessage() // 消息弹窗
-
 const deptList = ref<Tree[]>([]) // 部门树形结构化
-const userList: any = ref([]) // 用户列表
+const allUserList = ref<UserApi.UserVO[]>([]) // 所有用户列表
+const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
-const activityId = ref() // 关联的主键编号 TODO @goldenzqqq：这个 activityId 有没可能不传递。在使用 @submitForm="xxx()" 时，传递的参数。目的是，更加解耦一些。
+const activityId = ref()
+
+// 计算属性：合并已选择的用户和当前部门过滤后的用户
+const transferUserList = computed(() => {
+  // 获取所有已选择的用户
+  const selectedUsers = allUserList.value.filter((user: any) =>
+    selectedUserIdList.value.includes(user.id)
+  )
+
+  // 获取当前部门过滤后的未选择用户
+  const filteredUnselectedUsers = filteredUserList.value.filter(
+    (user: any) => !selectedUserIdList.value.includes(user.id)
+  )
+
+  // 合并并去重
+  return [...selectedUsers, ...filteredUnselectedUsers]
+})
 
 /** 打开弹窗 */
 const open = async (id: number, selectedList?: any[]) => {
   activityId.value = id
-  // 重置表单
   resetForm()
 
-  // 加载相关数据
   deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-  await getUserList()
-  // 设置选中的用户列表
-  selectedUserIdList.value = selectedList?.map((item: any) => item.id)
-
-  // 设置可见
+  // 初始加载所有用户
+  await getAllUserList()
+  // 初始状态下，过滤列表等于所有用户列表
+  filteredUserList.value = [...allUserList.value]
+  selectedUserIdList.value = selectedList?.map((item: any) => item.id) || []
   dialogVisible.value = true
 }
-
-/** 获取用户列表 */
-const getUserList = async (deptId?: number) => {
+/** 获取所有用户列表 */
+const getAllUserList = async () => {
   try {
     // @ts-ignore
-    // TODO @芋艿：替换到 simple List
-    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
-    userList.value = data.list
+    const data = await UserApi.getSimpleUserList()
+    allUserList.value = data
   } finally {
   }
 }
 
+/** 获取部门过滤后的用户列表 */
+const getUserList = async (deptId?: number) => {
+  formLoading.value = true
+  try {
+    // @ts-ignore
+    // TODO @芋艿：替换到 simple List 暂不支持 deptId 过滤
+    const data = await UserApi.getUserPage({ pageSize: 100, pageNo: 1, deptId })
+    // 更新过滤后的用户列表
+    filteredUserList.value = data.list
+  } finally {
+    formLoading.value = false
+  }
+}
+
 /** 提交选择 */
 const submitForm = async () => {
-  // 提交请求
-  formLoading.value = true
   try {
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
-    const emitUserList = userList.value.filter((user: any) =>
+    // 从所有用户列表中筛选出已选择的用户
+    const emitUserList = allUserList.value.filter((user: any) =>
       selectedUserIdList.value.includes(user.id)
     )
     // 发送操作成功的事件
     emit('confirm', activityId.value, emitUserList)
   } finally {
-    formLoading.value = false
   }
 }
 
 /** 重置表单 */
 const resetForm = () => {
   deptList.value = []
-  userList.value = []
+  allUserList.value = []
+  filteredUserList.value = []
   selectedUserIdList.value = []
 }
 
@@ -113,3 +140,20 @@ const handleNodeClick = (row: { [key: string]: any }) => {
 
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 </script>
+
+<style lang="scss" scoped>
+:deep() {
+  .el-transfer {
+    display: flex;
+  }
+  .el-transfer__buttons {
+    display: flex !important;
+    flex-direction: column-reverse;
+    justify-content: center;
+    gap: 20px;
+    .el-transfer__button:nth-child(2) {
+      margin: 0;
+    }
+  }
+}
+</style>

From 2bca7bb44a385e91deb019c11288efca40013d87 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 12 Nov 2024 13:49:33 +0800
Subject: [PATCH 084/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E9=A1=B5=E9=9D=A2-timeline=E7=BB=84=E4=BB=B6=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82=E6=A0=B7=E5=BC=8F=E4=B8=8Eicon=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/svgs/bpm/add-user.svg              |  1 +
 .../detail/ProcessInstanceTimeline.vue        | 35 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)
 create mode 100644 src/assets/svgs/bpm/add-user.svg

diff --git a/src/assets/svgs/bpm/add-user.svg b/src/assets/svgs/bpm/add-user.svg
new file mode 100644
index 00000000..bc7bdbff
--- /dev/null
+++ b/src/assets/svgs/bpm/add-user.svg
@@ -0,0 +1 @@
+<svg t="1731390087280" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4297" width="200" height="200"><path d="M639.9 541.7c76.4-44.2 127.9-126.8 127.9-221.5C767.7 179 653.2 64.5 512 64.5S256.3 179 256.3 320.2c0 89.6 46.1 168.4 115.8 214.1C193.5 593 64.5 761.2 64.5 959.5h63.9c0-211.5 172.1-383.6 383.6-383.6 44.9 0 87.8 8.1 127.9 22.4v-56.6zM320.2 320.2c0-105.8 86-191.8 191.8-191.8s191.8 86 191.8 191.8S617.7 512 512 512s-191.8-86-191.8-191.8zM831.6 767.7V639.9h-63.9v127.8H639.9v63.9h127.8v127.9h63.9V831.6h127.9v-63.9z" fill="#5f6266" p-id="4298"></path></svg>
\ No newline at end of file
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 3307d1c4..99656061 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -46,19 +46,22 @@
           "
         >
           <!--  && activity.nodeType === NodeType.USER_TASK_NODE -->
-          <el-button
-            class="!px-8px"
-            @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
-          >
-            <Icon icon="fa:user-plus" />
-          </el-button>
+
+          <el-tooltip content="添加用户" placement="left">
+            <el-button
+              class="!px-6px"
+              @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
+            >
+              <img class="w-18px text-#ccc"  src="@/assets/svgs/bpm/add-user.svg" alt="" />
+            </el-button>
+          </el-tooltip>
           <div
             v-for="(user, idx1) in customApproveUsers[activity.id]"
             :key="idx1"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
           >
-            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar :size="28" v-else>
+            <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 }}
@@ -73,26 +76,28 @@
             >
               <!-- 信息：头像昵称 -->
               <div
-                class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+                class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
               >
                 <template v-if="task.assigneeUser?.avatar || task.assigneeUser?.nickname">
                   <el-avatar
+                    class="!m-5px"
                     :size="28"
                     v-if="task.assigneeUser?.avatar"
                     :src="task.assigneeUser?.avatar"
                   />
-                  <el-avatar :size="28" v-else>
+                  <el-avatar class="!m-5px" :size="28" v-else>
                     {{ task.assigneeUser?.nickname.substring(0, 1) }}
                   </el-avatar>
                   {{ task.assigneeUser?.nickname }}
                 </template>
                 <template v-else-if="task.ownerUser?.avatar || task.ownerUser?.nickname">
                   <el-avatar
+                    class="!m-5px"
                     :size="28"
                     v-if="task.ownerUser?.avatar"
                     :src="task.ownerUser?.avatar"
                   />
-                  <el-avatar :size="28" v-else>
+                  <el-avatar class="!m-5px" :size="28" v-else>
                     {{ task.ownerUser?.nickname.substring(0, 1) }}
                   </el-avatar>
                   {{ task.ownerUser?.nickname }}
@@ -126,10 +131,10 @@
           <div
             v-for="(user, idx1) in activity.candidateUsers"
             :key="idx1"
-            class="bg-gray-100 h-35px rounded-3xl flex items-center p-8px gap-2 dark:color-gray-600 position-relative"
+            class="bg-gray-100 h-35px rounded-3xl flex items-center pr-8px dark:color-gray-600 position-relative"
           >
-            <el-avatar :size="28" v-if="user.avatar" :src="user.avatar" />
-            <el-avatar :size="28" v-else>
+            <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 }}

From 735837f0f96ac35ba3ef3242f3c99bbbc5192e45 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 13 Nov 2024 08:53:52 +0800
Subject: [PATCH 085/109] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E5=AE=A1?=
 =?UTF-8?q?=E6=89=B9=E8=AF=A6=E6=83=85=E9=A1=B5=E6=B5=81=E7=A8=8B=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81svg=E5=9B=BE=E6=A0=87=E5=91=BD=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../svgs/bpm/{audit2.svg => approve.svg}      |  0
 .../svgs/bpm/{audit4.svg => cancel.svg}       |  0
 .../svgs/bpm/{audit3.svg => reject.svg}       |  0
 .../svgs/bpm/{audit1.svg => running.svg}      |  0
 .../bpm/processInstance/detail/index.vue      | 23 +++++++++----------
 5 files changed, 11 insertions(+), 12 deletions(-)
 rename src/assets/svgs/bpm/{audit2.svg => approve.svg} (100%)
 rename src/assets/svgs/bpm/{audit4.svg => cancel.svg} (100%)
 rename src/assets/svgs/bpm/{audit3.svg => reject.svg} (100%)
 rename src/assets/svgs/bpm/{audit1.svg => running.svg} (100%)

diff --git a/src/assets/svgs/bpm/audit2.svg b/src/assets/svgs/bpm/approve.svg
similarity index 100%
rename from src/assets/svgs/bpm/audit2.svg
rename to src/assets/svgs/bpm/approve.svg
diff --git a/src/assets/svgs/bpm/audit4.svg b/src/assets/svgs/bpm/cancel.svg
similarity index 100%
rename from src/assets/svgs/bpm/audit4.svg
rename to src/assets/svgs/bpm/cancel.svg
diff --git a/src/assets/svgs/bpm/audit3.svg b/src/assets/svgs/bpm/reject.svg
similarity index 100%
rename from src/assets/svgs/bpm/audit3.svg
rename to src/assets/svgs/bpm/reject.svg
diff --git a/src/assets/svgs/bpm/audit1.svg b/src/assets/svgs/bpm/running.svg
similarity index 100%
rename from src/assets/svgs/bpm/audit1.svg
rename to src/assets/svgs/bpm/running.svg
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 26141f53..0680e66c 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -5,7 +5,7 @@
         <img
           class="position-absolute right-20px"
           width="150"
-          :src="auditIcons[processInstance.status]"
+          :src="auditIconsMap[processInstance.status]"
           alt=""
         />
         <div class="text-#878c93 h-15px">编号：{{ id }}</div>
@@ -137,11 +137,11 @@ import ProcessInstanceTaskList from './ProcessInstanceTaskList.vue'
 import ProcessInstanceOperationButton from './ProcessInstanceOperationButton.vue'
 import ProcessInstanceTimeline from './ProcessInstanceTimeline.vue'
 import { FieldPermissionType } from '@/components/SimpleProcessDesignerV2/src/consts'
-// TODO 代码优化，换个明确的 icon 名字
-import audit1 from '@/assets/svgs/bpm/audit1.svg'
-import audit2 from '@/assets/svgs/bpm/audit2.svg'
-import audit3 from '@/assets/svgs/bpm/audit3.svg'
-import audit4 from '@/assets/svgs/bpm/audit4.svg'
+import { TaskStatusEnum } from '@/api/bpm/task'
+import runningSvg from '@/assets/svgs/bpm/running.svg'
+import approveSvg from '@/assets/svgs/bpm/approve.svg'
+import rejectSvg from '@/assets/svgs/bpm/reject.svg'
+import cancelSvg from '@/assets/svgs/bpm/cancel.svg'
 
 defineOptions({ name: 'BpmProcessInstanceDetail' })
 const props = defineProps<{
@@ -155,11 +155,11 @@ const processInstance = ref<any>({}) // 流程实例
 const processDefinition = ref<any>({}) // 流程定义
 const processModelView = ref<any>({}) // 流程模型视图
 const operationButtonRef = ref() // 操作按钮组件 ref
-const auditIcons = {
-  1: audit1,
-  2: audit2,
-  3: audit3,
-  4: audit4
+const auditIconsMap = {
+  [TaskStatusEnum.RUNNING]: runningSvg,
+  [TaskStatusEnum.APPROVE]: approveSvg,
+  [TaskStatusEnum.REJECT]: rejectSvg,
+  [TaskStatusEnum.CANCEL]: cancelSvg
 }
 
 // ========== 申请信息 ==========
@@ -242,7 +242,6 @@ const getApprovalDetail = async () => {
 
 /** 获取流程模型视图*/
 const getProcessModelView = async () => {
-
   if (BpmModelType.BPMN === processDefinition.value?.modelType) {
     // 重置，解决 BPMN 流程图刷新不会重新渲染问题
     processModelView.value = {

From 0db0b66051f05c07ef1cab5d047e358efbf14347 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 13 Nov 2024 09:34:21 +0800
Subject: [PATCH 086/109] =?UTF-8?q?feat:=20=E5=AE=A1=E6=89=B9=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5-=E6=B5=81=E7=A8=8B=E5=9B=BE=E5=92=8C?=
 =?UTF-8?q?=E6=B5=81=E8=BD=AC=E8=AE=B0=E5=BD=95=E7=9A=84=E9=AB=98=E5=BA=A6?=
 =?UTF-8?q?=E4=BC=9A=E9=9A=8F=E7=9D=80=E7=88=B6=E5=AE=B9=E5=99=A8=E9=AB=98?=
 =?UTF-8?q?=E5=BA=A6=E8=87=AA=E5=8A=A8=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../processInstance/detail/ProcessInstanceBpmnViewer.vue | 7 ++++++-
 .../detail/ProcessInstanceSimpleViewer.vue               | 8 ++++++++
 src/views/bpm/processInstance/detail/index.vue           | 9 +++++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 7d0b9593..9592214f 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="h-700px" />
+    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
   </el-card>
 </template>
 <script lang="ts" setup>
@@ -45,4 +45,9 @@ watch(
   width: 100%;
   margin-bottom: 20px;
 }
+
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
 </style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index 22c21d69..d98e7734 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -4,6 +4,7 @@
       :flow-node="simpleModel"
       :tasks="tasks"
       :process-instance="processInstance"
+      class="process-viewer"
     />
   </div>
 </template>
@@ -151,3 +152,10 @@ const setSimpleModelNodeTaskStatus = (
   )
 }
 </script>
+
+<style lang="scss" scoped>
+:deep(.process-viewer) {
+  height: 100% !important;
+  min-height: 500px;
+}
+</style>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 0680e66c..4bd62cb9 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -319,6 +319,15 @@ $process-header-height: 194px;
         $process-header-height - 40px
     );
     overflow: auto;
+
+    :deep(.box-card) {
+      height: 100%;
+
+      .el-card__body {
+        height: 100%;
+        padding: 0;
+      }
+    }
   }
 }
 

From 271954146296e4cf0fde2d3ff263121a09403d29 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 14 Nov 2024 10:00:48 +0800
Subject: [PATCH 087/109] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2-=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E7=8A=B6=E6=80=81icon=E6=9C=AC?=
 =?UTF-8?q?=E4=BD=93=E9=A2=9C=E8=89=B2=E4=B8=8E=E8=83=8C=E6=99=AF=E8=89=B2?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTimeline.vue        | 33 ++++++++-----------
 1 file changed, 14 insertions(+), 19 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index 99656061..bbb67767 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -16,9 +16,10 @@
           <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
           <div
             v-if="showStatusIcon"
-            class="position-absolute top-17px left-17px bg-#fff rounded-full flex items-center p-2px"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
+            :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
           >
-            <el-icon :size="12" :color="getApprovalNodeColor(activity.status)">
+            <el-icon :size="12" color="#fff">
               <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
             </el-icon>
           </div>
@@ -52,7 +53,7 @@
               class="!px-6px"
               @click="handleSelectUser(activity.id, customApproveUsers[activity.id])"
             >
-              <img class="w-18px text-#ccc"  src="@/assets/svgs/bpm/add-user.svg" alt="" />
+              <img class="w-18px text-#ccc" src="@/assets/svgs/bpm/add-user.svg" alt="" />
             </el-button>
           </el-tooltip>
           <div
@@ -105,13 +106,10 @@
                 <!-- 信息：任务 ICON -->
                 <div
                   v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
-                  class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+                  :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
                 >
-                  <Icon
-                    :size="12"
-                    :icon="statusIconMap2[task.status]?.icon"
-                    :color="statusIconMap2[task.status]?.color"
-                  />
+                  <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
                 </div>
               </div>
             </div>
@@ -142,13 +140,10 @@
             <!-- 信息：任务 ICON -->
             <div
               v-if="showStatusIcon"
-              class="position-absolute top-22px left-26px bg-#fff rounded-full flex items-center p-2px"
+              class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+              :style="{ backgroundColor: statusIconMap2['-1']?.color }"
             >
-              <Icon
-                :size="12"
-                :icon="statusIconMap2['-1']?.icon"
-                :color="statusIconMap2['-1']?.color"
-              />
+              <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
             </div>
           </div>
         </div>
@@ -190,7 +185,7 @@ const statusIconMap2 = {
   // 未开始
   '-1': { color: '#909398', icon: 'ep-clock' },
   // 待审批
-  '0': { color: '#e5e7ec', icon: 'ep:loading' },
+  '0': { color: '#00b32a', icon: 'ep:loading' },
   // 审批中
   '1': { color: '#448ef7', icon: 'ep:loading' },
   // 审批通过
@@ -210,7 +205,7 @@ const statusIconMap2 = {
 const statusIconMap = {
   // 审批未开始
   '-1': { color: '#909398', icon: Clock },
-  '0': { color: '#e5e7ec', icon: Clock },
+  '0': { color: '#00b32a', icon: Clock },
   // 审批中
   '1': { color: '#448ef7', icon: Loading },
   // 审批通过
@@ -229,9 +224,9 @@ const statusIconMap = {
 
 const nodeTypeSvgMap = {
   // 结束节点
-  [NodeType.END_EVENT_NODE]: { color: '#ffffff', svg: finishSvg },
+  [NodeType.END_EVENT_NODE]: { color: '#909398', svg: finishSvg },
   // 发起人节点
-  [NodeType.START_USER_NODE]: { color: '#ffffff', svg: starterSvg },
+  [NodeType.START_USER_NODE]: { color: '#909398', svg: starterSvg },
   // 审批人节点
   [NodeType.USER_TASK_NODE]: { color: '#ff943e', svg: auditorSvg },
   // 抄送人节点

From 046e6ce5a765486880298f4f600e7c113a522217 Mon Sep 17 00:00:00 2001
From: LesanOuO <1960681385@qq.com>
Date: Sat, 16 Nov 2024 14:37:42 +0800
Subject: [PATCH 088/109] =?UTF-8?q?fix:=20=E5=BD=93id=E4=B8=BA=E9=9B=AA?=
 =?UTF-8?q?=E8=8A=B1id=E6=97=B6=E6=97=A0=E6=B3=95=E4=BC=A0=E9=80=92id?=
 =?UTF-8?q?=E8=87=B3=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/form/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/form/index.vue b/src/views/bpm/form/index.vue
index 3d542c80..46edd8f9 100644
--- a/src/views/bpm/form/index.vue
+++ b/src/views/bpm/form/index.vue
@@ -143,8 +143,9 @@ const openForm = (id?: number) => {
   const toRouter: { name: string; query?: { id: number } } = {
     name: 'BpmFormEditor'
   }
+  console.log(typeof id)
   // 表单新建的时候id传的是event需要排除
-  if (typeof id === 'number') {
+  if (typeof id === 'number' || typeof id === 'string') {
     toRouter.query = {
       id
     }

From da0a7801639a9335f87ba25eb7a160d85c1f76c9 Mon Sep 17 00:00:00 2001
From: LesanOuO <1960681385@qq.com>
Date: Sat, 16 Nov 2024 14:44:14 +0800
Subject: [PATCH 089/109] =?UTF-8?q?fix:=20=E9=80=89=E4=B8=AD=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=97=A0=E6=B3=95=E6=96=B0=E5=A2=9E=E5=B1=9E=E6=80=A7?=
 =?UTF-8?q?,=E6=8A=A5=E9=94=99filter=20is=20not=20a=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/properties/ElementProperties.vue              | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
index 494b3d97..016cdf6c 100644
--- a/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/properties/ElementProperties.vue
@@ -80,7 +80,7 @@ const resetAttributesList = () => {
   otherExtensionList.value = [] // 其他扩展配置
   bpmnElementProperties.value =
     // bpmnElement.value.businessObject?.extensionElements?.filter((ex) => {
-    bpmnElement.value.businessObject?.extensionElements?.values.filter((ex) => {
+    bpmnElement.value.businessObject?.extensionElements?.values?.filter((ex) => {
       if (ex.$type !== `${prefix}:Properties`) {
         otherExtensionList.value.push(ex)
       }

From 6ac0ee584491ef1cc2c2dd7773b73898ec51ddf0 Mon Sep 17 00:00:00 2001
From: LesanOuO <1960681385@qq.com>
Date: Sat, 16 Nov 2024 17:58:34 +0800
Subject: [PATCH 090/109] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AFint=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AF=BC=E8=87=B4=E7=B2=BE=E5=BA=A6=E4=B8=A2=E5=A4=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpmnProcessDesigner/package/penal/form/ElementForm.vue  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
index 33f0bc09..3bb7d660 100644
--- a/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/form/ElementForm.vue
@@ -268,9 +268,9 @@ const bpmnInstances = () => (window as any)?.bpmnInstances
 const resetFormList = () => {
   bpmnELement.value = bpmnInstances().bpmnElement
   formKey.value = bpmnELement.value.businessObject.formKey
-  if (formKey.value?.length > 0) {
-    formKey.value = parseInt(formKey.value)
-  }
+  // if (formKey.value?.length > 0) {
+  //   formKey.value = parseInt(formKey.value)
+  // }
   // 获取元素扩展属性 或者 创建扩展属性
   elExtensionElements.value =
     bpmnELement.value.businessObject.get('extensionElements') ||

From 67769c299ed0a65b4b2979b4d124718db6425430 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 17 Nov 2024 10:49:57 +0800
Subject: [PATCH 091/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=80=99=E9=80=89=E4=BA=BA=E7=AD=96=E7=95=A5?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95=E5=86=85=E6=88=90?=
 =?UTF-8?q?=E5=91=98=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/useApiSelect.tsx           |  2 +-
 .../SimpleProcessDesignerV2/src/consts.ts     |  8 ++-
 .../SimpleProcessDesignerV2/src/node.ts       | 61 +++++++++++++++----
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 25 +++++++-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 24 +++++++-
 5 files changed, 102 insertions(+), 18 deletions(-)

diff --git a/src/components/FormCreate/src/components/useApiSelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx
index 29cd3027..741b1d48 100644
--- a/src/components/FormCreate/src/components/useApiSelect.tsx
+++ b/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -185,7 +185,7 @@ export const useApiSelect = (option: ApiSelectProps) => {
             </el-select>
           )
         }
-        debugger
+        // debugger
         return (
           <el-select
             class="w-1/1"
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 2bd4660c..9f20a906 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -79,7 +79,7 @@ export interface SimpleFlowNode {
   // 审批按钮设置
   buttonsSetting?: any[]
   // 表单权限
-  fieldsPermission?: Array<Record<string, string>>
+  fieldsPermission?: Array<Record<string, any>>
   // 审批任务超时处理
   timeoutHandler?: TimeoutHandler
   // 审批任务拒绝处理
@@ -145,6 +145,11 @@ export enum CandidateStrategy {
    * 指定用户组
    */
   USER_GROUP = 40,
+
+   /**
+   * 表单内成员字段
+   */
+   USER_FIELD_ON_FORM = 50,
   /**
    * 流程表达式
    */
@@ -424,6 +429,7 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
   { label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
   { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
   { label: '用户组', value: CandidateStrategy.USER_GROUP },
+  { label: '表单内成员字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
   { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
 ]
 // 审批节点 的审批类型
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index d10173bb..64e5fef8 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -32,7 +32,7 @@ export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlo
  */
 export function useFormFieldsPermission(defaultPermission: FieldPermissionType) {
   // 字段权限配置. 需要有 field, title,  permissioin 属性
-  const fieldsPermissionConfig = ref<Array<Record<string, string>>>([])
+  const fieldsPermissionConfig = ref<Array<Record<string, any>>>([])
 
   const formType = inject<Ref<number>>('formType') // 表单类型
 
@@ -45,49 +45,71 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
   }
   // 默认的表单权限： 获取表单的所有字段，设置字段默认权限为只读
   const getDefaultFieldsPermission = (formFields?: string[]) => {
-    const defaultFieldsPermission: Array<Record<string, string>> = []
+    let defaultFieldsPermission: Array<Record<string, any>> = []
     if (formFields) {
-      formFields.forEach((fieldStr: string) => {
-        parseFieldsSetDefaultPermission(JSON.parse(fieldStr), defaultFieldsPermission)
-      })
+      defaultFieldsPermission = parseFormCreateFields(formFields).map( item => {
+        return {
+          field: item.field,
+          title: item.title,
+          permission: defaultPermission
+        }
+      });
     }
     return defaultFieldsPermission
   }
-  // 解析字段。赋给默认权限
-  const parseFieldsSetDefaultPermission = (
+   // 解析 formCreate 所有表单字段, 并返回
+   const parseFormCreateFields = (formFields?: string[]) => {
+    const result: Array<Record<string, any>> = []
+    if (formFields) {
+      formFields.forEach((fieldStr: string) => {
+        parseFields(JSON.parse(fieldStr), result)
+      })
+    }
+    return result
+  }
+  const parseFields = (
     rule: Record<string, any>,
-    fieldsPermission: Array<Record<string, string>>,
+    fields: Array<Record<string, any>>,
     parentTitle: string = ''
   ) => {
-    const { /**type,*/ field, title: tempTitle, children } = rule
+    const { type, field, $required, title: tempTitle, children } = rule
     if (field && tempTitle) {
       let title = tempTitle
       if (parentTitle) {
         title = `${parentTitle}.${tempTitle}`
       }
-      fieldsPermission.push({
+      let required = false;
+      if($required) {
+        required = true;
+      }
+      fields.push({
         field,
         title,
-        permission: defaultPermission
+        type,
+        required
       })
       // TODO 子表单 需要处理子表单字段
       // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
       //   // 解析子表单的字段
       //   rule.props.rule.forEach((item) => {
-      //     parseFieldsSetDefaultPermission(item, fieldsPermission, title)
+      //     parseFields(item, fieldsPermission, title)
       //   })
       // }
     }
     if (children && Array.isArray(children)) {
       children.forEach((rule) => {
-        parseFieldsSetDefaultPermission(rule, fieldsPermission)
+        parseFields(rule, fields)
       })
     }
   }
+  
+  // 获取表单的所有字段，作为下拉框选项
+  const formFieldOptions = parseFormCreateFields(unref(formFields))
 
   return {
     formType,
     fieldsPermissionConfig,
+    formFieldOptions,
     getNodeConfigFormFields
   }
 }
@@ -152,6 +174,7 @@ export type UserTaskFormType = {
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
   expression?: string // 流程表达式
+  userFieldOnForm?: string // 表单内成员字段
   approveRatio?: number
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
@@ -174,6 +197,7 @@ export type CopyTaskFormType = {
   userIds?: number[] // 用户
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
+  userFieldOnForm?: string // 表单内成员字段
   expression?: string // 流程表达式
 }
 
@@ -282,6 +306,11 @@ export function useNodeForm(nodeType: NodeType) {
       }
     }
 
+    // 表单内成员字段
+    if (configForm.value?.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM) {
+        showText = `表单内用户字段`
+    }
+
     // 发起人自选
     if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
       showText = `发起人自选`
@@ -328,6 +357,9 @@ export function useNodeForm(nodeType: NodeType) {
       case CandidateStrategy.USER_GROUP:
         candidateParam = configForm.value.userGroups!.join(',')
         break
+      case CandidateStrategy.USER_FIELD_ON_FORM:
+        candidateParam = configForm.value.userFieldOnForm!
+        break
       case CandidateStrategy.EXPRESSION:
         candidateParam = configForm.value.expression!
         break
@@ -376,6 +408,9 @@ export function useNodeForm(nodeType: NodeType) {
       case CandidateStrategy.USER_GROUP:
         configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
         break
+      case CandidateStrategy.USER_FIELD_ON_FORM:
+        configForm.value.userFieldOnForm = candidateParam
+        break
       case CandidateStrategy.EXPRESSION:
         configForm.value.expression = candidateParam
         break
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index c3006afc..422ac992 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -122,7 +122,20 @@
                 />
               </el-select>
             </el-form-item>
-
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
+              label="表单内成员字段"
+              prop="userFieldOnForm"
+            >
+              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+                <el-option
+                  v-for="(item,idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                />
+              </el-select>
+            </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
@@ -230,9 +243,15 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限配置
-const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
   FieldPermissionType.READ
 )
+// 表单内成员字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.required && item.type === 'UserSelect'
+  )
+})
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
 // 表单校验规则
@@ -243,6 +262,7 @@ const formRules = reactive({
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
+  userFieldOnForm: [{ required: true, message: '表单内成员字段为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
 })
 
@@ -272,6 +292,7 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
+  configForm.value.userFieldOnForm = ''
 }
 // 保存配置
 const saveConfig = async () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 899d7045..7d8d7708 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -157,6 +157,20 @@
                 />
               </el-select>
             </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
+              label="表单内成员字段"
+              prop="userFieldOnForm"
+            >
+              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+                <el-option
+                  v-for="(item,idx) in userFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                />
+              </el-select>
+            </el-form-item>
             <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
@@ -482,9 +496,15 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限设置
-const { formType, fieldsPermissionConfig, getNodeConfigFormFields } = useFormFieldsPermission(
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
   FieldPermissionType.READ
 )
+// 表单内成员字段选项, 必须是必填和用户选择器
+const userFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.required && item.type === 'UserSelect'
+  )
+})
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
   useButtonsSetting()
@@ -498,6 +518,7 @@ const formRules = reactive({
   roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
+  userFieldOnForm: [{ required: true, message: '表单内成员字段为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
@@ -533,6 +554,7 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
+   configForm.value.userFieldOnForm = ''
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
 }
 

From eefabf34a50b884e59926619ef1bcb343444e153 Mon Sep 17 00:00:00 2001
From: LesanOuO <1960681385@qq.com>
Date: Sun, 17 Nov 2024 14:43:52 +0800
Subject: [PATCH 092/109] =?UTF-8?q?feat:=20bpmn=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0assignStartUserHandlerType=E9=80=82=E9=85=8DS?=
 =?UTF-8?q?imple=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../descriptor/flowableDescriptor.json        | 14 ++++
 .../package/penal/PropertiesPanel.vue         |  4 +
 .../custom-config/ElementCustomConfig.vue     | 81 +++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue

diff --git a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
index 4ea632a0..ee8e0d22 100644
--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -1211,6 +1211,20 @@
           "isAttr": true
         }
       ]
+    },
+    {
+      "name": "AssignStartUserHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:StartEvent", "bpmn:UserTask"]
+      },
+      "properties": [
+      {
+        "name": "value",
+        "type": "Integer",
+        "isBody": true
+      }
+      ]
     }
   ],
   "emumerations": []
diff --git a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index 86a1cf74..5cd76383 100644
--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -54,6 +54,10 @@
         <template #title><Icon icon="ep:promotion" />其他</template>
         <element-other-config :id="elementId" />
       </el-collapse-item>
+      <el-collapse-item name="customConfig" v-if="elementType.indexOf('Task') !== -1" key="customConfig">
+        <template #title><Icon icon="ep:circle-plus-filled" />自定义配置</template>
+        <element-custom-config :id="elementId" :type="elementType" />
+      </el-collapse-item>
     </el-collapse>
   </div>
 </template>
diff --git a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
new file mode 100644
index 00000000..4b6cb527
--- /dev/null
+++ b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -0,0 +1,81 @@
+<template>
+  <div class="panel-tab__content">
+    <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
+    <el-radio-group v-model="assignStartUserHandlerType" @change="updateAssignStartUserHandlerType">
+      <div class="flex-col">
+        <div v-for="(item, index) in ASSIGN_START_USER_HANDLER_TYPES" :key="index">
+          <el-radio :key="item.value" :value="item.value" :label="item.label" />
+        </div>
+      </div>
+    </el-radio-group>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ASSIGN_START_USER_HANDLER_TYPES } from '../../../../SimpleProcessDesignerV2/src/consts'
+
+defineOptions({ name: 'ElementCustomConfig' })
+const props = defineProps({
+  id: String,
+  type: String
+})
+const prefix = inject('prefix')
+
+const elExtensionElements = ref()
+const assignStartUserHandlerTypeEl = ref()
+const assignStartUserHandlerType = ref()
+const otherExtensions = ref()
+const bpmnElement = ref()
+const bpmnInstances = () => (window as any)?.bpmnInstances
+
+const resetAttributesList = () => {
+  bpmnElement.value = bpmnInstances().bpmnElement
+
+  // 获取元素扩展属性 或者 创建扩展属性
+  elExtensionElements.value =
+    bpmnElement.value.businessObject?.extensionElements ??
+    bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
+
+  assignStartUserHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignStartUserHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignStartUserHandlerType`, { value: 1 })
+  assignStartUserHandlerType.value = assignStartUserHandlerTypeEl.value.value
+
+  // 保留剩余扩展元素，便于后面更新该元素对应属性
+  otherExtensions.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type !== `${prefix}:AssignStartUserHandlerType`
+    ) ?? []
+
+  // 更新元素扩展属性，避免后续报错
+  updateElementExtensions()
+}
+
+const updateAssignStartUserHandlerType = () => {
+  assignStartUserHandlerTypeEl.value.value = assignStartUserHandlerType.value
+
+  updateElementExtensions()
+}
+
+const updateElementExtensions = (properties) => {
+  const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
+    values: otherExtensions.value.concat([assignStartUserHandlerTypeEl.value])
+  })
+  bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
+    extensionElements: extensions
+  })
+}
+
+watch(
+  () => props.id,
+  (val) => {
+    val &&
+      val.length &&
+      nextTick(() => {
+        resetAttributesList()
+      })
+  },
+  { immediate: true }
+)
+</script>

From 756addd4233fcdd7aff2b0842c733004be2b6600 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Sun, 17 Nov 2024 16:47:18 +0800
Subject: [PATCH 093/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E3=80=91=E6=9D=A1=E4=BB=B6=E8=8A=82=E7=82=B9=EF=BC=9A?=
 =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E5=A2=9E=E5=8A=A0=E5=8F=91=E8=B5=B7=E4=BA=BA?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     |  14 +-
 .../SimpleProcessDesignerV2/src/node.ts       | 160 ++++++++----------
 .../src/nodes-config/CopyTaskNodeConfig.vue   |   6 +-
 .../src/nodes-config/UserTaskNodeConfig.vue   |   6 +-
 4 files changed, 85 insertions(+), 101 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 9f20a906..a712fb13 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -147,7 +147,7 @@ export enum CandidateStrategy {
   USER_GROUP = 40,
 
    /**
-   * 表单内成员字段
+   * 表单内用户字段
    */
    USER_FIELD_ON_FORM = 50,
   /**
@@ -429,7 +429,7 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
   { label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
   { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
   { label: '用户组', value: CandidateStrategy.USER_GROUP },
-  { label: '表单内成员字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
+  { label: '表单内用户字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
   { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
 ]
 // 审批节点 的审批类型
@@ -554,3 +554,13 @@ export const MULTI_LEVEL_DEPT: DictDataVO = [
   { label: '第 14 级部门', value: 14 },
   { label: '第 15 级部门', value: 15 }
 ]
+
+/**
+ * 流程实例的变量枚举
+ */
+export enum ProcessVariableEnum {
+  /**
+   * 发起用户 ID
+   */
+  START_USER_ID = 'PROCESS_START_USER_ID'
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 64e5fef8..53e2b11f 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -14,7 +14,8 @@ import {
   NODE_DEFAULT_NAME,
   AssignStartUserHandlerType,
   AssignEmptyHandlerType,
-  FieldPermissionType
+  FieldPermissionType,
+  ProcessVariableEnum
 } from './consts'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
@@ -27,6 +28,61 @@ export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlo
   return node
 }
 
+// 解析 formCreate 所有表单字段, 并返回
+const parseFormCreateFields = (formFields?: string[]) => {
+  const result: Array<Record<string, any>> = []
+  if (formFields) {
+    formFields.forEach((fieldStr: string) => {
+      parseFields(JSON.parse(fieldStr), result)
+    })
+  }
+  // 固定添加发起人 ID 字段
+  result.unshift( {
+    field: ProcessVariableEnum.START_USER_ID,
+    title: '发起人',
+    type: 'UserSelect',
+    required: true
+  })
+  return result
+}
+
+const parseFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>>,
+  parentTitle: string = ''
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule
+  if (field && tempTitle) {
+    let title = tempTitle
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`
+    }
+    let required = false;
+    if($required) {
+      required = true;
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required
+    })
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFields(rule, fields)
+    })
+  }
+}
+
+
 /**
  * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */
@@ -57,51 +113,8 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
     }
     return defaultFieldsPermission
   }
-   // 解析 formCreate 所有表单字段, 并返回
-   const parseFormCreateFields = (formFields?: string[]) => {
-    const result: Array<Record<string, any>> = []
-    if (formFields) {
-      formFields.forEach((fieldStr: string) => {
-        parseFields(JSON.parse(fieldStr), result)
-      })
-    }
-    return result
-  }
-  const parseFields = (
-    rule: Record<string, any>,
-    fields: Array<Record<string, any>>,
-    parentTitle: string = ''
-  ) => {
-    const { type, field, $required, title: tempTitle, children } = rule
-    if (field && tempTitle) {
-      let title = tempTitle
-      if (parentTitle) {
-        title = `${parentTitle}.${tempTitle}`
-      }
-      let required = false;
-      if($required) {
-        required = true;
-      }
-      fields.push({
-        field,
-        title,
-        type,
-        required
-      })
-      // TODO 子表单 需要处理子表单字段
-      // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
-      //   // 解析子表单的字段
-      //   rule.props.rule.forEach((item) => {
-      //     parseFields(item, fieldsPermission, title)
-      //   })
-      // }
-    }
-    if (children && Array.isArray(children)) {
-      children.forEach((rule) => {
-        parseFields(rule, fields)
-      })
-    }
-  }
+   
+   
   
   // 获取表单的所有字段，作为下拉框选项
   const formFieldOptions = parseFormCreateFields(unref(formFields))
@@ -117,50 +130,8 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
  * @description 获取表单的字段
  */
 export function useFormFields() {
-  // 解析后的表单字段
   const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
-  const parseFormFields = () => {
-    const parsedFormFields: Array<Record<string, string>> = []
-    if (formFields) {
-      formFields.value.forEach((fieldStr: string) => {
-        parseField(JSON.parse(fieldStr), parsedFormFields)
-      })
-    }
-    return parsedFormFields
-  }
-  // 解析字段。
-  const parseField = (
-    rule: Record<string, any>,
-    parsedFormFields: Array<Record<string, string>>,
-    parentTitle: string = ''
-  ) => {
-    const { field, title: tempTitle, children, type } = rule
-    if (field && tempTitle) {
-      let title = tempTitle
-      if (parentTitle) {
-        title = `${parentTitle}.${tempTitle}`
-      }
-      parsedFormFields.push({
-        field,
-        title,
-        type
-      })
-      // TODO 子表单 需要处理子表单字段
-      // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
-      //   // 解析子表单的字段
-      //   rule.props.rule.forEach((item) => {
-      //     parseFieldsSetDefaultPermission(item, fieldsPermission, title)
-      //   })
-      // }
-    }
-    if (children && Array.isArray(children)) {
-      children.forEach((rule) => {
-        parseField(rule, parsedFormFields)
-      })
-    }
-  }
-
-  return parseFormFields()
+  return parseFormCreateFields(unref(formFields))
 }
 
 export type UserTaskFormType = {
@@ -174,7 +145,7 @@ export type UserTaskFormType = {
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
   expression?: string // 流程表达式
-  userFieldOnForm?: string // 表单内成员字段
+  userFieldOnForm?: string // 表单内用户字段
   approveRatio?: number
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
@@ -197,7 +168,7 @@ export type CopyTaskFormType = {
   userIds?: number[] // 用户
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
-  userFieldOnForm?: string // 表单内成员字段
+  userFieldOnForm?: string // 表单内用户字段
   expression?: string // 流程表达式
 }
 
@@ -211,6 +182,7 @@ export function useNodeForm(nodeType: NodeType) {
   const deptOptions = inject<Ref<DeptApi.DeptVO[]>>('deptList') // 部门列表
   const userGroupOptions = inject<Ref<UserGroupApi.UserGroupVO[]>>('userGroupList') // 用户组列表
   const deptTreeOptions = inject('deptTree') // 部门树
+  const formFields = inject<Ref<string[]>>('formFields') // 流程表单字段
   const configForm = ref<UserTaskFormType | CopyTaskFormType>()
   if (nodeType === NodeType.USER_TASK_NODE) {
     configForm.value = {
@@ -306,9 +278,11 @@ export function useNodeForm(nodeType: NodeType) {
       }
     }
 
-    // 表单内成员字段
+    // 表单内用户字段
     if (configForm.value?.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM) {
-        showText = `表单内用户字段`
+      const formFieldOptions = parseFormCreateFields(unref(formFields))
+      const item = formFieldOptions.find((item) => item.field === configForm.value?.userFieldOnForm)
+      showText = `表单用户：${item?.title}`
     }
 
     // 发起人自选
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 422ac992..5df0d882 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -124,7 +124,7 @@
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
-              label="表单内成员字段"
+              label="表单内用户字段"
               prop="userFieldOnForm"
             >
               <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
@@ -246,7 +246,7 @@ const activeTabName = ref('user')
 const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
   FieldPermissionType.READ
 )
-// 表单内成员字段选项, 必须是必填和用户选择器
+// 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter(
     (item) => item.required && item.type === 'UserSelect'
@@ -262,7 +262,7 @@ const formRules = reactive({
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
-  userFieldOnForm: [{ required: true, message: '表单内成员字段为空', trigger: 'change' }],
+  userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
 })
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 7d8d7708..400ead2c 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -159,7 +159,7 @@
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
-              label="表单内成员字段"
+              label="表单内用户字段"
               prop="userFieldOnForm"
             >
               <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
@@ -499,7 +499,7 @@ const activeTabName = ref('user')
 const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
   FieldPermissionType.READ
 )
-// 表单内成员字段选项, 必须是必填和用户选择器
+// 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
   return formFieldOptions.filter(
     (item) => item.required && item.type === 'UserSelect'
@@ -518,7 +518,7 @@ const formRules = reactive({
   roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
-  userFieldOnForm: [{ required: true, message: '表单内成员字段为空', trigger: 'change' }],
+  userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],

From 2fe28af05d6d8d736255cb3e10ad52f3052fa799 Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Mon, 18 Nov 2024 09:03:45 +0800
Subject: [PATCH 094/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E3=80=91=E5=80=99=E9=80=89=E4=BA=BA=E7=AD=96=E7=95=A5?=
 =?UTF-8?q?=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=A1=A8=E5=8D=95=E9=83=A8=E9=97=A8?=
 =?UTF-8?q?=E8=B4=9F=E8=B4=A3=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../SimpleProcessDesignerV2/src/consts.ts     |  6 +-
 .../SimpleProcessDesignerV2/src/node.ts       | 22 ++++++
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 56 ++++++++++++++-
 .../src/nodes-config/UserTaskNodeConfig.vue   | 68 +++++++++++++------
 4 files changed, 127 insertions(+), 25 deletions(-)

diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index a712fb13..9b78fa11 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -145,11 +145,14 @@ export enum CandidateStrategy {
    * 指定用户组
    */
   USER_GROUP = 40,
-
    /**
    * 表单内用户字段
    */
    USER_FIELD_ON_FORM = 50,
+  /**
+   * 表单内部门负责人
+   */
+  DEPT_LEADER_ON_FORM = 51,
   /**
    * 流程表达式
    */
@@ -430,6 +433,7 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
   { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
   { label: '用户组', value: CandidateStrategy.USER_GROUP },
   { label: '表单内用户字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
+  { label: '表单内部门负责人', value: CandidateStrategy.DEPT_LEADER_ON_FORM },
   { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
 ]
 // 审批节点 的审批类型
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 53e2b11f..167e2c5d 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -146,6 +146,7 @@ export type UserTaskFormType = {
   postIds?: number[] // 岗位
   expression?: string // 流程表达式
   userFieldOnForm?: string // 表单内用户字段
+  deptFieldOnForm?: string // 表单内部门字段
   approveRatio?: number
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
@@ -169,6 +170,7 @@ export type CopyTaskFormType = {
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
   userFieldOnForm?: string // 表单内用户字段
+  deptFieldOnForm?: string // 表单内部门字段
   expression?: string // 流程表达式
 }
 
@@ -285,6 +287,11 @@ export function useNodeForm(nodeType: NodeType) {
       showText = `表单用户：${item?.title}`
     }
 
+    // 表单内部门负责人
+    if (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM) {
+      showText = `表单内部门负责人`
+    }
+
     // 发起人自选
     if (configForm.value?.candidateStrategy === CandidateStrategy.START_USER_SELECT) {
       showText = `发起人自选`
@@ -353,6 +360,13 @@ export function useNodeForm(nodeType: NodeType) {
         candidateParam = deptIds.concat('|' + configForm.value.deptLevel + '')
         break
       }
+      // 表单内部门的负责人
+      case CandidateStrategy.DEPT_LEADER_ON_FORM: {
+        // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
+        const deptFieldOnForm = configForm.value.deptFieldOnForm!
+        candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '')
+        break
+      }
       default:
         break
     }
@@ -405,6 +419,14 @@ export function useNodeForm(nodeType: NodeType) {
         configForm.value.deptLevel = +paramArray[1]
         break
       }
+      // 表单内的部门负责人
+      case CandidateStrategy.DEPT_LEADER_ON_FORM: {
+        // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
+        const paramArray = candidateParam.split('|')
+        configForm.value.deptFieldOnForm = paramArray[0]
+        configForm.value.deptLevel = +paramArray[1]
+        break
+      }
       default:
         break
     }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 5df0d882..91ac5b87 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -60,7 +60,8 @@
             <el-form-item
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.DEPT_MEMBER ||
-                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER
               "
               label="指定部门"
               prop="deptIds"
@@ -136,6 +137,40 @@
                 />
               </el-select>
             </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
+              label="表单内部门字段"
+              prop="deptFieldOnForm"
+            >
+              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+                <el-option
+                  v-for="(item,idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
+              "
+              :label="deptLevelLabel!"
+              prop="deptLevel"
+              span="24"
+            >
+              <el-select v-model="configForm.deptLevel" clearable>
+                <el-option
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
               label="流程表达式"
@@ -214,7 +249,8 @@ import {
   CandidateStrategy,
   NodeType,
   CANDIDATE_STRATEGY,
-  FieldPermissionType
+  FieldPermissionType,
+  MULTI_LEVEL_DEPT
 } from '../consts'
 import {
   useWatchNode,
@@ -234,6 +270,15 @@ const props = defineProps({
     required: true
   }
 })
+const deptLevelLabel = computed(() => {
+  let label = '部门负责人来源'
+  if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
+    label = label + '(指定部门向上)'
+  } else {
+    label = label + '(发起人部门向上)'
+  }
+  return label
+})
 // 抽屉配置
 const { settingVisible, closeDrawer, openDrawer } = useDrawer()
 // 当前节点
@@ -252,6 +297,12 @@ const userFieldOnFormOptions = computed(() => {
     (item) => item.required && item.type === 'UserSelect'
   )
 })
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.required && item.type === 'DeptSelect'
+  )
+})
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
 // 表单校验规则
@@ -263,6 +314,7 @@ const formRules = reactive({
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
 })
 
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 400ead2c..02ec582c 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -56,7 +56,6 @@
                 </el-radio>
               </el-radio-group>
             </el-form-item>
-
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.ROLE"
               label="指定角色"
@@ -94,25 +93,6 @@
                 show-checkbox
               />
             </el-form-item>
-            <el-form-item
-              v-if="
-                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER
-              "
-              :label="deptLevelLabel!"
-              prop="deptLevel"
-              span="24"
-            >
-              <el-select v-model="configForm.deptLevel" clearable>
-                <el-option
-                  v-for="(item, index) in MULTI_LEVEL_DEPT"
-                  :key="index"
-                  :label="item.label"
-                  :value="item.value"
-                />
-              </el-select>
-            </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy == CandidateStrategy.POST"
               label="指定岗位"
@@ -171,6 +151,40 @@
                 />
               </el-select>
             </el-form-item>
+            <el-form-item
+              v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
+              label="表单内部门字段"
+              prop="deptFieldOnForm"
+            >
+              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+                <el-option
+                  v-for="(item,idx) in deptFieldOnFormOptions"
+                  :key="idx"
+                  :label="item.title"
+                  :value="item.field"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="
+                configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
+              "
+              :label="deptLevelLabel!"
+              prop="deptLevel"
+              span="24"
+            >
+              <el-select v-model="configForm.deptLevel" clearable>
+                <el-option
+                  v-for="(item, index) in MULTI_LEVEL_DEPT"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
             <!-- TODO @jason：后续要支持选择已经存好的表达式 -->
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.EXPRESSION"
@@ -482,8 +496,10 @@ const deptLevelLabel = computed(() => {
   let label = '部门负责人来源'
   if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
     label = label + '(指定部门向上)'
+  } else if (configForm.value.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM) {
+    label = label + '(表单内部门向上)'
   } else {
-    label = label + '(发起人部门向上)'
+     label = label + '(发起人部门向上)'
   }
   return label
 })
@@ -505,6 +521,12 @@ const userFieldOnFormOptions = computed(() => {
     (item) => item.required && item.type === 'UserSelect'
   )
 })
+// 表单内部门字段选项, 必须是必填和部门选择器
+const deptFieldOnFormOptions = computed(() => {
+  return formFieldOptions.filter(
+    (item) => item.required && item.type === 'DeptSelect'
+  )
+})
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
   useButtonsSetting()
@@ -519,6 +541,7 @@ const formRules = reactive({
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
   userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
@@ -554,7 +577,8 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
-   configForm.value.userFieldOnForm = ''
+  configForm.value.userFieldOnForm = ''
+  configForm.value.deptFieldOnForm = ''
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
 }
 

From 6304a8e9b69004f67f73df21616756d22ef65731 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 19 Nov 2024 13:18:58 +0800
Subject: [PATCH 095/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UserSelectForm/index.vue       | 43 ++++++++-----------
 .../bpm/processInstance/create/index.vue      |  9 ++--
 2 files changed, 23 insertions(+), 29 deletions(-)

diff --git a/src/components/UserSelectForm/index.vue b/src/components/UserSelectForm/index.vue
index d2537e1e..801489b6 100644
--- a/src/components/UserSelectForm/index.vue
+++ b/src/components/UserSelectForm/index.vue
@@ -5,7 +5,7 @@
         <ContentWrap class="h-1/1">
           <el-tree
             ref="treeRef"
-            :data="deptList"
+            :data="deptTree"
             :expand-on-click-node="false"
             :props="defaultProps"
             default-expand-all
@@ -39,7 +39,7 @@
   </Dialog>
 </template>
 <script lang="ts" setup>
-import { defaultProps, handleTree } from '@/utils/tree'
+import { defaultProps, findTreeNode, handleTree } from '@/utils/tree'
 import * as DeptApi from '@/api/system/dept'
 import * as UserApi from '@/api/system/user'
 
@@ -49,27 +49,27 @@ const emit = defineEmits<{
 }>()
 const { t } = useI18n() // 国际
 const message = useMessage() // 消息弹窗
-const deptList = ref<Tree[]>([]) // 部门树形结构化
-const allUserList = ref<UserApi.UserVO[]>([]) // 所有用户列表
+const deptTree = ref<Tree[]>([]) // 部门树形结构化
+const userList = ref<UserApi.UserVO[]>([]) // 所有用户列表
 const filteredUserList = ref<UserApi.UserVO[]>([]) // 当前部门过滤后的用户列表
 const selectedUserIdList: any = ref([]) // 选中的用户列表
 const dialogVisible = ref(false) // 弹窗的是否展示
 const formLoading = ref(false) // 表单的加载中
 const activityId = ref()
 
-// 计算属性：合并已选择的用户和当前部门过滤后的用户
+/** 计算属性：合并已选择的用户和当前部门过滤后的用户 */
 const transferUserList = computed(() => {
-  // 获取所有已选择的用户
-  const selectedUsers = allUserList.value.filter((user: any) =>
+  // 1.1 获取所有已选择的用户
+  const selectedUsers = userList.value.filter((user: any) =>
     selectedUserIdList.value.includes(user.id)
   )
 
-  // 获取当前部门过滤后的未选择用户
+  // 1.2 获取当前部门过滤后的未选择用户
   const filteredUnselectedUsers = filteredUserList.value.filter(
     (user: any) => !selectedUserIdList.value.includes(user.id)
   )
 
-  // 合并并去重
+  // 2. 合并并去重
   return [...selectedUsers, ...filteredUnselectedUsers]
 })
 
@@ -78,23 +78,15 @@ const open = async (id: number, selectedList?: any[]) => {
   activityId.value = id
   resetForm()
 
-  deptList.value = handleTree(await DeptApi.getSimpleDeptList())
-  // 初始加载所有用户
-  await getAllUserList()
+  // 加载部门、用户列表
+  deptTree.value = handleTree(await DeptApi.getSimpleDeptList())
+  userList.value = await UserApi.getSimpleUserList()
+
   // 初始状态下，过滤列表等于所有用户列表
-  filteredUserList.value = [...allUserList.value]
+  filteredUserList.value = [...userList.value]
   selectedUserIdList.value = selectedList?.map((item: any) => item.id) || []
   dialogVisible.value = true
 }
-/** 获取所有用户列表 */
-const getAllUserList = async () => {
-  try {
-    // @ts-ignore
-    const data = await UserApi.getSimpleUserList()
-    allUserList.value = data
-  } finally {
-  }
-}
 
 /** 获取部门过滤后的用户列表 */
 const getUserList = async (deptId?: number) => {
@@ -102,6 +94,7 @@ const getUserList = async (deptId?: number) => {
   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
@@ -116,7 +109,7 @@ const submitForm = async () => {
     message.success(t('common.updateSuccess'))
     dialogVisible.value = false
     // 从所有用户列表中筛选出已选择的用户
-    const emitUserList = allUserList.value.filter((user: any) =>
+    const emitUserList = userList.value.filter((user: any) =>
       selectedUserIdList.value.includes(user.id)
     )
     // 发送操作成功的事件
@@ -127,8 +120,8 @@ const submitForm = async () => {
 
 /** 重置表单 */
 const resetForm = () => {
-  deptList.value = []
-  allUserList.value = []
+  deptTree.value = []
+  userList.value = []
   filteredUserList.value = []
   selectedUserIdList.value = []
 }
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 3a8a8810..49fac73e 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -174,17 +174,18 @@ const handleQuery = () => {
 
 /** 流程定义的分组 */
 const processDefinitionGroup: any = computed(() => {
-  if (!processDefinitionList.value?.length) return {}
-  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
+  if (!processDefinitionList.value?.length) {
+    return {}
+  }
 
-  const orderedGroup = {}
+  const grouped = groupBy(filteredProcessDefinitionList.value, 'category')
   // 按照 categoryList 的顺序重新组织数据
+  const orderedGroup = {}
   categoryList.value.forEach((category: any) => {
     if (grouped[category.code]) {
       orderedGroup[category.code] = grouped[category.code]
     }
   })
-
   return orderedGroup
 })
 

From 5f2e23f4da983c4a99c3763507f102bc5326df10 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 19 Nov 2024 15:09:45 +0800
Subject: [PATCH 096/109] =?UTF-8?q?feat:=20=E6=B5=81=E7=A8=8B=E5=8F=91?=
 =?UTF-8?q?=E8=B5=B7=E9=A1=B5=E9=9D=A2-=E5=8F=B3=E4=BE=A7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E6=BB=9A=E5=8A=A8=E5=88=B0=E5=AF=B9=E5=BA=94=E7=9A=84?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E5=8C=BA=E5=9F=9F=E5=B7=A6=E4=BE=A7=E5=88=86?=
 =?UTF-8?q?=E7=B1=BBactive=E5=93=8D=E5=BA=94=E5=BC=8F=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 49fac73e..a028b0e7 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -33,7 +33,7 @@
           </div>
         </el-col>
         <el-col :span="19">
-          <el-scrollbar ref="scrollWrapper" height="700">
+          <el-scrollbar ref="scrollWrapper" height="700" @scroll="handleScroll">
             <div
               class="mb-20px pl-10px"
               v-for="(definitions, categoryCode) in processDefinitionGroup"
@@ -220,6 +220,43 @@ const handleSelect = async (row, formVariables?) => {
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 
+/** 处理滚动事件 */
+const handleScroll = (e) => {
+  // 直接使用事件对象获取滚动位置
+  const scrollTop = e.scrollTop
+
+  // 获取所有分类区域的位置信息
+  const categoryPositions = categoryList.value
+    .map((category) => {
+      const categoryRef = proxy.$refs[`category-${category.code}`]
+      if (categoryRef?.[0]) {
+        return {
+          code: category.code,
+          offsetTop: categoryRef[0].offsetTop,
+          height: categoryRef[0].offsetHeight
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+
+  // 查找当前滚动位置对应的分类
+  let currentCategory = categoryPositions[0]
+  for (const position of categoryPositions) {
+    // 为了更好的用户体验，可以添加一个缓冲区域（比如 50px）
+    if (scrollTop >= position.offsetTop - 50) {
+      currentCategory = position
+    } else {
+      break
+    }
+  }
+
+  // 更新当前 active 的分类
+  if (currentCategory && categoryActive.value.code !== currentCategory.code) {
+    categoryActive.value = categoryList.value.find((c) => c.code === currentCategory.code)
+  }
+}
+
 /** 初始化 */
 onMounted(() => {
   getList()

From caa31a67fed1c38c8ee1d000f0c3aea76187f0b6 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 19 Nov 2024 15:54:52 +0800
Subject: [PATCH 097/109] =?UTF-8?q?feat:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E5=B7=A6=E4=BE=A7=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E5=88=97=E8=A1=A8=E5=8F=AA=E5=B1=95=E7=A4=BA=E6=9C=89?=
 =?UTF-8?q?=E6=B5=81=E7=A8=8B=E7=9A=84=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../create/ProcessDefinitionDetail.vue        |  6 +++--
 .../bpm/processInstance/create/index.vue      | 25 ++++++++++++++++---
 2 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
index 50d3fbd7..610963e1 100644
--- a/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
+++ b/src/views/bpm/processInstance/create/ProcessDefinitionDetail.vue
@@ -162,8 +162,10 @@ const getApprovalDetail = async (row: any) => {
     startUserSelectTasks.value = data.activityNodes?.filter(
       (node: ApprovalNodeInfo) => CandidateStrategy.START_USER_SELECT === node.candidateStrategy
     )
-    for (const node of startUserSelectTasks.value) {
-      startUserSelectAssignees.value[node.id] = []
+    if (startUserSelectTasks.value?.length > 0) {
+      for (const node of startUserSelectTasks.value) {
+        startUserSelectAssignees.value[node.id] = []
+      }
     }
 
     // 获取审批节点，显示 Timeline 的数据
diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index a028b0e7..4253448f 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -22,7 +22,7 @@
         <el-col :span="5">
           <div class="flex flex-col">
             <div
-              v-for="category in categoryList"
+              v-for="category in availableCategories"
               :key="category.code"
               class="flex items-center p-10px cursor-pointer text-14px rounded-md"
               :class="categoryActive.code === category.code ? 'text-#3e7bff bg-#e8eeff' : ''"
@@ -137,9 +137,11 @@ const getCategoryList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 选中首个分类
-    if (categoryList.value.length > 0) {
-      categoryActive.value = categoryList.value[0]
+    // 等待流程定义数据加载完成后再设置默认选中分类
+    await nextTick()
+    // 选中第一个有流程的分类
+    if (availableCategories.value.length > 0) {
+      categoryActive.value = availableCategories.value[0]
     }
   } finally {
   }
@@ -261,6 +263,21 @@ const handleScroll = (e) => {
 onMounted(() => {
   getList()
 })
+
+/** 过滤出有流程的分类列表 */
+const availableCategories = computed(() => {
+  if (!categoryList.value?.length || !processDefinitionGroup.value) {
+    return []
+  }
+  
+  // 获取所有有流程的分类代码
+  const availableCategoryCodes = Object.keys(processDefinitionGroup.value)
+  
+  // 过滤出有流程的分类
+  return categoryList.value.filter(category => 
+    availableCategoryCodes.includes(category.code)
+  )
+})
 </script>
 
 <style lang="scss" scoped>

From c34bfc18bc6ab7263d017f64653f1ec9fd686081 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 19 Nov 2024 16:13:26 +0800
Subject: [PATCH 098/109] =?UTF-8?q?feat:=20=E5=B7=A5=E4=BD=9C=E6=B5=81?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2-?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96timeline=E7=BB=84=E4=BB=B6=E5=A4=B4=E5=83=8F?=
 =?UTF-8?q?=E5=8F=B3=E4=B8=8B=E8=A7=92=E7=8A=B6=E6=80=81icon=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceTimeline.vue               | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
index bbb67767..56b466a9 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceTimeline.vue
@@ -16,10 +16,10 @@
           <img class="w-full h-full" :src="getApprovalNodeImg(activity.nodeType)" alt="" />
           <div
             v-if="showStatusIcon"
-            class="position-absolute top-17px left-17px rounded-full flex items-center p-2px"
+            class="position-absolute top-17px left-17px rounded-full flex items-center p-1px border-2 border-white border-solid"
             :style="{ backgroundColor: getApprovalNodeColor(activity.status) }"
           >
-            <el-icon :size="12" color="#fff">
+            <el-icon :size="11" color="#fff">
               <component :is="getApprovalNodeIcon(activity.status, activity.nodeType)" />
             </el-icon>
           </div>
@@ -106,10 +106,10 @@
                 <!-- 信息：任务 ICON -->
                 <div
                   v-if="showStatusIcon && onlyStatusIconShow.includes(task.status)"
-                  class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+                  class="position-absolute top-19px left-23px rounded-full flex items-center p-1px border-2 border-white border-solid"
                   :style="{ backgroundColor: statusIconMap2[task.status]?.color }"
                 >
-                  <Icon :size="12" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
+                  <Icon :size="11" :icon="statusIconMap2[task.status]?.icon" color="#FFFFFF" />
                 </div>
               </div>
             </div>
@@ -140,10 +140,10 @@
             <!-- 信息：任务 ICON -->
             <div
               v-if="showStatusIcon"
-              class="position-absolute top-19px left-23px rounded-full flex items-center p-2px"
+              class="position-absolute top-20px left-24px rounded-full flex items-center p-1px border-2 border-white border-solid"
               :style="{ backgroundColor: statusIconMap2['-1']?.color }"
             >
-              <Icon :size="12" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
+              <Icon :size="11" :icon="statusIconMap2['-1']?.icon" color="#FFFFFF" />
             </div>
           </div>
         </div>

From 7b8e4ea2381c71dfff3fdeae72fb70f3b7964554 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Tue, 19 Nov 2024 16:27:31 +0800
Subject: [PATCH 099/109] =?UTF-8?q?fix:=20=E6=B5=81=E7=A8=8B=E5=AE=A1?=
 =?UTF-8?q?=E6=A0=B8=E8=AF=A6=E6=83=85=E9=A1=B5-=E6=B5=81=E7=A8=8B?=
 =?UTF-8?q?=E5=9B=BE=E6=9C=AA=E8=83=BD=E6=92=91=E6=BB=A1=E5=89=A9=E4=BD=99?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9Fbug=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/ProcessInstanceBpmnViewer.vue      | 20 +++++++++++++------
 .../detail/ProcessInstanceSimpleViewer.vue    | 15 ++++++++++----
 .../bpm/processInstance/detail/index.vue      |  3 +++
 3 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 9592214f..781263d2 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -40,14 +40,22 @@ watch(
   }
 )
 </script>
-<style>
+<style lang="scss" scoped>
 .box-card {
+  height: 100%;
   width: 100%;
-  margin-bottom: 20px;
-}
+  margin-bottom: 0;
 
-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+  :deep(.el-card__body) {
+    height: 100%;
+    padding: 0;
+  }
+
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
index d98e7734..0808bec9 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceSimpleViewer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" class="mb-20px">
+  <div v-loading="loading" class="process-viewer-container">
     <SimpleProcessViewer
       :flow-node="simpleModel"
       :tasks="tasks"
@@ -154,8 +154,15 @@ const setSimpleModelNodeTaskStatus = (
 </script>
 
 <style lang="scss" scoped>
-:deep(.process-viewer) {
-  height: 100% !important;
-  min-height: 500px;
+.process-viewer-container {
+  height: 100%;
+  width: 100%;
+  
+  :deep(.process-viewer) {
+    height: 100% !important;
+    min-height: 100%;
+    width: 100%;
+    overflow: auto;
+  }
 }
 </style>
diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 4bd62cb9..3bd94fee 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -319,9 +319,12 @@ $process-header-height: 194px;
         $process-header-height - 40px
     );
     overflow: auto;
+    display: flex;
+    flex-direction: column;
 
     :deep(.box-card) {
       height: 100%;
+      flex: 1;
 
       .el-card__body {
         height: 100%;

From 12bd71e70b5ca739476091c191a29e51382215c3 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 19 Nov 2024 21:24:11 +0800
Subject: [PATCH 100/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E9=80=89=E6=8B=A9=E5=AE=A1=E6=89=B9=E4=BA=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/useApiSelect.tsx           |  1 -
 .../SimpleProcessDesignerV2/src/consts.ts     | 12 ++---
 .../SimpleProcessDesignerV2/src/node.ts       | 45 +++++++++----------
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 30 +++++--------
 .../src/nodes-config/UserTaskNodeConfig.vue   | 31 ++++++-------
 5 files changed, 54 insertions(+), 65 deletions(-)

diff --git a/src/components/FormCreate/src/components/useApiSelect.tsx b/src/components/FormCreate/src/components/useApiSelect.tsx
index 741b1d48..8ff95fb0 100644
--- a/src/components/FormCreate/src/components/useApiSelect.tsx
+++ b/src/components/FormCreate/src/components/useApiSelect.tsx
@@ -185,7 +185,6 @@ export const useApiSelect = (option: ApiSelectProps) => {
             </el-select>
           )
         }
-        // debugger
         return (
           <el-select
             class="w-1/1"
diff --git a/src/components/SimpleProcessDesignerV2/src/consts.ts b/src/components/SimpleProcessDesignerV2/src/consts.ts
index 9b78fa11..b81aa948 100644
--- a/src/components/SimpleProcessDesignerV2/src/consts.ts
+++ b/src/components/SimpleProcessDesignerV2/src/consts.ts
@@ -97,7 +97,7 @@ export interface SimpleFlowNode {
   // 是否默认的条件
   defaultFlow?: boolean
   // 活动的状态，用于前端节点状态展示
-  activityStatus? : TaskStatusEnum
+  activityStatus?: TaskStatusEnum
 }
 // 候选人策略枚举 （ 用于审批节点。抄送节点 )
 export enum CandidateStrategy {
@@ -145,14 +145,14 @@ export enum CandidateStrategy {
    * 指定用户组
    */
   USER_GROUP = 40,
-   /**
+  /**
    * 表单内用户字段
    */
-   USER_FIELD_ON_FORM = 50,
+  FORM_USER = 50,
   /**
    * 表单内部门负责人
    */
-  DEPT_LEADER_ON_FORM = 51,
+  FORM_DEPT_LEADER = 51,
   /**
    * 流程表达式
    */
@@ -432,8 +432,8 @@ export const CANDIDATE_STRATEGY: DictDataVO[] = [
   { label: '发起人部门负责人', value: CandidateStrategy.START_USER_DEPT_LEADER },
   { label: '发起人连续部门负责人', value: CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER },
   { label: '用户组', value: CandidateStrategy.USER_GROUP },
-  { label: '表单内用户字段', value: CandidateStrategy.USER_FIELD_ON_FORM },
-  { label: '表单内部门负责人', value: CandidateStrategy.DEPT_LEADER_ON_FORM },
+  { label: '表单内用户字段', value: CandidateStrategy.FORM_USER },
+  { label: '表单内部门负责人', value: CandidateStrategy.FORM_DEPT_LEADER },
   { label: '流程表达式', value: CandidateStrategy.EXPRESSION }
 ]
 // 审批节点 的审批类型
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 167e2c5d..06612d44 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -37,7 +37,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
     })
   }
   // 固定添加发起人 ID 字段
-  result.unshift( {
+  result.unshift({
     field: ProcessVariableEnum.START_USER_ID,
     title: '发起人',
     type: 'UserSelect',
@@ -46,6 +46,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
   return result
 }
 
+// TODO @jason：parse 方法，是不是搞到 formCreate.ts。统一维护管理
 const parseFields = (
   rule: Record<string, any>,
   fields: Array<Record<string, any>>,
@@ -57,9 +58,10 @@ const parseFields = (
     if (parentTitle) {
       title = `${parentTitle}.${tempTitle}`
     }
-    let required = false;
-    if($required) {
-      required = true;
+    // TODO @jason：按照微信讨论的，非 $required 显示，但是 disable 不可选择
+    let required = false
+    if ($required) {
+      required = true
     }
     fields.push({
       field,
@@ -82,7 +84,6 @@ const parseFields = (
   }
 }
 
-
 /**
  * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */
@@ -103,19 +104,17 @@ export function useFormFieldsPermission(defaultPermission: FieldPermissionType)
   const getDefaultFieldsPermission = (formFields?: string[]) => {
     let defaultFieldsPermission: Array<Record<string, any>> = []
     if (formFields) {
-      defaultFieldsPermission = parseFormCreateFields(formFields).map( item => {
+      defaultFieldsPermission = parseFormCreateFields(formFields).map((item) => {
         return {
           field: item.field,
           title: item.title,
           permission: defaultPermission
         }
-      });
+      })
     }
     return defaultFieldsPermission
   }
-   
-   
-  
+
   // 获取表单的所有字段，作为下拉框选项
   const formFieldOptions = parseFormCreateFields(unref(formFields))
 
@@ -281,14 +280,14 @@ export function useNodeForm(nodeType: NodeType) {
     }
 
     // 表单内用户字段
-    if (configForm.value?.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM) {
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
       const formFieldOptions = parseFormCreateFields(unref(formFields))
       const item = formFieldOptions.find((item) => item.field === configForm.value?.userFieldOnForm)
       showText = `表单用户：${item?.title}`
     }
 
     // 表单内部门负责人
-    if (configForm.value?.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM) {
+    if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER) {
       showText = `表单内部门负责人`
     }
 
@@ -338,7 +337,7 @@ export function useNodeForm(nodeType: NodeType) {
       case CandidateStrategy.USER_GROUP:
         candidateParam = configForm.value.userGroups!.join(',')
         break
-      case CandidateStrategy.USER_FIELD_ON_FORM:
+      case CandidateStrategy.FORM_USER:
         candidateParam = configForm.value.userFieldOnForm!
         break
       case CandidateStrategy.EXPRESSION:
@@ -361,7 +360,7 @@ export function useNodeForm(nodeType: NodeType) {
         break
       }
       // 表单内部门的负责人
-      case CandidateStrategy.DEPT_LEADER_ON_FORM: {
+      case CandidateStrategy.FORM_DEPT_LEADER: {
         // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
         const deptFieldOnForm = configForm.value.deptFieldOnForm!
         candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '')
@@ -396,7 +395,7 @@ export function useNodeForm(nodeType: NodeType) {
       case CandidateStrategy.USER_GROUP:
         configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
         break
-      case CandidateStrategy.USER_FIELD_ON_FORM:
+      case CandidateStrategy.FORM_USER:
         configForm.value.userFieldOnForm = candidateParam
         break
       case CandidateStrategy.EXPRESSION:
@@ -420,7 +419,7 @@ export function useNodeForm(nodeType: NodeType) {
         break
       }
       // 表单内的部门负责人
-      case CandidateStrategy.DEPT_LEADER_ON_FORM: {
+      case CandidateStrategy.FORM_DEPT_LEADER: {
         // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
         const paramArray = candidateParam.split('|')
         configForm.value.deptFieldOnForm = paramArray[0]
@@ -512,22 +511,22 @@ export function useNodeName2(node: Ref<SimpleFlowNode>, nodeType: NodeType) {
 /**
  * @description 根据节点任务状态，获取节点任务状态样式
  */
-export function  useTaskStatusClass(taskStatus: TaskStatusEnum | undefined) : string {
+export function useTaskStatusClass(taskStatus: TaskStatusEnum | undefined): string {
   if (!taskStatus) {
     return ''
   }
-  if (taskStatus === TaskStatusEnum.APPROVE ) {
+  if (taskStatus === TaskStatusEnum.APPROVE) {
     return 'status-pass'
   }
-  if (taskStatus === TaskStatusEnum.RUNNING ) {
+  if (taskStatus === TaskStatusEnum.RUNNING) {
     return 'status-running'
   }
-  if (taskStatus === TaskStatusEnum.REJECT ) {
+  if (taskStatus === TaskStatusEnum.REJECT) {
     return 'status-reject'
   }
-  if (taskStatus === TaskStatusEnum.CANCEL ) {
+  if (taskStatus === TaskStatusEnum.CANCEL) {
     return 'status-cancel'
   }
-   
-  return '';
+
+  return ''
 }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index 91ac5b87..eeb51bd4 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -124,13 +124,13 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
               prop="userFieldOnForm"
             >
               <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
                 <el-option
-                  v-for="(item,idx) in userFieldOnFormOptions"
+                  v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
@@ -138,13 +138,13 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
               prop="deptFieldOnForm"
             >
               <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
                 <el-option
-                  v-for="(item,idx) in deptFieldOnFormOptions"
+                  v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
@@ -155,8 +155,9 @@
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
                 configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
+                configForm.candidateStrategy ==
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
               "
               :label="deptLevelLabel!"
               prop="deptLevel"
@@ -288,20 +289,15 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.COPY_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限配置
-const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
-  FieldPermissionType.READ
-)
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ)
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter(
-    (item) => item.required && item.type === 'UserSelect'
-  )
+  return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect')
 })
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter(
-    (item) => item.required && item.type === 'DeptSelect'
-  )
+  return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect')
 })
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
@@ -332,9 +328,7 @@ const {
 const configForm = tempConfigForm as Ref<CopyTaskFormType>
 // 抄送人策略， 去掉发起人自选 和 发起人自己
 const copyUserStrategies = computed(() => {
-  return CANDIDATE_STRATEGY.filter(
-    (item) => item.value !== CandidateStrategy.START_USER
-  )
+  return CANDIDATE_STRATEGY.filter((item) => item.value !== CandidateStrategy.START_USER)
 })
 // 改变抄送人设置策略
 const changeCandidateStrategy = () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index 02ec582c..ebb41278 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -138,13 +138,13 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="configForm.candidateStrategy === CandidateStrategy.USER_FIELD_ON_FORM"
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
               prop="userFieldOnForm"
             >
               <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
                 <el-option
-                  v-for="(item,idx) in userFieldOnFormOptions"
+                  v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
@@ -152,13 +152,13 @@
               </el-select>
             </el-form-item>
             <el-form-item
-              v-if="configForm.candidateStrategy === CandidateStrategy.DEPT_LEADER_ON_FORM"
+              v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
               prop="deptFieldOnForm"
             >
               <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
                 <el-option
-                  v-for="(item,idx) in deptFieldOnFormOptions"
+                  v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
@@ -169,8 +169,9 @@
               v-if="
                 configForm.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER ||
                 configForm.candidateStrategy == CandidateStrategy.START_USER_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
-                configForm.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM
+                configForm.candidateStrategy ==
+                  CandidateStrategy.START_USER_MULTI_LEVEL_DEPT_LEADER ||
+                configForm.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER
               "
               :label="deptLevelLabel!"
               prop="deptLevel"
@@ -496,10 +497,10 @@ const deptLevelLabel = computed(() => {
   let label = '部门负责人来源'
   if (configForm.value.candidateStrategy == CandidateStrategy.MULTI_LEVEL_DEPT_LEADER) {
     label = label + '(指定部门向上)'
-  } else if (configForm.value.candidateStrategy == CandidateStrategy.DEPT_LEADER_ON_FORM) {
+  } else if (configForm.value.candidateStrategy == CandidateStrategy.FORM_DEPT_LEADER) {
     label = label + '(表单内部门向上)'
   } else {
-     label = label + '(发起人部门向上)'
+    label = label + '(发起人部门向上)'
   }
   return label
 })
@@ -512,20 +513,15 @@ const { nodeName, showInput, clickIcon, blurEvent } = useNodeName(NodeType.USER_
 // 激活的 Tab 标签页
 const activeTabName = ref('user')
 // 表单字段权限设置
-const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } = useFormFieldsPermission(
-  FieldPermissionType.READ
-)
+const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFields } =
+  useFormFieldsPermission(FieldPermissionType.READ)
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter(
-    (item) => item.required && item.type === 'UserSelect'
-  )
+  return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect')
 })
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter(
-    (item) => item.required && item.type === 'DeptSelect'
-  )
+  return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect')
 })
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
@@ -577,6 +573,7 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
+  // TODO @jason：是不是 userFieldOnForm => formUser；deptFieldOnForm => formDeptLeader；原因是：想通前缀，好管理点
   configForm.value.userFieldOnForm = ''
   configForm.value.deptFieldOnForm = ''
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE

From 138d535e879f18f49ac5961ae6d8a02878e65149 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Wed, 20 Nov 2024 11:26:30 +0800
Subject: [PATCH 101/109] =?UTF-8?q?fix:=20=E5=8F=91=E8=B5=B7=E6=B5=81?=
 =?UTF-8?q?=E7=A8=8B=E9=A1=B5=E9=9D=A2-=E8=BF=9B=E5=85=A5=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=97=B6=E5=B7=A6=E4=BE=A7=E7=AC=AC=E4=B8=80=E4=B8=AA?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=B2=A1=E6=9C=89active=E6=A0=B7=E5=BC=8Fbug?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/create/index.vue | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index 4253448f..a3bf143b 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -137,12 +137,6 @@ const getCategoryList = async () => {
   try {
     // 流程分类
     categoryList.value = await CategoryApi.getCategorySimpleList()
-    // 等待流程定义数据加载完成后再设置默认选中分类
-    await nextTick()
-    // 选中第一个有流程的分类
-    if (availableCategories.value.length > 0) {
-      categoryActive.value = availableCategories.value[0]
-    }
   } finally {
   }
 }
@@ -156,6 +150,11 @@ const getProcessDefinitionList = async () => {
     })
     // 初始化过滤列表为全部流程定义
     filteredProcessDefinitionList.value = processDefinitionList.value
+
+    // 在获取完所有数据后，设置第一个有效分类为激活状态
+    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
+      categoryActive.value = availableCategories.value[0]
+    }
   } finally {
   }
 }

From 39f183bb3e6b40a18ef931c463a728fb1683b7b0 Mon Sep 17 00:00:00 2001
From: GoldenZqqq <1361001127@qq.com>
Date: Thu, 21 Nov 2024 09:42:17 +0800
Subject: [PATCH 102/109] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=B7=A5?=
 =?UTF-8?q?=E4=BD=9C=E6=B5=81=E5=AE=A1=E6=89=B9=E9=A1=B5=E9=9D=A2=E4=B8=8D?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA=E8=AF=A6=E6=83=85=E8=A1=A8=E5=8D=95bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/processInstance/detail/index.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/views/bpm/processInstance/detail/index.vue b/src/views/bpm/processInstance/detail/index.vue
index 3bd94fee..0461a202 100644
--- a/src/views/bpm/processInstance/detail/index.vue
+++ b/src/views/bpm/processInstance/detail/index.vue
@@ -128,6 +128,7 @@ import { formatDate } from '@/utils/formatTime'
 import { DICT_TYPE } from '@/utils/dict'
 import { BpmModelType } from '@/utils/constants'
 import { setConfAndFields2 } from '@/utils/formCreate'
+import { registerComponent } from '@/utils/routerHelper'
 import type { ApiAttrs } from '@form-create/element-ui/types/config'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
 import * as UserApi from '@/api/system/user'
@@ -228,6 +229,9 @@ const getApprovalDetail = async () => {
           })
         }
       })
+    } else {
+      // 注意：data.processDefinition.formCustomViewPath 是组件的全路径，例如说：/crm/contract/detail/index.vue
+      BusinessFormComponent.value = registerComponent(data.processDefinition.formCustomViewPath)
     }
 
     // 获取审批节点，显示 Timeline 的数据

From a07f61a9edca17463e9960290a957dc85b4ea470 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 21 Nov 2024 09:53:12 +0800
Subject: [PATCH 103/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9ABPMN=20?=
 =?UTF-8?q?=E8=AE=BE=E8=AE=A1=E5=99=A8=EF=BC=8C=E5=A2=9E=E5=8A=A0=20UserTa?=
 =?UTF-8?q?sk=20=E8=87=AA=E5=AE=9A=E4=B9=89=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package/penal/custom-config/ElementCustomConfig.vue    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
index 4b6cb527..d27b2997 100644
--- a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -1,3 +1,6 @@
+<!-- UserTask 自定义配置：
+     1. 审批人与提交人为同一人时
+-->
 <template>
   <div class="panel-tab__content">
     <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
@@ -12,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ASSIGN_START_USER_HANDLER_TYPES } from '../../../../SimpleProcessDesignerV2/src/consts'
+import { ASSIGN_START_USER_HANDLER_TYPES } from '@/components/SimpleProcessDesignerV2/src/consts'
 
 defineOptions({ name: 'ElementCustomConfig' })
 const props = defineProps({
@@ -58,7 +61,7 @@ const updateAssignStartUserHandlerType = () => {
   updateElementExtensions()
 }
 
-const updateElementExtensions = (properties) => {
+const updateElementExtensions = () => {
   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
     values: otherExtensions.value.concat([assignStartUserHandlerTypeEl.value])
   })

From 24e137499344d06e93ff4758a310105aac7b7a6a Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 21 Nov 2024 19:48:09 +0800
Subject: [PATCH 104/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../bpm/processInstance/create/index.vue      | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/views/bpm/processInstance/create/index.vue b/src/views/bpm/processInstance/create/index.vue
index a3bf143b..284cbdb7 100644
--- a/src/views/bpm/processInstance/create/index.vue
+++ b/src/views/bpm/processInstance/create/index.vue
@@ -85,7 +85,7 @@
 <script lang="ts" setup>
 import * as DefinitionApi from '@/api/bpm/definition'
 import * as ProcessInstanceApi from '@/api/bpm/processInstance'
-import { CategoryApi } from '@/api/bpm/category'
+import { CategoryApi, CategoryVO } from '@/api/bpm/category'
 import ProcessDefinitionDetail from './ProcessDefinitionDetail.vue'
 import { groupBy } from 'lodash-es'
 
@@ -221,14 +221,14 @@ const handleSelect = async (row, formVariables?) => {
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables)
 }
 
-/** 处理滚动事件 */
-const handleScroll = (e) => {
+/** 处理滚动事件，和左侧分类联动 */
+const handleScroll = (e: any) => {
   // 直接使用事件对象获取滚动位置
   const scrollTop = e.scrollTop
 
   // 获取所有分类区域的位置信息
   const categoryPositions = categoryList.value
-    .map((category) => {
+    .map((category: CategoryVO) => {
       const categoryRef = proxy.$refs[`category-${category.code}`]
       if (categoryRef?.[0]) {
         return {
@@ -254,29 +254,31 @@ const handleScroll = (e) => {
 
   // 更新当前 active 的分类
   if (currentCategory && categoryActive.value.code !== currentCategory.code) {
-    categoryActive.value = categoryList.value.find((c) => c.code === currentCategory.code)
+    categoryActive.value = categoryList.value.find(
+      (c: CategoryVO) => c.code === currentCategory.code
+    )
   }
 }
 
-/** 初始化 */
-onMounted(() => {
-  getList()
-})
-
-/** 过滤出有流程的分类列表 */
+/** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
 const availableCategories = computed(() => {
   if (!categoryList.value?.length || !processDefinitionGroup.value) {
     return []
   }
-  
+
   // 获取所有有流程的分类代码
   const availableCategoryCodes = Object.keys(processDefinitionGroup.value)
-  
+
   // 过滤出有流程的分类
-  return categoryList.value.filter(category => 
+  return categoryList.value.filter((category: CategoryVO) =>
     availableCategoryCodes.includes(category.code)
   )
 })
+
+/** 初始化 */
+onMounted(() => {
+  getList()
+})
 </script>
 
 <style lang="scss" scoped>

From 47f1f13ca24fbeb3a8e283a56177515fab711f7d Mon Sep 17 00:00:00 2001
From: jason <2667446@qq.com>
Date: Fri, 22 Nov 2024 08:21:34 +0800
Subject: [PATCH 105/109] =?UTF-8?q?=E3=80=90=E4=BB=A3=E7=A0=81=E8=AF=84?=
 =?UTF-8?q?=E5=AE=A1=E4=BF=AE=E6=94=B9=E3=80=91=E5=AE=A1=E6=89=B9=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=BA=E8=A1=A8=E5=8D=95=E7=94=A8=E6=88=B7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FormCreate/src/utils/index.ts  | 43 ++++++++++++++
 .../SimpleProcessDesignerV2/src/node.ts       | 59 ++++---------------
 .../src/nodes-config/CopyTaskNodeConfig.vue   | 20 ++++---
 .../src/nodes-config/UserTaskNodeConfig.vue   | 23 ++++----
 4 files changed, 77 insertions(+), 68 deletions(-)

diff --git a/src/components/FormCreate/src/utils/index.ts b/src/components/FormCreate/src/utils/index.ts
index 2d4a6fd7..a2b3e67f 100644
--- a/src/components/FormCreate/src/utils/index.ts
+++ b/src/components/FormCreate/src/utils/index.ts
@@ -16,3 +16,46 @@ export const localeProps = (t, prefix, rules) => {
     return rule
   })
 }
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ * 
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = ''
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule
+  if (field && tempTitle) {
+    let title = tempTitle
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`
+    }
+    let required = false
+    if ($required) {
+      required = true
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required
+    })
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields)
+    })
+  }
+}
diff --git a/src/components/SimpleProcessDesignerV2/src/node.ts b/src/components/SimpleProcessDesignerV2/src/node.ts
index 06612d44..0810c1f5 100644
--- a/src/components/SimpleProcessDesignerV2/src/node.ts
+++ b/src/components/SimpleProcessDesignerV2/src/node.ts
@@ -17,6 +17,7 @@ import {
   FieldPermissionType,
   ProcessVariableEnum
 } from './consts'
+import { parseFormFields } from '@/components/FormCreate/src/utils/index'
 export function useWatchNode(props: { flowNode: SimpleFlowNode }): Ref<SimpleFlowNode> {
   const node = ref<SimpleFlowNode>(props.flowNode)
   watch(
@@ -33,7 +34,7 @@ const parseFormCreateFields = (formFields?: string[]) => {
   const result: Array<Record<string, any>> = []
   if (formFields) {
     formFields.forEach((fieldStr: string) => {
-      parseFields(JSON.parse(fieldStr), result)
+      parseFormFields(JSON.parse(fieldStr), result)
     })
   }
   // 固定添加发起人 ID 字段
@@ -46,44 +47,6 @@ const parseFormCreateFields = (formFields?: string[]) => {
   return result
 }
 
-// TODO @jason：parse 方法，是不是搞到 formCreate.ts。统一维护管理
-const parseFields = (
-  rule: Record<string, any>,
-  fields: Array<Record<string, any>>,
-  parentTitle: string = ''
-) => {
-  const { type, field, $required, title: tempTitle, children } = rule
-  if (field && tempTitle) {
-    let title = tempTitle
-    if (parentTitle) {
-      title = `${parentTitle}.${tempTitle}`
-    }
-    // TODO @jason：按照微信讨论的，非 $required 显示，但是 disable 不可选择
-    let required = false
-    if ($required) {
-      required = true
-    }
-    fields.push({
-      field,
-      title,
-      type,
-      required
-    })
-    // TODO 子表单 需要处理子表单字段
-    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
-    //   // 解析子表单的字段
-    //   rule.props.rule.forEach((item) => {
-    //     parseFields(item, fieldsPermission, title)
-    //   })
-    // }
-  }
-  if (children && Array.isArray(children)) {
-    children.forEach((rule) => {
-      parseFields(rule, fields)
-    })
-  }
-}
-
 /**
  * @description 表单数据权限配置，用于发起人节点 、审批节点、抄送节点
  */
@@ -144,8 +107,8 @@ export type UserTaskFormType = {
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
   expression?: string // 流程表达式
-  userFieldOnForm?: string // 表单内用户字段
-  deptFieldOnForm?: string // 表单内部门字段
+  formUser?: string // 表单内用户字段
+  formDept?: string // 表单内部门字段
   approveRatio?: number
   rejectHandlerType?: RejectHandlerType
   returnNodeId?: string
@@ -168,8 +131,8 @@ export type CopyTaskFormType = {
   userIds?: number[] // 用户
   userGroups?: number[] // 用户组
   postIds?: number[] // 岗位
-  userFieldOnForm?: string // 表单内用户字段
-  deptFieldOnForm?: string // 表单内部门字段
+  formUser?: string // 表单内用户字段
+  formDept?: string // 表单内部门字段
   expression?: string // 流程表达式
 }
 
@@ -282,7 +245,7 @@ export function useNodeForm(nodeType: NodeType) {
     // 表单内用户字段
     if (configForm.value?.candidateStrategy === CandidateStrategy.FORM_USER) {
       const formFieldOptions = parseFormCreateFields(unref(formFields))
-      const item = formFieldOptions.find((item) => item.field === configForm.value?.userFieldOnForm)
+      const item = formFieldOptions.find((item) => item.field === configForm.value?.formUser)
       showText = `表单用户：${item?.title}`
     }
 
@@ -338,7 +301,7 @@ export function useNodeForm(nodeType: NodeType) {
         candidateParam = configForm.value.userGroups!.join(',')
         break
       case CandidateStrategy.FORM_USER:
-        candidateParam = configForm.value.userFieldOnForm!
+        candidateParam = configForm.value.formUser!
         break
       case CandidateStrategy.EXPRESSION:
         candidateParam = configForm.value.expression!
@@ -362,7 +325,7 @@ export function useNodeForm(nodeType: NodeType) {
       // 表单内部门的负责人
       case CandidateStrategy.FORM_DEPT_LEADER: {
         // 候选人参数格式: | 分隔 。左边为表单内部门字段。 右边为部门层级
-        const deptFieldOnForm = configForm.value.deptFieldOnForm!
+        const deptFieldOnForm = configForm.value.formDept!
         candidateParam = deptFieldOnForm.concat('|' + configForm.value.deptLevel + '')
         break
       }
@@ -396,7 +359,7 @@ export function useNodeForm(nodeType: NodeType) {
         configForm.value.userGroups = candidateParam.split(',').map((item) => +item)
         break
       case CandidateStrategy.FORM_USER:
-        configForm.value.userFieldOnForm = candidateParam
+        configForm.value.formUser = candidateParam
         break
       case CandidateStrategy.EXPRESSION:
         configForm.value.expression = candidateParam
@@ -422,7 +385,7 @@ export function useNodeForm(nodeType: NodeType) {
       case CandidateStrategy.FORM_DEPT_LEADER: {
         // 候选人参数格式: | 分隔 。左边为表单内的部门字段。 右边为部门层级
         const paramArray = candidateParam.split('|')
-        configForm.value.deptFieldOnForm = paramArray[0]
+        configForm.value.formDept = paramArray[0]
         configForm.value.deptLevel = +paramArray[1]
         break
       }
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
index eeb51bd4..f83f1850 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/CopyTaskNodeConfig.vue
@@ -126,28 +126,30 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
-              prop="userFieldOnForm"
+              prop="formUser"
             >
-              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formUser" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
-              prop="deptFieldOnForm"
+              prop="formDept"
             >
-              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formDept" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -293,11 +295,11 @@ const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFie
   useFormFieldsPermission(FieldPermissionType.READ)
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect')
+  return formFieldOptions.filter((item) => item.type === 'UserSelect')
 })
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect')
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect')
 })
 // 抄送人表单配置
 const formRef = ref() // 表单 Ref
@@ -309,8 +311,8 @@ const formRules = reactive({
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
-  userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
-  deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
+  formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }]
 })
 
@@ -338,7 +340,7 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
-  configForm.value.userFieldOnForm = ''
+  configForm.value.formUser = ''
 }
 // 保存配置
 const saveConfig = async () => {
diff --git a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
index ebb41278..a088b6d0 100644
--- a/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
+++ b/src/components/SimpleProcessDesignerV2/src/nodes-config/UserTaskNodeConfig.vue
@@ -140,28 +140,30 @@
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_USER"
               label="表单内用户字段"
-              prop="userFieldOnForm"
+              prop="formUser"
             >
-              <el-select v-model="configForm.userFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formUser" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in userFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
             <el-form-item
               v-if="configForm.candidateStrategy === CandidateStrategy.FORM_DEPT_LEADER"
               label="表单内部门字段"
-              prop="deptFieldOnForm"
+              prop="formDept"
             >
-              <el-select v-model="configForm.deptFieldOnForm" clearable style="width: 100%">
+              <el-select v-model="configForm.formDept" clearable style="width: 100%">
                 <el-option
                   v-for="(item, idx) in deptFieldOnFormOptions"
                   :key="idx"
                   :label="item.title"
                   :value="item.field"
+                  :disabled ="!item.required"
                 />
               </el-select>
             </el-form-item>
@@ -517,11 +519,11 @@ const { formType, fieldsPermissionConfig, formFieldOptions, getNodeConfigFormFie
   useFormFieldsPermission(FieldPermissionType.READ)
 // 表单内用户字段选项, 必须是必填和用户选择器
 const userFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter((item) => item.required && item.type === 'UserSelect')
+  return formFieldOptions.filter((item) => item.type === 'UserSelect')
 })
 // 表单内部门字段选项, 必须是必填和部门选择器
 const deptFieldOnFormOptions = computed(() => {
-  return formFieldOptions.filter((item) => item.required && item.type === 'DeptSelect')
+  return formFieldOptions.filter((item) => item.type === 'DeptSelect')
 })
 // 操作按钮设置
 const { buttonsSetting, btnDisplayNameEdit, changeBtnDisplayName, btnDisplayNameBlurEvent } =
@@ -536,8 +538,8 @@ const formRules = reactive({
   roleIds: [{ required: true, message: '角色不能为空', trigger: 'change' }],
   deptIds: [{ required: true, message: '部门不能为空', trigger: 'change' }],
   userGroups: [{ required: true, message: '用户组不能为空', trigger: 'change' }],
-  userFieldOnForm: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
-  deptFieldOnForm: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
+  formUser: [{ required: true, message: '表单内用户字段不能为空', trigger: 'change' }],
+  formDept: [{ required: true, message: '表单内部门字段不能为空', trigger: 'change' }],
   postIds: [{ required: true, message: '岗位不能为空', trigger: 'change' }],
   expression: [{ required: true, message: '流程表达式不能为空', trigger: 'blur' }],
   approveMethod: [{ required: true, message: '多人审批方式不能为空', trigger: 'change' }],
@@ -573,9 +575,8 @@ const changeCandidateStrategy = () => {
   configForm.value.postIds = []
   configForm.value.userGroups = []
   configForm.value.deptLevel = 1
-  // TODO @jason：是不是 userFieldOnForm => formUser；deptFieldOnForm => formDeptLeader；原因是：想通前缀，好管理点
-  configForm.value.userFieldOnForm = ''
-  configForm.value.deptFieldOnForm = ''
+  configForm.value.formUser = ''
+  configForm.value.formDept = ''
   configForm.value.approveMethod = ApproveMethodType.SEQUENTIAL_APPROVE
 }
 

From 1d4339fac89caed97bc099f71e92c8fa6e00e94e Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 22 Nov 2024 15:29:42 +0800
Subject: [PATCH 106/109] =?UTF-8?q?feat:=20bpm=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E9=80=82=E9=85=8DSimple=E8=AE=BE=E8=AE=A1=E5=99=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E4=BA=BA=E6=8B=92=E7=BB=9D=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../descriptor/flowableDescriptor.json        |  28 ++++
 .../package/penal/PropertiesPanel.vue         |   2 +-
 .../custom-config/ElementCustomConfig.vue     | 131 +++++++++++++++++-
 3 files changed, 154 insertions(+), 7 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
index ee8e0d22..35f482d3 100644
--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -1225,6 +1225,34 @@
         "isBody": true
       }
       ]
+    },
+    {
+      "name": "RejectHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "RejectReturnTaskId",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
     }
   ],
   "emumerations": []
diff --git a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
index 5cd76383..96e8b080 100644
--- a/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/PropertiesPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="process-panel__container" :style="{ width: `${width}px` }">
+  <div class="process-panel__container" :style="{ width: `${width}px`,maxHeight: '700px' }">
     <el-collapse v-model="activeTab">
       <el-collapse-item name="base">
         <!-- class="panel-tab__title" -->
diff --git a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
index d27b2997..ddd2d0d8 100644
--- a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -1,8 +1,38 @@
 <!-- UserTask 自定义配置：
      1. 审批人与提交人为同一人时
+     2. 审批人拒绝时
 -->
 <template>
   <div class="panel-tab__content">
+    <el-divider content-position="left">审批人拒绝时</el-divider>
+    <el-form-item prop="rejectHandlerType">
+      <el-radio-group
+        v-model="rejectHandlerType"
+        :disabled="returnTaskList.length === 0"
+        @change="updateRejectHandlerType"
+      >
+        <div class="flex-col">
+          <div v-for="(item, index) in REJECT_HANDLER_TYPES" :key="index">
+            <el-radio :key="item.value" :value="item.value" :label="item.label" />
+          </div>
+        </div>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="rejectHandlerType == RejectHandlerType.RETURN_USER_TASK"
+      label="驳回节点"
+      prop="returnNodeId"
+    >
+      <el-select v-model="returnNodeId" clearable style="width: 100%" @change="updateReturnNodeId">
+        <el-option
+          v-for="item in returnTaskList"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+
     <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
     <el-radio-group v-model="assignStartUserHandlerType" @change="updateAssignStartUserHandlerType">
       <div class="flex-col">
@@ -15,7 +45,11 @@
 </template>
 
 <script lang="ts" setup>
-import { ASSIGN_START_USER_HANDLER_TYPES } from '@/components/SimpleProcessDesignerV2/src/consts'
+import {
+  ASSIGN_START_USER_HANDLER_TYPES,
+  RejectHandlerType,
+  REJECT_HANDLER_TYPES
+} from '@/components/SimpleProcessDesignerV2/src/consts'
 
 defineOptions({ name: 'ElementCustomConfig' })
 const props = defineProps({
@@ -24,31 +58,62 @@ const props = defineProps({
 })
 const prefix = inject('prefix')
 
-const elExtensionElements = ref()
+// 审批人与提交人为同一人时
 const assignStartUserHandlerTypeEl = ref()
 const assignStartUserHandlerType = ref()
+
+// 审批人拒绝时
+const rejectHandlerTypeEl = ref()
+const rejectHandlerType = ref()
+const returnNodeIdEl = ref()
+const returnNodeId = ref()
+const returnTaskList = ref([])
+
+const elExtensionElements = ref()
 const otherExtensions = ref()
 const bpmnElement = ref()
 const bpmnInstances = () => (window as any)?.bpmnInstances
 
-const resetAttributesList = () => {
+const resetCustomConfigList = () => {
   bpmnElement.value = bpmnInstances().bpmnElement
 
+  // 获取可回退的列表
+  returnTaskList.value = findAllPredecessorsExcludingStart(
+    bpmnElement.value.id,
+    bpmnInstances().modeler
+  )
+
   // 获取元素扩展属性 或者 创建扩展属性
   elExtensionElements.value =
     bpmnElement.value.businessObject?.extensionElements ??
     bpmnInstances().moddle.create('bpmn:ExtensionElements', { values: [] })
 
+  // 审批人与提交人为同一人时
   assignStartUserHandlerTypeEl.value =
     elExtensionElements.value.values?.filter(
       (ex) => ex.$type === `${prefix}:AssignStartUserHandlerType`
     )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignStartUserHandlerType`, { value: 1 })
   assignStartUserHandlerType.value = assignStartUserHandlerTypeEl.value.value
 
+  // 审批人拒绝时
+  rejectHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:RejectHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:RejectHandlerType`, { value: 1 })
+  rejectHandlerType.value = rejectHandlerTypeEl.value.value
+  returnNodeIdEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:RejectReturnTaskId`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:RejectReturnTaskId`, { value: '' })
+  returnNodeId.value = returnNodeIdEl.value.value
+
   // 保留剩余扩展元素，便于后面更新该元素对应属性
   otherExtensions.value =
     elExtensionElements.value.values?.filter(
-      (ex) => ex.$type !== `${prefix}:AssignStartUserHandlerType`
+      (ex) =>
+        ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
+        ex.$type !== `${prefix}:RejectHandlerType` &&
+        ex.$type !== `${prefix}:RejectReturnTaskId`
     ) ?? []
 
   // 更新元素扩展属性，避免后续报错
@@ -61,9 +126,29 @@ const updateAssignStartUserHandlerType = () => {
   updateElementExtensions()
 }
 
+const updateRejectHandlerType = () => {
+  rejectHandlerTypeEl.value.value = rejectHandlerType.value
+
+  returnNodeId.value = returnTaskList.value[0].id
+  returnNodeIdEl.value.value = returnNodeId.value
+
+  updateElementExtensions()
+}
+
+const updateReturnNodeId = () => {
+  returnNodeIdEl.value.value = returnNodeId.value
+
+  updateElementExtensions()
+}
+
 const updateElementExtensions = () => {
   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
-    values: otherExtensions.value.concat([assignStartUserHandlerTypeEl.value])
+    values: [
+      ...otherExtensions.value,
+      assignStartUserHandlerTypeEl.value,
+      rejectHandlerTypeEl.value,
+      returnNodeIdEl.value,
+    ]
   })
   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
     extensionElements: extensions
@@ -76,9 +161,43 @@ watch(
     val &&
       val.length &&
       nextTick(() => {
-        resetAttributesList()
+        resetCustomConfigList()
       })
   },
   { immediate: true }
 )
+
+function findAllPredecessorsExcludingStart(elementId, modeler) {
+  const elementRegistry = modeler.get('elementRegistry')
+  const allConnections = elementRegistry.filter((element) => element.type === 'bpmn:SequenceFlow')
+  const predecessors = new Set() // 使用 Set 来避免重复节点
+
+  // 检查是否是开始事件节点
+  function isStartEvent(element) {
+    return element.type === 'bpmn:StartEvent'
+  }
+
+  function findPredecessorsRecursively(element) {
+    // 获取与当前节点相连的所有连接
+    const incomingConnections = allConnections.filter((connection) => connection.target === element)
+
+    incomingConnections.forEach((connection) => {
+      const source = connection.source // 获取前置节点
+
+      // 只添加不是开始事件的前置节点
+      if (!isStartEvent(source)) {
+        predecessors.add(source.businessObject)
+        // 递归查找前置节点
+        findPredecessorsRecursively(source)
+      }
+    })
+  }
+
+  const targetElement = elementRegistry.get(elementId)
+  if (targetElement) {
+    findPredecessorsRecursively(targetElement)
+  }
+
+  return Array.from(predecessors) // 返回前置节点数组
+}
 </script>

From 00a19cfc78c2cd58ec8abac6f4ceaeb58cc6a05a Mon Sep 17 00:00:00 2001
From: Lesan <1960681385@qq.com>
Date: Fri, 22 Nov 2024 16:10:30 +0800
Subject: [PATCH 107/109] =?UTF-8?q?feat:=20bpm=E8=AE=BE=E8=AE=A1=E5=99=A8?=
 =?UTF-8?q?=E9=80=82=E9=85=8DSimple=E8=AE=BE=E8=AE=A1=E5=99=A8=EF=BC=8C?=
 =?UTF-8?q?=E5=AE=A1=E6=89=B9=E4=BA=BA=E4=B8=BA=E7=A9=BA=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../descriptor/flowableDescriptor.json        | 28 +++++++
 .../custom-config/ElementCustomConfig.vue     | 84 ++++++++++++++++++-
 2 files changed, 110 insertions(+), 2 deletions(-)

diff --git a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
index 35f482d3..d1ca4a43 100644
--- a/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
+++ b/src/components/bpmnProcessDesigner/package/designer/plugins/descriptor/flowableDescriptor.json
@@ -1253,6 +1253,34 @@
           "isBody": true
         }
       ]
+    },
+    {
+      "name": "AssignEmptyHandlerType",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "Integer",
+          "isBody": true
+        }
+      ]
+    },
+    {
+      "name": "AssignEmptyUserIds",
+      "superClass": ["Element"],
+      "meta": {
+        "allowedIn": ["bpmn:UserTask"]
+      },
+      "properties": [
+        {
+          "name": "value",
+          "type": "String",
+          "isBody": true
+        }
+      ]
     }
   ],
   "emumerations": []
diff --git a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
index ddd2d0d8..e5497b08 100644
--- a/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
+++ b/src/components/bpmnProcessDesigner/package/penal/custom-config/ElementCustomConfig.vue
@@ -1,6 +1,7 @@
 <!-- UserTask 自定义配置：
      1. 审批人与提交人为同一人时
      2. 审批人拒绝时
+     3. 审批人为空时
 -->
 <template>
   <div class="panel-tab__content">
@@ -33,6 +34,38 @@
       </el-select>
     </el-form-item>
 
+    <el-divider content-position="left">审批人为空时</el-divider>
+    <el-form-item prop="assignEmptyHandlerType">
+      <el-radio-group v-model="assignEmptyHandlerType" @change="updateAssignEmptyHandlerType">
+        <div class="flex-col">
+          <div v-for="(item, index) in ASSIGN_EMPTY_HANDLER_TYPES" :key="index">
+            <el-radio :key="item.value" :value="item.value" :label="item.label" />
+          </div>
+        </div>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item
+      v-if="assignEmptyHandlerType == AssignEmptyHandlerType.ASSIGN_USER"
+      label="指定用户"
+      prop="assignEmptyHandlerUserIds"
+      span="24"
+    >
+      <el-select
+        v-model="assignEmptyUserIds"
+        clearable
+        multiple
+        style="width: 100%"
+        @change="updateAssignEmptyUserIds"
+      >
+        <el-option
+          v-for="item in userOptions"
+          :key="item.id"
+          :label="item.nickname"
+          :value="item.id"
+        />
+      </el-select>
+    </el-form-item>
+
     <el-divider content-position="left">审批人与提交人为同一人时</el-divider>
     <el-radio-group v-model="assignStartUserHandlerType" @change="updateAssignStartUserHandlerType">
       <div class="flex-col">
@@ -48,8 +81,11 @@
 import {
   ASSIGN_START_USER_HANDLER_TYPES,
   RejectHandlerType,
-  REJECT_HANDLER_TYPES
+  REJECT_HANDLER_TYPES,
+  ASSIGN_EMPTY_HANDLER_TYPES,
+  AssignEmptyHandlerType
 } from '@/components/SimpleProcessDesignerV2/src/consts'
+import * as UserApi from '@/api/system/user'
 
 defineOptions({ name: 'ElementCustomConfig' })
 const props = defineProps({
@@ -69,6 +105,12 @@ const returnNodeIdEl = ref()
 const returnNodeId = ref()
 const returnTaskList = ref([])
 
+// 审批人为空时
+const assignEmptyHandlerTypeEl = ref()
+const assignEmptyHandlerType = ref()
+const assignEmptyUserIdsEl = ref()
+const assignEmptyUserIds = ref()
+
 const elExtensionElements = ref()
 const otherExtensions = ref()
 const bpmnElement = ref()
@@ -107,13 +149,31 @@ const resetCustomConfigList = () => {
     )?.[0] || bpmnInstances().moddle.create(`${prefix}:RejectReturnTaskId`, { value: '' })
   returnNodeId.value = returnNodeIdEl.value.value
 
+  // 审批人为空时
+  assignEmptyHandlerTypeEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignEmptyHandlerType`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyHandlerType`, { value: 1 })
+  assignEmptyHandlerType.value = assignEmptyHandlerTypeEl.value.value
+  assignEmptyUserIdsEl.value =
+    elExtensionElements.value.values?.filter(
+      (ex) => ex.$type === `${prefix}:AssignEmptyUserIds`
+    )?.[0] || bpmnInstances().moddle.create(`${prefix}:AssignEmptyUserIds`, { value: '' })
+  assignEmptyUserIds.value = assignEmptyUserIdsEl.value.value.split(',').map((item) => {
+    // 如果数字超出了最大安全整数范围，则将其作为字符串处理
+    let num = Number(item)
+    return num > Number.MAX_SAFE_INTEGER || num < -Number.MAX_SAFE_INTEGER ? item : num
+  })
+
   // 保留剩余扩展元素，便于后面更新该元素对应属性
   otherExtensions.value =
     elExtensionElements.value.values?.filter(
       (ex) =>
         ex.$type !== `${prefix}:AssignStartUserHandlerType` &&
         ex.$type !== `${prefix}:RejectHandlerType` &&
-        ex.$type !== `${prefix}:RejectReturnTaskId`
+        ex.$type !== `${prefix}:RejectReturnTaskId` &&
+        ex.$type !== `${prefix}:AssignEmptyHandlerType` &&
+        ex.$type !== `${prefix}:AssignEmptyUserIds`
     ) ?? []
 
   // 更新元素扩展属性，避免后续报错
@@ -141,6 +201,18 @@ const updateReturnNodeId = () => {
   updateElementExtensions()
 }
 
+const updateAssignEmptyHandlerType = () => {
+  assignEmptyHandlerTypeEl.value.value = assignEmptyHandlerType.value
+
+  updateElementExtensions()
+}
+
+const updateAssignEmptyUserIds = () => {
+  assignEmptyUserIdsEl.value.value = assignEmptyUserIds.value.toString()
+
+  updateElementExtensions()
+}
+
 const updateElementExtensions = () => {
   const extensions = bpmnInstances().moddle.create('bpmn:ExtensionElements', {
     values: [
@@ -148,6 +220,8 @@ const updateElementExtensions = () => {
       assignStartUserHandlerTypeEl.value,
       rejectHandlerTypeEl.value,
       returnNodeIdEl.value,
+      assignEmptyHandlerTypeEl.value,
+      assignEmptyUserIdsEl.value
     ]
   })
   bpmnInstances().modeling.updateProperties(toRaw(bpmnElement.value), {
@@ -200,4 +274,10 @@ function findAllPredecessorsExcludingStart(elementId, modeler) {
 
   return Array.from(predecessors) // 返回前置节点数组
 }
+
+const userOptions = ref<UserApi.UserVO[]>([]) // 用户列表
+onMounted(async () => {
+  // 获得用户列表
+  userOptions.value = await UserApi.getSimpleUserList()
+})
 </script>

From 4423c5f84aa1249ca959182e4ade7937cfa08035 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Fri, 22 Nov 2024 20:04:18 +0800
Subject: [PATCH 108/109] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84=E3=80=91=E5=B7=A5=E4=BD=9C=E6=B5=81=EF=BC=9A=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E6=96=B0=E5=BB=BA=E6=97=B6=EF=BC=8C=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E9=80=89=E4=B8=AD=E5=BC=80=E5=90=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/bpm/category/CategoryForm.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/views/bpm/category/CategoryForm.vue b/src/views/bpm/category/CategoryForm.vue
index 0d5abe7d..9c24b3ef 100644
--- a/src/views/bpm/category/CategoryForm.vue
+++ b/src/views/bpm/category/CategoryForm.vue
@@ -42,6 +42,7 @@
 <script setup lang="ts">
 import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
 import { CategoryApi, CategoryVO } from '@/api/bpm/category'
+import { CommonStatusEnum } from '@/utils/constants'
 
 /** BPM 流程分类 表单 */
 defineOptions({ name: 'CategoryForm' })
@@ -57,7 +58,7 @@ const formData = ref({
   id: undefined,
   name: undefined,
   code: undefined,
-  status: undefined,
+  status: CommonStatusEnum.ENABLE,
   sort: undefined
 })
 const formRules = reactive({
@@ -116,7 +117,7 @@ const resetForm = () => {
     id: undefined,
     name: undefined,
     code: undefined,
-    status: undefined,
+    status: CommonStatusEnum.ENABLE,
     sort: undefined
   }
   formRef.value?.resetFields()

From 4ffaa2dc6e2f7fa1e053c27cccde2b60a8376516 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sat, 23 Nov 2024 10:32:52 +0800
Subject: [PATCH 109/109] =?UTF-8?q?README=EF=BC=9A=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=B5=81=E7=9A=84=E6=BC=94=E7=A4=BA=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .image/工作流设计器-bpmn.jpg   | Bin 0 -> 181405 bytes
 .image/工作流设计器-simple.jpg | Bin 0 -> 129583 bytes
 README.md                      |  22 +++++++++++++---------
 3 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 .image/工作流设计器-bpmn.jpg
 create mode 100644 .image/工作流设计器-simple.jpg

diff --git a/.image/工作流设计器-bpmn.jpg b/.image/工作流设计器-bpmn.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..2a61f60f869b28dce151f0964a1aaad8c0b333cd
GIT binary patch
literal 181405
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
CczQ?x

literal 0
HcmV?d00001

diff --git a/.image/工作流设计器-simple.jpg b/.image/工作流设计器-simple.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..9ef2c9e293b2eb91f0e0b19c63bdbda263f3254b
GIT binary patch
literal 129583
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
PvzhW)eLB2+G55a!<<MIL

literal 0
HcmV?d00001

diff --git a/README.md b/README.md
index a7a0a942..6ca2dbf9 100644
--- a/README.md
+++ b/README.md
@@ -120,18 +120,22 @@
 
 ### 工作流程
 
-|     | 功能    | 描述                                     |
-|-----|-------|----------------------------------------|
-| 🚀  | 流程模型  | 配置工作流的流程模型，支持文件导入与在线设计流程图，提供 7 种任务分配规则 |
-| 🚀  | 流程表单  | 拖动表单元素生成相应的工作流表单，覆盖 Element UI 所有的表单组件 |
-| 🚀  | 用户分组  | 自定义用户分组，可用于工作流的审批分组                    |
-| 🚀  | 我的流程  | 查看我发起的工作流程，支持新建、取消流程等操作，高亮流程图、审批时间线    |
-| 🚀  | 待办任务  | 查看自己【未】审批的工作任务，支持通过、不通过、转发、委派、退回等操作    |
-| 🚀  | 已办任务  | 查看自己【已】审批的工作任务，未来会支持回退操作               |
-| 🚀  | OA 请假 | 作为业务自定义接入工作流的使用示例，只需创建请求对应的工作流程，即可进行审批 |
+|    | 功能    | 描述                                      |
+|----|-------|-----------------------------------------|
+| 🚀 | 流程模型  | 配置工作流的流程模型，支持 BPMN 和仿钉钉/飞书设计器           |
+| 🚀 | 流程表单  | 拖动表单元素生成相应的工作流表单，覆盖 Element UI 所有的表单组件  |
+| 🚀 | 用户分组  | 自定义用户分组，可用于工作流的审批分组                     |
+| 🚀 | 我的流程  | 查看我发起的工作流程，支持新建、取消流程等操作，高亮流程图、审批时间线     |
+| 🚀 | 待办任务  | 查看自己【未】审批的工作任务，支持通过、不通过、转派、委派、退回、加减签等操作 |
+| 🚀 | 已办任务  | 查看自己【已】审批的工作任务，支持流程预测，展示未来审批人信息         |
+| 🚀 | OA 请假 | 作为业务自定义接入工作流的使用示例，只需创建请求对应的工作流程，即可进行审批  |
 
 ![功能图](/.image/common/bpm-feature.png)
 
+| BPMN 设计器                     | 钉钉/飞书设计器                       |
+|------------------------------|--------------------------------|
+| ![](/.image/工作流设计器-bpmn.jpg) | ![](/.image/工作流设计器-simple.jpg) |
+
 ### 支付系统
 
 |     | 功能   | 描述                        |