feat: 重构流程定义和流程实例模块，更新API命名，增强用户选择弹窗功能，支持多用户选择，优化流程实例创建界面。

feat: 完善流程定义模块、完善流程实例模块
feat: 完善OA请假模块
feat: 完善审批中心、发起流程、查看流程、工作流整体进度 40%

apps/web-antd/src/views/bpm/processInstance/create/index.vue

@@ -1,29 +1,38 @@
 <script lang="ts" setup>
-import type { BpmDefinitionApi } from '@/api/bpm/definition';
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
 
-import type { BpmCategoryApi } from '#/api/bpm/category';
-
-import { computed, getCurrentInstance, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page } from '@vben/common-ui';
 
-import { Card, Input, message, Space } from 'ant-design-vue';
+import {
+  Card,
+  Col,
+  InputSearch,
+  message,
+  Row,
+  Space,
+  Tabs,
+  Tooltip,
+} from 'ant-design-vue';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
 import { getProcessDefinitionList } from '#/api/bpm/definition';
 import { getProcessInstance } from '#/api/bpm/processInstance';
 
+import ProcessDefinitionDetail from './modules/form.vue';
+
 defineOptions({ name: 'BpmProcessInstanceCreate' });
 
-const { proxy } = getCurrentInstance() as any;
 const route = useRoute(); // 路由
 
 const searchName = ref(''); // 当前搜索关键字
+const isSearching = ref(false); // 是否处于搜索状态
 const processInstanceId: any = route.query.processInstanceId; // 流程实例编号。场景：重新发起时
 const loading = ref(true); // 加载中
 const categoryList: any = ref([]); // 分类的列表
-const categoryActive: any = ref({}); // 选中的分类
+const activeCategory = ref(''); // 当前选中的分类
 const processDefinitionList = ref([]); // 流程定义的列表
 
 // 实现 groupBy 功能
@@ -90,8 +99,8 @@ const handleGetProcessDefinitionList = async () => {
     filteredProcessDefinitionList.value = processDefinitionList.value;
 
     // 在获取完所有数据后，设置第一个有效分类为激活状态
-    if (availableCategories.value.length > 0 && !categoryActive.value?.code) {
-      categoryActive.value = availableCategories.value[0];
+    if (availableCategories.value.length > 0 && !activeCategory.value) {
+      activeCategory.value = availableCategories.value[0].code;
     }
   } catch {
     // 错误处理
@@ -101,16 +110,36 @@ const handleGetProcessDefinitionList = async () => {
 /** 搜索流程 */
 const filteredProcessDefinitionList = ref([]); // 用于存储搜索过滤后的流程定义
 const handleQuery = () => {
-  searchName.value.trim()
-    ? // 如果有搜索关键字，进行过滤
-      (filteredProcessDefinitionList.value = processDefinitionList.value.filter(
-        (definition: any) =>
-          definition.name
-            .toLowerCase()
-            .includes(searchName.value.toLowerCase()),
-      ))
-    : // 如果没有搜索关键字，恢复所有数据
-      (filteredProcessDefinitionList.value = processDefinitionList.value);
+  if (searchName.value.trim()) {
+    // 如果有搜索关键字，进行过滤
+    isSearching.value = true;
+    filteredProcessDefinitionList.value = processDefinitionList.value.filter(
+      (definition: any) =>
+        definition.name.toLowerCase().includes(searchName.value.toLowerCase()),
+    );
+
+    // 获取搜索结果中的分类
+    const searchResultGroups = groupBy(
+      filteredProcessDefinitionList.value,
+      'category',
+    );
+    const availableCategoryCodes = Object.keys(searchResultGroups);
+
+    // 如果有匹配的分类，切换到第一个包含匹配结果的分类
+    if (availableCategoryCodes.length > 0 && availableCategoryCodes[0]) {
+      activeCategory.value = availableCategoryCodes[0];
+    }
+  } else {
+    // 如果没有搜索关键字，恢复所有数据
+    isSearching.value = false;
+    filteredProcessDefinitionList.value = processDefinitionList.value;
+  }
+};
+
+/** 判断流程定义是否匹配搜索 */
+const isDefinitionMatchSearch = (definition: any) => {
+  if (!isSearching.value) return false;
+  return definition.name.toLowerCase().includes(searchName.value.toLowerCase());
 };
 
 /** 流程定义的分组 */
@@ -130,19 +159,6 @@ const processDefinitionGroup: any = computed(() => {
   return orderedGroup;
 });
 
-/** 左侧分类切换 */
-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)
@@ -155,7 +171,7 @@ const processDefinitionDetailRef = ref();
 
 /** 处理选择流程的按钮操作 */
 const handleSelect = async (
-  row: BpmDefinitionApi.ProcessDefinitionVO,
+  row: BpmProcessDefinitionApi.ProcessDefinitionVO,
   formVariables?: any,
 ) => {
   // 设置选择的流程
@@ -165,45 +181,6 @@ const handleSelect = async (
   processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
 };
 
-/** 处理滚动事件，和左侧分类联动 */
-const handleScroll = (e: any) => {
-  // 直接使用事件对象获取滚动位置
-  const scrollTop = e.scrollTop;
-
-  // 获取所有分类区域的位置信息
-  const categoryPositions = categoryList.value
-    .map((category: BpmCategoryApi.CategoryVO) => {
-      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: CategoryVO) => c.code === currentCategory.code,
-    );
-  }
-};
-
 /** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
 const availableCategories = computed(() => {
   if (!categoryList.value?.length || !processDefinitionGroup.value) {
@@ -219,6 +196,12 @@ const availableCategories = computed(() => {
   );
 });
 
+/** 获取 tab 的位置 */
+
+const tabPosition = computed(() => {
+  return window.innerWidth < 768 ? 'top' : 'left';
+});
+
 /** 初始化 */
 onMounted(() => {
   getList();
@@ -229,94 +212,96 @@ onMounted(() => {
   <Page auto-content-height>
     <!-- 第一步，通过流程定义的列表，选择对应的流程 -->
     <template v-if="!selectProcessDefinition">
-      <Input
-        v-model:value="searchName"
-        class="!w-50% mb-15px"
-        placeholder="请输入流程名称"
-        allow-clear
-        @input="handleQuery"
-        @clear="handleQuery"
-      >
-        <template #prefix>
-          <IconifyIcon icon="mdi:search-web" />
-        </template>
-      </Input>
       <Card
+        class="h-full"
+        title="全部流程"
         :class="{
           'process-definition-container': filteredProcessDefinitionList?.length,
         }"
-        :body-style="{
-          height: '100%',
-        }"
-        class="position-relative pb-20px h-700px"
         :loading="loading"
       >
-        <div
-          v-if="filteredProcessDefinitionList?.length"
-          class="flex flex-nowrap"
-        >
-          <div class="w-1/5">
-            <div class="flex flex-col">
-              <div
-                v-for="category in availableCategories"
-                :key="category.code"
-                class="p-10px text-14px flex cursor-pointer items-center rounded-md"
-                :class="
-                  categoryActive.code === category.code
-                    ? 'text-#3e7bff bg-#e8eeff'
-                    : ''
-                "
-                @click="handleCategoryClick(category)"
-              >
-                {{ category.name }}
-              </div>
-            </div>
-          </div>
-          <div class="w-4/5">
-            <div
-              ref="scrollWrapper"
-              class="h-700px overflow-y-auto"
-              @scroll="handleScroll"
+        <template #extra>
+          <div class="flex items-end">
+            <InputSearch
+              v-model:value="searchName"
+              class="!w-50% mb-15px"
+              placeholder="请输入流程名称检索"
+              allow-clear
+              @input="handleQuery"
+              @clear="handleQuery"
             >
-              <div
-                class="mb-20px pl-10px"
-                v-for="(definitions, categoryCode) in processDefinitionGroup"
-                :key="categoryCode"
-                :ref="`category-${categoryCode}`"
-              >
-                <h3 class="text-18px mb-10px mt-5px font-bold">
-                  {{ getCategoryName(categoryCode as any) }}
-                </h3>
-                <div class="gap3 grid grid-cols-3">
+              <template #prefix>
+                <IconifyIcon icon="mdi:search-web" />
+              </template>
+            </InputSearch>
+          </div>
+        </template>
+
+        <div v-if="filteredProcessDefinitionList?.length">
+          <Tabs v-model:active-key="activeCategory" :tab-position="tabPosition">
+            <Tabs.TabPane
+              v-for="category in availableCategories"
+              :key="category.code"
+              :tab="category.name"
+            >
+              <Row :gutter="[16, 16]">
+                <Col
+                  v-for="definition in processDefinitionGroup[category.code]"
+                  :key="definition.id"
+                  :xs="24"
+                  :sm="12"
+                  :md="8"
+                  :lg="6"
+                  :xl="4"
+                  @click="handleSelect(definition)"
+                >
                   <Card
-                    v-for="definition in definitions"
-                    :key="definition.id"
                     hoverable
-                    class="definition-item-card cursor-pointer"
-                    @click="handleSelect(definition)"
+                    class="definition-item-card w-full cursor-pointer"
+                    :class="{
+                      'search-match': isDefinitionMatchSearch(definition),
+                    }"
+                    :body-style="{
+                      width: '100%',
+                    }"
                   >
-                    <div class="flex">
+                    <div class="flex items-center">
                       <img
                         v-if="definition.icon"
                         :src="definition.icon"
-                        class="w-32px h-32px"
+                        class="h-12 w-12 object-contain"
+                        alt="流程图标"
                       />
-                      <div v-else class="flow-icon">
-                        <span style="font-size: 12px; color: #fff">
-                          <!-- {{ subString(definition.name, 0, 2) }} -->
-
-                          {{ definition.name }}
-                        </span>
+                      <div v-else class="flow-icon flex-shrink-0">
+                        <Tooltip :title="definition.name">
+                          <span class="text-xs text-white">
+                            {{ definition.name }}
+                          </span>
+                        </Tooltip>
                       </div>
-                      <span class="!ml-10px text-base">
-                        {{ definition.name }}
+                      <span class="ml-3 flex-1 truncate text-base">
+                        <Tooltip
+                          placement="topLeft"
+                          :title="`${definition.name}`"
+                        >
+                          {{ definition.name }}
+                        </Tooltip>
                       </span>
                     </div>
+
+                    <!-- TODO: 发起流程按钮 -->
+                    <!-- <template #actions>
+                      <div class="flex justify-end px-4">
+                        <Button type="link" @click="handleSelect(definition)">
+                          发起流程
+                        </Button>
+                      </div>
+                    </template> -->
                   </Card>
-                </div>
-              </div>
-            </div>
-          </div>
+                </Col>
+              </Row>
+            </Tabs.TabPane>
+          </Tabs>
         </div>
         <div v-else class="!py-200px text-center">
           <Space direction="vertical" size="large">
@@ -327,40 +312,44 @@ onMounted(() => {
     </template>
 
     <!-- 第二步，填写表单，进行流程的提交 -->
-    <!-- <ProcessDefinitionDetail
-    v-else
-    ref="processDefinitionDetailRef"
-    :select-process-definition="selectProcessDefinition"
-    @cancel="selectProcessDefinition = undefined"
-  /> -->
+    <ProcessDefinitionDetail
+      v-else
+      ref="processDefinitionDetailRef"
+      :select-process-definition="selectProcessDefinition"
+      @cancel="selectProcessDefinition = undefined"
+    />
   </Page>
 </template>
 
 <style lang="scss" scoped>
-.flow-icon {
-  display: flex;
-  width: 32px;
-  height: 32px;
-  margin-right: 10px;
-  background-color: var(--ant-primary-color);
-  border-radius: 0.25rem;
-  align-items: center;
-  justify-content: center;
-}
-
-.process-definition-container::before {
-  position: absolute;
-  left: 20.8%;
-  height: 100%;
-  border-left: 1px solid #e6e6e6;
-  content: '';
-}
-
-:deep() {
+.process-definition-container {
   .definition-item-card {
-    .ant-card-body {
-      padding: 14px;
+    .flow-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      background-color: #3f73f7;
+      border-radius: 50%;
+    }
+
+    &.search-match {
+      background-color: rgb(63 115 247 / 10%);
+      border: 1px solid #3f73f7;
+      animation: bounce 0.5s ease;
     }
   }
 }
+
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-5px);
+  }
+}
 </style>

apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue

@@ -0,0 +1,354 @@
+<script lang="ts" setup>
+import type { ApiAttrs } from '@form-create/ant-design-vue/types/config';
+
+import type { BpmProcessDefinitionApi } from '#/api/bpm/definition';
+
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { useTabs } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Card, Col, message, Row, Space, Tabs } from 'ant-design-vue';
+
+import { getProcessDefinition } from '#/api/bpm/definition';
+import {
+  createProcessInstance,
+  getApprovalDetail as getApprovalDetailApi,
+} from '#/api/bpm/processInstance';
+import { router } from '#/router';
+import {
+  BpmCandidateStrategyEnum,
+  BpmFieldPermissionType,
+  BpmModelFormType,
+  BpmNodeIdEnum,
+  BpmNodeTypeEnum,
+  decodeFields,
+  setConfAndFields2,
+} from '#/utils';
+import ProcessInstanceTimeline from '#/views/bpm/processInstance/detail/modules/time-line.vue';
+
+// 类型定义
+interface ProcessFormData {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+interface UserTask {
+  id: number;
+  name: string;
+}
+
+interface ApprovalNodeInfo {
+  id: number;
+  name: string;
+  candidateStrategy: BpmCandidateStrategyEnum;
+  candidateUsers?: Array<{
+    avatar: string;
+    id: number;
+    nickname: string;
+  }>;
+  endTime?: Date;
+  nodeType: BpmNodeTypeEnum;
+  startTime?: Date;
+  status: number;
+  tasks: any[];
+}
+
+defineOptions({ name: 'BpmProcessInstanceCreateForm' });
+
+const props = defineProps({
+  selectProcessDefinition: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['cancel']);
+
+const { closeCurrentTab } = useTabs();
+
+const getTitle = computed(() => {
+  return `流程表单 - ${props.selectProcessDefinition.name}`;
+});
+
+const detailForm = ref<ProcessFormData>({
+  rule: [],
+  option: {},
+  value: {},
+});
+
+const fApi = ref<ApiAttrs>();
+const startUserSelectTasks = ref<UserTask[]>([]);
+const startUserSelectAssignees = ref<Record<number, string[]>>({});
+const tempStartUserSelectAssignees = ref<Record<number, string[]>>({});
+const bpmnXML = ref<string | undefined>(undefined);
+const simpleJson = ref<string | undefined>(undefined);
+const timelineRef = ref<any>();
+const activeTab = ref('form');
+const activityNodes = ref<ApprovalNodeInfo[]>([]);
+const processInstanceStartLoading = ref(false);
+
+/** 提交按钮 */
+const submitForm = async () => {
+  if (!fApi.value || !props.selectProcessDefinition) {
+    return;
+  }
+
+  try {
+    // 流程表单校验
+    await fApi.value.validate();
+
+    // 校验指定审批人
+    if (startUserSelectTasks.value?.length > 0) {
+      for (const userTask of startUserSelectTasks.value) {
+        const assignees = startUserSelectAssignees.value[userTask.id];
+        if (Array.isArray(assignees) && assignees.length === 0) {
+          message.warning(`请选择${userTask.name}的候选人`);
+          return;
+        }
+      }
+    }
+
+    // 提交请求
+    processInstanceStartLoading.value = true;
+    await createProcessInstance({
+      processDefinitionId: props.selectProcessDefinition.id,
+      variables: detailForm.value.value,
+      startUserSelectAssignees: startUserSelectAssignees.value,
+    });
+
+    message.success('发起流程成功');
+
+    closeCurrentTab();
+
+    await router.push({ path: '/bpm/task/my' });
+  } catch (error) {
+    message.error('发起流程失败');
+    console.error('发起流程失败:', error);
+  } finally {
+    processInstanceStartLoading.value = false;
+  }
+};
+
+/** 设置表单信息、获取流程图数据 */
+const initProcessInfo = async (row: any, formVariables?: any) => {
+  // 重置指定审批人
+  startUserSelectTasks.value = [];
+  startUserSelectAssignees.value = {};
+
+  // 情况一：流程表单
+  if (row.formType === BpmModelFormType.NORMAL) {
+    // 设置表单
+    // 注意：需要从 formVariables 中，移除不在 row.formFields 的值。
+    // 原因是：后端返回的 formVariables 里面，会有一些非表单的信息。例如说，某个流程节点的审批人。
+    //        这样，就可能导致一个流程被审批不通过后，重新发起时，会直接后端报错！！！
+    const allowedFields = new Set(
+      decodeFields(row.formFields).map((fieldObj: any) => fieldObj.field),
+    );
+    for (const key in formVariables) {
+      if (!allowedFields.has(key)) {
+        delete formVariables[key];
+      }
+    }
+    setConfAndFields2(detailForm, row.formConf, row.formFields, formVariables);
+
+    await nextTick();
+    fApi.value?.btn.show(false); // 隐藏提交按钮
+
+    // 获取流程审批信息,当再次发起时，流程审批节点要根据原始表单参数预测出来
+    await getApprovalDetail({
+      id: row.id,
+      processVariablesStr: JSON.stringify(formVariables),
+    });
+
+    // 加载流程图
+    const processDefinitionDetail: BpmProcessDefinitionApi.ProcessDefinitionVO =
+      await getProcessDefinition(row.id);
+    if (processDefinitionDetail) {
+      bpmnXML.value = processDefinitionDetail.bpmnXml;
+      simpleJson.value = processDefinitionDetail.simpleModel;
+    }
+    // 情况二：业务表单
+  } else if (row.formCustomCreatePath) {
+    await router.push({
+      path: row.formCustomCreatePath,
+    });
+    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
+  }
+};
+
+/** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
+watch(
+  detailForm.value,
+  (newValue) => {
+    if (newValue && Object.keys(newValue.value).length > 0) {
+      // 记录之前的节点审批人
+      tempStartUserSelectAssignees.value = startUserSelectAssignees.value;
+      startUserSelectAssignees.value = {};
+      // 加载最新的审批详情
+      getApprovalDetail({
+        id: props.selectProcessDefinition.id,
+        processVariablesStr: JSON.stringify(newValue.value), // 解决 GET 无法传递对象的问题，后端 String 再转 JSON
+      });
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 获取审批详情 */
+const getApprovalDetail = async (row: {
+  id: string;
+  processVariablesStr: string;
+}) => {
+  try {
+    const data = await getApprovalDetailApi({
+      processDefinitionId: row.id,
+      activityId: BpmNodeIdEnum.START_USER_NODE_ID,
+      processVariablesStr: row.processVariablesStr,
+    });
+
+    if (!data) {
+      message.error('查询不到审批详情信息！');
+      return;
+    }
+
+    // 获取审批节点
+    activityNodes.value = data.activityNodes as unknown as ApprovalNodeInfo[];
+
+    // 获取发起人自选的任务
+    startUserSelectTasks.value = (data.activityNodes?.filter(
+      (node) =>
+        BpmCandidateStrategyEnum.START_USER_SELECT === node.candidateStrategy,
+    ) || []) as unknown as UserTask[];
+
+    // 恢复之前的选择审批人
+    if (startUserSelectTasks.value.length > 0) {
+      for (const node of startUserSelectTasks.value) {
+        const tempAssignees = tempStartUserSelectAssignees.value[node.id];
+        startUserSelectAssignees.value[node.id] = tempAssignees?.length
+          ? tempAssignees
+          : [];
+      }
+    }
+
+    // 设置表单字段权限
+    const formFieldsPermission = data.formFieldsPermission;
+    if (formFieldsPermission) {
+      Object.entries(formFieldsPermission).forEach(([field, permission]) => {
+        setFieldPermission(field, permission as string);
+      });
+    }
+  } catch (error) {
+    message.error('获取审批详情失败');
+    console.error('获取审批详情失败:', error);
+  }
+};
+
+/**
+ * 设置表单权限
+ */
+const setFieldPermission = (field: string, permission: string) => {
+  if (permission === BpmFieldPermissionType.READ) {
+    // @ts-ignore
+    fApi.value?.disabled(true, field);
+  }
+  if (permission === BpmFieldPermissionType.WRITE) {
+    // @ts-ignore
+    fApi.value?.disabled(false, field);
+  }
+  if (permission === BpmFieldPermissionType.NONE) {
+    // @ts-ignore
+    fApi.value?.hidden(true, field);
+  }
+};
+
+/** 取消发起审批 */
+const handleCancel = () => {
+  emit('cancel');
+};
+
+/** 选择发起人 */
+const selectUserConfirm = (activityId: string, userList: any[]) => {
+  if (!activityId || !Array.isArray(userList)) return;
+  startUserSelectAssignees.value[Number(activityId)] = userList.map(
+    (item) => item.id,
+  );
+};
+
+defineExpose({ initProcessInfo });
+</script>
+
+<template>
+  <Card
+    :title="getTitle"
+    :body-style="{
+      padding: '12px',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      paddingBottom: '62px', // 预留 actions 区域高度
+    }"
+  >
+    <template #extra>
+      <Space wrap>
+        <Button plain type="default" @click="handleCancel">
+          <IconifyIcon icon="mdi:arrow-left" />&nbsp; 返回
+        </Button>
+      </Space>
+    </template>
+
+    <Tabs
+      v-model:active-key="activeTab"
+      class="flex flex-1 flex-col overflow-hidden"
+    >
+      <Tabs.TabPane tab="表单填写" key="form">
+        <Row :gutter="[48, 16]" class="pt-4">
+          <Col
+            :xs="24"
+            :sm="24"
+            :md="18"
+            :lg="18"
+            :xl="18"
+            class="flex-1 overflow-auto"
+          >
+            <form-create
+              :rule="detailForm.rule"
+              v-model:api="fApi"
+              v-model="detailForm.value"
+              :option="detailForm.option"
+              @submit="submitForm"
+            />
+          </Col>
+          <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="6">
+            <ProcessInstanceTimeline
+              ref="timelineRef"
+              :activity-nodes="activityNodes"
+              :show-status-icon="false"
+              @select-user-confirm="selectUserConfirm"
+            />
+          </Col>
+        </Row>
+      </Tabs.TabPane>
+
+      <Tabs.TabPane tab="流程图" key="flow" class="flex flex-1 overflow-hidden">
+        <div>待开发</div>
+      </Tabs.TabPane>
+    </Tabs>
+
+    <template #actions>
+      <template v-if="activeTab === 'form'">
+        <Space wrap class="flex h-[50px] w-full justify-center">
+          <Button plain type="primary" @click="submitForm">
+            <IconifyIcon icon="mdi:check" />&nbsp; 发起
+          </Button>
+          <Button plain type="default" @click="handleCancel">
+            <IconifyIcon icon="mdi:close" />&nbsp; 取消
+          </Button>
+        </Space>
+      </template>
+    </template>
+  </Card>
+</template>