refactor: bpm

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

@@ -1,13 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmCategoryApi } from '#/api/bpm/category';
-
-import { useAccess } from '@vben/access';
 
 import { z } from '#/adapter/form';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -106,9 +102,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -146,29 +140,10 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程分类',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['bpm:category:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['bpm:category:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmCategoryApi } from '#/api/bpm/category';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteCategory, getCategoryPage } from '#/api/bpm/category';
 import { DocAlert } from '#/components/doc-alert';
 import { $t } from '#/locales';
@@ -22,12 +18,46 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程分类 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程分类 */
+function handleEdit(row: BpmCategoryApi.CategoryVO) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程分类 */
+async function handleDelete(row: BpmCategoryApi.CategoryVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.code]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteCategory(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.code]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -50,54 +80,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmCategoryApi.CategoryVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmCategoryApi.CategoryVO>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建流程分类 */
-function onCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑流程分类 */
-function onEdit(row: BpmCategoryApi.CategoryVO) {
-  formModalApi.setData(row).open();
-}
-
-/** 删除流程分类 */
-async function onDelete(row: BpmCategoryApi.CategoryVO) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.code]),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteCategory(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.code]));
-    onRefresh();
-  } catch {
-    hideLoading();
-  }
-}
 </script>
 
 <template>
@@ -109,14 +91,41 @@ async function onDelete(row: BpmCategoryApi.CategoryVO) {
     <FormModal @success="onRefresh" />
     <Grid table-title="流程分类">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['bpm:category:create']"
+              label: $t('ui.actionTitle.create', ['流程分类']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['流程分类']) }}
+              auth: ['bpm:category:create'],
-        </Button>
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:category:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:category:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

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

@@ -1,15 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmFormApi } from '#/api/bpm/form';
-
-import { useAccess } from '@vben/access';
-import { $t } from '@vben/locales';
 
 import { z } from '#/adapter/form';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -68,9 +62,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmFormApi.FormVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -103,41 +95,10 @@ export function useGridColumns<T = BpmFormApi.FormVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 200,
+      width: 240,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'copy',
-            text: $t('ui.actionTitle.copy'),
-            show: hasAccessByCodes(['bpm:form:update']),
-          },
-          {
-            code: 'edit',
-            text: $t('ui.actionTitle.edit'),
-            show: hasAccessByCodes(['bpm:form:update']),
-          },
-          {
-            code: 'detail',
-            text: $t('ui.actionTitle.detail'),
-            show: hasAccessByCodes(['bpm:form:query']),
-          },
-          {
-            code: 'delete',
-            text: $t('ui.actionTitle.delete'),
-            show: hasAccessByCodes(['bpm:form:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,36 +1,98 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmFormApi } from '#/api/bpm/form';
 
-import { ref, watch } from 'vue';
+import { watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 import { $t } from '@vben/locales';
 
-import FormCreate from '@form-create/ant-design-vue';
+import { message } from 'ant-design-vue';
-import { Button, message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteForm, getFormDetail, getFormPage } from '#/api/bpm/form';
+import { deleteForm, getFormPage } from '#/api/bpm/form';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
-import { setConfAndFields2 } from '#/utils';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import Detail from './modules/detail.vue';
 
 defineOptions({ name: 'BpmForm' });
 
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 新增 */
+function handleCreate() {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      type: 'create',
+    },
+  });
+}
+
+/** 编辑 */
+function handleEdit(row: BpmFormApi.FormVO) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      id: row.id,
+      type: 'edit',
+    },
+  });
+}
+
+/** 复制 */
+function handleCopy(row: BpmFormApi.FormVO) {
+  router.push({
+    name: 'BpmFormEditor',
+    query: {
+      copyId: row.id,
+      type: 'copy',
+    },
+  });
+}
+
+/** 删除 */
+async function handleDelete(row: BpmFormApi.FormVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteForm(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+async function handleDetail(row: BpmFormApi.FormVO) {
+  detailModalApi.setData(row).open();
+}
+
+/** 详情弹窗 */
+const [DetailModal, detailModalApi] = useVbenModal({
+  connectedComponent: Detail,
+  destroyOnClose: true,
+});
+
+/** 检测路由参数 */
+const route = useRoute();
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -57,101 +119,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<BpmFormApi.FormVO>,
 });
 
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmFormApi.FormVO>) {
-  switch (code) {
-    case 'copy': {
-      onCopy(row);
-      break;
-    }
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-/** 复制 */
-function onCopy(row: BpmFormApi.FormVO) {
-  router.push({
-    name: 'BpmFormEditor',
-    query: {
-      copyId: row.id,
-      type: 'copy',
-    },
-  });
-}
-
-/** 删除 */
-async function onDelete(row: BpmFormApi.FormVO) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.id]),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteForm(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
-
-/** 详情 */
-const formConfig = ref<any>({});
-async function onDetail(row: BpmFormApi.FormVO) {
-  formConfig.value = await getFormDetail(row.id as number);
-
-  setConfAndFields2(
-    formConfig.value,
-    formConfig.value.conf,
-    formConfig.value.fields,
-  );
-  detailModalApi.open();
-}
-
-/** 编辑 */
-function onEdit(row: BpmFormApi.FormVO) {
-  router.push({
-    name: 'BpmFormEditor',
-    query: {
-      id: row.id,
-      type: 'edit',
-    },
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 新增 */
-function onCreate() {
-  router.push({
-    name: 'BpmFormEditor',
-    query: {
-      type: 'create',
-    },
-  });
-}
-
-/** 详情弹窗 */
-const [DetailModal, detailModalApi] = useVbenModal({
-  destroyOnClose: true,
-  footer: false,
-});
-
-/** 检测路由参数 */
-const route = useRoute();
 watch(
   () => route.query.refresh,
   (val) => {
@@ -171,25 +138,59 @@ watch(
         url="https://doc.iocoder.cn/bpm/use-bpm-form/"
       />
     </template>
+    <DetailModal />
     <Grid table-title="流程表单">
       <template #toolbar-tools>
-        <Button type="primary" @click="onCreate">
+        <TableAction
-          <Plus class="size-5" />
+          :actions="[
-          {{ $t('ui.actionTitle.create', ['流程表单']) }}
+            {
-        </Button>
+              label: $t('ui.actionTitle.create', ['流程表单']),
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['bpm:form:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('ui.actionTitle.copy'),
+              type: 'link',
+              icon: ACTION_ICON.COPY,
+              auth: ['bpm:form:update'],
+              onClick: handleCopy.bind(null, row),
+            },
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:form:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.detail'),
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:form:query'],
+              onClick: handleDetail.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:form:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
-
-    <DetailModal
-      title="流程表单详情"
-      class="w-[800px]"
-      :body-style="{
-        maxHeight: '100px',
-      }"
-    >
-      <div class="mx-4">
-        <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
-      </div>
-    </DetailModal>
   </Page>
 </template>

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

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import FormCreate from '@form-create/ant-design-vue';
+
+import { getFormDetail } from '#/api/bpm/form';
+import { setConfAndFields2 } from '#/utils';
+
+/** 详情 */
+const formConfig = ref<any>({});
+
+const [Modal, modalApi] = useVbenModal({
+  footer: false,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData();
+    if (!data || !data.id) {
+      return;
+    }
+    modalApi.lock();
+    try {
+      formConfig.value = await getFormDetail(data.id as number);
+      setConfAndFields2(
+        formConfig.value,
+        formConfig.value.conf,
+        formConfig.value.fields,
+      );
+    } finally {
+      modalApi.unlock();
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal
+    class="w-[600px]"
+    title="流程表单详情"
+    :body-style="{
+      maxHeight: '100px',
+    }"
+  >
+    <FormCreate :option="formConfig.option" :rule="formConfig.rule" />
+  </Modal>
+</template>

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

@@ -106,7 +106,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[600px]">
+  <Modal :title="getTitle" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -1,14 +1,10 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmCategoryApi } from '#/api/bpm/category';
-
-import { useAccess } from '@vben/access';
 
 import { z } from '#/adapter/form';
 import { getSimpleUserList } from '#/api/system/user';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -99,10 +95,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-  getMemberNames: (userIds: number[]) => string,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -123,9 +116,7 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      formatter: ({ cellValue }) => {
+      slots: { default: 'userIds' },
-        return getMemberNames(cellValue);
-      },
     },
     {
       field: 'status',
@@ -143,29 +134,10 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '用户分组',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['bpm:user-group:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['bpm:user-group:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,19 +1,15 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmUserGroupApi } from '#/api/bpm/userGroup';
 import type { SystemUserApi } from '#/api/system/user';
 
 import { onMounted, ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message, Tag } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
 import { getSimpleUserList } from '#/api/system/user';
 import { DocAlert } from '#/components/doc-alert';
@@ -26,12 +22,53 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建用户分组 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑用户分组 */
+function handleEdit(row: BpmUserGroupApi.UserGroupVO) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除用户分组 */
+async function handleDelete(row: BpmUserGroupApi.UserGroupVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteUserGroup(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
+const userList = ref<SystemUserApi.User[]>([]);
+/** 初始化 */
+onMounted(async () => {
+  // 加载用户列表
+  userList.value = await getSimpleUserList();
+});
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick, getMemberNames),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -54,73 +91,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmUserGroupApi.UserGroupVO>,
 });
-
-/** 获取分组成员姓名 */
-function getMemberNames(userIds: number[]) {
-  const userMap = new Map(
-    userList.value.map((user) => [user.id, user.nickname]),
-  );
-  return userIds
-    .map((userId) => userMap.get(userId))
-    .filter(Boolean)
-    .join('、');
-}
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmUserGroupApi.UserGroupVO>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建用户分组 */
-function onCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑用户分组 */
-function onEdit(row: BpmUserGroupApi.UserGroupVO) {
-  formModalApi.setData(row).open();
-}
-
-/** 删除用户分组 */
-async function onDelete(row: BpmUserGroupApi.UserGroupVO) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteUserGroup(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } catch {
-    hideLoading();
-  }
-}
-
-//
-const userList = ref<SystemUserApi.User[]>([]);
-/** 初始化 */
-onMounted(async () => {
-  // 加载用户列表
-  userList.value = await getSimpleUserList();
-});
 </script>
 
 <template>
@@ -132,18 +102,46 @@ onMounted(async () => {
     <FormModal @success="onRefresh" />
     <Grid table-title="用户分组">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['bpm:category:create']"
+              label: $t('ui.actionTitle.create', ['用户分组']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['用户分组']) }}
+              auth: ['bpm:user-group:create'],
-        </Button>
+              onClick: handleCreate,
+            },
+          ]"
+        />
       </template>
-
+      <template #userIds="{ row }">
-      <template #userIds-cell="{ row }">
+        <Tag v-for="userId in row.userIds" :key="userId" color="blue">
-        <span>{{ row.nicknames }}</span>
+          {{ userList.find((u) => u.id === userId)?.nickname }}
+        </Tag>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:user-group:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:user-group:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

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

@@ -64,7 +64,6 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
@@ -85,7 +84,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -60,24 +60,24 @@ const processDesignRef = ref<InstanceType<typeof ProcessDesign>>();
 const extraSettingRef = ref<InstanceType<typeof ExtraSetting>>();
 
 /** 步骤校验函数 */
-const validateBasic = async () => {
+async function validateBasic() {
   await basicInfoRef.value?.validate();
-};
+}
 
 /** 表单设计校验 */
-const validateForm = async () => {
+async function validateForm() {
   await formDesignRef.value?.validate();
-};
+}
 
 /** 流程设计校验 */
-const validateProcess = async () => {
+async function validateProcess() {
   await processDesignRef.value?.validate();
-};
+}
 
 /** 更多设置校验 */
-const validateExtra = async () => {
+async function validateExtra() {
   await extraSettingRef.value?.validate();
-};
+}
 
 const currentStep = ref(-1); // 步骤控制。-1 用于，一开始全部不展示等当前页面数据初始化完成
 
@@ -139,7 +139,7 @@ const deptList = ref<SystemDeptApi.Dept[]>([]);
 
 /** 初始化数据 */
 const actionType = route.params.type as string;
-const initData = async () => {
+async function initData() {
   if (actionType === 'definition') {
     // 情况一：流程定义场景（恢复）
     const definitionId = route.params.id as string;
@@ -200,7 +200,7 @@ const initData = async () => {
 
   // 以前未配置更多设置的流程
   extraSettingRef.value?.initData();
-};
+}
 
 /** 根据类型切换流程数据 */
 watch(
@@ -218,7 +218,7 @@ watch(
 );
 
 /** 校验所有步骤数据是否完整 */
-const validateAllSteps = async () => {
+async function validateAllSteps() {
   // 基本信息校验
   try {
     await validateBasic();
@@ -254,10 +254,10 @@ const validateAllSteps = async () => {
   }
 
   return true;
-};
+}
 
 /** 保存操作 */
-const handleSave = async () => {
+async function handleSave() {
   try {
     // 保存前校验所有步骤的数据
     const result = await validateAllSteps();
@@ -311,10 +311,10 @@ const handleSave = async () => {
     console.error('保存失败:', error);
     // message.warning(error.msg || '请完善所有步骤的必填信息');
   }
-};
+}
 
 /** 发布操作 */
-const handleDeploy = async () => {
+async function handleDeploy() {
   try {
     // 修改场景下直接发布，新增场景下需要先确认
     if (!formData.value.id) {
@@ -345,10 +345,10 @@ const handleDeploy = async () => {
     console.error('发布失败:', error);
     message.warning(error.message || '发布失败');
   }
-};
+}
 
 /** 步骤切换处理 */
-const handleStepClick = async (index: number) => {
+async function handleStepClick(index: number) {
   try {
     if (index !== 0) {
       await validateBasic();
@@ -370,17 +370,17 @@ const handleStepClick = async (index: number) => {
       message.warning('请先完善当前步骤必填信息');
     }
   }
-};
+}
 
 const tabs = useTabs();
 
 /** 返回列表页 */
-const handleBack = () => {
+function handleBack() {
   // 关闭当前页签
   tabs.closeCurrentTab();
   // 跳转到列表页，使用路径， 目前后端的路由 name： 'name'+ menuId
   router.push({ path: '/bpm/manager/model' });
-};
+}
 
 /** 初始化 */
 onMounted(async () => {
@@ -398,11 +398,9 @@ onBeforeUnmount(() => {
 
 <template>
   <Page auto-content-height>
-    <div class="mx-auto">
+    <!-- 主体内容 -->
-      <!-- 头部导航栏 -->
+    <Card class="mb-4">
-      <div
+      <template #title>
-        class="absolute inset-x-0 top-0 z-10 flex h-12 items-center border-b bg-white px-5"
-      >
         <!-- 左侧标题 -->
         <div class="flex w-[200px] items-center overflow-hidden">
           <ArrowLeft
@@ -416,88 +414,82 @@ onBeforeUnmount(() => {
             {{ formData.name || '创建流程' }}
           </span>
         </div>
-
+      </template>
-        <!-- 步骤条 -->
+      <template #extra>
-        <div class="flex h-full flex-1 items-center justify-center">
+        <Button
-          <div class="flex h-full w-[400px] items-center justify-between">
+          v-if="actionType === 'update'"
+          type="primary"
+          @click="handleDeploy"
+        >
+          发 布
+        </Button>
+        <Button type="primary" @click="handleSave">
+          <span v-if="actionType === 'definition'">恢 复</span>
+          <span v-else>保 存</span>
+        </Button>
+      </template>
+      <!-- 步骤条 -->
+      <div class="flex h-full flex-1 items-center justify-center">
+        <div class="flex h-full w-[400px] items-center justify-between">
+          <div
+            v-for="(step, index) in steps"
+            :key="index"
+            class="relative mx-[15px] flex h-full cursor-pointer items-center"
+            :class="[
+              currentStep === index
+                ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                : 'text-gray-500',
+            ]"
+            @click="handleStepClick(index)"
+          >
             <div
-              v-for="(step, index) in steps"
+              class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
-              :key="index"
-              class="relative mx-[15px] flex h-full cursor-pointer items-center"
               :class="[
                 currentStep === index
-                  ? 'border-b-2 border-solid border-blue-500 text-blue-500'
+                  ? 'border-blue-500 bg-blue-500 text-white'
-                  : 'text-gray-500',
+                  : 'border-gray-300 bg-white text-gray-500',
               ]"
-              @click="handleStepClick(index)"
             >
-              <div
+              {{ index + 1 }}
-                class="mr-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-solid text-[15px]"
-                :class="[
-                  currentStep === index
-                    ? 'border-blue-500 bg-blue-500 text-white'
-                    : 'border-gray-300 bg-white text-gray-500',
-                ]"
-              >
-                {{ index + 1 }}
-              </div>
-              <span class="whitespace-nowrap text-base font-bold">{{
-                step.title
-              }}</span>
             </div>
+            <span class="whitespace-nowrap text-base font-bold">{{
+              step.title
+            }}</span>
           </div>
         </div>
-
-        <!-- 右侧按钮 -->
-        <div class="flex w-[200px] items-center justify-end gap-2">
-          <Button
-            v-if="actionType === 'update'"
-            type="primary"
-            @click="handleDeploy"
-          >
-            发 布
-          </Button>
-          <Button type="primary" @click="handleSave">
-            <span v-if="actionType === 'definition'">恢 复</span>
-            <span v-else>保 存</span>
-          </Button>
-        </div>
       </div>
-      <!-- 主体内容 -->
+      <div class="mt-[50px]">
-      <Card :body-style="{ padding: '10px' }" class="mb-4">
+        <!-- 第一步：基本信息 -->
-        <div class="mt-[50px]">
+        <div v-if="currentStep === 0" class="mx-auto w-4/6">
-          <!-- 第一步：基本信息 -->
+          <BasicInfo
-          <div v-if="currentStep === 0" class="mx-auto w-4/6">
-            <BasicInfo
-              v-model="formData"
-              :category-list="categoryList"
-              :user-list="userList"
-              :dept-list="deptList"
-              ref="basicInfoRef"
-            />
-          </div>
-          <!-- 第二步：表单设计  -->
-          <div v-if="currentStep === 1" class="mx-auto w-4/6">
-            <FormDesign
-              v-model="formData"
-              :form-list="formList"
-              ref="formDesignRef"
-            />
-          </div>
-
-          <!-- 第三步：流程设计 -->
-          <ProcessDesign
-            v-if="currentStep === 2"
             v-model="formData"
-            ref="processDesignRef"
+            :category-list="categoryList"
+            :user-list="userList"
+            :dept-list="deptList"
+            ref="basicInfoRef"
           />
-
-          <!-- 第四步：更多设置 -->
-          <div v-if="currentStep === 3" class="mx-auto w-4/6">
-            <ExtraSetting v-model="formData" ref="extraSettingRef" />
-          </div>
         </div>
-      </Card>
+        <!-- 第二步：表单设计  -->
-    </div>
+        <div v-if="currentStep === 1" class="mx-auto w-4/6">
+          <FormDesign
+            v-model="formData"
+            :form-list="formList"
+            ref="formDesignRef"
+          />
+        </div>
+
+        <!-- 第三步：流程设计 -->
+        <ProcessDesign
+          v-if="currentStep === 2"
+          v-model="formData"
+          ref="processDesignRef"
+        />
+
+        <!-- 第四步：更多设置 -->
+        <div v-if="currentStep === 3" class="mx-auto w-4/6">
+          <ExtraSetting v-model="formData" ref="extraSettingRef" />
+        </div>
+      </div>
+    </Card>
   </Page>
 </template>

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

@@ -10,6 +10,7 @@ import type { SystemUserApi } from '#/api/system/user';
 
 import { ref, watch } from 'vue';
 
+import { useVbenModal } from '@vben/common-ui';
 import { CircleHelp, IconifyIcon, Plus, X } from '@vben/icons';
 
 import {
@@ -41,6 +42,16 @@ const props = defineProps({
   },
 });
 
+const [UserSelectModalComp, userSelectModalApi] = useVbenModal({
+  connectedComponent: UserSelectModal,
+  destroyOnClose: true,
+});
+
+const [DeptSelectModalComp, deptSelectModalApi] = useVbenModal({
+  connectedComponent: DeptSelectModal,
+  destroyOnClose: true,
+});
+
 // 表单引用
 const formRef = ref();
 
@@ -52,8 +63,6 @@ const selectedStartDepts = ref<SystemDeptApi.Dept[]>([]);
 
 // 选中的流程管理员
 const selectedManagerUsers = ref<SystemUserApi.User[]>([]);
-const userSelectFormRef = ref();
-const deptSelectFormRef = ref();
 const currentSelectType = ref<'manager' | 'start'>('start');
 // 选中的用户
 const selectedUsers = ref<number[]>();
@@ -98,37 +107,37 @@ watch(
 );
 
 /** 打开发起人选择 */
-const openStartUserSelect = () => {
+function openStartUserSelect() {
   currentSelectType.value = 'start';
   selectedUsers.value = selectedStartUsers.value.map(
     (user) => user.id,
   ) as number[];
-  userSelectFormRef.value.open(selectedUsers.value);
+  userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
-};
+}
 
 /** 打开部门选择 */
-const openStartDeptSelect = () => {
+function openStartDeptSelect() {
-  deptSelectFormRef.value.open(selectedStartDepts.value);
+  deptSelectModalApi.setData({ selectedList: selectedStartDepts.value }).open();
-};
+}
 /** 处理部门选择确认 */
-const handleDeptSelectConfirm = (depts: SystemDeptApi.Dept[]) => {
+function handleDeptSelectConfirm(depts: SystemDeptApi.Dept[]) {
   modelData.value = {
     ...modelData.value,
     startDeptIds: depts.map((d) => d.id),
   };
-};
+}
 
 /** 打开管理员选择 */
-const openManagerUserSelect = () => {
+function openManagerUserSelect() {
   currentSelectType.value = 'manager';
   selectedUsers.value = selectedManagerUsers.value.map(
     (user) => user.id,
   ) as number[];
-  userSelectFormRef.value.open(selectedUsers.value);
+  userSelectModalApi.setData({ userIds: selectedUsers.value }).open();
-};
+}
 
 /** 处理用户选择确认 */
-const handleUserSelectConfirm = (userList: SystemUserApi.User[]) => {
+function handleUserSelectConfirm(userList: SystemUserApi.User[]) {
   modelData.value =
     currentSelectType.value === 'start'
       ? {
@@ -139,20 +148,20 @@ const handleUserSelectConfirm = (userList: SystemUserApi.User[]) => {
           ...modelData.value,
           managerUserIds: userList.map((u) => u.id),
         };
-};
+}
 
 /** 用户选择弹窗关闭 */
-const handleUserSelectClosed = () => {
+function handleUserSelectClosed() {
   selectedUsers.value = [];
-};
+}
 
 /** 用户选择弹窗取消 */
-const handleUserSelectCancel = () => {
+function handleUserSelectCancel() {
   selectedUsers.value = [];
-};
+}
 
 /** 处理发起人类型变化 */
-const handleStartUserTypeChange = (value: SelectValue) => {
+function handleStartUserTypeChange(value: SelectValue) {
   const numValue = Number(value);
   switch (numValue) {
     case 0: {
@@ -181,270 +190,266 @@ const handleStartUserTypeChange = (value: SelectValue) => {
       break;
     }
   }
-};
+}
 
 /** 移除发起人 */
-const handleRemoveStartUser = (user: SystemUserApi.User) => {
+function handleRemoveStartUser(user: SystemUserApi.User) {
   modelData.value = {
     ...modelData.value,
     startUserIds: modelData.value.startUserIds.filter(
       (id: number) => id !== user.id,
     ),
   };
-};
+}
 
 /** 移除部门 */
-const handleRemoveStartDept = (dept: SystemDeptApi.Dept) => {
+function handleRemoveStartDept(dept: SystemDeptApi.Dept) {
   modelData.value = {
     ...modelData.value,
     startDeptIds: modelData.value.startDeptIds.filter(
       (id: number) => id !== dept.id,
     ),
   };
-};
+}
 
 /** 移除管理员 */
-const handleRemoveManagerUser = (user: SystemUserApi.User) => {
+function handleRemoveManagerUser(user: SystemUserApi.User) {
   modelData.value = {
     ...modelData.value,
     managerUserIds: modelData.value.managerUserIds.filter(
       (id: number) => id !== user.id,
     ),
   };
-};
+}
 
 /** 表单校验 */
-const validate = async () => {
+async function validate() {
   await formRef.value?.validate();
-};
+}
 
 defineExpose({ validate });
 </script>
 
 <template>
-  <Form
+  <div>
-    ref="formRef"
+    <Form
-    :model="modelData"
+      ref="formRef"
-    :rules="rules"
+      :model="modelData"
-    :label-col="{ span: 4 }"
+      :rules="rules"
-    :wrapper-col="{ span: 20 }"
+      :label-col="{ span: 4 }"
-    class="mt-5"
+      :wrapper-col="{ span: 20 }"
-  >
+      class="mt-5"
-    <Form.Item label="流程标识" name="key" class="mb-5">
+    >
-      <div class="flex items-center">
+      <Form.Item label="流程标识" name="key" class="mb-5">
+        <div class="flex items-center">
+          <Input
+            class="w-full"
+            v-model:value="modelData.key"
+            :disabled="!!modelData.id"
+            placeholder="请输入流程标识，以字母或下划线开头"
+          />
+          <Tooltip
+            :title="
+              modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'
+            "
+            placement="top"
+          >
+            <CircleHelp class="ml-1 size-5 text-gray-900" />
+          </Tooltip>
+        </div>
+      </Form.Item>
+      <Form.Item label="流程名称" name="name" class="mb-5">
         <Input
-          class="w-full"
+          v-model:value="modelData.name"
-          v-model:value="modelData.key"
           :disabled="!!modelData.id"
-          placeholder="请输入流程标识，以字母或下划线开头"
+          allow-clear
+          placeholder="请输入流程名称"
         />
-        <Tooltip
+      </Form.Item>
-          :title="
+      <Form.Item label="流程分类" name="category" class="mb-5">
-            modelData.id ? '流程标识不可修改！' : '新建后，流程标识不可修改！'
+        <Select
-          "
+          class="w-full"
-          placement="top"
+          v-model:value="modelData.category"
+          allow-clear
+          placeholder="请选择流程分类"
         >
-          <CircleHelp class="ml-1 size-5 text-gray-900" />
+          <Select.Option
-        </Tooltip>
+            v-for="category in categoryList"
-      </div>
+            :key="category.code"
-    </Form.Item>
+            :value="category.code"
-    <Form.Item label="流程名称" name="name" class="mb-5">
+          >
-      <Input
+            {{ category.name }}
-        v-model:value="modelData.name"
+          </Select.Option>
-        :disabled="!!modelData.id"
+        </Select>
-        allow-clear
+      </Form.Item>
-        placeholder="请输入流程名称"
+      <Form.Item label="流程图标" class="mb-5">
-      />
+        <ImageUpload v-model:value="modelData.icon" />
-    </Form.Item>
+      </Form.Item>
-    <Form.Item label="流程分类" name="category" class="mb-5">
+      <Form.Item label="流程描述" name="description" class="mb-5">
-      <Select
+        <Input.TextArea v-model:value="modelData.description" allow-clear />
-        class="w-full"
+      </Form.Item>
-        v-model:value="modelData.category"
+      <Form.Item label="流程类型" name="type" class="mb-5">
-        allow-clear
+        <Radio.Group v-model:value="modelData.type">
-        placeholder="请选择流程分类"
+          <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
-      >
+          <Radio
-        <Select.Option
+            v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
-          v-for="category in categoryList"
+            :key="dict.value"
-          :key="category.code"
+            :value="dict.value"
-          :value="category.code"
+            :disabled="dict.value === 10"
+          >
+            {{ dict.label }}
+          </Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="是否可见" name="visible" class="mb-5">
+        <Radio.Group v-model:value="modelData.visible">
+          <Radio
+            v-for="(dict, index) in getBoolDictOptions(
+              DICT_TYPE.INFRA_BOOLEAN_STRING,
+            )"
+            :key="index"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </Radio>
+        </Radio.Group>
+      </Form.Item>
+      <Form.Item label="谁可以发起" name="startUserType" class="mb-5">
+        <Select
+          v-model:value="modelData.startUserType"
+          placeholder="请选择谁可以发起"
+          @change="handleStartUserTypeChange"
         >
-          {{ category.name }}
+          <Select.Option :value="0">全员</Select.Option>
-        </Select.Option>
+          <Select.Option :value="1">指定人员</Select.Option>
-      </Select>
+          <Select.Option :value="2">指定部门</Select.Option>
-    </Form.Item>
+        </Select>
-    <Form.Item label="流程图标" class="mb-5">
-      <ImageUpload v-model:value="modelData.icon" />
-    </Form.Item>
-    <Form.Item label="流程描述" name="description" class="mb-5">
-      <Input.TextArea v-model:value="modelData.description" allow-clear />
-    </Form.Item>
-    <Form.Item label="流程类型" name="type" class="mb-5">
-      <Radio.Group v-model:value="modelData.type">
-        <!-- TODO BPMN 流程类型需要整合，暂时禁用 -->
-        <Radio
-          v-for="dict in getIntDictOptions(DICT_TYPE.BPM_MODEL_TYPE)"
-          :key="dict.value"
-          :value="dict.value"
-          :disabled="dict.value === 10"
-        >
-          {{ dict.label }}
-        </Radio>
-      </Radio.Group>
-    </Form.Item>
-    <Form.Item label="是否可见" name="visible" class="mb-5">
-      <Radio.Group v-model:value="modelData.visible">
-        <Radio
-          v-for="(dict, index) in getBoolDictOptions(
-            DICT_TYPE.INFRA_BOOLEAN_STRING,
-          )"
-          :key="index"
-          :value="dict.value"
-        >
-          {{ dict.label }}
-        </Radio>
-      </Radio.Group>
-    </Form.Item>
-    <Form.Item label="谁可以发起" name="startUserType" class="mb-5">
-      <Select
-        v-model:value="modelData.startUserType"
-        placeholder="请选择谁可以发起"
-        @change="handleStartUserTypeChange"
-      >
-        <Select.Option :value="0">全员</Select.Option>
-        <Select.Option :value="1">指定人员</Select.Option>
-        <Select.Option :value="2">指定部门</Select.Option>
-      </Select>
-      <div
-        v-if="modelData.startUserType === 1"
-        class="mt-2 flex flex-wrap gap-2"
-      >
         <div
-          v-for="user in selectedStartUsers"
+          v-if="modelData.startUserType === 1"
-          :key="user.id"
+          class="mt-2 flex flex-wrap gap-2"
-          class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2"
         >
-          <Avatar
+          <div
-            class="m-1"
+            v-for="user in selectedStartUsers"
-            :size="28"
+            :key="user.id"
-            v-if="user.avatar"
+            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2"
-            :src="user.avatar"
+          >
-          />
+            <Avatar
-          <Avatar class="m-1" :size="28" v-else>
+              class="m-1"
-            {{ user.nickname?.substring(0, 1) }}
+              :size="28"
-          </Avatar>
+              v-if="user.avatar"
-          {{ user.nickname }}
+              :src="user.avatar"
-          <X
+            />
-            class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+            <Avatar class="m-1" :size="28" v-else>
-            @click="handleRemoveStartUser(user)"
+              {{ user.nickname?.substring(0, 1) }}
-          />
+            </Avatar>
+            {{ user.nickname }}
+            <X
+              class="ml-2 size-4 cursor-pointer"
+              @click="handleRemoveStartUser(user)"
+            />
+          </div>
+          <Button
+            type="link"
+            @click="openStartUserSelect"
+            class="flex items-center"
+          >
+            <template #icon>
+              <IconifyIcon
+                icon="mdi:account-plus-outline"
+                class="size-[18px]"
+              />
+            </template>
+            选择人员
+          </Button>
         </div>
-        <Button
-          type="link"
-          @click="openStartUserSelect"
-          class="flex items-center"
-        >
-          <template #icon>
-            <IconifyIcon icon="mdi:account-plus-outline" class="size-[18px]" />
-          </template>
-          选择人员
-        </Button>
-      </div>
-      <div
-        v-if="modelData.startUserType === 2"
-        class="mt-2 flex flex-wrap gap-2"
-      >
         <div
-          v-for="dept in selectedStartDepts"
+          v-if="modelData.startUserType === 2"
-          :key="dept.id"
+          class="mt-2 flex flex-wrap gap-2"
-          class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2"
         >
-          <IconifyIcon icon="ep:office-building" class="size-6 px-1" />
+          <div
-          {{ dept.name }}
+            v-for="dept in selectedStartDepts"
-          <X
+            :key="dept.id"
-            class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2 shadow-sm"
-            @click="handleRemoveStartDept(dept)"
+          >
-          />
+            <IconifyIcon icon="ep:office-building" class="size-6 px-1" />
+            {{ dept.name }}
+            <X
+              class="ml-2 size-4 cursor-pointer"
+              @click="handleRemoveStartDept(dept)"
+            />
+          </div>
+          <Button
+            type="link"
+            @click="openStartDeptSelect"
+            class="flex items-center"
+          >
+            <template #icon>
+              <Plus class="size-[18px]" />
+            </template>
+            选择部门
+          </Button>
         </div>
-        <Button
+      </Form.Item>
-          type="link"
+      <Form.Item label="流程管理员" name="managerUserIds" class="mb-5">
-          @click="openStartDeptSelect"
+        <div class="flex flex-wrap gap-2">
-          class="flex items-center"
+          <div
-        >
+            v-for="user in selectedManagerUsers"
-          <template #icon>
+            :key="user.id"
-            <Plus class="size-[18px]" />
+            class="bg-destructive text-destructive-foreground hover:bg-destructive-hover relative flex h-9 items-center rounded-full pr-2"
-          </template>
+          >
-          选择部门
+            <Avatar
-        </Button>
+              class="m-1"
-      </div>
+              :size="28"
-    </Form.Item>
+              v-if="user.avatar"
-    <Form.Item label="流程管理员" name="managerUserIds" class="mb-5">
+              :src="user.avatar"
-      <div class="flex flex-wrap gap-2">
+            />
-        <div
+            <Avatar class="m-1" :size="28" v-else>
-          v-for="user in selectedManagerUsers"
+              {{ user.nickname?.substring(0, 1) }}
-          :key="user.id"
+            </Avatar>
-          class="relative flex h-9 items-center rounded-full bg-gray-100 pr-2"
+            {{ user.nickname }}
-        >
+            <X
-          <Avatar
+              class="ml-2 size-4 cursor-pointer"
-            class="m-1"
+              @click="handleRemoveManagerUser(user)"
-            :size="28"
+            />
-            v-if="user.avatar"
+          </div>
-            :src="user.avatar"
+          <Button
-          />
+            type="link"
-          <Avatar class="m-1" :size="28" v-else>
+            @click="openManagerUserSelect"
-            {{ user.nickname?.substring(0, 1) }}
+            class="flex items-center"
-          </Avatar>
+          >
-          {{ user.nickname }}
+            <template #icon>
-          <X
+              <IconifyIcon
-            class="ml-2 size-4 cursor-pointer text-gray-400 hover:text-red-500"
+                icon="mdi:account-plus-outline"
-            @click="handleRemoveManagerUser(user)"
+                class="size-[18px]"
-          />
+              />
+            </template>
+            选择人员
+          </Button>
         </div>
-        <Button
+      </Form.Item>
-          type="link"
+    </Form>
-          @click="openManagerUserSelect"
-          class="flex items-center"
-        >
-          <template #icon>
-            <IconifyIcon icon="mdi:account-plus-outline" class="size-[18px]" />
-          </template>
-          选择人员
-        </Button>
-      </div>
-    </Form.Item>
-  </Form>
 
-  <!-- 用户选择弹窗 -->
+    <!-- 用户选择弹窗 -->
-  <UserSelectModal
+    <UserSelectModalComp
-    ref="userSelectFormRef"
+      v-model:value="selectedUsers"
-    v-model:value="selectedUsers"
+      :multiple="true"
-    :multiple="true"
+      title="选择用户"
-    title="选择用户"
+      @confirm="handleUserSelectConfirm"
-    @confirm="handleUserSelectConfirm"
+      @closed="handleUserSelectClosed"
-    @closed="handleUserSelectClosed"
+      @cancel="handleUserSelectCancel"
-    @cancel="handleUserSelectCancel"
+    />
-  />
+    <!-- 部门选择对话框 -->
-  <!-- 部门选择对话框 -->
+    <DeptSelectModalComp
-  <DeptSelectModal
+      title="发起人部门选择"
-    ref="deptSelectFormRef"
+      :check-strictly="true"
-    title="发起人部门选择"
+      @confirm="handleDeptSelectConfirm"
-    :check-strictly="true"
+    />
-    @confirm="handleDeptSelectConfirm"
+  </div>
-  />
 </template>
 
 <style lang="scss" scoped>
-.bg-gray-100 {
-  background-color: #f5f7fa;
-  transition: all 0.3s;
-
-  &:hover {
-    background-color: #e6e8eb;
-  }
-}
-
 .upload-img-placeholder {
   cursor: pointer;
-  background-color: #fafafa;
   transition: all 0.3s;
 
   &:hover {

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

@@ -91,9 +91,9 @@ const numberExample = computed(() => {
 
 /** 是否开启流程前置通知 */
 const processBeforeTriggerEnable = ref(false);
-const handleProcessBeforeTriggerEnableChange = (
+function handleProcessBeforeTriggerEnableChange(
   val: boolean | number | string,
-) => {
+) {
   modelData.value.processBeforeTriggerSetting = val
     ? {
         url: '',
@@ -102,13 +102,11 @@ const handleProcessBeforeTriggerEnableChange = (
         response: [],
       }
     : null;
-};
+}
 
 /** 是否开启流程后置通知 */
 const processAfterTriggerEnable = ref(false);
-const handleProcessAfterTriggerEnableChange = (
+function handleProcessAfterTriggerEnableChange(val: boolean | number | string) {
-  val: boolean | number | string,
-) => {
   modelData.value.processAfterTriggerSetting = val
     ? {
         url: '',
@@ -117,13 +115,11 @@ const handleProcessAfterTriggerEnableChange = (
         response: [],
       }
     : null;
-};
+}
 
 /** 是否开启任务前置通知 */
 const taskBeforeTriggerEnable = ref(false);
-const handleTaskBeforeTriggerEnableChange = (
+function handleTaskBeforeTriggerEnableChange(val: boolean | number | string) {
-  val: boolean | number | string,
-) => {
   modelData.value.taskBeforeTriggerSetting = val
     ? {
         url: '',
@@ -132,11 +128,11 @@ const handleTaskBeforeTriggerEnableChange = (
         response: [],
       }
     : null;
-};
+}
 
 /** 是否开启任务后置通知 */
 const taskAfterTriggerEnable = ref(false);
-const handleTaskAfterTriggerEnableChange = (val: boolean | number | string) => {
+function handleTaskAfterTriggerEnableChange(val: boolean | number | string) {
   modelData.value.taskAfterTriggerSetting = val
     ? {
         url: '',
@@ -145,7 +141,7 @@ const handleTaskAfterTriggerEnableChange = (val: boolean | number | string) => {
         response: [],
       }
     : null;
-};
+}
 
 /** 表单选项 */
 const formField = ref<Array<{ field: string; title: string }>>([]);
@@ -181,7 +177,7 @@ const formFieldOptions4Summary = computed(() => {
 });
 
 /** 兼容以前未配置更多设置的流程 */
-const initData = () => {
+function initData() {
   if (!modelData.value.processIdRule) {
     modelData.value.processIdRule = {
       enable: false,
@@ -218,7 +214,7 @@ const initData = () => {
   if (modelData.value.taskAfterTriggerSetting) {
     taskAfterTriggerEnable.value = true;
   }
-};
+}
 
 /** 监听表单 ID 变化，加载表单数据 */
 watch(
@@ -242,9 +238,9 @@ watch(
 // 表单引用
 const formRef = ref();
 /** 表单校验 */
-const validate = async () => {
+async function validate() {
   await formRef.value?.validate();
-};
+}
 
 defineExpose({ initData, validate });
 </script>

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

@@ -80,9 +80,9 @@ const rules: Record<string, Rule[]> = {
 };
 
 /** 表单校验 */
-const validate = async () => {
+async function validate() {
   await formRef.value?.validate();
-};
+}
 
 defineExpose({ validate });
 </script>

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

@@ -16,7 +16,7 @@ const processData = inject('processData') as Ref;
 const simpleDesign = ref();
 
 /** 表单校验 */
-const validate = async () => {
+async function validate() {
   // 获取最新的流程数据
   if (!processData.value) {
     throw new Error('请设计流程');
@@ -29,9 +29,9 @@ const validate = async () => {
     }
   }
   return true;
-};
+}
 /** 处理设计器保存成功 */
-const handleDesignSuccess = async (data?: any) => {
+async function handleDesignSuccess(data?: any) {
   if (data) {
     // 创建新的对象以触发响应式更新
     const newModelData = {
@@ -44,7 +44,7 @@ const handleDesignSuccess = async (data?: any) => {
     // 更新表单的模型数据部分
     modelData.value = newModelData;
   }
-};
+}
 
 /** 是否显示设计器 */
 const showDesigner = computed(() => {

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

@@ -18,15 +18,15 @@ const emit = defineEmits(['success']);
 const designerRef = ref();
 
 /** 保存成功回调 */
-const handleSuccess = (data?: any) => {
+function handleSuccess(data?: any) {
   if (data) {
     emit('success', data);
   }
-};
+}
 /** 设计器配置校验 */
-const validateConfig = async () => {
+async function validateConfig() {
   return await designerRef.value.validate();
-};
+}
 defineExpose({ validateConfig });
 </script>
 <template>

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

@@ -4,21 +4,12 @@ import type { ModelCategoryInfo } from '#/api/bpm/model';
 import { onActivated, reactive, ref, useTemplateRef, watch } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus, Search, Settings } from '@vben/icons';
+import { IconifyIcon } from '@vben/icons';
 import { cloneDeep } from '@vben/utils';
 
 import { refAutoReset } from '@vueuse/core';
 import { useSortable } from '@vueuse/integrations/useSortable';
-import {
+import { Button, Card, Dropdown, Input, Menu, message } from 'ant-design-vue';
-  Button,
-  Card,
-  Divider,
-  Dropdown,
-  Form,
-  Input,
-  Menu,
-  message,
-} from 'ant-design-vue';
 
 import {
   getCategorySimpleList,
@@ -72,7 +63,7 @@ watch(
 );
 
 /** 加载数据 */
-const getList = async () => {
+async function getList() {
   modelListSpinning.value = true;
   try {
     const modelList = await getModelList(queryParams.name);
@@ -89,27 +80,22 @@ const getList = async () => {
   } finally {
     modelListSpinning.value = false;
   }
-};
+}
 
 /** 初始化 */
 onActivated(() => {
   getList();
 });
 
-/** 查询方法 */
-const handleQuery = () => {
-  getList();
-};
-
 /** 新增模型 */
-const createModel = () => {
+function createModel() {
   router.push({
     name: 'BpmModelCreate',
   });
-};
+}
 
 /** 处理下拉菜单命令 */
-const handleCommand = (command: string) => {
+function handleCommand(command: string) {
   if (command === 'handleCategoryAdd') {
     // 打开新建流程分类弹窗
     categoryFormModalApi.open();
@@ -126,10 +112,10 @@ const handleCommand = (command: string) => {
       });
     }
   }
-};
+}
 
 /** 取消分类排序 */
-const handleCategorySortCancel = () => {
+function handleCategorySortCancel() {
   // 恢复初始数据
   categoryGroup.value = cloneDeep(originalData.value);
   isCategorySorting.value = false;
@@ -137,10 +123,10 @@ const handleCategorySortCancel = () => {
   if (sortableInstance.value) {
     sortableInstance.value.option('disabled', true);
   }
-};
+}
 
 /** 提交分类排序 */
-const handleCategorySortSubmit = async () => {
+async function handleCategorySortSubmit() {
   saveSortLoading.value = true;
   try {
     // 保存排序逻辑
@@ -157,76 +143,56 @@ const handleCategorySortSubmit = async () => {
   if (sortableInstance.value) {
     sortableInstance.value.option('disabled', true);
   }
-};
+}
 </script>
 
 <template>
   <Page auto-content-height>
-    <!-- TODO @jaosn：没头像的图标，展示文字头像哈 @芋艿 好像已经展示了文字头像。是模型列表中吗? -->
     <!-- 流程分类表单弹窗 -->
     <CategoryFormModal @success="getList" />
     <Card
       :body-style="{ padding: '10px' }"
       class="mb-4 h-[98%]"
+      title="流程模型"
       v-spinning="modelListSpinning"
     >
+      <template #extra>
+        <Input
+          v-model:value="queryParams.name"
+          placeholder="搜索流程"
+          allow-clear
+          @press-enter="getList"
+          class="!w-60"
+        />
+        <Button type="primary" @click="createModel">
+          <IconifyIcon icon="lucide:plus" /> 新建模型
+        </Button>
+        <Dropdown placement="bottomRight" arrow>
+          <Button>
+            <template #icon>
+              <IconifyIcon icon="lucide:settings" />
+            </template>
+          </Button>
+          <template #overlay>
+            <Menu @click="(e) => handleCommand(e.key as string)">
+              <Menu.Item key="handleCategoryAdd">
+                <div class="flex items-center">
+                  <IconifyIcon icon="lucide:plus" />
+                  新建分类
+                </div>
+              </Menu.Item>
+              <Menu.Item key="handleCategorySort">
+                <div class="flex items-center">
+                  <IconifyIcon icon="lucide:align-start-vertical" />
+                  分类排序
+                </div>
+              </Menu.Item>
+            </Menu>
+          </template>
+        </Dropdown>
+      </template>
       <div class="flex h-full items-center justify-between pl-5">
-        <span class="-mb-4 text-lg font-extrabold">流程模型</span>
+        <div class="mb-4 mr-6" v-if="isCategorySorting">
-        <!-- 搜索工作栏 -->
-        <Form
-          v-if="!isCategorySorting"
-          class="-mb-4 mr-2.5 flex"
-          :model="queryParams"
-          layout="inline"
-        >
-          <Form.Item name="name" class="ml-auto">
-            <Input
-              v-model:value="queryParams.name"
-              placeholder="搜索流程"
-              allow-clear
-              @press-enter="handleQuery"
-              class="!w-60"
-            >
-              <template #prefix>
-                <Search class="mx-2.5" />
-              </template>
-            </Input>
-          </Form.Item>
-          <!-- 右上角：新建模型、更多操作 -->
-          <Form.Item>
-            <Button type="primary" @click="createModel">
-              <Plus class="size-5" /> 新建模型
-            </Button>
-          </Form.Item>
-          <Form.Item>
-            <Dropdown placement="bottomRight" arrow>
-              <Button>
-                <template #icon>
-                  <Settings class="size-4" />
-                </template>
-              </Button>
-              <template #overlay>
-                <Menu @click="(e) => handleCommand(e.key as string)">
-                  <Menu.Item key="handleCategoryAdd">
-                    <div class="flex items-center">
-                      <span
-                        class="icon-[ant-design--plus-outlined] mr-1.5 text-[18px]"
-                      ></span>
-                      新建分类
-                    </div>
-                  </Menu.Item>
-                  <Menu.Item key="handleCategorySort">
-                    <div class="flex items-center">
-                      <span class="icon-[fa--sort-amount-desc] mr-1.5"></span>
-                      分类排序
-                    </div>
-                  </Menu.Item>
-                </Menu>
-              </template>
-            </Dropdown>
-          </Form.Item>
-        </Form>
-        <div class="-mb-4 mr-6" v-else>
           <Button @click="handleCategorySortCancel" class="mr-3">
             取 消
           </Button>
@@ -240,7 +206,6 @@ const handleCategorySortSubmit = async () => {
         </div>
       </div>
 
-      <Divider />
       <!-- 按照分类，展示其所属的模型列表 -->
       <div class="px-5" ref="categoryGroupRef">
         <CategoryDraggableModel

apps/web-antd/src/views/bpm/model/modules/category-draggable-model.vue

@@ -4,6 +4,7 @@ import type { BpmModelApi, ModelCategoryInfo } from '#/api/bpm/model';
 import { computed, ref, watchEffect } from 'vue';
 
 import { confirm, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 import { cloneDeep, formatDateTime, isEqual } from '@vben/utils';
 
 import { useDebounceFn } from '@vueuse/core';
@@ -36,6 +37,12 @@ const props = defineProps<{
 
 const emit = defineEmits(['success']);
 
+// 重命名分类对话框
+const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
+  connectedComponent: CategoryRenameForm,
+  destroyOnClose: true,
+});
+
 const isModelSorting = ref(false);
 const originalData = ref<BpmModelApi.ModelVO[]>([]);
 const modelList = ref<BpmModelApi.ModelVO[]>([]);
@@ -98,7 +105,7 @@ const columns = [
 ];
 
 /** 处理模型的排序 */
-const handleModelSort = () => {
+function handleModelSort() {
   // 保存初始数据
   originalData.value = cloneDeep(props.categoryInfo.modelList);
   // 展开数据
@@ -114,10 +121,10 @@ const handleModelSort = () => {
       disabled: false, // 启用排序
     });
   }
-};
+}
 
 /** 处理模型的排序提交 */
-const handleModelSortSubmit = async () => {
+async function handleModelSortSubmit() {
   try {
     // 保存排序
     const ids = modelList.value.map((item) => item.id);
@@ -129,10 +136,10 @@ const handleModelSortSubmit = async () => {
   } catch (error) {
     console.error('排序保存失败', error);
   }
-};
+}
 
 /** 处理模型的排序取消 */
-const handleModelSortCancel = () => {
+function handleModelSortCancel() {
   // 恢复初始数据
   modelList.value = cloneDeep(originalData.value);
   isModelSorting.value = false;
@@ -140,20 +147,20 @@ const handleModelSortCancel = () => {
   if (sortableInstance.value) {
     sortableInstance.value.option('disabled', true);
   }
-};
+}
 
 /** 处理下拉菜单命令 */
-const handleCommand = (command: string) => {
+function handleCommand(command: string) {
   if (command === 'renameCategory') {
     // 打开重命名分类对话框
     categoryRenameModalApi.setData(props.categoryInfo).open();
   } else if (command === 'deleteCategory') {
     handleDeleteCategory();
   }
-};
+}
 
 /** 删除流程分类 */
-const handleDeleteCategory = async () => {
+async function handleDeleteCategory() {
   if (props.categoryInfo.modelList.length > 0) {
     message.warning('该分类下仍有流程定义,不允许删除');
     return;
@@ -170,13 +177,13 @@ const handleDeleteCategory = async () => {
     // 刷新列表
     emit('success');
   });
-};
+}
 
 /** 处理表单详情点击 */
-const handleFormDetail = (row: any) => {
+function handleFormDetail(row: any) {
   // TODO 待实现
   console.warn('待实现', row);
-};
+}
 
 /** 更新 modelList 模型列表 */
 const updateModelList = useDebounceFn(() => {
@@ -205,17 +212,11 @@ watchEffect(() => {
 });
 
 /** 自定义表格行渲染 */
-const customRow = (_record: any) => {
+function customRow(_record: any) {
   return {
     class: isModelSorting.value ? 'cursor-move' : '',
   };
-};
+}
-
-// 重命名分类对话框
-const [CategoryRenameModal, categoryRenameModalApi] = useVbenModal({
-  connectedComponent: CategoryRenameForm,
-  destroyOnClose: true,
-});
 
 // 处理重命名成功
 const handleRenameSuccess = () => {
@@ -268,7 +269,7 @@ const handleRenameSuccess = () => {
               @click.stop="handleModelSort"
             >
               <template #icon>
-                <span class="icon-[fa--sort-amount-desc]"></span>
+                <IconifyIcon icon="lucide:align-start-vertical" />
               </template>
               排序
             </Button>
@@ -279,7 +280,7 @@ const handleRenameSuccess = () => {
                 class="flex items-center text-[14px]"
               >
                 <template #icon>
-                  <span class="icon-[ant-design--setting-outlined]"></span>
+                  <IconifyIcon icon="lucide:settings" />
                 </template>
                 分类
               </Button>

apps/web-antd/src/views/bpm/oa/leave/create.vue

@@ -152,7 +152,7 @@ function onBack() {
 // ============================== 审核流程相关 ==============================
 
 /** 审批相关：获取审批详情 */
-const getApprovalDetail = async () => {
+async function getApprovalDetail() {
   try {
     const data = await getApprovalDetailApi({
       processDefinitionId: processDefinitionId.value,
@@ -188,13 +188,12 @@ const getApprovalDetail = async () => {
             : [];
       }
     }
-  } finally {
+  } finally {}
-  }
+}
-};
 /** 审批相关：选择发起人 */
-const selectUserConfirm = (id: string, userList: any[]) => {
+function selectUserConfirm(id: string, userList: any[]) {
   startUserSelectAssignees.value[id] = userList?.map((item: any) => item.id);
-};
+}
 
 /** 审批相关：预测流程节点会因为输入的参数值而产生新的预测结果值，所以需重新预测一次, formData.value可改成实际业务中的特定字段 */
 watch(

apps/web-antd/src/views/bpm/oa/leave/data.ts

@@ -1,18 +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 { BpmCategoryApi } from '#/api/bpm/category';
 import type { DescriptionItemSchema } from '#/components/description';
 
 import { h } from 'vue';
 
-import { useAccess } from '@vben/access';
-
 import dayjs from 'dayjs';
 
 import { DictTag } from '#/components/dict-tag';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -118,9 +114,7 @@ export function GridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -168,39 +162,11 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '请假',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            text: '详情',
-            show: hasAccessByCodes(['bpm:oa-leave:query']),
-          },
-          {
-            code: 'progress',
-            text: '进度',
-            show: hasAccessByCodes(['bpm:oa-leave:query']),
-          },
-          {
-            code: 'cancel',
-            text: '取消',
-            show: (row: any) =>
-              row.status === 1 && hasAccessByCodes(['bpm:oa-leave:query']),
-          },
-        ],
-      },
     },
   ];
 }

apps/web-antd/src/views/bpm/oa/leave/detail.vue

@@ -19,14 +19,14 @@ const detailData = ref<BpmOALeaveApi.LeaveVO>();
 const { query } = useRoute();
 const queryId = computed(() => query.id as string);
 
-const getDetailData = async () => {
+async function getDetailData() {
   try {
     datailLoading.value = true;
     detailData.value = await getLeave(Number(props.id || queryId.value));
   } finally {
     datailLoading.value = false;
   }
-};
+}
 
 onMounted(() => {
   getDetailData();

apps/web-antd/src/views/bpm/oa/leave/index.vue

@@ -1,20 +1,14 @@
 <script lang="ts" setup>
-import type { PageParam } from '@vben/request';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmOALeaveApi } from '#/api/bpm/oa/leave';
 
 import { h } from 'vue';
 
 import { Page, prompt } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message, Textarea } from 'ant-design-vue';
+import { message, Textarea } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getLeavePage } from '#/api/bpm/oa/leave';
 import { cancelProcessInstanceByStartUser } from '#/api/bpm/processInstance';
 import { DocAlert } from '#/components/doc-alert';
@@ -27,12 +21,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: GridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
-        query: async ({ page }: PageParam, formValues: any) => {
+        query: async ({ page }, formValues) => {
           return await getLeavePage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -52,7 +46,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
 });
 
 /** 创建请假 */
-function onCreate() {
+function handleCreate() {
   router.push({
     name: 'OALeaveCreate',
     query: {
@@ -62,15 +56,15 @@ function onCreate() {
 }
 
 /** 查看请假详情 */
-const onDetail = (row: BpmOALeaveApi.LeaveVO) => {
+function handleDetail(row: BpmOALeaveApi.LeaveVO) {
   router.push({
     name: 'OALeaveDetail',
     query: { id: row.id },
   });
-};
+}
 
 /** 取消请假 */
-const onCancel = (row: BpmOALeaveApi.LeaveVO) => {
+function handleCancel(row: BpmOALeaveApi.LeaveVO) {
   prompt({
     async beforeClose(scope) {
       if (scope.isConfirm) {
@@ -100,35 +94,14 @@ const onCancel = (row: BpmOALeaveApi.LeaveVO) => {
     title: '取消流程',
     modelPropName: 'value',
   });
-};
+}
 
 /** 审批进度 */
-const onProgress = (row: BpmOALeaveApi.LeaveVO) => {
+function handleProgress(row: BpmOALeaveApi.LeaveVO) {
   router.push({
     name: 'BpmProcessInstanceDetail',
     query: { id: row.processInstanceId },
   });
-};
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmOALeaveApi.LeaveVO>) {
-  switch (code) {
-    case 'cancel': {
-      onCancel(row);
-      break;
-    }
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-    case 'progress': {
-      onProgress(row);
-      break;
-    }
-  }
 }
 
 /** 刷新表格 */
@@ -146,25 +119,48 @@ function onRefresh() {
 
     <Grid table-title="请假列表">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['bpm:category:create']"
+              label: '发起请假',
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          发起请假
+              auth: ['bpm:oa-leave:create'],
-        </Button>
+              onClick: handleCreate,
+            },
+          ]"
+        />
       </template>
-
+      <template #actions="{ row }">
-      <template #userIds-cell="{ row }">
+        <TableAction
-        <span
+          :actions="[
-          v-for="(userId, index) in row.userIds"
+            {
-          :key="userId"
+              label: $t('common.detail'),
-          class="pr-5px"
+              type: 'link',
-        >
+              icon: ACTION_ICON.VIEW,
-          {{ dataList.find((user) => user.id === userId)?.nickname }}
+              auth: ['bpm:oa-leave:query'],
-          <span v-if="index < row.userIds.length - 1">、</span>
+              onClick: handleDetail.bind(null, row),
-        </span>
+            },
+            {
+              label: '审批进度',
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:oa-leave:query'],
+              onClick: handleProgress.bind(null, row),
+            },
+            {
+              label: '取消',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:user-group:query'],
+              popConfirm: {
+                title: '取消流程',
+                confirm: handleCancel.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

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

@@ -1,14 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
-
-import { useAccess } from '@vben/access';
 
 import { z } from '#/adapter/form';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -88,9 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmProcessExpressionApi.ProcessExpressionVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -124,29 +117,10 @@ export function useGridColumns<T = BpmProcessExpressionApi.ProcessExpressionVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程表达式',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['bpm:process-expression:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['bpm:process-expression:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmProcessExpressionApi } from '#/api/bpm/processExpression';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteProcessExpression,
   getProcessExpressionPage,
@@ -25,12 +21,46 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程表达式 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程表达式 */
+function handleEdit(row: BpmProcessExpressionApi.ProcessExpressionVO) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程表达式 */
+async function handleDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProcessExpression(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -53,55 +83,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmProcessExpressionApi.ProcessExpressionVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmProcessExpressionApi.ProcessExpressionVO>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建流程表达式 */
-function onCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑流程表达式 */
-function onEdit(row: BpmProcessExpressionApi.ProcessExpressionVO) {
-  formModalApi.setData(row).open();
-}
-
-/** 删除流程表达式 */
-async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-
-  try {
-    await deleteProcessExpression(row.id as number);
-    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
-  } finally {
-    hideLoading();
-  }
-}
 </script>
 
 <template>
@@ -115,14 +96,41 @@ async function onDelete(row: BpmProcessExpressionApi.ProcessExpressionVO) {
     <FormModal @success="onRefresh" />
     <Grid table-title="流程表达式">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['bpm:process-expression:create']"
+              label: $t('ui.actionTitle.create', ['流程表达式']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['流程表达式']) }}
+              auth: ['bpm:process-expression:create'],
-        </Button>
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-expression:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-expression:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

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

@@ -55,7 +55,6 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = undefined;
       return;
     }
     // 加载数据
@@ -77,7 +76,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[600px]">
+  <Modal :title="getTitle" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>

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(() => {

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>

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 { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
-
-import { useAccess } from '@vben/access';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
-import { $t } from '#/locales';
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
-import {
-  BpmProcessInstanceStatus,
-  DICT_TYPE,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-const { hasAccessByCodes } = useAccess();
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -88,9 +77,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'name',
@@ -136,38 +123,11 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
       minWidth: 180,
       formatter: 'formatDateTime',
     },
-
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        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'])
-              );
-            },
-          },
-        ],
-      },
     },
   ];
 }

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);
   }
-};
+}
 
 /**
  * 操作成功后刷新

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 (
+async function handleAudit(pass: boolean, formRef: FormInstance | undefined) {
-  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>

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: () => {
+  async onConfirm() {
-    submit();
+    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
+              <IconifyIcon icon="lucide:trash" class="mb-[4px] size-[16px]" />
-                icon="mdi:delete-outline"
-                class="mb-[4px] size-[16px]"
-              />
             </template>
             <span>清除</span>
           </Button>

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: {
+    formatter: 'formatPast2',
-      default: ({ row }: { row: BpmTaskApi.TaskManagerVO }) => {
-        return formatPast2(row.durationInMillis);
-      },
-    },
   },
 ]);
 
@@ -116,9 +112,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /**
  * 刷新表格数据
  */
-const refresh = (): void => {
+function refresh() {
   gridApi.query();
-};
+}
 
 // 表单相关
 interface TaskForm {

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>

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  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: {
+function onRefresh() {
-    schema: useGridFormSchema(),
+  gridApi.query();
-  },
+}
-  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 onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
+function handleDetail(row: BpmTaskApi.TaskVO) {
-  switch (code) {
+  router.push({
-    case 'cancel': {
+    name: 'BpmProcessInstanceDetail',
-      onCancel(row);
+    query: { id: row.id },
-      break;
+  });
-    }
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
 }
 
 /** 取消流程实例 */
-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) {
   });
 }
 
-/** 查看流程实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
-function onDetail(row: BpmTaskApi.TaskVO) {
+  formOptions: {
-  console.warn(row);
+    schema: useGridFormSchema(),
-  router.push({
+  },
-    name: 'BpmProcessInstanceDetail',
+  gridOptions: {
-    query: { id: row.id },
+    columns: useGridColumns(),
-  });
+    height: 'auto',
-}
+    keepSource: true,
-
+    proxyConfig: {
-/** 刷新表格 */
+      ajax: {
-function onRefresh() {
+        query: async ({ page }, formValues) => {
-  gridApi.query();
+          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>

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, getDictOptions, getRangePickerDefaultProps } from '#/utils';
-import {
-  DICT_TYPE,
-  formatPast2,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
-
-import { BpmProcessInstanceStatus } from '../../../../utils/constants';
-
-const { hasAccessByCodes } = useAccess();
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -95,8 +83,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
+export function useGridColumns(
-  onActionClick: OnActionClickFn<T>,
   onTaskClick: (task: BpmProcessInstanceApi.Task) => void,
 ): VxeTableGridOptions['columns'] {
   return [
@@ -153,13 +140,7 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
       field: 'durationInMillis',
       title: '流程耗时',
       minWidth: 180,
-      slots: {
+      formatter: 'formatPast2',
-        default: ({ row }) => {
-          return row.durationInMillis > 0
-            ? formatPast2(row.durationInMillis)
-            : '-';
-        },
-      },
     },
 
     // 当前审批任务 tasks
@@ -192,36 +173,10 @@ export function useGridColumns<T = BpmProcessInstanceApi.ProcessInstanceVO>(
       minWidth: 320,
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 180,
+      width: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        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'])
-              );
-            },
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  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: {
+function onRefresh() {
-    schema: useGridFormSchema(),
+  gridApi.query();
-  },
-  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;
-    }
-  }
 }
 
 /** 点击任务 */
@@ -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(() => {});
 }
 
-/** 查看流程实例 */
+const [Grid, gridApi] = useVbenVxeGrid({
-function onDetail(row: BpmProcessInstanceApi.ProcessInstanceVO) {
+  formOptions: {
-  console.warn(row);
+    schema: useGridFormSchema(),
-  router.push({
+  },
-    name: 'BpmProcessInstanceDetail',
+  gridOptions: {
-    query: { id: row.id },
+    columns: useGridColumns(onTaskClick),
-  });
+    height: 'auto',
-}
+    keepSource: true,
-
+    proxyConfig: {
-/** 刷新表格 */
+      ajax: {
-function onRefresh() {
+        query: async ({ page }, formValues) => {
-  gridApi.query();
+          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>

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

@@ -1,8 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmCategoryApi } from '#/api/bpm/category';
-
-import { useAccess } from '@vben/access';
 
 import { z } from '#/adapter/form';
 import { CommonStatusEnum, DICT_TYPE, getDictOptions } from '#/utils';
@@ -27,8 +24,6 @@ export const EVENT_OPTIONS = [
   { label: 'timeout', value: 'timeout' },
 ];
 
-const { hasAccessByCodes } = useAccess();
-
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -80,6 +75,16 @@ export function useFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
       rules: 'required',
+      dependencies: {
+        triggerFields: ['type'],
+        trigger: (values) => (values.event = undefined),
+        componentProps: (values) => ({
+          options:
+            values.type === 'execution'
+              ? EVENT_EXECUTION_OPTIONS
+              : EVENT_OPTIONS,
+        }),
+      },
     },
     {
       fieldName: 'valueType',
@@ -96,9 +101,17 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'value',
-      label: '表达式',
+      label: '类路径|表达式',
       component: 'Input',
       rules: 'required',
+      dependencies: {
+        triggerFields: ['valueType'],
+        trigger: (values) => (values.value = undefined),
+        componentProps: (values) => ({
+          placeholder:
+            values.valueType === 'class' ? '请输入类路径' : '请输入表达式',
+        }),
+      },
     },
   ];
 }
@@ -129,9 +142,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -178,29 +189,11 @@ export function useGridColumns<T = BpmCategoryApi.CategoryVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
+      field: 'actions',
       title: '操作',
       minWidth: 180,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程监听器',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'edit',
-            show: hasAccessByCodes(['bpm:process-listener:update']),
-          },
-          {
-            code: 'delete',
-            show: hasAccessByCodes(['bpm:process-listener:delete']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,16 +1,12 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmProcessListenerApi } from '#/api/bpm/processListener';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-import { Plus } from '@vben/icons';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   deleteProcessListener,
   getProcessListenerPage,
@@ -25,12 +21,46 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
   destroyOnClose: true,
 });
+
+/** 刷新表格 */
+function onRefresh() {
+  gridApi.query();
+}
+
+/** 创建流程监听器 */
+function handleCreate() {
+  formModalApi.setData(null).open();
+}
+
+/** 编辑流程监听器 */
+function handleEdit(row: BpmProcessListenerApi.ProcessListenerVO) {
+  formModalApi.setData(row).open();
+}
+
+/** 删除流程监听器 */
+async function handleDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    key: 'action_key_msg',
+  });
+  try {
+    await deleteProcessListener(row.id as number);
+    message.success({
+      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+      key: 'action_key_msg',
+    });
+    onRefresh();
+  } catch {
+    hideLoading();
+  }
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -53,57 +83,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmProcessListenerApi.ProcessListenerVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmProcessListenerApi.ProcessListenerVO>) {
-  switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
-    case 'edit': {
-      onEdit(row);
-      break;
-    }
-  }
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-/** 创建流程监听器 */
-function onCreate() {
-  formModalApi.setData(null).open();
-}
-
-/** 编辑流程监听器 */
-function onEdit(row: BpmProcessListenerApi.ProcessListenerVO) {
-  formModalApi.setData(row).open();
-}
-
-/** 删除流程监听器 */
-async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
-  const hideLoading = message.loading({
-    content: $t('ui.actionMessage.deleting', [row.name]),
-    duration: 0,
-    key: 'action_process_msg',
-  });
-  try {
-    await deleteProcessListener(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-      key: 'action_process_msg',
-    });
-    onRefresh();
-  } catch {
-    hideLoading();
-  }
-}
 </script>
 
 <template>
@@ -117,14 +96,41 @@ async function onDelete(row: BpmProcessListenerApi.ProcessListenerVO) {
     <FormModal @success="onRefresh" />
     <Grid table-title="流程监听器">
       <template #toolbar-tools>
-        <Button
+        <TableAction
-          type="primary"
+          :actions="[
-          @click="onCreate"
+            {
-          v-access:code="['bpm:process-listener:create']"
+              label: $t('ui.actionTitle.create', ['流程监听器']),
-        >
+              type: 'primary',
-          <Plus class="size-5" />
+              icon: ACTION_ICON.ADD,
-          {{ $t('ui.actionTitle.create', ['流程监听器']) }}
+              auth: ['bpm:process-listener:create'],
-        </Button>
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: $t('common.edit'),
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['bpm:process-listener:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: $t('common.delete'),
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['bpm:process-listener:delete'],
+              popConfirm: {
+                title: $t('ui.actionMessage.deleteConfirm', [row.name]),
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
       </template>
     </Grid>
   </Page>

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

@@ -15,7 +15,7 @@ import {
 } from '#/api/bpm/processListener';
 import { $t } from '#/locales';
 
-import { EVENT_EXECUTION_OPTIONS, EVENT_OPTIONS, useFormSchema } from '../data';
+import { useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<BpmProcessListenerApi.ProcessListenerVO>();
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
       class: 'w-full',
     },
     formItemClass: 'col-span-2',
-    labelWidth: 110,
+    labelWidth: 100,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
@@ -67,55 +67,11 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-
-    // 设置事件
-    formApi.updateSchema([
-      {
-        fieldName: 'type',
-        componentProps: {
-          onChange: (value: string) => {
-            formApi.setFieldValue('event', undefined);
-            formApi.updateSchema([
-              {
-                fieldName: 'event',
-                componentProps: {
-                  options:
-                    value === 'execution'
-                      ? EVENT_EXECUTION_OPTIONS
-                      : EVENT_OPTIONS,
-                },
-              },
-            ]);
-          },
-        },
-      },
-
-      {
-        fieldName: 'valueType',
-        componentProps: {
-          onChange: (value: string) => {
-            formApi.setFieldValue('value', undefined);
-            formApi.updateSchema([
-              {
-                fieldName: 'value',
-                label: value === 'class' ? '类路径' : '表达式',
-                componentProps: {
-                  placeholder:
-                    value === 'class' ? '请输入类路径' : '请输入表达式',
-                },
-              },
-            ]);
-          },
-        },
-      },
-    ]);
-
     // 加载数据
     const data = modalApi.getData<BpmProcessListenerApi.ProcessListenerVO>();
     if (!data || !data.id) {
       return;
     }
-
     modalApi.lock();
     try {
       formData.value = await getProcessListener(data.id as number);
@@ -129,7 +85,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[600px]">
+  <Modal :title="getTitle" class="w-[40%]">
     <Form class="mx-4" />
   </Modal>
 </template>

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

@@ -1,13 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
-
-import { useAccess } from '@vben/access';
 
 import { getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -32,9 +27,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'processInstanceName',
@@ -46,8 +39,12 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'summary',
       title: '摘要',
       minWidth: 200,
-      slots: {
+      formatter: ({ cellValue }) => {
-        default: 'slot-summary',
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
       },
     },
     {
@@ -70,8 +67,8 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'createUser.nickname',
       title: '抄送人',
       minWidth: 180,
-      slots: {
+      formatter: ({ cellValue }) => {
-        default: 'slot-createUser',
+        return cellValue || '-';
       },
     },
     {
@@ -86,26 +83,10 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       formatter: 'formatDateTime',
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 120,
+      width: 120,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'detail',
-            text: '详情',
-            show: hasAccessByCodes(['bpm:task:query']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmProcessInstanceApi } from '#/api/bpm/processInstance';
 
 import { Page } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getProcessInstanceCopyPage } from '#/api/bpm/processInstance';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
@@ -16,12 +13,24 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmCopyTask' });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+/** 任务详情 */
+function handleDetail(row: BpmProcessInstanceApi.CopyVO) {
+  const query = {
+    id: row.processInstanceId,
+    ...(row.activityId && { activityId: row.activityId }),
+  };
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query,
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -47,36 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmProcessInstanceApi.CopyVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmProcessInstanceApi.CopyVO>) {
-  switch (code) {
-    case 'detail': {
-      onDetail(row);
-      break;
-    }
-  }
-}
-
-/** 任务详情 */
-function onDetail(row: BpmProcessInstanceApi.CopyVO) {
-  const query = {
-    id: row.processInstanceId,
-    ...(row.activityId && { activityId: row.activityId }),
-  };
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query,
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -88,27 +67,19 @@ function onRefresh() {
       />
     </template>
 
-    <FormModal @success="onRefresh" />
     <Grid table-title="抄送任务">
-      <!-- 摘要 -->
+      <template #actions="{ row }">
-      <template #slot-summary="{ row }">
+        <TableAction
-        <div
+          :actions="[
-          class="flex flex-col py-2"
+            {
-          v-if="row.summary && row.summary.length > 0"
+              label: $t('common.detail'),
-        >
+              type: 'link',
-          <div v-for="(item, index) in row.summary" :key="index">
+              icon: ACTION_ICON.VIEW,
-            <span class="text-gray-500">
+              auth: ['bpm:task:query'],
-              {{ item.key }} : {{ item.value }}
+              onClick: handleDetail.bind(null, row),
-            </span>
+            },
-          </div>
+          ]"
-        </div>
+        />
-        <div v-else>-</div>
-      </template>
-      <!-- 抄送人 -->
-      <template #slot-createUser="{ row }">
-        <span class="text-gray-500">
-          {{ row.createUser.nickname || '系统' }}
-        </span>
       </template>
     </Grid>
   </Page>

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

@@ -1,14 +1,8 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
-import {
+import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
-  DICT_TYPE,
-  formatPast2,
-  getDictOptions,
-  getRangePickerDefaultProps,
-} from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -69,9 +63,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'processInstance.name',
@@ -83,8 +75,12 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'processInstance.summary',
       title: '摘要',
       minWidth: 200,
-      slots: {
+      formatter: ({ cellValue }) => {
-        default: 'slot-summary',
+        return cellValue && cellValue.length > 0
+          ? cellValue
+              .map((item: any) => `${item.key} : ${item.value}`)
+              .join('\n')
+          : '-';
       },
     },
     {
@@ -92,12 +88,6 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '发起人',
       minWidth: 120,
     },
-    {
-      field: 'createTime',
-      title: '发起时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
     {
       field: 'name',
       title: '当前任务',
@@ -133,9 +123,7 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ cellValue }) => {
+      formatter: 'formatPast2',
-        return `${formatPast2(cellValue)}`;
-      },
     },
     {
       field: 'processInstanceId',
@@ -148,25 +136,10 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       minWidth: 280,
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 120,
+      width: 120,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'history',
-            text: '历史',
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { Page } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskDonePage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
@@ -16,12 +13,23 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmDoneTask' });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManagerVO) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -47,33 +55,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
-  switch (code) {
-    case 'history': {
-      onHistory(row);
-      break;
-    }
-  }
-}
-
-/** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskVO) {
-  console.warn(row);
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstance.id,
-      taskId: row.id,
-    },
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -92,25 +73,17 @@ function onRefresh() {
     </template>
 
     <Grid table-title="已办任务">
-      <!-- 摘要 -->
+      <template #actions="{ row }">
-      <template #slot-summary="{ row }">
+        <TableAction
-        <div
+          :actions="[
-          class="flex flex-col py-2"
+            {
-          v-if="
+              label: '历史',
-            row.processInstance.summary &&
+              type: 'link',
-            row.processInstance.summary.length > 0
+              icon: ACTION_ICON.VIEW,
-          "
+              onClick: handleHistory.bind(null, row),
-        >
+            },
-          <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>

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

@@ -1,8 +1,7 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
 
-import { DICT_TYPE, formatPast2, getRangePickerDefaultProps } from '#/utils';
+import { DICT_TYPE, getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
@@ -28,9 +27,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'processInstance.name',
@@ -89,9 +86,7 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'durationInMillis',
       title: '耗时',
       minWidth: 180,
-      formatter: ({ cellValue }) => {
+      formatter: 'formatPast2',
-        return `${formatPast2(cellValue)}`;
-      },
     },
     {
       field: 'processInstanceId',
@@ -104,25 +99,10 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       minWidth: 280,
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 120,
+      width: 120,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'history',
-            text: '历史',
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { Page } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskManagerPage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
@@ -16,12 +13,22 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmManagerTask' });
 
+/** 查看历史 */
+function handleHistory(row: BpmTaskApi.TaskManagerVO) {
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+    },
+  });
+}
+
 const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -47,30 +54,6 @@ const [Grid] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmTaskApi.TaskManagerVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({
-  code,
-  row,
-}: OnActionClickParams<BpmTaskApi.TaskManagerVO>) {
-  switch (code) {
-    case 'history': {
-      onHistory(row);
-      break;
-    }
-  }
-}
-
-/** 查看历史 */
-function onHistory(row: BpmTaskApi.TaskManagerVO) {
-  console.warn(row);
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstance.id,
-    },
-  });
-}
 </script>
 
 <template>
@@ -78,6 +61,20 @@ function onHistory(row: BpmTaskApi.TaskManagerVO) {
     <template #doc>
       <DocAlert title="工作流手册" url="https://doc.iocoder.cn/bpm/" />
     </template>
-    <Grid table-title="流程任务" />
+    <Grid table-title="流程任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '历史',
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleHistory.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

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

@@ -1,16 +1,9 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { BpmTaskApi } from '#/api/bpm/task';
-
-import { h } from 'vue';
-
-import { useAccess } from '@vben/access';
 
 import { getCategorySimpleList } from '#/api/bpm/category';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
-const { hasAccessByCodes } = useAccess();
-
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
@@ -69,9 +62,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns<T = BpmTaskApi.TaskVO>(
+export function useGridColumns(): VxeTableGridOptions['columns'] {
-  onActionClick: OnActionClickFn<T>,
-): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'processInstance.name',
@@ -83,29 +74,12 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       field: 'processInstance.summary',
       title: '摘要',
       minWidth: 200,
-      slots: {
+      formatter: ({ cellValue }) => {
-        default: ({ row }) => {
+        return cellValue && cellValue.length > 0
-          const summary = row?.processInstance?.summary;
+          ? cellValue
-
+              .map((item: any) => `${item.key} : ${item.value}`)
-          if (!summary || summary.length === 0) {
+              .join('\n')
-            return '-';
+          : '-';
-          }
-          return summary.map((item: any) => {
-            return h(
-              'div',
-              {
-                key: item.key,
-              },
-              h(
-                'span',
-                {
-                  class: 'text-gray-500',
-                },
-                `${item.key} : ${item.value}`,
-              ),
-            );
-          });
-        },
       },
     },
     {
@@ -113,12 +87,6 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       title: '发起人',
       minWidth: 120,
     },
-    {
-      field: 'createTime',
-      title: '发起时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
     {
       field: 'name',
       title: '当前任务',
@@ -141,26 +109,10 @@ export function useGridColumns<T = BpmTaskApi.TaskVO>(
       minWidth: 280,
     },
     {
-      field: 'operation',
       title: '操作',
-      minWidth: 120,
+      width: 120,
-      align: 'center',
       fixed: 'right',
-      cellRender: {
+      slots: { default: 'actions' },
-        attrs: {
-          nameField: 'name',
-          nameTitle: '流程名称',
-          onClick: onActionClick,
-        },
-        name: 'CellOperation',
-        options: [
-          {
-            code: 'audit',
-            text: '办理',
-            show: hasAccessByCodes(['bpm:task:query']),
-          },
-        ],
-      },
     },
   ];
 }

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

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
 import type { BpmTaskApi } from '#/api/bpm/task';
 
 import { Page } from '@vben/common-ui';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTaskTodoPage } from '#/api/bpm/task';
 import { DocAlert } from '#/components/doc-alert';
 import { router } from '#/router';
@@ -16,12 +13,24 @@ import { useGridColumns, useGridFormSchema } from './data';
 
 defineOptions({ name: 'BpmTodoTask' });
 
-const [Grid, gridApi] = useVbenVxeGrid({
+/** 办理任务 */
+function handleAudit(row: BpmTaskApi.TaskVO) {
+  console.warn(row);
+  router.push({
+    name: 'BpmProcessInstanceDetail',
+    query: {
+      id: row.processInstance.id,
+      taskId: row.id,
+    },
+  });
+}
+
+const [Grid] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(onActionClick),
+    columns: useGridColumns(),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -47,33 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   } as VxeTableGridOptions<BpmTaskApi.TaskVO>,
 });
-
-/** 表格操作按钮的回调函数 */
-function onActionClick({ code, row }: OnActionClickParams<BpmTaskApi.TaskVO>) {
-  switch (code) {
-    case 'audit': {
-      onAudit(row);
-      break;
-    }
-  }
-}
-
-/** 办理任务 */
-function onAudit(row: BpmTaskApi.TaskVO) {
-  console.warn(row);
-  router.push({
-    name: 'BpmProcessInstanceDetail',
-    query: {
-      id: row.processInstance.id,
-      taskId: row.id,
-    },
-  });
-}
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
 </script>
 
 <template>
@@ -90,6 +72,20 @@ function onRefresh() {
       />
       <DocAlert title="审批加签、减签" url="https://doc.iocoder.cn/bpm/sign/" />
     </template>
-    <Grid table-title="待办任务" />
+    <Grid table-title="待办任务">
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '办理',
+              type: 'link',
+              icon: ACTION_ICON.VIEW,
+              auth: ['bpm:task:query'],
+              onClick: handleAudit.bind(null, row),
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>

apps/web-antd/src/views/system/tenantPackage/index.vue

@@ -58,7 +58,6 @@ async function handleDelete(row: SystemTenantPackageApi.TenantPackage) {
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
-    // TODO @芋艿：时间筛选，后续处理；
   },
   gridOptions: {
     columns: useGridColumns(),