feat：【antd】bpm group 的迁移

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

@@ -1,13 +1,22 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { SystemUserApi } from '#/api/system/user';
+
+import { h } from 'vue';
 
 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
+import { Tag } from 'ant-design-vue';
+
 import { z } from '#/adapter/form';
 import { getSimpleUserList } from '#/api/system/user';
 import { getRangePickerDefaultProps } from '#/utils';
 
+/** 关联数据 */
+let userList: SystemUserApi.User[] = [];
+getSimpleUserList().then((data) => (userList = data));
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -119,7 +128,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'userIds',
       title: '成员',
       minWidth: 200,
-      slots: { default: 'userIds' },
+      slots: {
+        default: ({ row }) => {
+          const userIds = row.userIds || [];
+          return userIds.map((userId: number) =>
+            h(
+              Tag,
+              {
+                color: 'blue',
+                class: 'mr-1',
+              },
+              () => userList.find((u) => u.id === userId)?.nickname,
+            ),
+          );
+        },
+      },
     },
     {
       field: 'status',

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

@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 import type { 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 { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
-import { message, Tag } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteUserGroup, getUserGroupPage } from '#/api/bpm/userGroup';
-import { getSimpleUserList } from '#/api/system/user';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
@@ -45,22 +41,13 @@ async function handleDelete(row: BpmUserGroupApi.UserGroup) {
   });
   try {
     await deleteUserGroup(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
-  } catch {
+  } finally {
     hideLoading();
   }
 }
 
-const userList = ref<SystemUserApi.User[]>([]);
-/** 初始化 */
-onMounted(async () => {
-  // 加载用户列表
-  userList.value = await getSimpleUserList();
-});
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -82,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -112,11 +100,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <template #userIds="{ row }">
-        <Tag v-for="userId in row.userIds" :key="userId" color="blue">
-          {{ userList.find((u) => u.id === userId)?.nickname }}
-        </Tag>
-      </template>
       <template #actions="{ row }">
         <TableAction
           :actions="[

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

@@ -64,6 +64,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
+      formData.value = undefined;
       return;
     }
     // 加载数据