/*
|
* @Company: hugeInfo
|
* @Author: ldh
|
* @Date: 2022-02-16 15:23:40
|
* @LastEditTime: 2022-11-28 10:04:31
|
* @LastEditors: ldh
|
* @Version: 1.0.0
|
* @Description: 面包屑
|
*/
|
import React from 'react';
|
import PropTypes from 'prop-types';
|
import { useNavigate } from 'react-router-dom';
|
import { Breadcrumb, Button, Tooltip, Space } from 'antd';
|
import { BulbOutlined, LeftCircleOutlined } from '@ant-design/icons';
|
import sopStatus from '../../status/sopStatus';
|
|
/*
|
* fromType, // 来源页面str
|
* breadcrumbData, // 面包屑数据[{url:'返回链接',click:'返回的操作',title:''}]
|
* title, // 页面标题
|
* subtitle, // 页面说明
|
* titleButton, // 页面标题右侧功能按钮集
|
* handleReturn, // 退回操作，是否有退回
|
* sopVisible, // 是否展示sop
|
*/
|
const PageHead = ({ fromType, breadcrumbData = [], title, subtitle, titleButton = [], handleReturn, sopVisible, background }) => {
|
const navigate = useNavigate();
|
|
return (
|
<div className="pageHead" style={{ backgroundColor: background === 'none' && 'transparent' }}>
|
<div style={{ paddingTop: '8px' }}>
|
{breadcrumbData.length !== 0 && (
|
<Breadcrumb className="pageHead-breadcrumb">
|
{breadcrumbData.map((x, t) => {
|
return x.url ? (
|
<Breadcrumb.Item key={x.title}>
|
<span onClick={() => navigate(`${x.url}?isBack=true`, { replace: true })} className="pageHead-breadcrumb-item">
|
{x.title}
|
</span>
|
</Breadcrumb.Item>
|
) : x.click ? (
|
<Breadcrumb.Item className="pageHead-breadcrumb-item" onClick={x.click} key={x.title}>
|
{x.title}
|
</Breadcrumb.Item>
|
) : (
|
<Breadcrumb.Item key={x.title}>{x.title}</Breadcrumb.Item>
|
);
|
})}
|
</Breadcrumb>
|
)}
|
<div className="pageHead-title">
|
{handleReturn && (
|
<Tooltip title="返回">
|
<LeftCircleOutlined style={{ marginRight: '8px', fontSize: '18px' }} className="public-color" onClick={handleReturn} />
|
</Tooltip>
|
)}
|
<span className={fromType === 'caseDetail' ? 'pageHead-title-detailH' : 'pageHead-title-h'}>{title}</span>
|
</div>
|
{!!subtitle && <div className="pageHead-subtitle">{subtitle}</div>}
|
</div>
|
<Space size="middle">
|
{titleButton.map((x, t) => (
|
<div key={t}>{x}</div>
|
))}
|
{/* {sopVisible && (
|
<Button onClick={sopStatus.handleVisible} icon={<BulbOutlined />}>
|
IDR助手
|
</Button>
|
)} */}
|
</Space>
|
</div>
|
);
|
};
|
|
PageHead.propTypes = {
|
fromType: PropTypes.string,
|
breadcrumbData: PropTypes.array,
|
title: PropTypes.string,
|
subtitle: PropTypes.any,
|
titleButton: PropTypes.any,
|
handleReturn: PropTypes.func,
|
sopVisible: PropTypes.bool,
|
};
|
|
export default PageHead;
|
