From f11523953fced4b12f2cda4895053df8b1421628 Mon Sep 17 00:00:00 2001
From: dap <15891557205@163.com>
Date: Fri, 8 Nov 2024 20:52:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BD=BF=E7=94=A8VxeTable=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84OAuth=E8=B4=A6=E5=8F=B7=E7=BB=91=E5=AE=9A=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8(=E6=9B=BF=E4=BB=A3antdv=E7=9A=84Table)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CHANGELOG.md                                  |   6 +
 .../_core/profile/components/account-bind.vue | 154 ++++++++++--------
 2 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b41b7014..e44e1b91 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,9 @@
+# 1.1.1
+
+**REFACTOR**
+
+- 使用VxeTable重构OAuth账号绑定列表(替代antdv的Table)
+
 # 1.1.0
 
 **FEATURES**
diff --git a/apps/web-antd/src/views/_core/profile/components/account-bind.vue b/apps/web-antd/src/views/_core/profile/components/account-bind.vue
index b1172d0c..a3442377 100644
--- a/apps/web-antd/src/views/_core/profile/components/account-bind.vue
+++ b/apps/web-antd/src/views/_core/profile/components/account-bind.vue
@@ -1,9 +1,7 @@
 <script setup lang="tsx">
-import type { ColumnsType } from 'ant-design-vue/es/table';
+import { computed, ref, unref } from 'vue';
 
-import type { SocialInfo } from '#/api/system/social/model';
-
-import { computed, onMounted, ref, unref } from 'vue';
+import { useVbenVxeGrid, type VxeGridProps } from '@vben/plugins/vxe-table';
 
 import {
   Alert,
@@ -13,7 +11,6 @@ import {
   ListItem,
   message,
   Modal,
-  Table,
 } from 'ant-design-vue';
 
 import { authUnbinding } from '#/api';
@@ -21,47 +18,6 @@ import { socialList } from '#/api/system/social';
 
 import { accountBindList, type BindItem } from '../../oauth-common';
 
-const columns: ColumnsType = [
-  {
-    align: 'center',
-    dataIndex: 'source',
-    title: '绑定平台',
-  },
-  {
-    align: 'center',
-    customRender: ({ value }) => {
-      return <Avatar src={value} />;
-    },
-    dataIndex: 'avatar',
-    title: '头像',
-  },
-  {
-    align: 'center',
-    dataIndex: 'userName',
-    title: '账号',
-  },
-  {
-    align: 'center',
-    dataIndex: 'action',
-    title: '操作',
-  },
-];
-
-/**
- * 解绑账号
- */
-function handleUnbind(record: Record<string, any>) {
-  Modal.confirm({
-    content: `确定解绑[${record.source}]平台的[${record.userName}]账号吗？`,
-    async onOk() {
-      await authUnbinding(record.id);
-      await reload();
-    },
-    title: '提示',
-    type: 'warning',
-  });
-}
-
 /**
  * 没有传递action事件则不支持绑定 弹出默认提示
  */
@@ -85,35 +41,97 @@ const bindList = computed<BindItem[]>(() => {
   return list;
 });
 
-const tableData = ref<SocialInfo[]>([]);
+const gridOptions: VxeGridProps = {
+  checkboxConfig: {
+    // 高亮
+    highlight: true,
+    // 翻页时保留选中状态
+    reserve: true,
+  },
+  columns: [
+    {
+      field: 'source',
+      title: '绑定平台',
+    },
+    {
+      slots: {
+        default: ({ row }) => {
+          return <Avatar src={row.avatar} />;
+        },
+      },
+      field: 'avatar',
+      title: '头像',
+    },
+    {
+      align: 'center',
+      field: 'userName',
+      title: '账号',
+    },
+    {
+      align: 'center',
+      slots: {
+        default: 'action',
+      },
+      title: '操作',
+    },
+  ],
+  height: 'auto',
+  keepSource: true,
+  pagerConfig: {
+    enabled: false,
+  },
+  proxyConfig: {
+    ajax: {
+      query: async () => {
+        const resp = await socialList();
+        /**
+         * 平台转小写
+         * 已经绑定的平台
+         */
+        boundPlatformsList.value = resp.map((item) =>
+          item.source.toLowerCase(),
+        );
+        return {
+          rows: resp,
+        };
+      },
+    },
+  },
+  rowConfig: {
+    isHover: true,
+    isCurrent: false,
+    keyField: 'id',
+  },
+  id: 'profile-bind-table',
+};
 
-async function reload() {
-  const resp = await socialList();
-  /**
-   * 平台转小写
-   * 已经绑定的平台
-   */
-  boundPlatformsList.value = resp.map((item) => item.source.toLowerCase());
-  tableData.value = resp;
+const [BasicTable, tableApi] = useVbenVxeGrid({
+  gridOptions,
+});
+
+/**
+ * 解绑账号
+ */
+function handleUnbind(record: Record<string, any>) {
+  Modal.confirm({
+    content: `确定解绑[${record.source}]平台的[${record.userName}]账号吗？`,
+    async onOk() {
+      await authUnbinding(record.id);
+      await tableApi.reload();
+    },
+    title: '提示',
+    type: 'warning',
+  });
 }
-
-onMounted(reload);
 </script>
 
 <template>
   <div class="flex flex-col gap-[16px]">
-    <Table
-      :columns="columns"
-      :data-source="tableData"
-      :pagination="false"
-      size="middle"
-    >
-      <template #bodyCell="{ column, record }">
-        <template v-if="column.dataIndex === 'action'">
-          <a-button type="link" @click="handleUnbind(record)">解绑</a-button>
-        </template>
+    <BasicTable>
+      <template #action="{ row }">
+        <a-button type="link" @click="handleUnbind(row)">解绑</a-button>
       </template>
-    </Table>
+    </BasicTable>
     <div class="pb-3">
       <List
         :data-source="bindList"