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;