kede-client/js/component/manageCenter/topTab.jsx

import React from 'react';
import { Row, Col, Icon, Modal, Button, Spin, Input, message, Badge, Table, Tabs, Tag } from 'antd';
import { getProvince } from '../NewDicProvinceList.js';
import { getActives} from '../tools.js';
import './topTab.less';
import $ from 'jquery/src/ajax';
import logo from '../../../image/acc-logo.png';
import FollowDetail from "./customer/NEW/intentionCustomer/followDetail";

const TabPane = Tabs.TabPane;

const MessageModal = React.createClass({
    getInitialState() {
        return {
            unreadData:[],
            unreadDataType:'0',
            dataSourceType:'1',
            unreadDataIndex:0,
            visible: false,
            loading: false,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadReaded(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            UnreadPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadUnread(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            categoryArr:[],
            columns: [
                {
                    title: '类型',
                    dataIndex: 'noticeType',
                    key: 'noticeType',
                    render: (text, record) => {
					return (<span>{record.noticeTypeName}</span>)
                    }
                }, {
                    title: '时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate'
                }, {
                    title: '内容',
                    dataIndex: 'content',
                    key: 'content',
                }, {
                    title: "操作",
                    dataIndex: "abc",
                    key: "abc",
                    render: (text, record) => {
                        let contractNo = '';
                        if((record.noticeType === 14 || record.noticeType === 40) && record.content.indexOf('合同编号-') !== -1){
                            let arr = record.content.split('合同编号-');
                            contractNo = arr[1].match(/(\S*), 订单编号/)[1];
                        }
                        return (
                            record.noticeType === 48 || record.noticeType === 49 ?
                                <Button type="primary" onClick={()=>{
                                    this.category();
                                    record.id = record.uid;
                                    this.setState({
                                        followData: record,
                                        visitModul: true,
                                    });
                                }}>立即跟进</Button> :
                                record.noticeType === 14 || record.noticeType === 40 ?
                                    <Button disabled={!contractNo} type="primary" onClick={(e)=>{
                                        e.stopPropagation();
                                        let input = document.getElementById("copyText");
                                        input.value = contractNo;
                                        input.select();
                                        document.execCommand("copy");
                                        message.success('复制成功')
                                    }}>
                                        复制合同号
                                    </Button> :  null
                        )
                    }
                },
            ],
            data: []
        };
    },
    category() {
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/Varieties/getSuperList",
            data: {},
            success: function (data) {
                let thedata = data.data;
                let theArr = [];
                if (!thedata) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    }
                    thedata = {};
                } else {
                    thedata.map(function (item, index) {
                        theArr.push({
                            value: item.id,
                            key: item.cname,
                        });
                    });
                }
                this.setState({
                    categoryArr: theArr,
                });
            }.bind(this),
        });
    },
    loadReaded(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/readed",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
                type:this.state.unreadDataType,
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            this.state.data = [];
            for (let i = 0; i < data.data.list.length; i++) {
                let thisdata = data.data.list[i];
                this.state.data.push({
                    key: i + 1,
                    id: thisdata.id,
                    rid: thisdata.rid,
                    uid: thisdata.uid,
                    aid: thisdata.aid,
                    noticeType: thisdata.noticeType,
                    year: thisdata.year,
                    noticeTypeName: thisdata.noticeTypeName,
                    content: thisdata.content,
                    createTime: thisdata.createTime,
                    createTimeFormattedDate: thisdata.createTimeFormattedDate,
                    principle: thisdata.principle,
                    unitName: thisdata.unitName
                });
            };
            this.state.pagination.current = data.data.pageNo;
            this.state.pagination.total = data.data.totalCount;
            this.setState({
                dataSource: this.state.data,
                pagination: this.state.pagination
            });
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadUnread(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/unread",
            data: {

            }
        }).done((data) => {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
                return;
            }else{
                let arr = data.data.filter(v=>v.list.length > 0)
                if(arr.length) {
                    this.setState({
                        newVisible: true
                    });
                }
                let index = data.data.findIndex(v=>v.list.length > 0);
                if(index >= 0){
                    data.data[index].isRead = true;
                    this.setState({
                        unreadDataType: index ? data.data[index]['id']+'' : '0',
                        unreadDataIndex:index,
                    });
                }else{
                    this.setState({
                        unreadDataType: data.data[0]['id']+'',
                        unreadDataIndex:'0',
                    });
                }
                this.setState({
                    unreadData: data.data,
                });
            }
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.loadReaded();
            this.loadUnread();
        };
        this.state.visible = nextProps.showDesc
    },
    handleOk() {
        let arr = this.state.unreadData.filter(v=>v.list.length > 0 && !v.isRead);
        if(arr.length > 0){
            message.warning('还存在未读消息,请查看后再关闭当前页面!');
            return;
        }else{
            this.setState({
                visible: false,
            });
        }
        this.props.closeDesc(false, true);
    },
    handleCancel(e) {
        let arr = this.state.unreadData.filter(v=>v.list.length > 0 && !v.isRead);
        if(arr.length > 0){
            message.warning('还存在未读消息,请查看后再关闭当前页面!');
            return;
        }else{
            this.setState({
                visible: false,
            });
        }
        this.props.closeDesc(false, true);
    },
    closeDesc(){
        this.setState({
            categoryArr:[],
            followData:'',
            visitModul:false
        },()=>{
            this.loadReaded(this.state.pagination.current);
        })
    },
    render() {
        return (
            <div className="topTab-modal">
                <Spin spinning={this.state.loading} className='spin-box'>
                    <Modal maskClosable={false} title="信息中心" visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel}
                        width='1200px' footer=''
                    >
                        <Spin spinning={this.state.loading} className="spin-box">
                            <Tabs defaultActiveKey={this.state.unreadDataType} activeKey={this.state.unreadDataType} onChange={v=>{
                                let index = this.state.unreadData.findIndex(d=>d.id == v);
                                this.state.unreadData[index].isRead = true;
                                this.setState({
                                    unreadDataIndex:index,
                                    unreadData:this.state.unreadData,
                                    unreadDataType:v
                                },()=>{
                                    if(this.state.dataSourceType === '2'){
                                        this.loadReaded()
                                    }
                                })
                            }}>
                                {
                                    this.state.unreadData.map((v)=>(
                                        <Tabs.TabPane
                                            key={v.id+''}
                                            tab={<div>
                                                {v.list.length === 0 || v.isRead ? null : <div style={{width:'8px',height:"8px",borderRadius:'8px',background:'#f00',position: 'absolute',right: '5px', top: '2px'}}/>}
                                                {v.name}
                                            </div>
                                            }/>
                                    ))
                                }
                            </Tabs>
                            <Tabs defaultActiveKey="1" type="card" tabPosition='left' value={this.state.dataSourceType} onChange={(v)=>{
                                this.setState({
                                    dataSourceType:v
                                })
                                if(v === '2'){
                                    this.loadReaded()
                                }
                            }}>
                                <Tabs.TabPane tab={'未读'} key="1">
                                    <Table
                                        bordered
                                        columns={this.state.columns}
                                        dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
                                        pagination={false}
                                    />
                                </Tabs.TabPane>
                                <Tabs.TabPane tab="已读" key="2">
                                    <Table
                                        bordered
                                        columns={this.state.columns}
                                        dataSource={this.state.dataSource}
                                        pagination={this.state.pagination}
                                    />
                                </Tabs.TabPane>
                            </Tabs>
                        </Spin>
                        <textarea id='copyText' style={{opacity:0}}/>
                    </Modal>
                </Spin>
                <FollowDetail
                    categoryArr={this.state.categoryArr}
                    followData={this.state.followData}
                    visitModul={this.state.visitModul}
                    closeDesc={this.closeDesc}
                />
            </div>
        );
    }
});

const UserModal = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false,
            locations: []
        };
    },
    loadData() {
        this.setState({
            loading: true
        });

        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/adminInfo",
            success: function (data) {
                if (!data.data) {
                    if (data.error[0] && data.error[0]) {
                        message.warning(data.error[0].message);
                    };
                    return;
                };
                this.setState({
                    id: data.data.id,
                    mobile: data.data.mobile,
                    contactMobile: data.data.contactMobile,
                    name: data.data.name,
                    position: data.data.position,
                    email: data.data.email,
                    createTime: data.data.createTime,
                    number: data.data.number,
                    createTimeFormattedDate: data.data.createTimeFormattedDate,
                    pwd:'',
                    password:''
                });
                this.loadLocations(data.data.id);
            }.bind(this),
        }).always(function (data) {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadLocations(id) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',
            cache: false,
            data: {
                "id": id
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            data.data.map((item) => {
                if (item.city) {
                    item.city = item.city.split(',');
                }
            });
            this.setState({
                locations: data.data,
                loading: false
            });
        })
    },
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.loadData();
        };
        this.state.visible = nextProps.showDesc
    },
    handleOk() {
        this.setState({
            loading: true
        });
        if(this.state.contactMobile){
        	if(!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))){
			  message.warning("不是完整的11位手机号或者正确的手机号前七位");
			  this.setState({
                    loading: false
                });
			  return false;
			}
        }
//      if(this.state.mobile.length>11){
//      	message.warning("登录账号不能超过11位");
//      	return false;
//      }
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/updateAdminInfo",
            data: {
                id: this.state.id,
                mobile: this.state.mobile,
                contactMobile: this.state.contactMobile,
                name: this.state.name,
                email: this.state.email,
                province: this.state.province,
                password: this.state.password,
                pwd: this.state.pwd
            }
        }).always(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
            	this.setState({
                    loading: false
                });
                message.success('保存成功！');
                this.props.closeDesc(false, true);
            };
        }.bind(this));
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    render() {
        return (
            <div className="topTab-modal">
                <Spin spinning={this.state.loading} className='spin-box'>
                    <Modal maskClosable={false} title="用户设置" visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel}
                        width='380px' >
                        <ul className="modal-content">
                            <li>
                                <span className='modal-text'>名字</span>
                                <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>职位</span>
                                <span>{this.state.position}</span>
                            </li>
                            <li>
                                <span className='modal-text'>登录账号</span>
                                <span>{this.state.mobile}</span>
                            </li>
                            <li>
                                <span className='modal-text'>联系方式</span>
                                <Input value={this.state.contactMobile} onChange={(e) => { this.state.contactMobile = e.target.value; this.setState({ contactMobile: this.state.contactMobile }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>省份</span>
                                <div style={{ display: "inline-block", width: '78%' }}>
                                    {this.state.locations.map((item, i) => {
                                        return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
                                            return getProvince(c) + ' '
                                        }) : '')}</Tag>
                                    })}
                                </div>
                            </li>
                            <li>
                                <span className='modal-text'>邮箱</span>
                                <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>原密码</span>
                                <Input value={this.state.pwd} type="password" onChange={(e) => { this.state.pwd = e.target.value; this.setState({ pwd: this.state.pwd }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>密码</span>
                                <Input value={this.state.password} type="password" onChange={(e) => { this.state.password = e.target.value; this.setState({ password: this.state.password }); }} />
                            </li>
                        </ul>
                    </Modal>
                </Spin>
            </div>
        );
    }
});

const TopTab = React.createClass({
    getInitialState() {
        return {
            username: '请登录!',
            defaultActiveKey:'-1',
            htmlMenus:[],
        };
    },
    logOut() {
        let theActive = this.props.active;
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/login",
        }).done(function (data) {
            window.location.href = globalConfig.context + "/admin/login.html"
        });
    },
    componentWillMount() {
        if (this.props.active) {
            this.loadData();
        };
        this.mainMenu();
    },
    //主菜单请求
    mainMenu(){
    	this.setState({
    		loading:true
    	});
    	$.ajax({
    		method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/selectNavList",
            data: {

            },
            success:function(data){
            	if (!data.data) {
	                if (data.error && data.error.length) {
	                    message.warning(data.error[0].message);
	                    return;
	                };
	            };
	            let menu=data.data;
	            var htmlMenu=[];
                let index = menu.findIndex(v=>getActives(v.name) === this.props.active);
	            this.setState({
	            	htmlMenus:menu,
                    defaultActiveKey:index+''
	            })
            }.bind(this),
    	}).always(function(data){
    		this.setState({
    			loading:false
    		})
    	}.bind(this))
    },
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/unreadCount",
            success: function (data) {
                if (!data.data) {
                    if (data.error[0] && data.error[0]) {
                        message.warning(data.error[0].message);
                        return;
                    };
                };
                this.setState({
                    badge: data.data,
                });
            }.bind(this),
        }).always(function (data) {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    closeUserModal(e, s) {
        this.state.userModalShow = e;
        if (s) {
            this.loadData();
        };
    },
    closeMessageModal(e, s) {
        this.state.messageModalShow = e;
        if (s) {
            this.loadData();
        };
    },
    render() {
        return (
            <div className="account-top" >
                <div className="acc-top-user">
                    <span className="acc-top-user-name">欢迎您 , {adminData.name || adminData.mobile ? <a onClick={() => {
                        // if (window.showPermissionList && window.showRoleList) {
                        //     return
                        // };
                        this.setState({ userModalShow: true });
                    }}> {adminData.name || adminData.mobile} </a> : <a onClick={this.logOut}>{this.state.username}</a>} <a onClick={this.logOut}>[ 退出 ]</a></span>
                    <span className="acc-top-user-toindex"><a href={jumpUrl||'' + "/portal/index.html"}>返回首页</a></span>
                    {this.props.active ? <a onClick={() => { this.setState({ messageModalShow: true }); }} className="user-badge">
                        <Icon type="mail" />
                        {
                            !window.showSystem && this.state.badge ?
                                <Badge status="processing" /> : null
                        }
                    </a> : null}
                </div>
                <div className="acc-index">
                    <div className="acc-index-imgbox">
                        <img src={logo} alt="" />
                    </div>
                    <span><a href={globalConfig.context + "/admin/index.html"}>管理中心首页</a></span>
                </div>
                <div className="acc-top-tab">
                    {this.state.htmlMenus.length > 0 ? <Tabs
                        defaultActiveKey={this.state.defaultActiveKey}
                        activeKey={this.state.defaultActiveKey}
                        tabPosition='top'
                        onTabClick={v=>{
                            window.location.href=globalConfig.context + this.state.htmlMenus[parseInt(v)].url+'?rid='+this.state.htmlMenus[parseInt(v)].id;
                        }}
                        // onChange={v=>{
                        //     window.location.href=globalConfig.context + this.state.htmlMenus[parseInt(v)].url+'?rid='+this.state.htmlMenus[parseInt(v)].id;
                        // }}
                    >
                        {this.state.htmlMenus.map((v,k)=>(
                            <TabPane key={k} tab={v.name}/>
                        ))}
                    </Tabs> : null}
                </div>
                <UserModal showDesc={this.state.userModalShow} closeDesc={this.closeUserModal} />
                <MessageModal showDesc={this.state.messageModalShow} closeDesc={this.closeMessageModal} />
            </div >
        )
    }
});

export default TopTab;