From 11f5cb3cebd919be0cd3c51fe34485bac2b10a81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=B6=E6=80=9D=E6=B7=87?= <thinklf97@gmail.com>
Date: Mon, 29 May 2023 18:24:39 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20table=E6=93=8D=E4=BD=9C=E5=88=97?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TableToolBar/index.tsx    | 34 +++++++++++++++++++-----
 src/pages/table-pages/standard/index.tsx | 22 ++++++++++-----
 2 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/src/components/TableToolBar/index.tsx b/src/components/TableToolBar/index.tsx
index de63140..684ebdf 100644
--- a/src/components/TableToolBar/index.tsx
+++ b/src/components/TableToolBar/index.tsx
@@ -1,12 +1,32 @@
-import { Button, Space, Tooltip } from 'antd'
+import { Button, Checkbox, Dropdown, Space, Tooltip } from 'antd'
 import { SearchOutlined, ReloadOutlined, UnorderedListOutlined } from '@ant-design/icons'
+import { FC, useState } from 'react'
+import type { ColType } from '@/pages/table-pages/standard'
 
-const TableToolBar = (props: any) => {
-  const { toggleSearch, refreshData, showColumn = () => {} } = props
+interface IProps {
+  toggleSearch: () => void
+  refreshData: () => void
+  changeColumn: (dataIndex:string) => void
+  columnData: ColType[]
+}
+const TableToolBar:FC<IProps> = (props) => {
+  const { toggleSearch, refreshData, changeColumn, columnData = [] } = props
   const onSearch = toggleSearch
   const onRefresh = refreshData
-  const onColumn = showColumn
+  const onChange = changeColumn
+
+  const items = columnData.map((item) => {
+    return {
+      label: (<Checkbox className="min-w-70" onClick={() => onChange(item.dataIndex)} checked={item?.selected !== false}>{item.title as string}</Checkbox>),
+      key: item.dataIndex,
+    }
+  })
 
+  const [open, setOpen] = useState(false)
+
+  const handleOpenChange = (flag: boolean) => {
+    setOpen(flag)
+  }
   return (
     <div className="app-table-action-button">
       <Space size={15}>
@@ -16,9 +36,9 @@ const TableToolBar = (props: any) => {
         <Tooltip title="刷新">
           <Button shape="circle" icon={<ReloadOutlined />} onClick={() => onRefresh()} />
         </Tooltip>
-        <Tooltip title="隐藏列">
-          <Button shape="circle" icon={<UnorderedListOutlined />} onClick={() => onColumn()} />
-        </Tooltip>
+        <Dropdown menu={{ items }} onOpenChange={handleOpenChange} open={open}>
+          <Button shape="circle" icon={<UnorderedListOutlined />} />
+        </Dropdown>
       </Space>
     </div>
   )
diff --git a/src/pages/table-pages/standard/index.tsx b/src/pages/table-pages/standard/index.tsx
index 3629b92..ba84e2c 100644
--- a/src/pages/table-pages/standard/index.tsx
+++ b/src/pages/table-pages/standard/index.tsx
@@ -19,7 +19,7 @@ interface DataType {
   age: number;
   address: string;
 }
-
+export type ColType=ColumnsType<DataType>[number] & {selected?:boolean, dataIndex:string}
 const StandarTable = () => {
   const [state, setState] = useSetState({ showSearch: false })
   const [isOpenEdit, setIsOpenEdit] = useState(false)
@@ -29,6 +29,7 @@ const StandarTable = () => {
 
   useEffect(() => {
     setState({ showSearch: true })
+    changeColumn()
   }, [])
 
   const { tableProps, search, run: getTableData } = useAntdTable(getUserList, {
@@ -59,8 +60,7 @@ const StandarTable = () => {
   const onToggleSearch = () => {
     setState({ showSearch: !state.showSearch })
   }
-
-  const columns: ColumnsType<DataType> = [
+  const [columns, setColumns] = useState<ColType[]>([
     {
       title: '姓名',
       dataIndex: 'name.last',
@@ -70,6 +70,7 @@ const StandarTable = () => {
     },
     {
       title: '邮箱',
+      selected: false,
       dataIndex: 'email',
     },
     {
@@ -98,8 +99,15 @@ const StandarTable = () => {
         </Space>
       ),
     },
-  ]
-
+  ])
+  const changeColumn = (dataIndex?:string) => {
+    columns.forEach((item) => {
+      if (item.dataIndex === dataIndex) {
+        item.selected = !item.selected
+      }
+    })
+    setColumns([...columns])
+  }
   const tip = () => {
     setIsOpenEdit(true)
   }
@@ -242,7 +250,7 @@ const StandarTable = () => {
             </Space>
           </div>
           <div className="app-table-action-right">
-            <TableToolBar toggleSearch={onToggleSearch} refreshData={refreshData} />
+            <TableToolBar toggleSearch={onToggleSearch} refreshData={refreshData} columnData={columns} changeColumn={changeColumn} />
           </div>
         </div>
 
@@ -251,7 +259,7 @@ const StandarTable = () => {
           rowKey="cell"
           size="middle"
           rowSelection={rowSelection}
-          columns={columns}
+          columns={columns.filter((item) => item.selected !== false)}
           {...tableProps}
         />
       </Card>
-- 
Gitee