ccic-web/packages/component.app/lib/layout/index.js

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ProLayout } from '@ant-design/pro-layout';
import React, { Suspense, useState, useContext } from 'react';
import { NavLink, Outlet, useLocation, useNavigate, Link, } from 'react-router-dom';
import { getStorage, logoutOut } from '@component/utils';
import Icon from '@ant-design/icons';
import { compact, last, pick } from 'lodash';
import { UserMenuContext, urlCacheData } from '../utils';
import { Loading } from '../loading';
import theme from 'theme.less';
import { ReactComponent as BackSvg } from 'images/backSvg.svg';
import title from 'images/title.png';
import moment from 'moment';
import 'moment/locale/zh-cn';
import { Button, Dropdown } from 'antd';
import { useToggle } from 'ahooks';
import { MenuFoldOutlined, MenuUnfoldOutlined, SettingOutlined, } from '@ant-design/icons';
import { stringify } from 'query-string';
// import { WaterMark } from '@ant-design/pro-components';
moment.locale('zh-cn');
export default () => {
    const location = useLocation();
    const navigate = useNavigate();
    const [collapsed, { toggle }] = useToggle(false);
    const { menu } = useContext(UserMenuContext);
    return (_jsx("div", Object.assign({ style: {
            height: '100vh',
        } }, { children: _jsx(ProLayout, Object.assign({ logo: () => (_jsxs("div", { children: [_jsx("img", { src: title, alt: "" }), _jsx(Button, { size: "large", type: "primary", style: { boxShadow: 'none' }, icon: collapsed ? (_jsx(MenuUnfoldOutlined, { onClick: () => toggle(), style: { color: '#FFF' } })) : (_jsx(MenuFoldOutlined, { onClick: () => toggle(), style: { color: '#FFF' } })) })] })), title: "\u5927\u5730\u667A\u6167\u5B89\u5168\u670D\u52A1\u5E73\u53F0", siderWidth: 256, fixSiderbar: true, fixedHeader: true, layout: "mix", location: location, collapsed: collapsed, onCollapse: () => toggle(), collapsedButtonRender: false, breadcrumbProps: {
                separator: '>',
            }, siderMenuType: "group", menu: {
                request: () => __awaiter(void 0, void 0, void 0, function* () { return menu; }),
                autoClose: false,
            }, token: {
                pageContainer: {
                    colorBgPageContainer: '#F7F9FC',
                    marginInlinePageContainerContent: 16,
                    marginBlockPageContainerContent: 8,
                },
                sider: {
                    colorMenuBackground: '#2c2e3e',
                    colorTextMenu: '#9b9ca3',
                    colorTextMenuTitle: '#9b9ca3',
                    // colorTextMenuSecondary: '#9b9ca3',
                    // colorBgMenuItemHover: '#FFF',
                    colorTextMenuSelected: '#FFF',
                    colorBgMenuItemCollapsedHover: '#FFF',
                    colorBgMenuItemCollapsedSelected: '#FFF',
                    colorBgMenuItemSelected: '#373848',
                    // colorTextCollapsedButton: '#FFF',
                    // colorTextCollapsedButtonHover: '#FFF',
                    colorMenuItemDivider: 'rgba(255, 255, 255, 0.06)',
                    colorTextMenuActive: '#FFFFFF',
                },
                header: {
                    heightLayoutHeader: 64,
                    colorBgHeader: theme.primaryColor,
                },
            }, menuItemRender: (item, dom) => {
                return _jsx(NavLink, Object.assign({ to: item.path }, { children: dom }));
            }, breadcrumbRender: (route) => {
                const lastName = getBreadcrumbLast(location.pathname);
                const lastRoute = last(route);
                if (lastName) {
                    route.unshift({
                        breadcrumbName: (_jsx(Icon, { title: "\u8FD4\u56DE", component: BackSvg, onClick: () => {
                                if ([
                                    'staging',
                                    'add',
                                    'edit',
                                    'distribution',
                                    'assign',
                                ].includes(lastName.last_name)) {
                                    if (urlCacheData.has(lastRoute.path)) {
                                        const values = urlCacheData.get(lastRoute.path);
                                        urlCacheData.del(lastRoute.path);
                                        navigate(lastRoute.path + '?' + stringify(values));
                                    }
                                    else {
                                        navigate(lastRoute.path);
                                    }
                                    return;
                                }
                                navigate(-1);
                            } })),
                    });
                }
                return compact([...route, lastName]).map((item) => {
                    return pick(item, ['breadcrumbName', 'component']);
                });
            }, avatarProps: {
                icon: null,
                size: 'large',
                title: (_jsx(Dropdown, Object.assign({ menu: {
                        items: [
                            {
                                key: '1',
                                label: (_jsx("a", Object.assign({ onClick: () => logoutOut(navigate, 'logoutOut') }, { children: "\u9000\u51FA\u767B\u5F55" }))),
                            },
                        ],
                    }, placement: "bottom", arrow: true }, { children: _jsx(Button, Object.assign({ type: "link", icon: _jsx(SettingOutlined, {}), style: { border: 'none', color: '#FFF' } }, { children: getStorage('userName') })) }))),
            } }, { children: _jsx("div", Object.assign({ style: { height: '100%' } }, { children: _jsx(Suspense, Object.assign({ fallback: _jsx(Loading, {}) }, { children: _jsx(Outlet, {}) })) })) })) })));
};
const LAST_PATH = {
    staging: '草稿箱',
    add: '添加',
    edit: '编辑',
    detail: '详情',
    review: '审核',
    distribution: '服务分配',
    assign: '指派人员',
    createService: '生成服务',
    servicesReview: '服务审核',
    servicesDetail: '服务详情',
    policyDetail: '保单详情',
    claimDetail: '理赔详情',
    expertDetail: '专家详情',
    hiddenDangerDetail: '隐患详情',
    riskDetail: '风险详情',
    serviceDetail: '服务详情',
    trackDetail: '指定跟进人',
    initiateSettlement: '发起费用结算',
    customerDetail: '客户详情',
    addType: '添加分类',
    backupsDetail: '备份检查表详情',
};
function getBreadcrumbLast(pathname) {
    const paths = pathname.split('/');
    const item = last(paths);
    if (LAST_PATH[item]) {
        return {
            last_name: item,
            breadcrumbName: LAST_PATH[item],
        };
    }
    return null;
}