add support table selected alert

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,

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>

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[]) {

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,
+  };
+}

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

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;
 }

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',

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: '查询条件',