feat: table组件替换

src/views/components/management/account/index.vue

@@ -4,38 +4,41 @@
       <span class="title">账号管理</span>
       <Button type="primary" ghost class="add-account-button" @click="handleAddAccount">添加子账号</Button>
     </div>
-    <a-table
-      :columns="columns"
-      :data="dataSource"
+    <Table
+      :dataSource="dataSource"
       :pagination="pagination"
+      :showSorterTooltip="false"
       class="mt-8px"
-      @page-change="handlePageChange"
-      @page-size-change="handlePageSizeChange"
+      @change="handleTableChange"
     >
-      <template #empty>
+      <Table.Column title="手机号" dataIndex="mobile">
+        <template #customRender="{ record }">
+          <div class="flex item-center pt-13px pb-13px">
+            <span class="mr-4px">{{ record.mobile }}</span>
+            <a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
+            <a-tag v-else class="sub-account">子账号</a-tag>
+          </div>
+        </template>
+      </Table.Column>
+      <Table.Column title="操作" dataIndex="action" width="120">
+        <template #customRender="{ record }">
+          <Button
+            v-if="record.type !== 0"
+            class="delete-button"
+            size="small"
+            type="primary"
+            ghost
+            danger
+            @click="openDeleteModal(record)"
+          >
+            删除
+          </Button>
+        </template>
+      </Table.Column>
+      <template #emptyText>
         <NoData />
       </template>
-      <template #mobile="{ record }">
-        <div class="flex item-center pt-13px pb-13px">
-          <span class="mr-4px">{{ record.mobile }}</span>
-          <a-tag v-if="record.type === 0" class="primary-account">主账号</a-tag>
-          <a-tag v-else class="sub-account">子账号</a-tag>
-        </div>
-      </template>
-      <template #action="{ record }">
-        <Button
-          v-if="record.type !== 0"
-          class="delete-button"
-          size="small"
-          type="primary"
-          ghost
-          danger
-          @click="openDeleteModal(record)"
-        >
-          删除
-        </Button>
-      </template>
-    </a-table>
+    </Table>
     <Modal v-model:open="addAccountVisible" centered width="480px" title="添加子账号" :okText="okText" @ok="handleOk" >
       <div v-if="canAddAccount" class="add-account-container">
         <h2 class="add-account-title">生成企业专属链接，成员通过访问即可注册并加入企业账号。</h2>
@@ -59,9 +62,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import Container from '@/components/container.vue';
 import { ref, onMounted, reactive, computed } from 'vue';
-import { Button } from 'ant-design-vue';
+import { Button, Table } from 'ant-design-vue';
 
 import { fetchSubAccountPage, removeEnterpriseAccount, getEnterpriseInviteCode } from '@/api/all';
 import Modal from '@/components/modal.vue';
@@ -84,10 +86,10 @@ const columns = [
 const dataSource = ref([]);
 const pagination = reactive({
   total: 0,
-  showPageSize: true,
-  showTotal: true,
-  defaultCurrent: 1,
-  defaultPageSize: 10,
+  showSizeChanger: true,
+  showTotal: (total: number, range: [number, number]) => `共 ${total} 条记录`,
+  current: 1,
+  pageSize: 10,
 });
 
 const params = reactive({
@@ -122,13 +124,12 @@ const currentSelectAccount = ref();
 
 const { copy, copied, isSupported } = useClipboard({ source: inviteUrl });
 
-function handlePageChange(current: number) {
-  params.page = current;
-  getSubAccount();
-}
-
-function handlePageSizeChange(pageSize: number) {
-  params.page_size = pageSize;
+function handleTableChange(paginationInfo: any, filters: any, sorter: any) {
+  params.page = paginationInfo.current;
+  params.page_size = paginationInfo.pageSize;
+  // 更新分页状态
+  pagination.current = paginationInfo.current;
+  pagination.pageSize = paginationInfo.pageSize;
   getSubAccount();
 }
 

src/views/components/management/enterprise/index.vue

@@ -3,17 +3,21 @@
     <div class="title-row">
       <span class="title">企业信息</span>
     </div>
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
-      <template #empty>
+    <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
+      <Table.Column title="企业信息" dataIndex="info">
+        <template #customRender="{ record }">
+          {{ record.name }}
+        </template>
+      </Table.Column>
+      <Table.Column title="操作" dataIndex="action" width="120">
+        <template #customRender>
+          <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
+        </template>
+      </Table.Column>
+      <template #emptyText>
         <NoData />
       </template>
-      <template #info="{ record }">
-        {{ record.name }}
-      </template>
-      <template #action>
-        <Button class="edit-button" size="small" type="primary" ghost @click="handleUpdate">修改</Button>
-      </template>
-    </a-table>
+    </Table>
     <Modal
       v-model:open="infoVisible"
       width="480px"
@@ -45,7 +49,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button, Form, FormItem, Input } from 'ant-design-vue';
+import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import { ref, reactive, computed } from 'vue';

src/views/components/management/person/index.vue

@@ -3,22 +3,26 @@
     <div class="title-row">
       <span class="title">个人信息</span>
     </div>
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px">
-      <template #empty>
+    <Table :dataSource="dataSource" :pagination="false" :showSorterTooltip="false" class="mt-8px">
+      <Table.Column title="用户信息" dataIndex="info">
+        <template #customRender="{ record }">
+          <div class="pt-3px pb-3px">
+            <a-avatar :image-url="record.head_image" :size="32" />
+            {{ record.name || '-' }}
+            <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
+          </div>
+        </template>
+      </Table.Column>
+      <Table.Column title="手机号" dataIndex="mobile">
+        <template #customRender="{ record }">
+          {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
+          <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
+        </template>
+      </Table.Column>
+      <template #emptyText>
         <NoData />
       </template>
-      <template #info="{ record }">
-        <div class="pt-3px pb-3px">
-          <a-avatar :image-url="record.head_image" :size="32" />
-          {{ record.name || '-' }}
-          <icon-edit size="13" class="ml-8px" @click="openEditInfoModal" />
-        </div>
-      </template>
-      <template #mobile="{ record }">
-        {{ record.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') }}
-        <icon-edit size="13" class="ml-8px" @click="openEditMobileModal" />
-      </template>
-    </a-table>
+    </Table>
     <Modal v-model:open="infoVisible" centered title="修改用户信息" @ok="handleSubmitUserInfo">
       <Form
         class="form"
@@ -81,7 +85,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { Button, Form, FormItem, Input } from 'ant-design-vue';
+import { Button, Form, FormItem, Input, Table } from 'ant-design-vue';
 import Container from '@/components/container.vue';
 import Modal from '@/components/modal.vue';
 import PuzzleVerification from '@/views/components/login/components/PuzzleVerification.vue';