@ttk/component/src/tax72/taxHeader/index.js

ttk组件库

import React from 'react'
import classNames from 'classnames'
import Input from '../../input'
import Avatar from '../../avatar'
import Button from '../../button'
import Popover from '../../popover'
import Link from '../../link'
import Logo from '../taxLogo'
import loginimgPng from './loginimg.png';

export default function TaxHeaderComponent(props) {
    let {
        className,
        logoType,
        showSearch = true,
        searchText = '搜索',
        searchPlaceholder = '请输入关键字',
        onFocuse,
        onSearch,
        hasLogin = false,
        userName = '',
        loginText = '登录',
        onLogin,
        loginBtnProps,
        searchProps,
        avatarProps,
        onHomeClick,
        onLogout,
        onChangeUser,
        onChangeDepartment,
        children,
        ...rest
    } = props;
	className = classNames({
		'tax-head-box': true,
		[className]: !!className
    })
    let renderPopoverContent = () => (
        <div className='head-popover'>
            <div className='head-popover-title'>
                {userName}
            </div>
            <div className='head-popover-content'>
                <Button iconFontFamily='fsicon' icon='qiehuanjiaose' onClick={onChangeUser}>切换身份</Button>
                <Button iconFontFamily='fsicon' icon='xuanze' onClick={onChangeDepartment}>选择主管税务机关</Button>
            </div>
        </div>
    )

    return (<div {...rest} className={className}>
        <i className='head-logo'>
            <Logo type={logoType} />
        </i>
        <div className='head-main'>
            { 
                showSearch ? (
                    <Input.Search
                        className='head-search'
                        placeholder={searchPlaceholder}
                        enterButton={searchText}
                        onFocuse={onFocuse}
                        onSearch={onSearch}
                        {...searchProps}
                    />
                ) : null 
            }
            { 
                hasLogin ? (
                    <div className='head-btn'>
                        <Link onClick={onHomeClick}>主页</Link>
                        <p>|</p>
                        <Popover placement="bottom" content={renderPopoverContent()} trigger="hover">
                            <Link className='head-btn-user'>{`欢迎，${userName}`}</Link>
                        </Popover>
                        <p>|</p>
                        <Link onClick={onLogout}>退出</Link>
                    </div>
                ) : null 
            }
            {children}
            { 
                !hasLogin ? (
                    <div className='head-login-box' onClick={onLogin} {...loginBtnProps}>
                        <Avatar src={loginimgPng} {...avatarProps} />
                        <h4>{loginText}</h4>
                    </div>
                ) : null 
            }
        </div>
    </div>);
}