From 540423ecf741a815d28d7a6baa1541ac884efe95 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Thu, 8 Jul 2021 20:16:22 +0800
Subject: [PATCH] feat(table): add `headerTop` slot
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为表格添加`headerTop`插槽（表格头部的标题之上），以及相关演示

close: #881
---
 CHANGELOG.zh_CN.md                            |  1 +
 .../Table/src/components/TableHeader.vue      | 33 ++++++++++-------
 .../Table/src/hooks/useTableHeader.ts         |  5 +++
 src/views/demo/table/FormTable.vue            | 35 ++++++++++++++++---
 src/views/demo/table/tableData.tsx            |  4 +--
 5 files changed, 59 insertions(+), 19 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 9bc8a1e8cc5..fb27e6e4468 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -3,6 +3,7 @@
 - **Table**
   - 修复滚动条样式问题
   - 修复树形表格的带有展开图标的单元格的内容对齐问题
+  - 新增`headerTop`插槽
 - **AppSearch** 修复可能会搜索隐藏菜单的问题
 - **其它**
   - 修复菜单默认折叠的配置不起作用的问题
diff --git a/src/components/Table/src/components/TableHeader.vue b/src/components/Table/src/components/TableHeader.vue
index 4a2ae6c0193..0a923852372 100644
--- a/src/components/Table/src/components/TableHeader.vue
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -1,16 +1,25 @@
 <template>
-  <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
-
-  <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
-
-  <div :class="`${prefixCls}__toolbar`">
-    <slot name="toolbar"></slot>
-    <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-    <TableSetting
-      :setting="tableSetting"
-      v-if="showTableSetting"
-      @columns-change="handleColumnChange"
-    />
+  <div style="width: 100%">
+    <div v-if="$slots.headerTop" style="margin: 5px">
+      <slot name="headerTop"></slot>
+    </div>
+    <div style="width: 100%; display: flex">
+      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
+      <TableTitle
+        :helpMessage="titleHelpMessage"
+        :title="title"
+        v-if="!$slots.tableTitle && title"
+      />
+      <div :class="`${prefixCls}__toolbar`">
+        <slot name="toolbar"></slot>
+        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
+        <TableSetting
+          :setting="tableSetting"
+          v-if="showTableSetting"
+          @columns-change="handleColumnChange"
+        />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
diff --git a/src/components/Table/src/hooks/useTableHeader.ts b/src/components/Table/src/hooks/useTableHeader.ts
index 1847a1ed080..16d66935e32 100644
--- a/src/components/Table/src/hooks/useTableHeader.ts
+++ b/src/components/Table/src/hooks/useTableHeader.ts
@@ -41,6 +41,11 @@ export function useTableHeader(
                       tableTitle: () => getSlot(slots, 'tableTitle'),
                     }
                   : {}),
+                ...(slots.headerTop
+                  ? {
+                      headerTop: () => getSlot(slots, 'headerTop'),
+                    }
+                  : {}),
               }
             ),
     };
diff --git a/src/views/demo/table/FormTable.vue b/src/views/demo/table/FormTable.vue
index 71b683b147b..05c34e0f6d1 100644
--- a/src/views/demo/table/FormTable.vue
+++ b/src/views/demo/table/FormTable.vue
@@ -1,22 +1,39 @@
 <template>
-  <BasicTable @register="registerTable">
+  <BasicTable
+    @register="registerTable"
+    :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
+  >
     <template #form-custom> custom-slot </template>
-
+    <template #headerTop>
+      <a-alert type="info" show-icon>
+        <template #message>
+          <template v-if="checkedKeys.length > 0">
+            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
+            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
+          </template>
+          <template v-else>
+            <span>未选中任何项目</span>
+          </template>
+        </template>
+      </a-alert>
+    </template>
     <template #toolbar>
       <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
     </template>
   </BasicTable>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicTable, useTable } from '/@/components/Table';
   import { getBasicColumns, getFormConfig } from './tableData';
+  import { Alert } from 'ant-design-vue';
 
   import { demoListApi } from '/@/api/demo/table';
 
   export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, AAlert: Alert },
     setup() {
+      const checkedKeys = ref<Array<string | number>>([]);
       const [registerTable, { getForm }] = useTable({
         title: '开启搜索区域',
         api: demoListApi,
@@ -24,16 +41,24 @@
         useSearchForm: true,
         formConfig: getFormConfig(),
         showTableSetting: true,
-        rowSelection: { type: 'checkbox' },
+        showIndexColumn: false,
+        rowKey: 'id',
       });
 
       function getFormValues() {
         console.log(getForm().getFieldsValue());
       }
 
+      function onSelectChange(selectedRowKeys: (string | number)[]) {
+        console.log(selectedRowKeys);
+        checkedKeys.value = selectedRowKeys;
+      }
+
       return {
         registerTable,
         getFormValues,
+        checkedKeys,
+        onSelectChange,
       };
     },
   });
diff --git a/src/views/demo/table/tableData.tsx b/src/views/demo/table/tableData.tsx
index cedbc5fbe4d..a5146229689 100644
--- a/src/views/demo/table/tableData.tsx
+++ b/src/views/demo/table/tableData.tsx
@@ -31,13 +31,13 @@ export function getBasicColumns(): BasicColumn[] {
     },
     {
       title: '开始时间',
-      width: 120,
+      width: 150,
       sorter: true,
       dataIndex: 'beginTime',
     },
     {
       title: '结束时间',
-      width: 120,
+      width: 150,
       sorter: true,
       dataIndex: 'endTime',
     },