From a8a5eb53d7380d00aefa4ccfa50fab92ba997749 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Wed, 19 Oct 2022 09:30:41 +0800
Subject: [PATCH] Fix the TableAlert component

Fix the TableAlert component at #723
---
 .../src/components/Table/src/BasicTable.vue   |  8 +++--
 .../Table/src/components/TableAlert.vue       | 33 +++++++++++++++----
 .../Table/src/hooks/useTableAlert.ts          | 20 +++++++----
 3 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
index ef850c02b..c36a81aad 100644
--- a/apps/vue/src/components/Table/src/BasicTable.vue
+++ b/apps/vue/src/components/Table/src/BasicTable.vue
@@ -78,11 +78,11 @@
   import { useDataSource } from './hooks/useDataSource';
   import { useLoading } from './hooks/useLoading';
   import { useRowSelection } from './hooks/useRowSelection';
+  import { useTableAlert } from './hooks/useTableAlert';
   import { useTableScroll } from './hooks/useTableScroll';
   import { useTableScrollTo } from './hooks/useScrollTo';
   import { useCustomRow } from './hooks/useCustomRow';
   import { useTableStyle } from './hooks/useTableStyle';
-  import { useTableAlert } from './hooks/useTableAlert';
   import { useTableHeader } from './hooks/useTableHeader';
   import { useTableExpand } from './hooks/useTableExpand';
   import { createTableContext } from './hooks/useTableContext';
@@ -253,7 +253,7 @@
         },
       };
 
-      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getSelectRowKeys);
+      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getRowSelectionRef);
 
       const { getHeaderProps } = useTableHeader(getProps, slots, handlers, getAlertEnabled, getAlertMessage);
 
@@ -446,6 +446,10 @@
       }
     }
 
+    .ant-alert {
+      margin-bottom: 16px;
+    }
+
     .ant-tag {
       margin-right: 0;
     }
diff --git a/apps/vue/src/components/Table/src/components/TableAlert.vue b/apps/vue/src/components/Table/src/components/TableAlert.vue
index 53ee929ab..1e9e077c3 100644
--- a/apps/vue/src/components/Table/src/components/TableAlert.vue
+++ b/apps/vue/src/components/Table/src/components/TableAlert.vue
@@ -1,7 +1,12 @@
 <template>
-  <Alert :class="prefixCls" type="info" :message="message">
-    <template #closeText>
-      <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+  <Alert :class="prefixCls" type="info">
+    <template #message>
+      <div class="message-box">
+        <span class="message-content">{{ message }}</span>
+        <div class="message-button">
+          <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+        </div>
+      </div>
     </template>
   </Alert>
 </template>
@@ -17,13 +22,13 @@
       default: '',
     },
   });
-  const emits = defineEmits(['onDeSelect']);
+  const emits = defineEmits(['de-select']);
 
   const { t } = useI18n();
   const { prefixCls } = useDesign('basic-table-alert');
 
   function handleDeSelect() {
-    emits('onDeSelect');
+    emits('de-select');
   }
 </script>
 
@@ -32,5 +37,21 @@
 
   .@{prefix-cls} {
     margin: 6px 0 3px 0;
+
+    .message-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      word-wrap: break-word;
+
+      .message-content {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .message-button {
+        margin-right: 0px;
+      }
+    }
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
index da0c9d57d..bd8bc5497 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
+++ b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef } from 'vue';
-import type { BasicTableProps } from '../types/table';
+import type { BasicTableProps, TableRowSelection } from '../types/table';
 
 import { computed, unref } from 'vue';
 import {} from '/@/hooks/web/useI18n';
@@ -7,23 +7,29 @@ import { useI18n } from 'vue-i18n';
 
 export function useTableAlert(
   propsRef: ComputedRef<BasicTableProps>,
-  getSelectRowKeys: () => string[]
+  rowSelectionRef: ComputedRef<TableRowSelection | null>,
 ) {
   const { t } = useI18n();
 
+  const getSelectRowKeysCount = computed(() => {
+    const rowSelection = unref(rowSelectionRef);
+    if (!rowSelection?.selectedRowKeys) {
+      return 0;
+    }
+    return rowSelection.selectedRowKeys.length;
+  });
+
   const getAlertEnabled = computed(() => {
     const props = unref(propsRef);
     if (!props.useSelectedAlert) {
       return false;
     }
-    const selectedKeys = getSelectRowKeys();
-    return selectedKeys.length > 0;
+    
+    return unref(getSelectRowKeysCount) > 0;
   });
 
   const getAlertMessage = computed(() => {
-    const selectedKeys = getSelectRowKeys();
-    console.log(selectedKeys);
-    return t('component.table.selectedRows', { count: selectedKeys.length });
+    return t('component.table.selectedRows', { count: unref(getSelectRowKeysCount) });
   });
 
   return {