refactor: bpm

2025-06-06 20:45:45 +08:00
parent 7e8f2a1328
commit 2c3dd668e3
47 changed files with 1454 additions and 1898 deletions
--- a/apps/web-antd/src/views/bpm/processInstance/create/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/index.vue
@@ -39,7 +39,7 @@ const processDefinitionList = ref<
 >([]); // 流程定义的列表

 // 实现 groupBy 功能
-const groupBy = (array: any[], key: string) => {
+function groupBy(array: any[], key: string) {
  const result: Record<string, any[]> = {};
  for (const item of array) {
    const groupKey = item[key];
@@ -49,10 +49,10 @@ const groupBy = (array: any[], key: string) => {
    result[groupKey].push(item);
  }
  return result;
-};
+}

 /** 查询列表 */
-const getList = async () => {
+async function getList() {
  loading.value = true;
  try {
    // 所有流程分类数据
@@ -79,20 +79,20 @@ const getList = async () => {
  } finally {
    loading.value = false;
  }
-};
+}

 /** 获取所有流程分类数据 */
-const getCategoryList = async () => {
+async function getCategoryList() {
  try {
    // 流程分类
    categoryList.value = await getCategorySimpleList();
  } catch {
    // 错误处理
  }
-};
+}

 /** 获取所有流程定义数据 */
-const handleGetProcessDefinitionList = async () => {
+async function handleGetProcessDefinitionList() {
  try {
    // 流程定义
    processDefinitionList.value = await getProcessDefinitionList({
@@ -108,7 +108,7 @@ const handleGetProcessDefinitionList = async () => {
  } catch {
    // 错误处理
  }
-};
+}

 /** 用于存储搜索过滤后的流程定义 */
 const filteredProcessDefinitionList = ref<
@@ -116,7 +116,7 @@ const filteredProcessDefinitionList = ref<
 >([]);

 /** 搜索流程 */
-const handleQuery = () => {
+function handleQuery() {
  if (searchName.value.trim()) {
    // 如果有搜索关键字，进行过滤
    isSearching.value = true;
@@ -141,16 +141,16 @@ const handleQuery = () => {
    isSearching.value = false;
    filteredProcessDefinitionList.value = processDefinitionList.value;
  }
-};
+}

 /** 判断流程定义是否匹配搜索 */
-const isDefinitionMatchSearch = (definition: any) => {
+function isDefinitionMatchSearch(definition: any) {
  if (!isSearching.value) return false;
  return definition.name.toLowerCase().includes(searchName.value.toLowerCase());
-};
+}

 /** 流程定义的分组 */
-const processDefinitionGroup: any = computed(() => {
+const processDefinitionGroup = computed(() => {
  if (!processDefinitionList.value?.length) {
    return {};
  }
@@ -172,26 +172,26 @@ const processDefinitionGroup: any = computed(() => {
 });

 /** 通过分类 code 获取对应的名称 */
-const getCategoryName = (categoryCode: string) => {
+function getCategoryName(categoryCode: string) {
  return categoryList.value?.find((ctg: any) => ctg.code === categoryCode)
    ?.name;
-};
+}

 // ========== 表单相关 ==========
 const selectProcessDefinition = ref(); // 选择的流程定义
 const processDefinitionDetailRef = ref();

 /** 处理选择流程的按钮操作 */
-const handleSelect = async (
+async function handleSelect(
  row: BpmProcessDefinitionApi.ProcessDefinitionVO,
  formVariables?: any,
-) => {
+) {
  // 设置选择的流程
  selectProcessDefinition.value = row;
  // 初始化流程定义详情
  await nextTick();
  processDefinitionDetailRef.value?.initProcessInfo(row, formVariables);
-};
+}

 /** 过滤出有流程的分类列表。目的：只展示有流程的分类 */
 const availableCategories = computed(() => {
--- a/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/create/modules/form.vue
@@ -91,7 +91,7 @@ const activityNodes = ref<ApprovalNodeInfo[]>([]);
 const processInstanceStartLoading = ref(false);

 /** 提交按钮 */
-const submitForm = async () => {
+async function submitForm() {
  if (!fApi.value || !props.selectProcessDefinition) {
    return;
  }
@@ -130,10 +130,10 @@ const submitForm = async () => {
  } finally {
    processInstanceStartLoading.value = false;
  }
-};
+}

 /** 设置表单信息、获取流程图数据 */
-const initProcessInfo = async (row: any, formVariables?: any) => {
+async function initProcessInfo(row: any, formVariables?: any) {
  // 重置指定审批人
  startUserSelectTasks.value = [];
  startUserSelectAssignees.value = {};
@@ -177,7 +177,7 @@ const initProcessInfo = async (row: any, formVariables?: any) => {
    });
    // 这里暂时无需加载流程图，因为跳出到另外个 Tab；
  }
-};
+}

 /** 预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次 */
 watch(
@@ -200,10 +200,10 @@ watch(
 );

 /** 获取审批详情 */
-const getApprovalDetail = async (row: {
+async function getApprovalDetail(row: {
  id: string;
  processVariablesStr: string;
-}) => {
+}) {
  try {
    const data = await getApprovalDetailApi({
      processDefinitionId: row.id,
@@ -246,12 +246,12 @@ const getApprovalDetail = async (row: {
    message.error('获取审批详情失败');
    console.error('获取审批详情失败:', error);
  }
-};
+}

 /**
 * 设置表单权限
 */
-const setFieldPermission = (field: string, permission: string) => {
+function setFieldPermission(field: string, permission: string) {
  if (permission === BpmFieldPermissionType.READ) {
    // @ts-ignore
    fApi.value?.disabled(true, field);
@@ -264,18 +264,18 @@ const setFieldPermission = (field: string, permission: string) => {
    // @ts-ignore
    fApi.value?.hidden(true, field);
  }
-};
+}

 /** 取消发起审批 */
-const handleCancel = () => {
+function handleCancel() {
  emit('cancel');
-};
+}

 /** 选择发起人 */
-const selectUserConfirm = (activityId: string, userList: any[]) => {
+function selectUserConfirm(activityId: string, userList: any[]) {
  if (!activityId || !Array.isArray(userList)) return;
  startUserSelectAssignees.value[activityId] = userList.map((item) => item.id);
-};
+}

 defineExpose({ initProcessInfo });
 </script>
@@ -293,7 +293,7 @@ defineExpose({ initProcessInfo });
    <template #extra>
      <Space wrap>
        <Button plain type="default" @click="handleCancel">
-          <IconifyIcon icon="mdi:arrow-left" />&nbsp; 返回
+          <IconifyIcon icon="lucide:arrow-left" />&nbsp; 返回
        </Button>
      </Space>
    </template>
@@ -345,11 +345,11 @@ defineExpose({ initProcessInfo });
      <template v-if="activeTab === 'form'">
        <Space wrap class="flex w-full justify-center">
          <Button plain type="primary" @click="submitForm">
-            <IconifyIcon icon="icon-park-outline:check" />
+            <IconifyIcon icon="lucide:check" />
            发起
          </Button>
          <Button plain type="default" @click="handleCancel">
-            <IconifyIcon icon="icon-park-outline:close" />
+            <IconifyIcon icon="lucide:x" />
            取消
          </Button>
        </Space>
--- a/apps/web-antd/src/views/bpm/processInstance/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/data.ts
@@ -1,19 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
-
-import { useAccess } from '@vben/access';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';

 import { getCategorySimpleList } from '#/api/bpm/category';
-import { $t } from '#/locales';
-import {
-  BpmProcessInstanceStatus,
-  DICT_TYPE,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';

 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -88,9 +77,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'name',
@@ -136,38 +123,11 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
      minWidth: 180,
      formatter: 'formatDateTime',
    },
-
    {
-      field: 'operation',
      title: '操作',
-      minWidth: 180,
-      align: 'center',
+      width: 180,
      fixed: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            text: $t('ui.actionTitle.detail'),
-            show: hasAccessByCodes(['bpm:process-instance:query']),
-          },
-          {
-            code: 'cancel',
-            text: $t('ui.actionTitle.cancel'),
-            show: (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
-              return (
-                row.status === BpmProcessInstanceStatus.RUNNING &&
-                hasAccessByCodes(['bpm:process-instance:cancel'])
-              );
-            },
-          },
-        ],
-      },
+      slots: { default: 'actions' },
    },
  ];
 }
--- a/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/index.vue
@@ -175,7 +175,7 @@ async function getApprovalDetail() {
 }

 /** 获取流程模型视图*/
-const getProcessModelView = async () => {
+async function getProcessModelView() {
  if (BpmModelType.BPMN === processDefinition.value?.modelType) {
    // 重置，解决 BPMN 流程图刷新不会重新渲染问题
    processModelView.value = {
@@ -186,14 +186,14 @@ const getProcessModelView = async () => {
  if (data) {
    processModelView.value = data;
  }
-};
+}

 // 审批节点信息
 const activityNodes = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>([]);
 /**
 * 设置表单权限
 */
-const setFieldPermission = (field: string, permission: string) => {
+function setFieldPermission(field: string, permission: string) {
  if (permission === FieldPermissionType.READ) {
    // @ts-ignore
    fApi.value?.disabled(true, field);
@@ -208,7 +208,7 @@ const setFieldPermission = (field: string, permission: string) => {
    // @ts-ignore
    fApi.value?.hidden(true, field);
  }
-};
+}

 /**
 * 操作成功后刷新
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/operation-button.vue
@@ -7,6 +7,7 @@ import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 import { computed, reactive, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';

+import { useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 import { useUserStore } from '@vben/stores';
 import { isEmpty } from '@vben/utils';
@@ -60,6 +61,17 @@ const props = defineProps<{
  writableFields: string[]; // 流程表单可以编辑的字段
 }>(); // 当前登录的编号
 const emit = defineEmits(['success']);
+
+const [SignatureModal, signatureModalApi] = useVbenModal({
+  connectedComponent: Signature,
+  destroyOnClose: true,
+});
+
+/** 创建流程表达式 */
+function openSignatureModal() {
+  signatureModalApi.setData(null).open();
+}
+
 const router = useRouter(); // 路由
 const userStore = useUserStore();
 const userId = userStore.userInfo?.id;
@@ -86,7 +98,6 @@ const nodeTypeName = ref('审批'); // 节点类型名称
 // 审批通过意见表单
 const reasonRequire = ref();
 const approveFormRef = ref<FormInstance>();
-const signRef = ref();
 const approveSignFormRef = ref();
 const nextAssigneesActivityNode = ref<BpmProcessInstanceApi.ApprovalNodeInfo[]>(
  [],
@@ -235,7 +246,7 @@ watch(
 );

 /** 弹出气泡卡 */
-const openPopover = async (type: string) => {
+async function openPopover(type: string) {
  if (type === 'approve') {
    // 校验流程表单
    const valid = await validateNormalForm();
@@ -258,19 +269,19 @@ const openPopover = async (type: string) => {
  });
  // await nextTick()
  // formRef.value.resetFields()
-};
+}

 /** 关闭气泡卡 */
-const closePopover = (type: string, formRef: any | FormInstance) => {
+function closePopover(type: string, formRef: any | FormInstance) {
  if (formRef) {
    formRef.resetFields();
  }
  if (popOverVisible.value[type]) popOverVisible.value[type] = false;
  nextAssigneesActivityNode.value = [];
-};
+}

 /** 流程通过时，根据表单变量查询新的流程节点，判断下一个节点类型是否为自选审批人 */
-const initNextAssigneesFormField = async () => {
+async function initNextAssigneesFormField() {
  // 获取修改的流程变量, 暂时只支持流程表单
  const variables = getUpdatedProcessInstanceVariables();
  const data = await getNextApprovalNodes({
@@ -293,14 +304,14 @@ const initNextAssigneesFormField = async () => {
      }
    });
  }
-};
+}

 /** 选择下一个节点的审批人 */
-const selectNextAssigneesConfirm = (id: string, userList: any[]) => {
+function selectNextAssigneesConfirm(id: string, userList: any[]) {
  approveReasonForm.nextAssignees[id] = userList?.map((item: any) => item.id);
-};
+}
 /** 审批通过时，校验每个自选审批人的节点是否都已配置了审批人 */
-const validateNextAssignees = () => {
+function validateNextAssignees() {
  if (Object.keys(nextAssigneesActivityNode.value).length === 0) {
    return true;
  }
@@ -312,13 +323,10 @@ const validateNextAssignees = () => {
    }
  }
  return true;
-};
+}

 /** 处理审批通过和不通过的操作 */
-const handleAudit = async (
-  pass: boolean,
-  formRef: FormInstance | undefined,
-) => {
+async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
  formLoading.value = true;
  try {
    // 校验表单
@@ -375,10 +383,10 @@ const handleAudit = async (
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理抄送 */
-const handleCopy = async () => {
+async function handleCopy() {
  formLoading.value = true;
  try {
    // 1. 校验表单
@@ -397,10 +405,10 @@ const handleCopy = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理转交 */
-const handleTransfer = async () => {
+async function handleTransfer() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -421,10 +429,10 @@ const handleTransfer = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理委派 */
-const handleDelegate = async () => {
+async function handleDelegate() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -446,10 +454,10 @@ const handleDelegate = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理加签 */
-const handlerAddSign = async (type: string) => {
+async function handlerAddSign(type: string) {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -471,10 +479,10 @@ const handlerAddSign = async (type: string) => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理退回 */
-const handleReturn = async () => {
+async function handleReturn() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -496,10 +504,10 @@ const handleReturn = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理取消 */
-const handleCancel = async () => {
+async function handleCancel() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -518,26 +526,26 @@ const handleCancel = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}

 /** 处理再次提交 */
-const handleReCreate = async () => {
+async function handleReCreate() {
  // 跳转发起流程界面
  await router.push({
    path: '/bpm/task/create',
    query: { processInstanceId: props.processInstance?.id },
  });
  // router.push('/bpm/task/my');
-};
+}

 /** 获取减签人员标签 */
-const getDeleteSignUserLabel = (task: any): string => {
+function getDeleteSignUserLabel(task: any): string {
  const deptName = task?.assigneeUser?.deptName || task?.ownerUser?.deptName;
  const nickname = task?.assigneeUser?.nickname || task?.ownerUser?.nickname;
  return `${nickname} ( 所属部门：${deptName} )`;
-};
+}
 /** 处理减签 */
-const handlerDeleteSign = async () => {
+async function handlerDeleteSign() {
  formLoading.value = true;
  try {
    // 1.1 校验表单
@@ -557,23 +565,23 @@ const handlerDeleteSign = async () => {
  } finally {
    formLoading.value = false;
  }
-};
+}
 /** 重新加载数据 */
-const reload = () => {
+function reload() {
  emit('success');
-};
+}

 /** 任务是否为处理中状态 */
-const isHandleTaskStatus = () => {
+function isHandleTaskStatus() {
  let canHandle = false;
  if (BpmTaskStatusEnum.RUNNING === runningTask.value?.status) {
    canHandle = true;
  }
  return canHandle;
-};
+}

 /** 流程状态是否为结束状态 */
-const isEndProcessStatus = (status: number) => {
+function isEndProcessStatus(status: number) {
  let isEndStatus = false;
  if (
    BpmProcessInstanceStatus.APPROVE === status ||
@@ -583,10 +591,10 @@ const isEndProcessStatus = (status: number) => {
    isEndStatus = true;
  }
  return isEndStatus;
-};
+}

 /** 是否显示按钮 */
-const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
+function isShowButton(btnType: BpmTaskOperationButtonTypeEnum): boolean {
  let isShow = true;
  if (
    runningTask.value?.buttonsSetting &&
@@ -595,10 +603,10 @@ const isShowButton = (btnType: BpmTaskOperationButtonTypeEnum): boolean => {
    isShow = runningTask.value.buttonsSetting[btnType].enable;
  }
  return isShow;
-};
+}

 /** 获取按钮的显示名称 */
-const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
+function getButtonDisplayName(btnType: BpmTaskOperationButtonTypeEnum) {
  let displayName = OPERATION_BUTTON_NAME.get(btnType);
  if (
    runningTask.value?.buttonsSetting &&
@@ -607,9 +615,9 @@ const getButtonDisplayName = (btnType: BpmTaskOperationButtonTypeEnum) => {
    displayName = runningTask.value.buttonsSetting[btnType].displayName;
  }
  return displayName;
-};
+}

-const loadTodoTask = (task: any) => {
+function loadTodoTask(task: any) {
  approveForm.value = {};
  runningTask.value = task;
  approveFormFApi.value = {};
@@ -629,10 +637,10 @@ const loadTodoTask = (task: any) => {
  } else {
    approveForm.value = {}; // 占位，避免为空
  }
-};
+}

 /** 校验流程表单 */
-const validateNormalForm = async () => {
+async function validateNormalForm() {
  if (props.processDefinition?.formType === BpmModelFormType.NORMAL) {
    let valid = true;
    try {
@@ -644,31 +652,31 @@ const validateNormalForm = async () => {
  } else {
    return true;
  }
-};
+}

 /** 从可以编辑的流程表单字段，获取需要修改的流程实例的变量 */
-const getUpdatedProcessInstanceVariables = () => {
+function getUpdatedProcessInstanceVariables() {
  const variables: any = {};
  props.writableFields.forEach((field: string) => {
    if (field && variables[field])
      variables[field] = props.normalFormApi.getValue(field);
  });
  return variables;
-};
+}

 /** 处理签名完成 */
-const handleSignFinish = (url: string) => {
+function handleSignFinish(url: string) {
  approveReasonForm.signPicUrl = url;
  approveFormRef.value?.validateFields(['signPicUrl']);
-};
+}

 /** 处理弹窗可见性 */
-const handlePopoverVisible = (visible: boolean) => {
+function handlePopoverVisible(visible: boolean) {
  if (!visible) {
    // 拦截关闭事件
    popOverVisible.value.approve = true;
  }
-};
+}

 defineExpose({ loadTodoTask });
 </script>
@@ -745,7 +753,7 @@ defineExpose({ loadTodoTask });
                name="signPicUrl"
                ref="approveSignFormRef"
              >
-                <Button @click="signRef.open()" type="primary">
+                <Button @click="openSignatureModal" type="primary">
                  {{ approveReasonForm.signPicUrl ? '重新签名' : '点击签名' }}
                </Button>

@@ -802,7 +810,7 @@ defineExpose({ loadTodoTask });
        "
      >
        <Button ghost danger type="primary" @click="openPopover('reject')">
-          <IconifyIcon icon="icon-park-outline:close" />
+          <IconifyIcon icon="lucide:x" />
          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.REJECT) }}
        </Button>
        <template #content>
@@ -862,7 +870,7 @@ defineExpose({ loadTodoTask });
        "
      >
        <Button type="dashed" @click="openPopover('copy')">
-          <IconifyIcon icon="icon-park-outline:copy" />
+          <IconifyIcon icon="lucide:copy" />
          {{ getButtonDisplayName(BpmTaskOperationButtonTypeEnum.COPY) }}
        </Button>
        <template #content>
@@ -1387,5 +1395,5 @@ defineExpose({ loadTodoTask });
  </div>

  <!-- 签名弹窗 -->
-  <Signature ref="signRef" @success="handleSignFinish" />
+  <SignatureModal @success="handleSignFinish" />
 </template>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/signature.vue
@@ -16,6 +16,8 @@ defineOptions({

 const emits = defineEmits(['success']);

+const signature = ref<InstanceType<typeof Vue3Signature>>();
+
 const [Modal, modalApi] = useVbenModal({
  title: '流程签名',
  onOpenChange(visible) {
@@ -23,42 +25,30 @@ const [Modal, modalApi] = useVbenModal({
      modalApi.close();
    }
  },
-  onConfirm: () => {
-    submit();
+  async onConfirm() {
+    message.success({
+      content: '签名上传中请稍等。。。',
+    });
+    const signFileUrl = await uploadFile({
+      file: download.base64ToFile(
+        signature?.value?.save('image/jpeg') || '',
+        '签名',
+      ),
+    });
+    emits('success', signFileUrl);
+    modalApi.close();
  },
 });
-
-const signature = ref<InstanceType<typeof Vue3Signature>>();
-
-const open = async () => {
-  modalApi.open();
-};
-
-defineExpose({ open });
-
-const submit = async () => {
-  message.success({
-    content: '签名上传中请稍等。。。',
-  });
-  const signFileUrl = await uploadFile({
-    file: download.base64ToFile(
-      signature?.value?.save('image/jpeg') || '',
-      '签名',
-    ),
-  });
-  emits('success', signFileUrl);
-  modalApi.close();
-};
 </script>

 <template>
-  <Modal class="h-[500px] w-[900px]">
+  <Modal class="h-[40%] w-[60%]">
    <div class="mb-2 flex justify-end">
      <Space>
        <Tooltip title="撤销上一步操作">
          <Button @click="signature?.undo()">
            <template #icon>
-              <IconifyIcon icon="mi:undo" class="mb-[4px] size-[16px]" />
+              <IconifyIcon icon="lucide:undo" class="mb-[4px] size-[16px]" />
            </template>
            撤销
          </Button>
@@ -67,10 +57,7 @@ const submit = async () => {
        <Tooltip title="清空画布">
          <Button @click="signature?.clear()">
            <template #icon>
-              <IconifyIcon
-                icon="mdi:delete-outline"
-                class="mb-[4px] size-[16px]"
-              />
+              <IconifyIcon icon="lucide:trash" class="mb-[4px] size-[16px]" />
            </template>
            <span>清除</span>
          </Button>
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/task-list.vue
@@ -14,7 +14,7 @@ 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';
+import { DICT_TYPE, setConfAndFields2 } from '#/utils';

 defineOptions({
  name: 'BpmProcessInstanceTaskList',
@@ -75,11 +75,7 @@ const columns = shallowRef([
    field: 'durationInMillis',
    title: '耗时',
    minWidth: 180,
-    slots: {
-      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
-        return formatPast2(row.durationInMillis);
-      },
-    },
+    formatter: 'formatPast2',
  },
 ]);

@@ -116,9 +112,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /**
 * 刷新表格数据
 */
-const refresh = (): void => {
+function refresh() {
  gridApi.query();
-};
+}

 // 表单相关
 interface TaskForm {
--- a/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/detail/modules/time-line.vue
@@ -108,12 +108,12 @@ const nodeTypeSvgMap = {
 const onlyStatusIconShow = [-1, 0, 1];

 // 获取审批节点类型图标
-const getApprovalNodeTypeIcon = (nodeType: BpmNodeTypeEnum) => {
+function getApprovalNodeTypeIcon(nodeType: BpmNodeTypeEnum) {
  return nodeTypeSvgMap[nodeType]?.icon;
-};
+}

 // 获取审批节点图标
-const getApprovalNodeIcon = (taskStatus: number, nodeType: BpmNodeTypeEnum) => {
+function getApprovalNodeIcon(taskStatus: number, nodeType: BpmNodeTypeEnum) {
  if (taskStatus === BpmTaskStatusEnum.NOT_START) {
    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
  }
@@ -128,15 +128,15 @@ const getApprovalNodeIcon = (taskStatus: number, nodeType: BpmNodeTypeEnum) => {
    return statusIconMap[taskStatus]?.icon || 'mdi:clock-outline';
  }
  return 'mdi:clock-outline';
-};
+}

 // 获取审批节点颜色
-const getApprovalNodeColor = (taskStatus: number) => {
+function getApprovalNodeColor(taskStatus: number) {
  return statusIconMap[taskStatus]?.color;
-};
+}

 // 获取审批节点时间
-const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
+function getApprovalNodeTime(node: BpmProcessInstanceApi.ApprovalNodeInfo) {
  if (node.nodeType === BpmNodeTypeEnum.START_USER_NODE && node.startTime) {
    return formatDateTime(node.startTime);
  }
@@ -147,7 +147,7 @@ const getApprovalNodeTime = (node: BpmProcessInstanceApi.ApprovalNodeInfo) => {
    return formatDateTime(node.startTime);
  }
  return '';
-};
+}

 // 选择自定义审批人
 const userSelectFormRef = ref();
@@ -164,26 +164,26 @@ const handleSelectUser = (activityId: string, selectedList: any[]) => {

 // 选择用户完成
 const selectedUsers = ref<number[]>([]);
-const handleUserSelectConfirm = (userList: any[]) => {
+function handleUserSelectConfirm(userList: any[]) {
  customApproveUsers.value[selectedActivityNodeId.value] = userList || [];

  emit('selectUserConfirm', selectedActivityNodeId.value, userList);
-};
+}

 /** 跳转子流程 */
-const handleChildProcess = (activity: any) => {
+function handleChildProcess(activity: any) {
  push({
    name: 'BpmProcessInstanceDetail',
    query: {
      id: activity.processInstanceId,
    },
  });
-};
+}

 // 判断是否需要显示自定义选择审批人
-const shouldShowCustomUserSelect = (
+function shouldShowCustomUserSelect(
  activity: BpmProcessInstanceApi.ApprovalNodeInfo,
-) => {
+) {
  return (
    isEmpty(activity.tasks) &&
    isEmpty(activity.candidateUsers) &&
@@ -192,27 +192,27 @@ const shouldShowCustomUserSelect = (
      BpmCandidateStrategyEnum.APPROVE_USER_SELECT ===
        activity.candidateStrategy)
  );
-};
+}

 // 判断是否需要显示审批意见
-const shouldShowApprovalReason = (task: any, nodeType: BpmNodeTypeEnum) => {
+function shouldShowApprovalReason(task: any, nodeType: BpmNodeTypeEnum) {
  return (
    task.reason &&
    [BpmNodeTypeEnum.END_EVENT_NODE, BpmNodeTypeEnum.USER_TASK_NODE].includes(
      nodeType,
    )
  );
-};
+}

 // 用户选择弹窗关闭
-const handleUserSelectClosed = () => {
+function handleUserSelectClosed() {
  selectedUsers.value = [];
-};
+}

 // 用户选择弹窗取消
-const handleUserSelectCancel = () => {
+function handleUserSelectCancel() {
  selectedUsers.value = [];
-};
+}
 </script>

 <template>
--- a/apps/web-antd/src/views/bpm/processInstance/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';

 import { h } from 'vue';
@@ -11,7 +8,7 @@ import { Page, prompt } from '@vben/common-ui';

 import { Button, message, Textarea } from 'ant-design-vue';

-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
  cancelProcessInstanceByStartUser,
  getProcessInstanceMyPage,
@@ -25,54 +22,21 @@ import { useGridColumns, useGridFormSchema } from './data';

 defineOptions({ name: 'BpmProcessInstanceMy' });

-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(onActionClick),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getProcessInstanceMyPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-    cellConfig: {
-      height: 64,
-    },
-  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
-});
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}

-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
-  switch (code) {
-    case 'cancel': {
-      onCancel(row);
-      break;
-    }
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
+/** 查看流程实例 */
+function handleDetail(row: BpmTaskApi.TaskVO) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
 }

 /** 取消流程实例 */
-function onCancel(row: BpmTaskApi.TaskVO) {
+function handleCancel(row: BpmTaskApi.TaskVO) {
  prompt({
    async beforeClose(scope) {
      if (scope.isConfirm) {
@@ -104,19 +68,37 @@ function onCancel(row: BpmTaskApi.TaskVO) {
  });
 }

-/** 查看流程实例 */
-function onDetail(row: BpmTaskApi.TaskVO) {
-  console.warn(row);
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: { id: row.id },
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceMyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+    cellConfig: {
+      height: 64,
+    },
+  } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
+});
 </script>

 <template>
@@ -126,7 +108,6 @@ function onRefresh() {
      url="https://doc.iocoder.cn/bpm/process-instance"
    />

-    <FormModal @success="onRefresh" />
    <Grid table-title="流程状态">
      <!-- 摘要 -->
      <template #slot-summary="{ row }">
@@ -154,7 +135,7 @@ function onRefresh() {
          <!-- 单人审批 -->
          <template v-if="row.tasks.length === 1">
            <span>
-              <Button type="link" @click="onDetail(row)">
+              <Button type="link" @click="handleDetail(row)">
                {{ row.tasks[0].assigneeUser?.nickname }}
              </Button>
              ({{ row.tasks[0].name }}) 审批中
@@ -163,7 +144,7 @@ function onRefresh() {
          <!-- 多人审批 -->
          <template v-else>
            <span>
-              <Button type="link" @click="onDetail(row)">
+              <Button type="link" @click="handleDetail(row)">
                {{ row.tasks[0].assigneeUser?.nickname }}
              </Button>
              等 {{ row.tasks.length }} 人 ({{ row.tasks[0].name }})审批中
@@ -178,6 +159,28 @@ function onRefresh() {
          />
        </template>
      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
    </Grid>
  </Page>
 </template>
--- a/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/data.ts
@@ -1,26 +1,14 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';

 import { h } from 'vue';

-import { useAccess } from '@vben/access';
-
 import { Button } from 'ant-design-vue';

 import { getCategorySimpleList } from '#/api/bpm/category';
 import { getSimpleUserList } from '#/api/system/user';
-import { $t } from '#/locales';
-import {
-  DICT_TYPE,
-  formatPast2,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-import { BpmProcessInstanceStatus } from '../../../../utils/constants';
-
-const { hasAccessByCodes } = useAccess();
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';

 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -95,8 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }

 /** 列表的字段 */
-export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
-  onActionClick: OnActionClickFn<T>,
+export function useGridColumns(
  onTaskClick: (task: BpmProcessInstanceApi.Task) => void,
 ): VxeTableGridOptions['columns'] {
  return [
@@ -153,13 +140,7 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
      field: 'durationInMillis',
      title: '流程耗时',
      minWidth: 180,
-      slots: {
-        default: ({ row }) => {
-          return row.durationInMillis > 0
-            ? formatPast2(row.durationInMillis)
-            : '-';
-        },
-      },
+      formatter: 'formatPast2',
    },

    // 当前审批任务 tasks
@@ -192,36 +173,10 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
      minWidth: 320,
    },
    {
-      field: 'operation',
      title: '操作',
-      minWidth: 180,
-      align: 'center',
+      width: 180,
      fixed: 'right',
-      cellRender: {
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程分类',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            text: $t('ui.actionTitle.detail'),
-            show: hasAccessByCodes(['bpm:process-instance:query']),
-          },
-          {
-            code: 'cancel',
-            text: $t('ui.actionTitle.cancel'),
-            show: (row: BpmProcessInstanceApi.ProcessInstanceVO) => {
-              return (
-                row.status === BpmProcessInstanceStatus.RUNNING &&
-                hasAccessByCodes(['bpm:process-instance:cancel'])
-              );
-            },
-          },
-        ],
-      },
+      slots: { default: 'actions' },
    },
  ];
 }
--- a/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
+++ b/apps/web-antd/src/views/bpm/processInstance/manager/index.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';

 import { h } from 'vue';
@@ -11,62 +8,22 @@ import { Page, prompt } from '@vben/common-ui';

 import { message, Textarea } from 'ant-design-vue';

-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
  cancelProcessInstanceByAdmin,
  getProcessInstanceManagerPage,
 } from '#/api/bpm/processInstance';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
+import { BpmProcessInstanceStatus } from '#/utils';

 import { useGridColumns, useGridFormSchema } from './data';

 defineOptions({ name: 'BpmProcessInstanceManager' });

-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(onActionClick, onTaskClick),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await getProcessInstanceManagerPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: { code: 'query' },
-      search: true,
-    },
-  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
-});
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmProcessInstanceApi.ProcessInstanceVO>) {
-  switch (code) {
-    case 'cancel': {
-      onCancel(row);
-      break;
-    }
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
 }

 /** 点击任务 */
@@ -75,8 +32,17 @@ function onTaskClick(task: BpmProcessInstanceApi.Task) {
  console.warn(task);
 }

+/** 查看流程实例 */
+function handleDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+  console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: { id: row.id },
+  });
+}
+
 /** 取消流程实例 */
-function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+function handleCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
  prompt({
    async beforeClose(scope) {
      if (scope.isConfirm) {
@@ -110,19 +76,34 @@ function onCancel(row: BpmProcessInstanceApi.ProcessInstanceVO) {
    .catch(() => {});
 }

-/** 查看流程实例 */
-function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
-  console.warn(row);
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: { id: row.id },
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(onTaskClick),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getProcessInstanceManagerPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+    toolbarConfig: {
+      refresh: { code: 'query' },
+      search: true,
+    },
+  } as VxeTableGridOptions<BpmProcessInstanceApi.ProcessInstanceVO>,
+});
 </script>

 <template>
@@ -131,6 +112,29 @@ function onRefresh() {
      <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm" />
    </template>

-    <Grid table-title="流程实例" />
+    <Grid table-title="流程实例">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:process-instance:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('ui.actionTitle.cancel'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              ifShow: row.status === BpmProcessInstanceStatus.RUNNING,
+              auth: ['bpm:process-instance:cancel'],
+              onClick: handleCancel.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
  </Page>
 </template>