refactor: 重构配置模块

admin/src/pages/menu/index.tsx

@@ -1,127 +1,99 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import {
-  Card,
-  Table,
-  Typography,
-  TableColumnProps,
-  Button,
-  Popconfirm,
-  Divider,
-  Space,
-  Message
+	Card,
+	Table,
+	Typography,
+	TableColumnProps,
+	Button,
+	Space,
+	Message
 } from '@arco-design/web-react';
-import { useQuery } from 'react-query';
+import {useQuery} from 'react-query';
 import Form from './form';
-import { deleteMenu, getTreeMenu } from '@/api/menu';
+import {deleteMenu, getTreeMenu} from '@/api/menu';
+import {getColumns, TableOptions} from './constants';
+import {useHistory} from "react-router";
 
-const { Title } = Typography;
+const {Title} = Typography;
 
 function ConfigManage() {
-  const [visible, setVisible] = useState(false);
-  const [record, setRecord] = useState(null);
-  const columns: TableColumnProps[] = [
-    {
-      title: '菜单id',
-      dataIndex: 'id',
-      align: 'center',
-    },
-    {
-      title: '菜单名称',
-      dataIndex: 'name',
-      align: 'center',
-    },
-    {
-      title: '菜单url',
-      dataIndex: 'url',
-      align: 'center',
-    },
-    {
-      title: '排序',
-      dataIndex: 'sort',
-      align: 'center',
-    },
-    {
-      title: '操作',
-      dataIndex: 'operations',
-      width:'25%',
-      render: (_, record) => (
-        <>
-          <Button onClick={() => showModal(record)} type="text" status="default">更新</Button>
-          <Divider type="vertical" />
-          <Popconfirm
-            focusLock
-            title="删除数据"
-            content="确认删除该条数据吗?"
-            onOk={() => onDelete(record)}
-          >
-            <Button type="text" status="danger">删除</Button>
-          </Popconfirm>
-        </>
-      ),
-      align: 'center'
-    }
-  ];
+	const reactQueryKey = useHistory().location.pathname;
+	const [visible, setVisible] = useState(false);
+	const [record, setRecord] = useState(null);
 
-  const onDelete = async ({ id }) => {
-    await deleteMenu(id);
-    Message.success('删除成功！');
-    await refetch();
-  };
+	const onDelete = async ({id}) => {
+		await deleteMenu(id);
+		Message.success('删除成功！');
+		await refetch();
+	};
 
-  const fetchData = async () => {
-    const { data } = await getTreeMenu();
-    return data
-  };
+	const tableCallback = async (type: TableOptions, record: any) => {
+		switch (type) {
+			case TableOptions.EDIT:
+				showModal(record)
+				break;
+			case TableOptions.DELETE:
+				await onDelete(record);
+				break
+		}
+	}
 
-  const {
-    data,
-    isLoading,
-    isFetching,
-    refetch
-  } = useQuery(
-    ['menu'], fetchData, { refetchOnWindowFocus: false, keepPreviousData: true });
+	const columns: TableColumnProps[] = getColumns(tableCallback)
 
-  const showModal = (payload?) => {
-    payload && setRecord(payload);
-    setVisible(true);
-  };
+	const fetchData = async () => {
+		const {data} = await getTreeMenu();
+		return data
+	};
 
-  const handleConfirm = async () => {
-    setRecord(null);
-    setVisible(false);
-    await refetch();
-  };
+	const {
+		data,
+		isLoading,
+		isFetching,
+		refetch
+	} = useQuery(
+		[reactQueryKey], fetchData);
 
-  const handleCancel = () => {
-    setRecord(null);
-    setVisible(false);
-  };
+	const showModal = (payload?) => {
+		payload && setRecord(payload);
+		setVisible(true);
+	};
 
-  return (
-    <>
-      <Card>
-        <Form
-          handleConfirm={handleConfirm}
-          handleCancel={handleCancel}
-          visible={visible}
-          record={record}
-        />
-        <Title heading={6}>菜单管理</Title>
+	const handleConfirm = async () => {
+		setRecord(null);
+		setVisible(false);
+		await refetch();
+	};
 
-        <Space style={{ marginBottom: 12 }}>
-          <Button type="primary" onClick={() => showModal()}>新建菜单</Button>
-        </Space>
+	const handleCancel = () => {
+		setRecord(null);
+		setVisible(false);
+	};
 
-        <Table
-          rowKey="id"
-          loading={isLoading || isFetching}
-          columns={columns}
-          pagination={false}
-          data={data}
-        />
-      </Card>
-    </>
-  );
+	return (
+		<>
+			<Card>
+				<Form
+					handleConfirm={handleConfirm}
+					handleCancel={handleCancel}
+					visible={visible}
+					record={record}
+				/>
+				<Title heading={6}>菜单管理</Title>
+
+				<Space style={{marginBottom: 12}}>
+					<Button type="primary" onClick={() => showModal()}>新建菜单</Button>
+				</Space>
+
+				<Table
+					rowKey="id"
+					loading={isLoading || isFetching}
+					columns={columns}
+					pagination={false}
+					data={data}
+				/>
+			</Card>
+		</>
+	);
 }