From 2f2aa7e9b01c8ef665e77a376ce1e15acc6e3112 Mon Sep 17 00:00:00 2001
From: cKey <35512826+colinin@users.noreply.github.com>
Date: Tue, 18 Oct 2022 11:46:05 +0800
Subject: [PATCH] add support table selected alert

---
 .../src/components/Table/src/BasicTable.vue   |  8 ++++-
 .../Table/src/components/TableAlert.vue       | 36 +++++++++++++++++++
 .../Table/src/components/TableHeader.vue      | 15 +++++++-
 .../Table/src/hooks/useTableAlert.ts          | 33 +++++++++++++++++
 .../Table/src/hooks/useTableHeader.ts         |  5 +++
 .../src/components/Table/src/types/table.ts   |  3 ++
 apps/vue/src/locales/lang/en/component.ts     |  2 ++
 apps/vue/src/locales/lang/zh-CN/component.ts  |  2 ++
 8 files changed, 102 insertions(+), 2 deletions(-)
 create mode 100644 apps/vue/src/components/Table/src/components/TableAlert.vue
 create mode 100644 apps/vue/src/components/Table/src/hooks/useTableAlert.ts

diff --git a/apps/vue/src/components/Table/src/BasicTable.vue b/apps/vue/src/components/Table/src/BasicTable.vue
index d0b693de0..ef850c02b 100644
--- a/apps/vue/src/components/Table/src/BasicTable.vue
+++ b/apps/vue/src/components/Table/src/BasicTable.vue
@@ -82,6 +82,7 @@
   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';
@@ -247,9 +248,14 @@
           // support useTable
           unref(getProps).onColumnsChange?.(data);
         },
+        deSelect: () => {
+          clearSelectedRowKeys();
+        },
       };
 
-      const { getHeaderProps } = useTableHeader(getProps, slots, handlers);
+      const { getAlertEnabled, getAlertMessage } = useTableAlert(getProps, getSelectRowKeys);
+
+      const { getHeaderProps } = useTableHeader(getProps, slots, handlers, getAlertEnabled, getAlertMessage);
 
       const { getFooterProps } = useTableFooter(
         getProps,
diff --git a/apps/vue/src/components/Table/src/components/TableAlert.vue b/apps/vue/src/components/Table/src/components/TableAlert.vue
new file mode 100644
index 000000000..53ee929ab
--- /dev/null
+++ b/apps/vue/src/components/Table/src/components/TableAlert.vue
@@ -0,0 +1,36 @@
+<template>
+  <Alert :class="prefixCls" type="info" :message="message">
+    <template #closeText>
+      <Button type="link" @click="handleDeSelect">{{ t('component.table.deSelected') }}</Button>
+    </template>
+  </Alert>
+</template>
+
+<script lang="ts" setup>
+  import { Alert, Button } from 'ant-design-vue';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useI18n } from '/@/hooks/web/useI18n';
+
+  defineProps({
+    message: {
+      type: String,
+      default: '',
+    },
+  });
+  const emits = defineEmits(['onDeSelect']);
+
+  const { t } = useI18n();
+  const { prefixCls } = useDesign('basic-table-alert');
+
+  function handleDeSelect() {
+    emits('onDeSelect');
+  }
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-basic-table-alert';
+
+  .@{prefix-cls} {
+    margin: 6px 0 3px 0;
+  }
+</style>
\ No newline at end of file
diff --git a/apps/vue/src/components/Table/src/components/TableHeader.vue b/apps/vue/src/components/Table/src/components/TableHeader.vue
index 189e913d9..d89152fd8 100644
--- a/apps/vue/src/components/Table/src/components/TableHeader.vue
+++ b/apps/vue/src/components/Table/src/components/TableHeader.vue
@@ -20,6 +20,9 @@
         />
       </div>
     </div>
+    <div v-if="showTableAlert" :class="`${prefixCls}__alert`">
+      <TableAlert :message="tableAlertMessage" @on-de-select="$emit('de-select')" />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -29,12 +32,14 @@
   import { Divider } from 'ant-design-vue';
   import TableSettingComponent from './settings/index.vue';
   import TableTitle from './TableTitle.vue';
+  import TableAlert from './TableAlert.vue';
   import { useDesign } from '/@/hooks/web/useDesign';
 
   export default defineComponent({
     name: 'BasicTableHeader',
     components: {
       Divider,
+      TableAlert,
       TableTitle,
       TableSetting: TableSettingComponent,
     },
@@ -52,8 +57,16 @@
         type: [String, Array] as PropType<string | string[]>,
         default: '',
       },
+      showTableAlert: {
+        type: Boolean,
+        default: false,
+      },
+      tableAlertMessage: {
+        type: String,
+        default: ''
+      },
     },
-    emits: ['columns-change'],
+    emits: ['columns-change', 'de-select'],
     setup(_, { emit }) {
       const { prefixCls } = useDesign('basic-table-header');
       function handleColumnChange(data: ColumnChangeParam[]) {
diff --git a/apps/vue/src/components/Table/src/hooks/useTableAlert.ts b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
new file mode 100644
index 000000000..da0c9d57d
--- /dev/null
+++ b/apps/vue/src/components/Table/src/hooks/useTableAlert.ts
@@ -0,0 +1,33 @@
+import type { ComputedRef } from 'vue';
+import type { BasicTableProps } from '../types/table';
+
+import { computed, unref } from 'vue';
+import {} from '/@/hooks/web/useI18n';
+import { useI18n } from 'vue-i18n';
+
+export function useTableAlert(
+  propsRef: ComputedRef<BasicTableProps>,
+  getSelectRowKeys: () => string[]
+) {
+  const { t } = useI18n();
+
+  const getAlertEnabled = computed(() => {
+    const props = unref(propsRef);
+    if (!props.useSelectedAlert) {
+      return false;
+    }
+    const selectedKeys = getSelectRowKeys();
+    return selectedKeys.length > 0;
+  });
+
+  const getAlertMessage = computed(() => {
+    const selectedKeys = getSelectRowKeys();
+    console.log(selectedKeys);
+    return t('component.table.selectedRows', { count: selectedKeys.length });
+  });
+
+  return {
+    getAlertEnabled,
+    getAlertMessage,
+  };
+}
diff --git a/apps/vue/src/components/Table/src/hooks/useTableHeader.ts b/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
index e72820755..f052d8bb8 100644
--- a/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
+++ b/apps/vue/src/components/Table/src/hooks/useTableHeader.ts
@@ -9,6 +9,8 @@ export function useTableHeader(
   propsRef: ComputedRef<BasicTableProps>,
   slots: Slots,
   handlers: InnerHandlers,
+  useTableAlert?: ComputedRef<Boolean>,
+  tableAlertMessage?: ComputedRef<String>,
 ) {
   const getHeaderProps = computed((): Recordable => {
     const { title, showTableSetting, titleHelpMessage, tableSetting } = unref(propsRef);
@@ -28,7 +30,10 @@ export function useTableHeader(
                 titleHelpMessage,
                 showTableSetting,
                 tableSetting,
+                showTableAlert: unref(useTableAlert),
+                tableAlertMessage: unref(tableAlertMessage),
                 onColumnsChange: handlers.onColumnsChange,
+                onDeSelect: handlers.deSelect,
               } as Recordable,
               {
                 ...(slots.toolbar
diff --git a/apps/vue/src/components/Table/src/types/table.ts b/apps/vue/src/components/Table/src/types/table.ts
index dcc949230..fa57d016a 100644
--- a/apps/vue/src/components/Table/src/types/table.ts
+++ b/apps/vue/src/components/Table/src/types/table.ts
@@ -187,6 +187,8 @@ export interface BasicTableProps<T = any> {
   formConfig?: Partial<FormProps>;
    // 高级查询配置
   advancedSearchConfig?: Partial<AdvanceSearchProps>;
+  // 使用已选择提示
+  useSelectedAlert?: boolean;
   // 列配置
   columns: BasicColumn[];
   // 是否显示序号列
@@ -480,4 +482,5 @@ export type ColumnChangeParam = {
 
 export interface InnerHandlers {
   onColumnsChange: (data: ColumnChangeParam[]) => void;
+  deSelect: () => void;
 }
diff --git a/apps/vue/src/locales/lang/en/component.ts b/apps/vue/src/locales/lang/en/component.ts
index 0308706e6..fd03007eb 100644
--- a/apps/vue/src/locales/lang/en/component.ts
+++ b/apps/vue/src/locales/lang/en/component.ts
@@ -68,6 +68,8 @@ export default {
     settingFullScreen: 'Full Screen',
     index: 'Index',
     total: 'total of {total}',
+    selectedRows: 'The {count} item has been selected',
+    deSelected: 'De Select',
     advancedSearch: {
       title: 'Advanced Search',
       conditions: 'Condition',
diff --git a/apps/vue/src/locales/lang/zh-CN/component.ts b/apps/vue/src/locales/lang/zh-CN/component.ts
index 363b658cf..ae04d9e92 100644
--- a/apps/vue/src/locales/lang/zh-CN/component.ts
+++ b/apps/vue/src/locales/lang/zh-CN/component.ts
@@ -70,6 +70,8 @@ export default {
     settingFullScreen: '全屏',
     index: '序号',
     total: '共 {total} 条数据',
+    selectedRows: '已选择 {count} 项',
+    deSelected: '取消选择',
     advancedSearch: {
       title: '高级查询',
       conditions: '查询条件',