#

luxiaotao1123

2024-02-05 360c67971411ff2469b854f24b7acef36a3ec008

 zy-asrs-flow/src/pages/Admin.jsx

@@ -1,82 +1,285 @@
import React, { useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    LogoutOutlined,
    SearchOutlined,
} from '@ant-design/icons';
import { Layout, Menu, Button, theme } from 'antd';
import {
    PageContainer,
    ProConfigProvider,
    ProLayout,
    SettingDrawer,
} from '@ant-design/pro-components';
import {
    ConfigProvider,
    Dropdown,
    Input,
    theme,
} from 'antd';
import React from 'react';
import defaultProps from './_defaultProps';
import logo from '@/assets/logo.png';
import G6 from './G6';
import { getMenuList } from '@/api/meun';
import Hello from './Hello';
import { Router, Routes, Route, useNavigate } from "react-router-dom";

const { Header, Sider, Content } = Layout;

const App = () => {
    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();

const SearchInput = () => {
    const { token } = theme.useToken();
    return (
        <Layout style={{ height: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                    <img src={logo} alt="Logo" style={{ maxWidth: '80%', height: 'auto' }} />
                </div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                    items={[
                        {
                            key: '1',
                            icon: <UserOutlined />,
                            label: 'nav 1',
                        },
                        {
                            key: '2',
                            icon: <VideoCameraOutlined />,
                            label: 'nav 2',
                        },
                        {
                            key: '3',
                            icon: <UploadOutlined />,
                            label: 'nav 3',
                        },
                    ]}
                />
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                >
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
        <div
            key="SearchOutlined"
            aria-hidden
            style={{
                display: 'flex',
                alignItems: 'center',
                marginInlineEnd: 24,
            }}
            onMouseDown={(e) => {
                e.stopPropagation();
                e.preventDefault();
            }}
        >
            <Input
                style={{
                    borderRadius: 4,
                    marginInlineEnd: 12,
                    backgroundColor: token.colorBgTextHover,
                }}
                prefix={
                    <SearchOutlined
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                            color: token.colorTextLightSolid,
                        }}
                    />
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        minHeight: 280,
                        background: colorBgContainer,
                        borderRadius: borderRadiusLG,
                    }}
                >
                    Content
                </Content>
            </Layout>
        </Layout>
                }
                placeholder="请输入"
                bordered={false}
            />
        </div>
    );
};
export default App;

const route = {
    route: {
        path: '/',
        routes: [
            {
                name: '列表页',
                path: '/list',
                component: './ListTableList',
                routes: [
                    {
                        path: '/list/sub-page',
                        name: '列表页面',
                        routes: [
                            {
                                path: '/list/sub-page/sub-sub-page1',
                                name: '一级列表页面',
                                component: './G6',
                            },
                            {
                                path: '/list/sub-page/hello',
                                name: '你好世界',
                                component: './Hello',
                            },
                        ],
                    },
                ],
            },
            {
                name: '列表页',
                path: '/list',
                component: './ListTableList',
                routes: [
                    {
                        path: '/list/sub-page',
                        name: '列表页面',
                        routes: [
                            {
                                path: '/list/sub-page/sub-sub-page1',
                                name: '一级列表页面',
                                component: './G6',
                            },
                            {
                                path: '/list/sub-page/hello',
                                name: '你好世界',
                                component: './Hello',
                            },
                        ],
                    },
                ],
            },
        ]
    },
}

export default () => {
    if (typeof document === 'undefined') {
        return <div />;
    }

    const [menu, setMenu] = React.useState([]);

    React.useEffect(() => {
        getMenuList().then(res => {
            setMenu(res.data);
            console.log(res);
        }).catch(error => {
            console.error(error);
        })
    }, []);


    const [settings, setSetting] = React.useState({
        fixSiderbar: true,
        layout: 'side', // mix top
        splitMenus: true,
        fixedHeader: true
    });
    const [pathname, setPathname] = React.useState('/list/sub-page/sub-sub-page1');

    return (
        <div
            id="pro-layout" style={{ height: '100vh', overflow: 'auto' }}
        >
            <ProConfigProvider hashed={false}>
                <ConfigProvider
                    getTargetContainer={() => {
                        return document.getElementById('pro-layout') || document.body;
                    }}
                >
                    <ProLayout
                        prefixCls="my-prefix"
                        bgLayoutImgList={[
                            {
                                src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
                                left: 85,
                                bottom: 100,
                                height: '303px',
                            },
                            {
                                src: 'https://img.alicdn.com/imgextra/i2/O1CN01O4etvp1DvpFLKfuWq_!!6000000000279-2-tps-609-606.png',
                                bottom: -68,
                                right: -45,
                                height: '303px',
                            },
                            {
                                src: 'https://img.alicdn.com/imgextra/i3/O1CN018NxReL1shX85Yz6Cx_!!6000000005798-2-tps-884-496.png',
                                bottom: 0,
                                left: 0,
                                width: '331px',
                            },
                        ]}
                        {...route}
                        location={{
                            pathname,
                        }}
                        token={{
                            header: {
                                colorBgMenuItemSelected: 'rgba(0,0,0,0.04)',
                            },
                        }}
                        siderMenuType="sub" // group
                        menu={{
                            collapsedShowGroupTitle: true,
                        }}
                        // 个人用户
                        avatarProps={{
                            src: 'https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg',
                            size: 'small',
                            title: '陆晓涛',
                            render: (props, dom) => {
                                return (
                                    <Dropdown
                                        menu={{
                                            items: [
                                                {
                                                    key: 'logout',
                                                    icon: <LogoutOutlined />,
                                                    label: '退出登录',
                                                },
                                            ],
                                        }}
                                    >
                                        {dom}
                                    </Dropdown>
                                );
                            },
                        }}
                        // 自定义操作列表
                        actionsRender={(props) => {
                            if (props.isMobile) return [];
                            if (typeof window === 'undefined') return [];
                            return [
                                props.layout !== 'side' && document.body.clientWidth > 1400 ? (
                                    <SearchInput />
                                ) : undefined,
                            ];
                        }}
                        // logo信息
                        headerTitleRender={(logo, title, _) => {
                            return (
                                <>
                                    <a>
                                        {logo}
                                        WCS
                                    </a>
                                </>
                            );
                        }}
                        // 在 layout 底部渲染一个块
                        menuFooterRender={(props) => {
                            if (props?.collapsed) return undefined;
                            return (
                                <div
                                    style={{
                                        textAlign: 'center',
                                        paddingBlockStart: 12,
                                    }}
                                >
                                    <div>© 2021 Made with love</div>
                                    <div>by Ant Design</div>
                                </div>
                            );
                        }}
                        // menu 菜单的头部点击事件
                        onMenuHeaderClick={(e) => console.log(e)}
                        // 自定义菜单项的 render 方法
                        menuItemRender={(item, dom) => (
                            <div
                                onClick={() => {
                                    setPathname(item.path);
                                }}
                            >
                                {dom}
                            </div>
                        )}
                        {...settings}
                    >
                        {/* <PageContainer>

                        </PageContainer> */}

                        <Routes>
                            <Route path="/list/sub-page/hello" element={<Hello />} />
                        </Routes>


                        <SettingDrawer
                            pathname={pathname}
                            enableDarkTheme
                            getContainer={(e) => {
                                if (typeof window === 'undefined') return e;
                                return document.getElementById('pro-layout');
                            }}
                            settings={settings}
                            onSettingChange={(changeSetting) => {
                                setSetting(changeSetting);
                            }}
                            disableUrlParams={false}
                        />
                    </ProLayout>
                </ConfigProvider>
            </ProConfigProvider>
        </div>
    );
};