feat: 更新 BPM API 接口和组件，调整 VO 命名为 V0，优化表单和任务管理功能

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>>(
+  return requestClient.get<
-    '/bpm/process-instance/copy/page',
+    PageResult<BpmProcessInstanceApi.ProcessInstanceCopyV0>
-    { params },
+  >('/bpm/process-instance/copy/page', { 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 */
+  /** BPM 流程监听器 */
-  export interface TaskVO {
+  export interface Task {
     id: number; // 编号
     name: string; // 监听器名字
     type: string; // 监听器类型
@@ -12,24 +14,67 @@ export namespace BpmTaskApi {
     event: string; // 监听事件
     valueType: string; // 监听器值类型
     value: string; // 监听器值
+    processInstanceId: number; // 流程实例ID
+    activityId: string; // 活动ID
   }
 
-  /** 流程实例任务 VO */
+  /** 任务基础信息 */
-  export interface ProcessInstanceTaskVO {
+  export interface BaseTaskInfo {
-    id: number; // 编号
+    id: string; // 任务ID
     name: string; // 任务名称
-    assigneeUser: any; // 审批人
+    assigneeUser: Record<string, any>; // 审批人
-    ownerUser: any; // 创建人
+    ownerUser: Record<string, any>; // 创建人
+    createTime: number; // 创建时间
+    endTime: number; // 结束时间
     durationInMillis: number; // 耗时
-    formConf?: any; // 表单配置
+    status: number; // 状态
-    formFields?: any; // 表单字段
+    nodeType: string; // 节点类型
-    formVariables?: any; // 表单变量
+    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,
@@ -39,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,
@@ -49,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 },
   );
@@ -69,56 +114,77 @@ export const rejectTask = async (data: any) => {
 export const getTaskListByProcessInstanceId = async (
   processInstanceId: string,
 ) => {
-  return await requestClient.get(
+  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 '#/views/bpm/form/modules/form.vue';
-import Form from './modules/form.vue';
 
 defineOptions({ name: 'BpmFormEditor' });
 
-// TODO @siye：这里有 lint 告警
+const props = defineProps<{
-const props = defineProps<Props>();
-
-interface Props {
   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
+    <template #doc>
-      title="审批接入（流程表单）"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/use-bpm-form/"
+        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) {
-        if (!formData.value?.id) {
+        await (editorAction.value === 'copy'
-          return createForm(data);
-        }
-        return 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: {
+      formatter: (row) => getMemberName(row.cellValue) || '-',
-        default: 'userIds-cell',
-      },
     },
     {
       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/modules/task-list.vue

@@ -36,7 +36,7 @@ const columns = shallowRef([
     field: 'approver',
     title: '审批人',
     slots: {
-      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskVO }) => {
+      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskV0 }) => {
         return row.assigneeUser?.nickname || row.ownerUser?.nickname;
       },
     },
@@ -76,7 +76,7 @@ const columns = shallowRef([
     title: '耗时',
     minWidth: 180,
     slots: {
-      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskVO }) => {
+      default: ({ row }: { row: BpmTaskApi.ProcessInstanceTaskV0 }) => {
         return formatPast2(row.durationInMillis);
       },
     },
@@ -110,7 +110,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     cellConfig: {
       height: 60,
     },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+  } as VxeTableGridOptions<BpmTaskApi.TaskV0>,
 });
 
 /**
@@ -142,7 +142,7 @@ const taskForm = ref<TaskForm>({
  * @param row 任务数据
  */
 async function showFormDetail(
-  row: BpmTaskApi.ProcessInstanceTaskVO,
+  row: BpmTaskApi.ProcessInstanceTaskV0,
 ): Promise<void> {
   // 设置表单配置和表单字段
   taskForm.value = {

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
+    <template #doc>
-      title="流程发起、取消、重新发起"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/process-instance"
+        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
+    <template #doc>
-      title="执行监听器、任务监听器"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/listener/"
+        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) {
+function onDetail(row: BpmProcessInstanceApi.ProcessInstanceCopyV0) {
-  // TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
   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>，这样高度可以被用进去哈 -->
+    <template #doc>
-    <DocAlert
+      <DocAlert
-      title="审批转办、委派、抄送"
+        title="审批转办、委派、抄送"
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        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
+    <template #doc>
-      title="审批通过、不通过、驳回"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+        title="审批通过、不通过、驳回"
-    />
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
-    <DocAlert
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-      title="审批转办、委派、抄送"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        title="审批转办、委派、抄送"
-    />
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
+      <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',
+      field: 'processInstance.name',
-      title: '流程名称',
+      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.processInstanceId,
-      id: row.processInstance.id,
     },
   });
 }
@@ -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="流程任务">
+    <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>
   </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
+    <template #doc>
-      title="审批通过、不通过、驳回"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-todo-done/"
+        title="审批通过、不通过、驳回"
-    />
+        url="https://doc.iocoder.cn/bpm/task-todo-done/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
-    <DocAlert
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
-      title="审批转办、委派、抄送"
+      <DocAlert
-      url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
+        title="审批转办、委派、抄送"
-    />
+        url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
-    <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+      />
+      <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
+    </template>
 
     <FormModal @success="onRefresh" />
     <Grid table-title="待办任务">