From b1553923fde6362c51b090a7d5d103c152dd19e4 Mon Sep 17 00:00:00 2001
From: xingyu4j <xingyu4j@vip.qq.com>
Date: Tue, 26 Nov 2024 17:21:54 +0800
Subject: [PATCH] feat: use action buttons

---
 .../src/views/system/post/PostModal.vue       |  8 ++-
 apps/web-antd/src/views/system/post/index.vue | 72 ++++++++++---------
 packages/types/src/user.ts                    | 19 ++++-
 3 files changed, 62 insertions(+), 37 deletions(-)

diff --git a/apps/web-antd/src/views/system/post/PostModal.vue b/apps/web-antd/src/views/system/post/PostModal.vue
index 64ce6a2d..24559d77 100644
--- a/apps/web-antd/src/views/system/post/PostModal.vue
+++ b/apps/web-antd/src/views/system/post/PostModal.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { isEmpty } from '@vben/utils';
 
 import { useVbenForm } from '#/adapter/form';
 import { createPost, getPost, updatePost } from '#/api/system/post';
@@ -29,14 +30,15 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (isOpen) {
       const { id } = modalApi.getData<Record<string, any>>();
-      isUpdate.value = !!id;
+
+      isUpdate.value = !isEmpty(id);
       if (id) {
         const values = await getPost(id);
         formApi.setValues(values);
       }
+      modalApi.setState({ title: isUpdate.value ? '编辑岗位' : '新增岗位' });
     }
   },
-  title: isUpdate.value ? '新增岗位' : '编辑岗位',
 });
 
 async function onSubmit(values: Record<string, any>) {
@@ -48,7 +50,7 @@ async function onSubmit(values: Record<string, any>) {
 }
 </script>
 <template>
-  <Modal class="w-1/2">
+  <Modal class="w-1/3">
     <Form />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/system/post/index.vue b/apps/web-antd/src/views/system/post/index.vue
index bf289551..b892aacf 100644
--- a/apps/web-antd/src/views/system/post/index.vue
+++ b/apps/web-antd/src/views/system/post/index.vue
@@ -5,10 +5,11 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import { Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { Button, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { exportPost, getPostPage, type PostVO } from '#/api/system/post';
+import { ActionButtons, IconEnum } from '#/components/action-buttons';
 
 import { columns, formSchema } from './post.data';
 import PostModal from './PostModal.vue';
@@ -54,9 +55,7 @@ const [FormModal, formModalApi] = useVbenModal({
 });
 
 function handleCreate() {
-  formModalApi.setData({
-    valuse: {},
-  });
+  formModalApi.setData({});
   formModalApi.open();
 }
 async function handleEdit(id: number) {
@@ -77,37 +76,44 @@ async function handleExport() {
   <Page auto-content-height>
     <Grid>
       <template #toolbar-actions>
-        <Button
-          type="primary"
-          v-access:code="['system:post:create']"
-          @click="handleCreate"
-        >
-          {{ $t('page.action.add') }}
-        </Button>
-        <Button
-          class="ml-4"
-          v-access:code="['system:post:export']"
-          @click="handleExport"
-        >
-          {{ $t('page.action.export') }}
-        </Button>
+        <ActionButtons
+          :actions="[
+            {
+              type: 'primary',
+              label: $t('page.action.add'),
+              preIcon: IconEnum.ADD,
+              auth: ['system:post:create'],
+              onClick: handleCreate.bind(null),
+            },
+            {
+              label: $t('page.action.export'),
+              preIcon: IconEnum.EXPORT,
+              auth: ['system:post:export'],
+              onClick: handleExport.bind(null),
+            },
+          ]"
+        />
       </template>
       <template #action="{ row }">
-        <Button
-          type="link"
-          v-access:code="['system:post:update']"
-          @click="handleEdit(row.id)"
-        >
-          {{ $t('page.action.edit') }}
-        </Button>
-        <Button
-          danger
-          type="link"
-          v-access:code="['system:post:delete']"
-          @click="handleDelete(row.id)"
-        >
-          {{ $t('page.action.delete') }}
-        </Button>
+        <ActionButtons
+          :actions="[
+            {
+              type: 'link',
+              label: $t('page.action.edit'),
+              preIcon: IconEnum.EDIT,
+              auth: ['system:post:update'],
+              onClick: handleEdit.bind(null, row.id),
+            },
+            {
+              type: 'link',
+              danger: true,
+              label: $t('page.action.delete'),
+              preIcon: IconEnum.DELETE,
+              auth: ['system:post:delete'],
+              onClick: handleDelete.bind(null, row.id),
+            },
+          ]"
+        />
       </template>
     </Grid>
     <FormModal />
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index 6b4f003c..9c1bdd32 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -15,4 +15,21 @@ interface AuthPermissionInfo {
   user: ExUserInfo;
 }
 
-export type { AuthPermissionInfo, ExUserInfo };
+/** 用户信息 */
+interface UserInfo extends BasicUserInfo {
+  /**
+   * 用户描述
+   */
+  desc: string;
+  /**
+   * 首页地址
+   */
+  homePath: string;
+
+  /**
+   * accessToken
+   */
+  token: string;
+}
+
+export type { AuthPermissionInfo, ExUserInfo, UserInfo };