react-tabs 点击左侧菜单 生成

Posted 2020-10-14 一朵梨花压海棠 18802686535

/**
 * Created by EX-ZHANGLEI009 on 2017/10/30.
 */
import React,{PropTypes} from ‘react‘
import { Tabs } from ‘antd‘;
import { connect } from ‘react-redux‘
import { fetchData } from ‘../components/modelCommon/main‘
import RightMenu from ‘../components/modelCommon/crumbs/RightMenu‘;
import ‘./tabs.less‘
const TabPane = Tabs.TabPane;
@connect(
    state =>({
        data:state.crumbs.crumbs
    })
)
class Crumbs extends React.Component {
    static PropTypes ={
        home:PropTypes.object,
    };
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        this.state = {
            panes:[{
                title:‘主页‘,
                content:this.props.home,
                url:‘/app/index‘,
                key:‘0‘
            }],
            count:0,
        };
        this.urls = window.location.hash.replace(‘#‘,‘‘);
    }
    componentWillMount(){
        fetchData({reqUrl:‘/userModel/menu/listMyTree‘}).then(listData=>{
            this.setState({ listData });
        }).then(e =>{
            this.willMountAndReceive(‘will‘,this.props.childrens)
        });
    }
    componentDidMount(){
        document.addEventListener(‘click‘,this.documentClick);
    }
    componentWillUnmount(){
        document.removeEventListener(‘click‘,this.documentClick)
    }
    componentWillReceiveProps(nextProps){
        const { collapsed } = this.props;
        if(collapsed !== nextProps.collapsed) return;
        const { panes,listData } = this.state;
        let activeKey = `newTab${this.newTabIndex++}`;
        const urls = window.location.hash.replace(‘#‘,‘‘);
        this.willMountAndReceive(‘receive‘,nextProps.childrens)
    }
    willMountAndReceive = (type,childrens) =>{
        const { panes,listData } = this.state;
        const urls = window.location.hash.replace(‘#‘,‘‘);
        const url = window.location.hash.split(‘/‘);
        const myData = url[url.length-1];
        let activeKey = `newTab${this.newTabIndex++}`;
        if(panes.some(e=>urls === e.url)){
            panes.map(e =>{
                if(urls === e.url){
                    e.key = activeKey;
                }
            });
            this.setState({ activeKey, panes });
            return !1
        }
        const bind_event = () =>{
            const fn = (name) =>{
                return this.addTabs(panes,activeKey,childrens,name,urls);
            };
            switch (myData){
                case ‘app‘:return false;
                case ‘search‘:return fn(‘全局搜索‘);
                case ‘onlineProcessor‘:return fn(‘处理人列表‘);
                case ‘WaitTodo‘:return fn(‘待办任务‘);
                case ‘MyNewPriorityManage‘:return fn(‘新增优先级‘);
                case ‘form-new‘:return fn(‘新增表单‘);
                case ‘MyNewGroupManage‘:return fn(‘新增处理组‘);
                case ‘MyNewRoleManage‘:return fn(‘新增角色‘);
                case ‘property-IncidentType‘:return fn(‘事件来源‘);
                case ‘property-case‘:return fn(‘事件原因‘);
                case ‘property-origin‘:return fn(‘事件性质‘);
                case ‘problem-Category‘:return fn(‘问题类别‘);
                case ‘problem-origin‘:return fn(‘问题来源‘);
                case ‘problem-classify‘:return fn(‘问题归类‘);
                case ‘problem-Affect‘:return fn(‘影响程度‘);
                case ‘problem-Urgency‘:return fn(‘解决时限‘);
                case ‘problem-Expect‘:return fn(‘规避措施‘);
                case ‘propertyRiskLevel‘:return fn(‘风险级别‘);
                default:
                    const name = this.mapData(listData.data,myData);//得到中文名//
                    if(name){
                        this.addTabs(panes,activeKey,childrens,name,urls);
                    }else{
                        this.addTabs(panes,activeKey,childrens,myData,urls);
                    }
            }
        };
        if(type === ‘will‘){
            bind_event();
        }else{
            console.log(this.urls !== urls);
            console.log(!(panes.some(e=>urls === e.url)));
            if(this.urls !== urls||!(panes.some(e=>urls === e.url))) {
                this.urls = urls;
                bind_event();
            }
        }


    };
    mapData = (data,myData) =>{
        let name = null;
        function mapData(data){
            data.map(item=>{
                if(item.com === myData){
                    name = item.cnName;
                    return !1;
                }else{
                    if(item.children&&item.children.length>0){
                        mapData(item.children);
                    }
                }
            });
        }
        mapData(data);
        return name;
    };
    //通用添加数组方法
    addTabs = ( panes,activeKey,childrens,title,url) =>{
        panes.push({
            title:title,
            content:childrens,
            url:url,
            key:activeKey,
        });
        this.setState({ panes,activeKey })
    };
    //标签点击操作
    onChange = (activeKey) => {
        this.setState({ activeKey });
    };
    onEdit = (targetKey, action) => {
        this[action](targetKey);
    };
    remove = (targetKey) => {
        const isRun = this.state.panes.some(item =>item.url === "/app/index"&&item.key === targetKey);
        if(isRun)return false;
        let activeKey = this.state.activeKey;
        let lastIndex;
        this.state.panes.forEach((pane, i) => {
            if (pane.key === targetKey) {
                lastIndex = i - 1;
            }
        });
        const panes = this.state.panes.filter(pane => pane.key !== targetKey);
        if (lastIndex >= 0 && activeKey === targetKey) {
            activeKey = panes[lastIndex].key;
        }
        this.setState({ panes, activeKey });
    };
    /*
     * <鼠标右键功能>
     * @params pageX 鼠标X方向位置
     * @params pageY 鼠标Y方向位置
     * @params isShowMenu 是否显示右键菜单
     * */
    onContextMenu = (e) => {
        let en = e.target;
        if(en.textContent === ‘主页‘||en.childNodes[0]&&en.childNodes[0].textContent === ‘主页‘){
            return;
        }
        while (en){
            if(en.className&&en.className === ‘ant-tabs-bar active_zl‘){
                e.preventDefault();
            }
            en = en.parentNode;
        }
        if(e.target.className === ‘zl-tabs‘){
            const tap = e.target.dataset.index;
            this.setState({
                rightMenuData:{
                    pageX:e.pageX,
                    pageY:e.pageY,
                },
                isShowMenu:true,
                currentTap:tap,
            })
        }
    };
    /*
     * <右键菜单关闭当前或其他>
     * @param currentMenu 当前菜单
     * @param otherMenu 其他菜单
     * @param allMenu 所有菜单
     * @param isShowMenu 是否显示菜单
     * @param upDateCrumbsArray 更新数组
     * */
    callbackIndex =(type) =>{
        const { panes,currentTap } = this.state;
        switch (type){
            case ‘currentMenu‘:
                if(currentTap){
                    const arr_ = panes.filter(item =>item.url !== currentTap);
                    const activeKey = panes.map((item,index,array) =>{
                            if(item.url === currentTap){
                                if(index>0){
                                    return panes[index - 1].key;
                                }
                            }
                        })
                        .filter(item =>item)
                        .reduce((m,n) =>({
                        ...m,
                        n
                        }),{});
                    console.log(activeKey);
                    this.setState({
                        isShowMenu:false,
                        panes:arr_,
                        activeKey:activeKey.n,
                    });
                }
                break;
            case ‘otherMenu‘:
                const arr = !!panes&&panes.filter((item,index)=>{
                    return item.url === currentTap||item.url === ‘/app/index‘
                });
                const activeKey = arr.map(item =>{
                        if(item.url === currentTap){
                            return item.key;
                        }
                    }).filter(item =>item).reduce((m,n) =>({...m,n}),{});
                this.setState({
                    isShowMenu:false,
                    panes:arr,
                    activeKey:activeKey.n,
                });
                break;
            case ‘allMenu‘:
                const myKey = `newTab${this.newTabIndex++}`;
                const arrs = [{
                    title:‘主页‘,
                    content:this.props.home,
                    url:‘/app/index‘,
                    key:myKey,
                }];
                this.setState({
                    isShowMenu:false,
                    panes:arrs,
                    activeKey:myKey,
                });
                break;
            case ‘reload‘:
                let Key = `newTab${this.newTabIndex++}`;
                panes.map(item =>{
                    if(item.url === currentTap){
                        item.key = Key;
                    }
                });
                this.setState({
                    isShowMenu:false,
                    activeKey:Key,
                    panes,
                });
        }
    };
    documentClick = (e) =>{
        const { isShowMenu } = this.state;
        if(isShowMenu){
            let en = e.target;
            const className = ‘rightMenu‘;
            while (en){
                if(en.className&&en.className === className){
                    return !1;
                }
                en = en.parentNode;
            }
            this.setState({ isShowMenu:false });
        }
    };
    render() {
        const { isShowMenu,rightMenuData,panes } = this.state;
        const title = (title,url) =>{
            return (
                <div
                    className="zl-tabs"
                    data-index={url}
                    dangerouslySetInnerhtml={{
                        __html:title
                    }}
                ></div>
            )
        };
        return (
            <div ref={`zl-tabs`} className="zl-tabs" onContextMenu={this.onContextMenu}>
                <Tabs
                    hideAdd
                    onChange={this.onChange}
                    activeKey={this.state.activeKey}
                    type="editable-card"
                    onEdit={this.onEdit}
                >
                    { panes.map(pane => <TabPane tab={title(pane.title,pane.url)} key={pane.key}>{pane.content}</TabPane>) }
                </Tabs>
                {isShowMenu&&<RightMenu
                    data={ panes }
                    isHome={this.state.isHome}
                    callbackIndex={this.callbackIndex}
                    rightMenuData={ rightMenuData }
                />}
            </div>
        );
    }
}
export default Crumbs