cld2_react/src/common/tab/popupsTab.js

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { Table } from 'antd';

import {  reducer } from './store';

const tabTable={
    height:'340px',
}

class popupsTab extends PureComponent {

    tabMenu() {
        const { data } = this.props;
        let clientMenu;
        let noneMenu;
        if (typeof data.clientList !== 'undefined') {
            clientMenu = (<li className="nav-item"><a className="nav-link active" data-toggle="tab" href="#tabClient" role="tab" aria-selected="true">联系人</a></li>);
        }
        noneMenu = (<li className="nav-item "><a className="nav-link" data-toggle="tab" href="#tab-yun" role="tab" aria-selected="true">联系人</a></li>);
        return (
            <Fragment>
                {clientMenu}
            </Fragment>
        )
    }

    tabContent() {
        const { data } = this.props;
        let clientContent;
        
        reducer.columns[0].filters=data.departmentFilters;

        if (typeof data.clientList !== 'undefined') {
            clientContent = (
                <div className="tab-pane fade active show sheet-panel-righttop" id="tabClient" role="tabpanel" aria-labelledby="tab-yun">
                    <div className="slimScrol3" style={tabTable} >
                        <Table
                            columns={reducer.columns}
                            dataSource={data.clientList}
                            pagination={false}
                            //bordered
                            size="small"
                            scroll={{
                                // x: 'calc(1200px + 50%)',
                                // y: screenHeight - reportHeaderHeight - 75,
                                //x:400,
                                y:315,
                            }}
                            

                        />

                       


                    </div>
                </div>
            );
        }

        return (
            <Fragment>
                {clientContent}
                <div className="sheet-btns mt-3">
                <a href="#add-server" className="btn btn-xs btn-outline-primary" data-toggle="modal" data-target="#add-server"><i className="far fa-plus"></i> 添加联系人</a>
                </div>
            </Fragment>
        )

    }

    render() {
        // companyDetail, natureOptions, handleModifyCompany,
        const { data } = this.props;

        

        //let dataToJS = data.toJS();
        // let natureOptions2 = natureOptions.toJS();
        //console.log(data.clientList);
        //console.log(typeof companyDetailtoJS.clientList)
        return (
            <Fragment>
                <div className="sheet-right-panel col p-0">
                    <div className="sheet-panel-tabs mx-4 mt-4">
                        <ul className="nav nav-tabs sheet-nav-tabs" role="tablist">
                            {/* <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-yun" role="tab" aria-selected="true">联系人</a></li>
                            <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-clock" role="tab" aria-selected="false">软件锁</a></li> */}
                            {this.tabMenu()}
                        </ul>
                        <div className="tab-content">

                            {this.tabContent()}

                           

                            <div className="tab-pane fade sheet-panel-righttop" id="tab-clock" role="tabpanel" aria-labelledby="tab-lock">
                                <div className="slimScrol3">
                                    <table className="table">
                                        <thead>
                                            <tr>
                                                <th className="border-0"></th>
                                                <th className="border-0">锁号</th>
                                                <th className="border-0">产品</th>
                                                <th className="border-0">状态</th>
                                                <th className="border-0">联系人</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0654</a></td>
                                                <td>固化清单全功能+全国专业+全国专业（新定额）</td>
                                                <td>借出</td>
                                                <td><a href="#">张三</a></td>
                                            </tr>
                                            <tr>
                                                <td>2</td>
                                                <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0655</a></td>
                                                <td>+全国专业（新定额）</td>
                                                <td>借出</td>
                                                <td><a href="#">李四</a></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>


                        </div>


                        {/* <Tabs onChange={callback} type="card">
                            <TabPane tab="联系人" key="1">
                                <table className="table">
                                        <thead>
                                            <tr>
                                                <th width="20" className="border-0"></th>
                                                <th className="border-0"><a className="dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">所有</a>
                                                    <div className="dropdown-menu" >
                                                        <a className="dropdown-item d-flex" href="#">所有<i className="far fa-check ml-auto"></i></a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                        <a className="dropdown-item d-flex" href="#">部门1</a>
                                                        <a className="dropdown-item d-flex" href="#">部门2</a>
                                                    </div>
                                                </th>
                                                <th className="border-0">姓名</th>
                                                <th className="border-0">昵称</th>
                                                <th className="border-0">手机</th>
                                                <th className="border-0">QQ</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>1</td>
                                                <td>部门1</td>
                                                <td><a href="#">张三</a></td>
                                                <td>张（三）工：</td>
                                                <td>15811111111</td>
                                                <td>23232323</td>
                                            </tr>
                                        </tbody>
                                    </table>
                            </TabPane>
                            <TabPane tab="Tab 2" key="2">
                                Content of Tab Pane 2
                            </TabPane>
                            <TabPane tab="Tab 3" key="3">
                                Content of Tab Pane 3
                            </TabPane>
                        </Tabs> */}


                        
                    </div>



                    <div className="sheet-panel-record">
                        <ul className="nav nav-tabs nav-tabs-clean sheet-nav-tabs" role="tablist">
                            <li className="nav-item ml-4"><a className="nav-link text-center active" data-toggle="tab" href="#tab-log" role="tab" aria-selected="true">日志</a></li>
                        </ul>
                        <div className="tab-content p-3">
                            <div className="tab-pane fade active show sheet-panel-log" id="tab-log" role="tabpanel" aria-labelledby="tab-log">
                                <div className="slimScrol4">
                                    <p><a href="#">@陈特</a> 移除 通行账号 15812345678<br /><span className="text-muted">5月5日 14:55</span></p>

                                    <p><a href="#">@陈特</a> 关联 通行账号 15812345678<br /><span className="text-muted">5月5日 14:55</span></p>

                                    <p><a href="#">@陈特</a> 将手机 15800000000 改为 15812345678；将客户 珠海纵横创新软件有限公司 改为 北京旺圣干科技有限公司<br /><span className="text-muted">5月5日 14:55</span></p>

                                    <p><a href="#">@陈特</a> 将客户 改为 珠海纵横创新软件有限公司<br /><span className="text-muted">5月5日 14:55</span></p>

                                    <p><a href="#">@陈特</a> 创建<br /><span className="text-muted">5月5日 14:55</span></p>

                                </div>
                            </div>
                        </div>
                    </div>


                </div>


            </Fragment>
        );
    }
}

let delaySwitch = null;//延迟检索开关

const mapStateToProps = (state) => {
    
    return {
        // companyDetail: state.getIn(['companyPopups', 'companyDetail']),
        // natureOptions: state.getIn(['companyPopups', 'natureOptions']),
        districtOptions:state.get('districtOptions')
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleModifyCompany(parameter) {

            dispatch(actionCreators.changeInputValue(parameter));
            if (delaySwitch != null) {
                clearTimeout(delaySwitch);
            }
            delaySwitch = setTimeout(() => {

                dispatch(actionCreators.modifyCompany(parameter));
            }, 800);
        },
    }
}

export default connect(mapStateToProps, mapDispathToProps)(popupsTab);