review：【BPM 工作流】流程、任务相关的逻辑

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

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

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

@@ -27,7 +27,6 @@ const routes: RouteRecordRaw[] = [
           },
         ],
       },
-
       {
         path: 'process-instance/detail',
         component: () => import('#/views/bpm/processInstance/detail/index.vue'),
@@ -47,8 +46,6 @@ const routes: RouteRecordRaw[] = [
           };
         },
       },
-
-      /** 编辑流程表单 */
       {
         path: '/bpm/manager/form/edit',
         name: 'BpmFormEditor',

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

@@ -91,20 +91,17 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
         props: { type: DICT_TYPE.COMMON_STATUS },
       },
     },
-
     {
       field: 'remark',
       title: '备注',
       minWidth: 200,
     },
-
     {
       field: 'createTime',
       title: '创建时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'operation',
       title: '操作',

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

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+// TODO @siye：editor 要不要放到独立的目录？form/designer ？
 import { computed, onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
@@ -16,6 +17,7 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'BpmFormEditor' });
 
+// TODO @siye：这里有 lint 告警
 const props = defineProps<Props>();
 
 interface Props {
@@ -119,6 +121,7 @@ function handleSave() {
     .open();
 }
 
+// TODO @siye：一些必要的注释，稍微写写哈。保持风格的一致性；
 function onBack() {
   router.push({
     path: '/bpm/manager/form',

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

@@ -179,6 +179,7 @@ watch(
       </template>
 
       <!-- 摘要 -->
+      <!-- TODO @siye：这个是不是不应该有呀？ -->
       <template #slot-summary="{ row }">
         <div
           class="flex flex-col py-2"

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

@@ -39,6 +39,7 @@ const [Form, formApi] = useVbenForm({
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
+    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
     const { valid } = await formApi.validate();
     if (!valid) return;
 
@@ -49,6 +50,7 @@ const [Modal, modalApi] = useVbenModal({
       data.conf = encodeConf(designerComponent);
       data.fields = encodeFields(designerComponent);
 
+      // TODO @siye：这个是不是不用抽方法呀，直接写逻辑就完事啦。
       const saveForm = async () => {
         if (!formData.value?.id) {
           return createForm(data);
@@ -74,6 +76,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
+    // TODO @siye：建议和别的模块，也稍微加点类似的注释哈。= = 阅读总是会有点层次感；
     const data = modalApi.getData<any>();
     if (!data) return;
 

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

@@ -43,11 +43,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
           });
         },
         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

apps/web-antd/src/views/bpm/processInstance/detail/modules/icons/index.ts

@@ -1,6 +1,7 @@
 import { createIconifyIcon } from '@vben/icons';
 
 // bpm 图标
+// TODO @siye：可以新建出一个 bpm 目录哇？icons/bpm；
 const SvgBpmRunningIcon = createIconifyIcon('svg:bpm-running');
 const SvgBpmApproveIcon = createIconifyIcon('svg:bpm-approve');
 const SvgBpmRejectIcon = createIconifyIcon('svg:bpm-reject');

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

@@ -20,7 +20,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-
     {
       fieldName: 'createTime',
       label: '抄送时间',
@@ -51,26 +50,22 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         default: 'slot-summary',
       },
     },
-
     {
       field: 'startUser.nickname',
       title: '流程发起人',
       minWidth: 120,
     },
-
     {
       field: 'processInstanceStartTime',
       title: '流程发起时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'activityName',
       title: '抄送节点',
       minWidth: 180,
     },
-
     {
       field: 'createUser.nickname',
       title: '抄送人',
@@ -84,14 +79,12 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '抄送意见',
       minWidth: 180,
     },
-
     {
       field: 'createTime',
       title: '抄送时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'operation',
       title: '操作',

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

@@ -63,11 +63,11 @@ function onActionClick({
 
 /** 办理任务 */
 function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+  // TODO @siye：row 的类型是不是不对哈？需要改成 copyvo 么？
   const query = {
     id: row.processInstanceId,
     ...(row.activityId && { activityId: row.activityId }),
   };
-
   router.push({
     name: 'BpmProcessInstanceDetail',
     query,
@@ -82,10 +82,12 @@ function onRefresh() {
 
 <template>
   <Page auto-content-height>
+    <!-- TODO @siye：应该用 <template #doc>，这样高度可以被用进去哈 -->
     <DocAlert
       title="审批转办、委派、抄送"
       url="https://doc.iocoder.cn/bpm/task-delegation-and-cc/"
     />
+
     <FormModal @success="onRefresh" />
     <Grid table-title="抄送任务">
       <!-- 摘要 -->
@@ -102,7 +104,6 @@ function onRefresh() {
         </div>
         <div v-else>-</div>
       </template>
-
       <!-- 抄送人 -->
       <template #slot-createUser="{ row }">
         <span class="text-gray-500">

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

@@ -12,6 +12,7 @@ import {
   getRangePickerDefaultProps,
 } from '#/utils';
 
+// TODO @siye：这个要去掉么？没用到
 const { hasAccessByCodes } = useAccess();
 
 /** 列表的搜索表单 */
@@ -35,7 +36,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -48,7 +48,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -93,7 +92,6 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         default: 'slot-summary',
       },
     },
-
     {
       field: 'processInstance.startUser.nickname',
       title: '发起人',
@@ -110,21 +108,18 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '当前任务',
       minWidth: 180,
     },
-
     {
       field: 'createTime',
       title: '任务开始时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'endTime',
       title: '任务结束时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'status',
       title: '审批状态',
@@ -134,14 +129,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         props: { type: DICT_TYPE.BPM_TASK_STATUS },
       },
     },
-
     {
       field: 'reason',
       title: '审批建议',
       minWidth: 180,
     },
-
-    // 耗时
     {
       field: 'durationInMillis',
       title: '耗时',
@@ -150,19 +142,16 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         return `${formatPast2(row.durationInMillis)}`;
       },
     },
-
     {
       field: 'processInstanceId',
       title: '流程编号',
       minWidth: 280,
     },
-
     {
       field: 'id',
       title: '任务编号',
       minWidth: 280,
     },
-
     {
       field: 'operation',
       title: '操作',

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

@@ -16,7 +16,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-
     {
       fieldName: 'createTime',
       label: '创建时间',
@@ -47,7 +46,6 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         default: 'slot-summary',
       },
     },
-
     {
       field: 'processInstance.startUser.nickname',
       title: '发起人',
@@ -64,28 +62,23 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '当前任务',
       minWidth: 180,
     },
-
     {
       field: 'createTime',
       title: '任务开始时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'endTime',
       title: '任务结束时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
-    // 审批人
     {
       field: 'assigneeUser.nickname',
       title: '审批人',
       minWidth: 180,
     },
-
     {
       field: 'status',
       title: '审批状态',
@@ -95,14 +88,11 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         props: { type: DICT_TYPE.BPM_TASK_STATUS },
       },
     },
-
     {
       field: 'reason',
       title: '审批建议',
       minWidth: 180,
     },
-
-    // 耗时
     {
       field: 'durationInMillis',
       title: '耗时',
@@ -111,19 +101,16 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         return `${formatPast2(row.durationInMillis)}`;
       },
     },
-
     {
       field: 'processInstanceId',
       title: '流程编号',
       minWidth: 280,
     },
-
     {
       field: 'id',
       title: '任务编号',
       minWidth: 280,
     },
-
     {
       field: 'operation',
       title: '操作',

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

@@ -64,6 +64,7 @@ function onHistory(row: BpmTaskApi.TaskVO) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: {
+      // TODO @siye：数据类型，会爆红哈；
       id: row.processInstance.id,
     },
   });
@@ -78,9 +79,11 @@ function onRefresh() {
 <template>
   <Page auto-content-height>
     <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
+
     <FormModal @success="onRefresh" />
     <Grid table-title="流程任务">
       <!-- 摘要 -->
+      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
       <template #slot-summary="{ row }">
         <div
           class="flex flex-col py-2"

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

@@ -30,7 +30,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 流程分类
     {
       fieldName: 'category',
       label: '流程分类',
@@ -43,7 +42,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         valueField: 'code',
       },
     },
-    // 流程状态
     {
       fieldName: 'status',
       label: '流程状态',
@@ -57,7 +55,6 @@ export function useGridFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
-    // 发起时间
     {
       fieldName: 'createTime',
       label: '发起时间',
@@ -88,45 +85,38 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
         default: 'slot-summary',
       },
     },
-
     {
       field: 'processInstance.startUser.nickname',
       title: '发起人',
       minWidth: 120,
     },
-
     {
       field: 'createTime',
       title: '发起时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'name',
       title: '当前任务',
       minWidth: 180,
     },
-
     {
       field: 'createTime',
       title: '任务时间',
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
       field: 'processInstanceId',
       title: '流程编号',
       minWidth: 280,
     },
-
     {
       field: 'id',
       title: '任务编号',
       minWidth: 280,
     },
-
     {
       field: 'operation',
       title: '操作',

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

@@ -92,6 +92,7 @@ function onRefresh() {
     <FormModal @success="onRefresh" />
     <Grid table-title="待办任务">
       <!-- 摘要 -->
+      <!-- TODO siye：这个要不要，也放到 data.ts 处理掉？ -->
       <template #slot-summary="{ row }">
         <div
           class="flex flex-col py-2"