Pre Merge pull request !106 from 子夜/feature/bpm-process-instance

apps/web-antd/src/api/bpm/category/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmCategoryApi {
-  /** BPM 流程分类 VO */
+  /** BPM 流程分类 V0 */
   export interface CategoryVO {
     id: number;
     name: string;

apps/web-antd/src/api/bpm/form/index.ts

@@ -3,12 +3,12 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmFormApi {
-  // TODO @siye：注释加一个。。嘿嘿
+  // 表单VO
   export interface FormVO {
     id?: number | undefined;
     name: string;
     conf: string;
-    fields: string[];
+    fields: string;
     status: number;
     remark: string;
     createTime: string;

apps/web-antd/src/api/bpm/model/index.ts

@@ -11,7 +11,7 @@ export namespace BpmModelApi {
     deptName?: string;
   }
 
-  /** 流程定义 VO */
+  /** 流程定义 V0 */
   export interface ProcessDefinitionVO {
     id: string;
     version: number;
@@ -21,7 +21,7 @@ export namespace BpmModelApi {
     formCustomViewPath?: string;
   }
 
-  /** 流程模型 VO */
+  /** 流程模型 V0 */
   export interface ModelVO {
     id: number;
     key: string;

apps/web-antd/src/api/bpm/processExpression/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmProcessExpressionApi {
-  /** BPM 流程表达式 VO */
+  /** BPM 流程表达式 V0 */
   export interface ProcessExpressionVO {
     id: number; // 编号
     name: string; // 表达式名字

apps/web-antd/src/api/bpm/processInstance/index.ts

@@ -40,6 +40,7 @@ export namespace BpmProcessInstanceApi {
     tasks: ApprovalTaskInfo[];
   };
 
+  // 流程实例 V0
   export type ProcessInstanceVO = {
     businessKey: string;
     category: string;
@@ -56,9 +57,11 @@ export namespace BpmProcessInstanceApi {
     startTime?: Date;
     startUser?: User;
     status: number;
+    summary?: null | Record<string, any>[];
     tasks?: BpmProcessInstanceApi.Task[];
   };
 
+  // 审批详情
   export type ApprovalDetail = {
     activityNodes: BpmProcessInstanceApi.ApprovalNodeInfo[];
     formFieldsPermission: any;
@@ -66,6 +69,26 @@ export namespace BpmProcessInstanceApi {
     processInstance: BpmProcessInstanceApi.ProcessInstanceVO;
     status: number;
   };
+
+  export type ProcessInstanceCopyV0 = {
+    activityId: string;
+    activityName: string;
+    createTime: number;
+    createUser: User;
+    id: number;
+    processInstanceId: string;
+    processInstanceName: string;
+    processInstanceStartTime: number;
+    reason: string;
+    startUser: User;
+    summary: null | Record<string, any>[];
+    taskId: string;
+    taskName: string;
+    taskStartTime: number;
+    taskStatus: number;
+    taskType: string;
+    taskVariables: Record<string, any>;
+  };
 }
 
 /** 查询我的流程实例分页 */
@@ -126,10 +149,9 @@ export async function getProcessInstance(id: number) {
 
 /** 查询复制流程实例分页 */
 export async function getProcessInstanceCopyPage(params: PageParam) {
-  return requestClient.get<PageResult<BpmProcessInstanceApi.ProcessInstanceVO>>(
-    '/bpm/process-instance/copy/page',
-    { params },
-  );
+  return requestClient.get<
+    PageResult<BpmProcessInstanceApi.ProcessInstanceCopyV0>
+  >('/bpm/process-instance/copy/page', { params });
 }
 
 /** 更新流程实例 */
@@ -152,7 +174,7 @@ export async function getApprovalDetail(params: any) {
 
 /** 获取下一个执行的流程节点 */
 export async function getNextApprovalNodes(params: any) {
-  return requestClient.get<BpmProcessInstanceApi.ProcessInstanceVO>(
+  return requestClient.get<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
     `/bpm/process-instance/get-next-approval-nodes`,
     { params },
   );

apps/web-antd/src/api/bpm/processListener/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmProcessListenerApi {
-  /** BPM 流程监听器 VO */
+  /** BPM 流程监听器 V0 */
   export interface ProcessListenerVO {
     id: number; // 编号
     name: string; // 监听器名字

apps/web-antd/src/api/bpm/task/index.ts

@@ -1,10 +1,12 @@
 import type { PageParam, PageResult } from '@vben/request';
 
+import type { BpmProcessInstanceApi } from '../processInstance';
+
 import { requestClient } from '#/api/request';
 
 export namespace BpmTaskApi {
-  /** BPM 流程监听器 VO */
-  export interface TaskVO {
+  /** BPM 流程监听器 */
+  export interface Task {
     id: number; // 编号
     name: string; // 监听器名字
     type: string; // 监听器类型
@@ -12,12 +14,67 @@ export namespace BpmTaskApi {
     event: string; // 监听事件
     valueType: string; // 监听器值类型
     value: string; // 监听器值
+    processInstanceId: number; // 流程实例ID
+    activityId: string; // 活动ID
   }
+
+  /** 任务基础信息 */
+  export interface BaseTaskInfo {
+    id: string; // 任务ID
+    name: string; // 任务名称
+    assigneeUser: Record<string, any>; // 审批人
+    ownerUser: Record<string, any>; // 创建人
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
+    durationInMillis: number; // 耗时
+    status: number; // 状态
+    nodeType: string; // 节点类型
+    taskDefinitionKey: string; // 任务定义Key
+    parentTaskId: null | string; // 父任务ID
+    children: Record<string, any>[]; // 子任务
+  }
+
+  /** 任务表单信息 */
+  export interface TaskFormInfo {
+    formId: null | string; // 表单ID
+    formName: null | string; // 表单名称
+    formConf: null | Record<string, any>; // 表单配置
+    formFields: null | Record<string, any>; // 表单字段
+    formVariables: null | Record<string, any>; // 表单变量
+  }
+
+  /** 任务设置信息 */
+  export interface TaskSettings {
+    buttonsSetting: Record<string, any>; // 按钮设置
+    signEnable: boolean; // 签章启用
+    reasonRequire: boolean; // 原因要求
+    reason: string; // 原因
+  }
+
+  /** 任务详情 */
+  export interface TaskDetail extends BaseTaskInfo, TaskFormInfo, TaskSettings {
+    processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
+  }
+
+  /** 流程实例任务 */
+  export interface ProcessInstanceTask
+    extends BaseTaskInfo,
+      TaskFormInfo,
+      TaskSettings {
+    processInstance: BpmProcessInstanceApi.ProcessInstanceVO; // 流程实例
+    summary: null | Record<string, any>; // 流程实例摘要
+  }
+
+  // 导出类型别名以保持向后兼容
+  export type TaskV0 = Task;
+  export type TaskDownV0 = TaskDetail;
+  export type TaskManagerV0 = TaskDetail;
+  export type ProcessInstanceTaskV0 = ProcessInstanceTask;
 }
 
 /** 查询待办任务分页 */
 export async function getTaskTodoPage(params: PageParam) {
-  return requestClient.get<PageResult<BpmTaskApi.TaskVO>>(
+  return requestClient.get<PageResult<BpmTaskApi.TaskV0>>(
     '/bpm/task/todo-page',
     {
       params,
@@ -27,7 +84,7 @@ export async function getTaskTodoPage(params: PageParam) {
 
 /** 查询已办任务分页 */
 export async function getTaskDonePage(params: PageParam) {
-  return requestClient.get<PageResult<BpmTaskApi.TaskVO>>(
+  return requestClient.get<PageResult<BpmTaskApi.TaskV0>>(
     '/bpm/task/done-page',
     {
       params,
@@ -37,7 +94,7 @@ export async function getTaskDonePage(params: PageParam) {
 
 /** 查询任务管理分页 */
 export async function getTaskManagerPage(params: PageParam) {
-  return requestClient.get<PageResult<BpmTaskApi.TaskVO>>(
+  return requestClient.get<PageResult<BpmTaskApi.TaskManagerV0>>(
     '/bpm/task/manager-page',
     { params },
   );
@@ -54,55 +111,80 @@ export const rejectTask = async (data: any) => {
 };
 
 /** 根据流程实例 ID 查询任务列表 */
-export const getTaskListByProcessInstanceId = async (data: any) => {
-  return await requestClient.get('/bpm/task/list-by-process-instance-id', data);
+export const getTaskListByProcessInstanceId = async (
+  processInstanceId: string,
+) => {
+  return await requestClient.get<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    `/bpm/task/list-by-process-instance-id?processInstanceId=${processInstanceId}`,
+  );
 };
 
 /** 获取所有可退回的节点 */
 export const getTaskListByReturn = async (data: any) => {
-  return await requestClient.get('/bpm/task/list-by-return', data);
+  return await requestClient.get<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/list-by-return',
+    data,
+  );
 };
 
 /** 退回 */
 export const returnTask = async (data: any) => {
-  return await requestClient.put('/bpm/task/return', data);
+  return await requestClient.put<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/return',
+    data,
+  );
 };
 
 // 委派
 export const delegateTask = async (data: any) => {
-  return await requestClient.put('/bpm/task/delegate', data);
+  return await requestClient.put<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/delegate',
+    data,
+  );
 };
 
 // 转派
 export const transferTask = async (data: any) => {
-  return await requestClient.put('/bpm/task/transfer', data);
+  return await requestClient.put<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/transfer',
+    data,
+  );
 };
 
 // 加签
 export const signCreateTask = async (data: any) => {
-  return await requestClient.put('/bpm/task/create-sign', data);
+  return await requestClient.put<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/create-sign',
+    data,
+  );
 };
 
 // 减签
 export const signDeleteTask = async (data: any) => {
-  return await requestClient.delete('/bpm/task/delete-sign', data);
+  return await requestClient.delete<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/delete-sign',
+    data,
+  );
 };
 
 // 抄送
 export const copyTask = async (data: any) => {
-  return await requestClient.put('/bpm/task/copy', data);
+  return await requestClient.put<BpmTaskApi.ProcessInstanceTaskV0[]>(
+    '/bpm/task/copy',
+    data,
+  );
 };
 
 // 获取我的待办任务
 export const myTodoTask = async (processInstanceId: string) => {
-  return await requestClient.get(
+  return await requestClient.get<BpmTaskApi.ProcessInstanceTaskV0[]>(
     `/bpm/task/my-todo?processInstanceId=${processInstanceId}`,
   );
 };
 
 // 获取加签任务列表
 export const getChildrenTaskList = async (id: string) => {
-  return await requestClient.get(
+  return await requestClient.get<BpmTaskApi.ProcessInstanceTaskV0[]>(
     `/bpm/task/list-by-parent-task-id?parentTaskId=${id}`,
   );
 };

apps/web-antd/src/api/bpm/userGroup/index.ts

@@ -3,7 +3,7 @@ import type { PageParam, PageResult } from '@vben/request';
 import { requestClient } from '#/api/request';
 
 export namespace BpmUserGroupApi {
-  /** BPM 用户组 VO */
+  /** BPM 用户组 V0 */
   export interface UserGroupVO {
     id: number;
     name: string;

apps/web-antd/src/router/routes/modules/bpm.ts

@@ -49,7 +49,7 @@ const routes: RouteRecordRaw[] = [
       {
         path: '/bpm/manager/form/edit',
         name: 'BpmFormEditor',
-        component: () => import('#/views/bpm/form/editor.vue'),
+        component: () => import('#/views/bpm/form/designer/index.vue'),
         meta: {
           title: '编辑流程表单',
           activePath: '/bpm/manager/form',

apps/web-antd/src/views/bpm/category/index.vue

@@ -11,6 +11,7 @@ import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
+import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -100,6 +101,10 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {
 
 <template>
   <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
+    </template>
+
     <FormModal @success="onRefresh" />
     <Grid table-title="流程分类">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/form/designer/index.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-// TODO @siye：editor 要不要放到独立的目录？form/designer ？
 import { computed, onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -12,19 +11,15 @@ import { getFormDetail } from '#/api/bpm/form';
 import { useFormCreateDesigner } from '#/components/form-create';
 import { router } from '#/router';
 import { setConfAndFields } from '#/utils';
-
-import Form from './modules/form.vue';
+import Form from '#/views/bpm/form/modules/form.vue';
 
 defineOptions({ name: 'BpmFormEditor' });
 
-// TODO @siye：这里有 lint 告警
-const props = defineProps<Props>();
-
-interface Props {
+const props = defineProps<{
   copyId?: number;
   id?: number;
   type: 'copy' | 'create' | 'edit';
-}
+}>();
 
 // 流程表单详情
 const flowFormConfig = ref();
@@ -121,7 +116,7 @@ function handleSave() {
     .open();
 }
 
-// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
+/** 返回 */
 function onBack() {
   router.push({
     path: '/bpm/manager/form',

apps/web-antd/src/views/bpm/form/index.vue

@@ -77,6 +77,7 @@ function onActionClick({ code, row }: OnActionClickParams<BpmFormApi.FormVO>) {
     }
   }
 }
+
 /** 复制 */
 function onCopy(row: BpmFormApi.FormVO) {
   router.push({
@@ -109,6 +110,7 @@ const formConfig = ref<any>({});
 async function onDetail(row: BpmFormApi.FormVO) {
   formConfig.value = await getFormDetail(row.id as number);
 
+  // 设置表单配置和表单字段
   setConfAndFields2(
     formConfig.value,
     formConfig.value.conf,
@@ -165,10 +167,13 @@ watch(
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="审批接入（流程表单）"
-      url="https://doc.iocoder.cn/bpm/use-bpm-form/"
-    />
+    <template #doc>
+      <DocAlert
+        title="审批接入（流程表单）"
+        url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+      />
+    </template>
+
     <FormModal @success="onRefresh" />
     <Grid table-title="流程表单">
       <template #toolbar-tools>
@@ -177,28 +182,6 @@ watch(
           {{ $t('ui.actionTitle.create', ['流程表单']) }}
         </Button>
       </template>
-
-      <!-- 摘要 -->
-      <!-- TODO @siye：这个是不是不应该有呀？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
     </Grid>
 
     <DetailModal

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

@@ -39,28 +39,29 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
+    // 表单验证
     const { valid } = await formApi.validate();
     if (!valid) return;
 
     modalApi.lock();
+
     try {
+      // 获取表单数据
       const data = (await formApi.getValues()) as BpmFormApi.FormVO;
 
+      // 编码表单配置和表单字段
       data.conf = encodeConf(designerComponent);
       data.fields = encodeFields(designerComponent);
 
-      // TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
-      const saveForm = async () => {
-        if (!formData.value?.id) {
-          return createForm(data);
-        }
-        return editorAction.value === 'copy'
+      // 保存表单数据
+      if (formData.value?.id) {
+        await (editorAction.value === 'copy'
           ? createForm(data)
-          : updateForm(data);
-      };
+          : updateForm(data));
+      } else {
+        await createForm(data);
+      }
 
-      await saveForm();
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -69,6 +70,7 @@ const [Modal, modalApi] = useVbenModal({
     }
   },
 
+  // 模态框打开或关闭时触发
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
@@ -76,22 +78,25 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
-    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
+    // 获取模态框数据
     const data = modalApi.getData<any>();
     if (!data) return;
 
+    // 设置表单设计器组件
     designerComponent.value = data.designer;
     formData.value = data.formConfig;
     editorAction.value = data.action;
 
+    // 如果是复制，则设置表单数据
     if (editorAction.value === 'copy' && formData.value) {
       formData.value = {
         ...formData.value,
         name: `${formData.value.name}_copy`,
-        id: undefined,
+        id: undefined, // 复制时，id 设置为 undefined 防止重复创建
       };
     }
 
+    // 设置表单数据
     try {
       if (formData.value) {
         await formApi.setValues(formData.value);

apps/web-antd/src/views/bpm/group/data.ts

@@ -101,6 +101,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 /** 列表的字段 */
 export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
   onActionClick: OnActionClickFn<T>,
+  getMemberName: (userIds: number[]) => string,
 ): VxeTableGridOptions['columns'] {
   return [
     {
@@ -122,9 +123,7 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      slots: {
-        default: 'userIds-cell',
-      },
+      formatter: (row) => getMemberName(row.cellValue) || '-',
     },
     {
       field: 'status',

apps/web-antd/src/views/bpm/group/index.vue

@@ -21,16 +21,30 @@ import { $t } from '#/locales';
 import { useGridColumns, useGridFormSchema } from './data';
 import Form from './modules/form.vue';
 
+// 用户列表
+const userList = ref<SystemUserApi.User[]>([]);
+
+// 获取成员名称
+const getMemberName = (userIds: number[]) => {
+  return userIds
+    .map(
+      (userId) => userList.value.find((user) => user.id === userId)?.nickname,
+    )
+    .filter(Boolean)
+    .join('、');
+};
+
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(onActionClick, getMemberName),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -42,21 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
             ...formValues,
           });
         },
-        querySuccess: (params) => {
-          // TODO @siye：getLeaderName?: (userId: number) => string | undefined, 参考这个哈。
-          const { list } = params.response;
-          const userMap = new Map(
-            userList.value.map((user) => [user.id, user.nickname]),
-          );
-          list.forEach(
-            (item: BpmUserGroupApi.UserGroupVO & { nicknames?: string }) => {
-              item.nicknames = item.userIds
-                .map((userId) => userMap.get(userId))
-                .filter(Boolean)
-                .join('、');
-            },
-          );
-        },
       },
     },
     rowConfig: {
@@ -117,8 +116,6 @@ async function onDelete(row: BpmUserGroupApi.UserGroupVO) {
   }
 }
 
-//
-const userList = ref<SystemUserApi.User[]>([]);
 /** 初始化 */
 onMounted(async () => {
   // 加载用户列表

apps/web-antd/src/views/bpm/processExpression/index.vue

@@ -106,7 +106,12 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="流程表达式" url="https://doc.iocoder.cn/bpm/expression/" />
+    <template #doc>
+      <DocAlert
+        title="流程表达式"
+        url="https://doc.iocoder.cn/bpm/expression/"
+      />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="流程表达式">

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

@@ -2,21 +2,12 @@
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import type { SystemUserApi } from '#/api/system/user';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 import { Page } from '@vben/common-ui';
 import { formatDateTime } from '@vben/utils';
 
-import {
-  Avatar,
-  Button,
-  Card,
-  Col,
-  message,
-  Row,
-  TabPane,
-  Tabs,
-} from 'ant-design-vue';
+import { Avatar, Card, Col, message, Row, TabPane, Tabs } from 'ant-design-vue';
 
 import {
   getApprovalDetail as getApprovalDetailApi,
@@ -39,6 +30,10 @@ import {
   SvgBpmRunningIcon,
 } from '#/views/bpm/processInstance/detail/modules/icons';
 
+import ProcessInstanceBpmnViewer from './modules/bpm-viewer.vue';
+import ProcessInstanceOperationButton from './modules/operation-button.vue';
+import ProcessInstanceSimpleViewer from './modules/simple-bpm-viewer.vue';
+import BpmProcessInstanceTaskList from './modules/task-list.vue';
 import ProcessInstanceTimeline from './modules/time-line.vue';
 
 defineOptions({ name: 'BpmProcessInstanceDetail' });
@@ -71,7 +66,8 @@ const processInstanceLoading = ref(false); // 流程实例的加载中
 const processInstance = ref<BpmProcessInstanceApi.ProcessInstanceVO>(); // 流程实例
 const processDefinition = ref<any>({}); // 流程定义
 const processModelView = ref<any>({}); // 流程模型视图
-// const operationButtonRef = ref(); // 操作按钮组件 ref
+const operationButtonRef = ref(); // 操作按钮组件 ref
+
 const auditIconsMap: {
   [key: string]:
     | typeof SvgBpmApproveIcon
@@ -221,6 +217,20 @@ const setFieldPermission = (field: string, permission: string) => {
 
 /** 当前的Tab */
 const activeTab = ref('form');
+const taskListRef = ref();
+
+// 监听 Tab 切换，当切换到 "record" 标签时刷新任务列表
+watch(
+  () => activeTab.value,
+  (newVal) => {
+    if (newVal === 'record') {
+      // 如果切换到流转记录标签，刷新任务列表
+      nextTick(() => {
+        taskListRef.value?.refresh();
+      });
+    }
+  },
+);
 
 /** 初始化 */
 const userOptions = ref<SystemUserApi.User[]>([]); // 用户列表
@@ -236,9 +246,8 @@ onMounted(async () => {
     <Card
       class="h-full"
       :body-style="{
-        height: 'calc(100% - 140px)',
+        height: 'calc(100% - 128px)',
         overflowY: 'auto',
-        paddingTop: '12px',
       }"
     >
       <template #title>
@@ -291,18 +300,25 @@ onMounted(async () => {
         </div>
 
         <!-- 流程操作 -->
-        <div class="flex-1">
-          <Tabs v-model:active-key="activeTab" class="mt-0">
-            <TabPane tab="审批详情" key="form">
-              <Row :gutter="[48, 24]">
-                <Col :xs="24" :sm="24" :md="18" :lg="18" :xl="16">
+        <div class="process-tabs-container flex flex-1 flex-col">
+          <Tabs v-model:active-key="activeTab" class="mt-0 h-full">
+            <TabPane tab="审批详情" key="form" class="tab-pane-content">
+              <Row :gutter="[48, 12]" class="h-full">
+                <Col
+                  :xs="24"
+                  :sm="24"
+                  :md="16"
+                  :lg="18"
+                  :xl="16"
+                  class="h-full"
+                >
                   <!-- 流程表单 -->
                   <div
                     v-if="
                       processDefinition?.formType === BpmModelFormType.NORMAL
                     "
+                    class="h-full"
                   >
-                    <!-- v-model="detailForm.value" -->
                     <form-create
                       v-model="detailForm.value"
                       v-model:api="fApi"
@@ -315,40 +331,109 @@ onMounted(async () => {
                     v-if="
                       processDefinition?.formType === BpmModelFormType.CUSTOM
                     "
+                    class="h-full"
                   >
                     <BusinessFormComponent :id="processInstance?.businessKey" />
                   </div>
                 </Col>
-                <Col :xs="24" :sm="24" :md="6" :lg="6" :xl="8">
-                  <div class="mt-2">
+                <Col :xs="24" :sm="24" :md="8" :lg="6" :xl="8" class="h-full">
+                  <div class="h-full pt-4">
                     <ProcessInstanceTimeline :activity-nodes="activityNodes" />
                   </div>
                 </Col>
               </Row>
             </TabPane>
 
-            <TabPane tab="流程图" key="diagram">
-              <div>待开发</div>
+            <TabPane tab="流程图" key="diagram" class="tab-pane-content">
+              <div class="h-full">
+                <ProcessInstanceSimpleViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.SIMPLE
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+                <ProcessInstanceBpmnViewer
+                  v-show="
+                    processDefinition.modelType &&
+                    processDefinition.modelType === BpmModelType.BPMN
+                  "
+                  :loading="processInstanceLoading"
+                  :model-view="processModelView"
+                />
+              </div>
             </TabPane>
 
-            <TabPane tab="流转记录" key="record">
-              <div>待开发</div>
+            <TabPane tab="流转记录" key="record" class="tab-pane-content">
+              <div class="h-full">
+                <BpmProcessInstanceTaskList
+                  ref="taskListRef"
+                  :loading="processInstanceLoading"
+                  :id="id"
+                />
+              </div>
             </TabPane>
 
             <!-- TODO 待开发 -->
-            <TabPane tab="流转评论" key="comment" v-if="false">
-              <div>待开发</div>
+            <TabPane
+              tab="流转评论"
+              key="comment"
+              v-if="false"
+              class="tab-pane-content"
+            >
+              <div class="h-full">待开发</div>
             </TabPane>
           </Tabs>
         </div>
       </div>
 
       <template #actions>
-        <div class="flex justify-start gap-x-2 p-4">
-          <Button type="primary">驳回</Button>
-          <Button type="primary">同意</Button>
+        <div class="flex px-4">
+          <ProcessInstanceOperationButton
+            ref="operationButtonRef"
+            :process-instance="processInstance"
+            :process-definition="processDefinition"
+            :user-options="userOptions"
+            :normal-form="detailForm"
+            :normal-form-api="fApi"
+            :writable-fields="writableFields"
+            @success="getDetail"
+          />
         </div>
       </template>
     </Card>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+.ant-tabs-content {
+  height: 100%;
+}
+
+.process-tabs-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+:deep(.ant-tabs-content) {
+  flex: 1;
+  overflow-y: auto;
+}
+
+:deep(.ant-tabs-tabpane) {
+  height: 100%;
+}
+
+.tab-pane-content {
+  height: calc(100vh - 440px);
+  overflow: hidden auto;
+}
+</style>

apps/web-antd/src/views/bpm/processInstance/detail/modules/bpm-viewer.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'ProcessInstanceBpmViewer',
+});
+</script>
+
+<template>
+  <div>
+    <h1>BPM 流程实例查看</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'BpmProcessInstanceOperationButton',
+});
+</script>
+
+<template>
+  <div>
+    <h1>BPM 流程操作按钮</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'BpmProcessInstanceSignature',
+});
+</script>
+
+<template>
+  <div>
+    <h1>BPM 流程签名</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/simple-bpm-viewer.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+defineOptions({
+  name: 'BpmProcessInstanceSimpleViewer',
+});
+</script>
+
+<template>
+  <div>
+    <h1>BPM 简单流程设计图查看</h1>
+  </div>
+</template>

apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue

@@ -0,0 +1,218 @@
+<script setup lang="ts">
+import type { formCreate } from '@form-create/antd-designer';
+
+import type { VxeTableGridOptions } from '@vben/plugins/vxe-table';
+
+import type { BpmTaskApi } from '#/api/bpm/task';
+
+import { nextTick, onMounted, ref, shallowRef } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTaskListByProcessInstanceId } from '#/api/bpm/task';
+import { DICT_TYPE, formatPast2, setConfAndFields2 } from '#/utils';
+
+defineOptions({
+  name: 'BpmProcessInstanceTaskList',
+});
+
+const props = defineProps<{
+  id: string;
+  loading: boolean;
+}>();
+
+// 使用shallowRef减少不必要的深度响应
+const columns = shallowRef([
+  {
+    field: 'name',
+    title: '审批节点',
+    minWidth: 150,
+  },
+  {
+    field: 'approver',
+    title: '审批人',
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskV0 }) => {
+        return row.assigneeUser?.nickname || row.ownerUser?.nickname;
+      },
+    },
+    minWidth: 180,
+  },
+  {
+    field: 'createTime',
+    title: '开始时间',
+    formatter: 'formatDateTime',
+    minWidth: 180,
+  },
+  {
+    field: 'endTime',
+    title: '结束时间',
+    formatter: 'formatDateTime',
+    minWidth: 180,
+  },
+  {
+    field: 'status',
+    title: '审批状态',
+    minWidth: 150,
+    cellRender: {
+      name: 'CellDict',
+      props: { type: DICT_TYPE.BPM_TASK_STATUS },
+    },
+  },
+  {
+    field: 'reason',
+    title: '审批建议',
+    slots: {
+      default: 'slot-reason',
+    },
+    minWidth: 200,
+  },
+  {
+    field: 'durationInMillis',
+    title: '耗时',
+    minWidth: 180,
+    slots: {
+      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskV0 }) => {
+        return formatPast2(row.durationInMillis);
+      },
+    },
+  },
+]);
+
+// Grid配置和API
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    columns: columns.value,
+    keepSource: true,
+    showFooter: true,
+    border: true,
+    height: 'auto',
+    proxyConfig: {
+      ajax: {
+        query: async () => {
+          return await getTaskListByProcessInstanceId(props.id);
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    pagerConfig: {
+      enabled: false,
+    },
+    toolbarConfig: {
+      enabled: false,
+    },
+    cellConfig: {
+      height: 60,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
+});
+
+/**
+ * 刷新表格数据
+ */
+const refresh = (): void => {
+  gridApi.query();
+};
+
+// 表单相关
+interface TaskForm {
+  rule: any[];
+  option: Record<string, any>;
+  value: Record<string, any>;
+}
+
+// 定义表单组件引用类型
+
+// 使用明确的类型定义
+const formRef = ref<formCreate>();
+const taskForm = ref<TaskForm>({
+  rule: [],
+  option: {},
+  value: {},
+});
+
+/**
+ * 显示表单详情
+ * @param row 任务数据
+ */
+async function showFormDetail(
+  row: BpmTaskApi.ProcessInstanceTaskV0,
+): Promise<void> {
+  // 设置表单配置和表单字段
+  taskForm.value = {
+    rule: [],
+    option: {},
+    value: row,
+  };
+  setConfAndFields2(taskForm, row.formConf, row.formFields, row.formVariables);
+
+  // 打开弹窗
+  modalApi.open();
+
+  // 等待表单渲染
+  await nextTick();
+
+  // 获取表单API实例
+  const fapi = formRef.value?.fapi;
+  if (!fapi) return;
+
+  // 设置表单不可编辑
+  fapi.btn.show(false);
+  fapi.resetBtn.show(false);
+  fapi.disabled(true);
+}
+
+// 表单查看模态框
+const [Modal, modalApi] = useVbenModal({
+  title: '查看表单',
+  footer: false,
+});
+
+onMounted(() => {
+  refresh();
+});
+
+// 暴露刷新方法给父组件
+defineExpose({
+  refresh,
+});
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <Grid>
+      <template #slot-reason="{ row }">
+        <div class="flex flex-wrap items-center justify-center">
+          <span v-if="row.reason">{{ row.reason }}</span>
+          <span v-else>-</span>
+
+          <Button
+            v-if="row.formId > 0"
+            type="primary"
+            @click="showFormDetail(row)"
+            size="small"
+            ghost
+            class="ml-1"
+          >
+            <IconifyIcon icon="ep:document" />
+            <span class="!ml-[2px] text-[12px]">查看表单</span>
+          </Button>
+        </div>
+      </template>
+    </Grid>
+    <Modal class="w-[800px]">
+      <form-create
+        ref="formRef"
+        v-model="taskForm.value"
+        :option="taskForm.option"
+        :rule="taskForm.rule"
+      />
+    </Modal>
+  </div>
+</template>

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

@@ -54,11 +54,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
 });
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskV0>) {
   switch (code) {
     case 'cancel': {
       onCancel(row);
@@ -72,7 +72,7 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }
 
 /** 取消流程实例 */
-function onCancel(row: BpmTaskApi.TaskVO) {
+function onCancel(row: BpmTaskApi.TaskV0) {
   prompt({
     async beforeClose(scope) {
       if (scope.isConfirm) {
@@ -105,7 +105,7 @@ function onCancel(row: BpmTaskApi.TaskVO) {
 }
 
 /** 查看流程实例 */
-function onDetail(row: BpmTaskApi.TaskVO) {
+function onDetail(row: BpmTaskApi.TaskV0) {
   console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
@@ -121,10 +121,12 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="流程发起、取消、重新发起"
-      url="https://doc.iocoder.cn/bpm/process-instance"
-    />
+    <template #doc>
+      <DocAlert
+        title="流程发起、取消、重新发起"
+        url="https://doc.iocoder.cn/bpm/process-instance"
+      />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="流程状态">

apps/web-antd/src/views/bpm/processListener/index.vue

@@ -108,10 +108,13 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="执行监听器、任务监听器"
-      url="https://doc.iocoder.cn/bpm/listener/"
-    />
+    <template #doc>
+      <DocAlert
+        title="执行监听器、任务监听器"
+        url="https://doc.iocoder.cn/bpm/listener/"
+      />
+    </template>
+
     <FormModal @success="onRefresh" />
     <Grid table-title="流程监听器">
       <template #toolbar-tools>

apps/web-antd/src/views/bpm/task/copy/data.ts

@@ -32,7 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns<T = BpmTaskApi.TaskV0>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [

apps/web-antd/src/views/bpm/task/copy/index.vue

@@ -45,14 +45,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceCopyV0>,
 });
 
 /** 表格操作按钮的回调函数 */
 function onActionClick({
   code,
   row,
-}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
+}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceCopyV0>) {
   switch (code) {
     case 'detail': {
       onDetail(row);
@@ -62,8 +62,7 @@ function onActionClick({
 }
 
 /** 办理任务 */
-function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
-  // TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
+function onDetail(row: BpmProcessInstanceApi.ProcessInstanceCopyV0) {
   const query = {
     id: row.processInstanceId,
     ...(row.activityId && { activityId: row.activityId }),
@@ -82,11 +81,12 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
+    <template #doc>
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="抄送任务">

apps/web-antd/src/views/bpm/task/done/data.ts

@@ -2,8 +2,6 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
-import { useAccess } from '@vben/access';
-
 import { getCategorySimpleList } from '#/api/bpm/category';
 import {
   DICT_TYPE,
@@ -12,9 +10,6 @@ import {
   getRangePickerDefaultProps,
 } from '#/utils';
 
-// TODO @siye：这个要去掉么？没用到
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -74,7 +69,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns<T = BpmTaskApi.TaskV0>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [

apps/web-antd/src/views/bpm/task/done/index.vue

@@ -45,11 +45,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
 });
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskV0>) {
   switch (code) {
     case 'history': {
       onHistory(row);
@@ -59,7 +59,7 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }
 
 /** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskVO) {
+function onHistory(row: BpmTaskApi.TaskV0) {
   console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
@@ -78,16 +78,18 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="审批通过、不通过、驳回"
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="已办任务">

apps/web-antd/src/views/bpm/task/manager/data.ts

@@ -28,24 +28,16 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns<T = BpmTaskApi.TaskV0>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'name',
-      title: '流程名称',
+      field: 'processInstance.name',
+      title: '流程',
       minWidth: 200,
       fixed: 'left',
     },
-    {
-      field: 'processInstance.summary',
-      title: '摘要',
-      minWidth: 200,
-      slots: {
-        default: 'slot-summary',
-      },
-    },
     {
       field: 'processInstance.startUser.nickname',
       title: '发起人',
@@ -61,9 +53,12 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'name',
       title: '当前任务',
       minWidth: 180,
+      formatter: ({ row }) => {
+        return row.name || '-';
+      },
     },
     {
-      field: 'createTime',
+      field: 'startTime',
       title: '任务开始时间',
       minWidth: 180,
       formatter: 'formatDateTime',

apps/web-antd/src/views/bpm/task/manager/index.vue

@@ -45,11 +45,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
 });
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskV0>) {
   switch (code) {
     case 'history': {
       onHistory(row);
@@ -59,13 +59,12 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }
 
 /** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskVO) {
+function onHistory(row: BpmTaskApi.TaskV0) {
   console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
-      // TODO @siye：数据类型，会爆红哈；
-      id: row.processInstance.id,
+      id: row.processInstanceId,
     },
   });
 }
@@ -78,31 +77,11 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    <template #doc>
+      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+    </template>
 
     <FormModal @success="onRefresh" />
-    <Grid table-title="流程任务">
-      <!-- 摘要 -->
-      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
-      <template #slot-summary="{ row }">
-        <div
-          class="flex flex-col py-2"
-          v-if="
-            row.processInstance.summary &&
-            row.processInstance.summary.length > 0
-          "
-        >
-          <div
-            v-for="(item, index) in row.processInstance.summary"
-            :key="index"
-          >
-            <span class="text-gray-500">
-              {{ item.key }} : {{ item.value }}
-            </span>
-          </div>
-        </div>
-        <div v-else>-</div>
-      </template>
-    </Grid>
+    <Grid table-title="流程任务" />
   </Page>
 </template>

apps/web-antd/src/views/bpm/task/todo/data.ts

@@ -67,7 +67,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns<T = BpmTaskApi.TaskV0>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
   return [

apps/web-antd/src/views/bpm/task/todo/index.vue

@@ -45,11 +45,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 64,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
 });
 
 /** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskV0>) {
   switch (code) {
     case 'audit': {
       onAudit(row);
@@ -59,7 +59,7 @@ function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
 }
 
 /** 办理任务 */
-function onAudit(row: BpmTaskApi.TaskVO) {
+function onAudit(row: BpmTaskApi.TaskV0) {
   console.warn(row);
   router.push({
     name: 'BpmProcessInstanceDetail',
@@ -78,16 +78,18 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
-    <DocAlert
-      title="审批通过、不通过、驳回"
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-    <DocAlert
-      title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    />
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    <template #doc>
+      <DocAlert
+        title="审批通过、不通过、驳回"
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      <DocAlert
+        title="审批转办、委派、抄送"
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="待办任务">