topTab.jsx 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656
  1. import React from 'react';
  2. import { Row, Col, Icon, Modal, Button, Spin, Input, message, Badge, Table, Tabs, Tag } from 'antd';
  3. import { getProvince } from '../NewDicProvinceList.js';
  4. import { getActives} from '../tools.js';
  5. import './topTab.less';
  6. import $ from 'jquery/src/ajax';
  7. import logo from '../../../image/acc-logo.png';
  8. import FollowDetail from "./customer/NEW/intentionCustomer/followDetail";
  9. const TabPane = Tabs.TabPane;
  10. const MessageModal = React.createClass({
  11. getInitialState() {
  12. return {
  13. unreadData:[],
  14. unreadDataType:'0',
  15. dataSourceType:'1',
  16. unreadDataIndex:0,
  17. visible: false,
  18. loading: false,
  19. pagination: {
  20. defaultCurrent: 1,
  21. defaultPageSize: 10,
  22. showQuickJumper: true,
  23. pageSize: 10,
  24. onChange: function (page) {
  25. this.loadReaded(page);
  26. }.bind(this),
  27. showTotal: function (total) {
  28. return '共' + total + '条数据';
  29. }
  30. },
  31. UnreadPagination: {
  32. defaultCurrent: 1,
  33. defaultPageSize: 10,
  34. showQuickJumper: true,
  35. pageSize: 10,
  36. onChange: function (page) {
  37. this.loadUnread(page);
  38. }.bind(this),
  39. showTotal: function (total) {
  40. return '共' + total + '条数据';
  41. }
  42. },
  43. categoryArr:[],
  44. columns: [
  45. {
  46. title: '类型',
  47. dataIndex: 'noticeType',
  48. key: 'noticeType',
  49. render: (text, record) => {
  50. return (<span>{record.noticeTypeName}</span>)
  51. }
  52. }, {
  53. title: '时间',
  54. dataIndex: 'createTimeFormattedDate',
  55. key: 'createTimeFormattedDate'
  56. }, {
  57. title: '内容',
  58. dataIndex: 'content',
  59. key: 'content',
  60. }, {
  61. title: "操作",
  62. dataIndex: "abc",
  63. key: "abc",
  64. render: (text, record) => {
  65. return (
  66. record.noticeType === 48 || record.noticeType === 49 ?
  67. <Button type="primary" onClick={()=>{
  68. this.category();
  69. record.id = record.uid;
  70. this.setState({
  71. followData: record,
  72. visitModul: true,
  73. });
  74. }}>立即跟进</Button> : null
  75. )
  76. }
  77. },
  78. ],
  79. data: []
  80. };
  81. },
  82. category() {
  83. $.ajax({
  84. method: "get",
  85. dataType: "json",
  86. crossDomain: false,
  87. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  88. data: {},
  89. success: function (data) {
  90. let thedata = data.data;
  91. let theArr = [];
  92. if (!thedata) {
  93. if (data.error && data.error.length) {
  94. message.warning(data.error[0].message);
  95. }
  96. thedata = {};
  97. } else {
  98. thedata.map(function (item, index) {
  99. theArr.push({
  100. value: item.id,
  101. key: item.cname,
  102. });
  103. });
  104. }
  105. this.setState({
  106. categoryArr: theArr,
  107. });
  108. }.bind(this),
  109. });
  110. },
  111. loadReaded(pageNo) {
  112. this.state.data = [];
  113. this.setState({
  114. loading: true
  115. });
  116. $.ajax({
  117. method: "get",
  118. dataType: "json",
  119. crossDomain: false,
  120. url: globalConfig.context + "/api/admin/notice/readed",
  121. data: {
  122. pageNo: pageNo || 1,
  123. pageSize: this.state.pagination.pageSize,
  124. type:this.state.unreadDataType,
  125. }
  126. }).done((data) => {
  127. if (!data.data) {
  128. if (data.error && data.error.length) {
  129. message.warning(data.error[0].message);
  130. return;
  131. };
  132. };
  133. this.state.data = [];
  134. for (let i = 0; i < data.data.list.length; i++) {
  135. let thisdata = data.data.list[i];
  136. this.state.data.push({
  137. key: i + 1,
  138. id: thisdata.id,
  139. rid: thisdata.rid,
  140. uid: thisdata.uid,
  141. aid: thisdata.aid,
  142. noticeType: thisdata.noticeType,
  143. year: thisdata.year,
  144. noticeTypeName: thisdata.noticeTypeName,
  145. content: thisdata.content,
  146. createTime: thisdata.createTime,
  147. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  148. principle: thisdata.principle,
  149. unitName: thisdata.unitName
  150. });
  151. };
  152. this.state.pagination.current = data.data.pageNo;
  153. this.state.pagination.total = data.data.totalCount;
  154. this.setState({
  155. dataSource: this.state.data,
  156. pagination: this.state.pagination
  157. });
  158. }).always(function () {
  159. this.setState({
  160. loading: false
  161. });
  162. }.bind(this));
  163. },
  164. loadUnread(pageNo) {
  165. this.state.data = [];
  166. this.setState({
  167. loading: true
  168. });
  169. $.ajax({
  170. method: "get",
  171. dataType: "json",
  172. crossDomain: false,
  173. url: globalConfig.context + "/api/admin/notice/unread",
  174. data: {
  175. }
  176. }).done((data) => {
  177. if (data.error && data.error.length) {
  178. message.warning(data.error[0].message);
  179. return;
  180. }else{
  181. let arr = data.data.filter(v=>v.list.length > 0)
  182. if(arr.length) {
  183. this.setState({
  184. newVisible: true
  185. });
  186. }
  187. let index = data.data.findIndex(v=>v.list.length > 0);
  188. if(index >= 0){
  189. data.data[index].isRead = true;
  190. this.setState({
  191. unreadDataType: index ? data.data[index]['id']+'' : '0',
  192. unreadDataIndex:index,
  193. });
  194. }else{
  195. this.setState({
  196. unreadDataType: data.data[0]['id']+'',
  197. unreadDataIndex:'0',
  198. });
  199. }
  200. this.setState({
  201. unreadData: data.data,
  202. });
  203. }
  204. }).always(function () {
  205. this.setState({
  206. loading: false
  207. });
  208. }.bind(this));
  209. },
  210. componentWillReceiveProps(nextProps) {
  211. if (!this.state.visible && nextProps.showDesc) {
  212. this.loadReaded();
  213. this.loadUnread();
  214. };
  215. this.state.visible = nextProps.showDesc
  216. },
  217. handleOk() {
  218. let arr = this.state.unreadData.filter(v=>v.list.length > 0 && !v.isRead);
  219. if(arr.length > 0){
  220. message.warning('还存在未读消息,请查看后再关闭当前页面!');
  221. return;
  222. }else{
  223. this.setState({
  224. visible: false,
  225. });
  226. }
  227. this.props.closeDesc(false, true);
  228. },
  229. handleCancel(e) {
  230. let arr = this.state.unreadData.filter(v=>v.list.length > 0 && !v.isRead);
  231. if(arr.length > 0){
  232. message.warning('还存在未读消息,请查看后再关闭当前页面!');
  233. return;
  234. }else{
  235. this.setState({
  236. visible: false,
  237. });
  238. }
  239. this.props.closeDesc(false, true);
  240. },
  241. closeDesc(){
  242. this.setState({
  243. categoryArr:[],
  244. followData:'',
  245. visitModul:false
  246. },()=>{
  247. this.loadReaded(this.state.pagination.current);
  248. })
  249. },
  250. render() {
  251. return (
  252. <div className="topTab-modal">
  253. <Spin spinning={this.state.loading} className='spin-box'>
  254. <Modal maskClosable={false} title="信息中心" visible={this.state.visible}
  255. onOk={this.handleOk} onCancel={this.handleCancel}
  256. width='1000px' footer=''
  257. >
  258. <Spin spinning={this.state.loading} className="spin-box">
  259. <Tabs defaultActiveKey={this.state.unreadDataType} activeKey={this.state.unreadDataType} onChange={v=>{
  260. let index = this.state.unreadData.findIndex(d=>d.id == v);
  261. this.state.unreadData[index].isRead = true;
  262. this.setState({
  263. unreadDataIndex:index,
  264. unreadData:this.state.unreadData,
  265. unreadDataType:v
  266. },()=>{
  267. if(this.state.dataSourceType === '2'){
  268. this.loadReaded()
  269. }
  270. })
  271. }}>
  272. {
  273. this.state.unreadData.map((v)=>(
  274. <Tabs.TabPane
  275. key={v.id+''}
  276. tab={<div>
  277. {v.list.length === 0 || v.isRead ? null : <div style={{width:'8px',height:"8px",borderRadius:'8px',background:'#f00',position: 'absolute',right: '5px', top: '2px'}}/>}
  278. {v.name}
  279. </div>
  280. }/>
  281. ))
  282. }
  283. </Tabs>
  284. <Tabs defaultActiveKey="1" type="card" tabPosition='left' value={this.state.dataSourceType} onChange={(v)=>{
  285. this.setState({
  286. dataSourceType:v
  287. })
  288. if(v === '2'){
  289. this.loadReaded()
  290. }
  291. }}>
  292. <Tabs.TabPane tab={'未读'} key="1">
  293. <Table
  294. bordered
  295. columns={this.state.columns}
  296. dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
  297. pagination={false}
  298. />
  299. </Tabs.TabPane>
  300. <Tabs.TabPane tab="已读" key="2">
  301. <Table
  302. bordered
  303. columns={this.state.columns}
  304. dataSource={this.state.dataSource}
  305. pagination={this.state.pagination}
  306. />
  307. </Tabs.TabPane>
  308. </Tabs>
  309. </Spin>
  310. </Modal>
  311. </Spin>
  312. <FollowDetail
  313. categoryArr={this.state.categoryArr}
  314. followData={this.state.followData}
  315. visitModul={this.state.visitModul}
  316. closeDesc={this.closeDesc}
  317. />
  318. </div>
  319. );
  320. }
  321. });
  322. const UserModal = React.createClass({
  323. getInitialState() {
  324. return {
  325. visible: false,
  326. loading: false,
  327. locations: []
  328. };
  329. },
  330. loadData() {
  331. this.setState({
  332. loading: true
  333. });
  334. $.ajax({
  335. method: "get",
  336. dataType: "json",
  337. crossDomain: false,
  338. url: globalConfig.context + "/api/admin/adminInfo",
  339. success: function (data) {
  340. if (!data.data) {
  341. if (data.error[0] && data.error[0]) {
  342. message.warning(data.error[0].message);
  343. };
  344. return;
  345. };
  346. this.setState({
  347. id: data.data.id,
  348. mobile: data.data.mobile,
  349. contactMobile: data.data.contactMobile,
  350. name: data.data.name,
  351. position: data.data.position,
  352. email: data.data.email,
  353. createTime: data.data.createTime,
  354. number: data.data.number,
  355. createTimeFormattedDate: data.data.createTimeFormattedDate,
  356. pwd:'',
  357. password:''
  358. });
  359. this.loadLocations(data.data.id);
  360. }.bind(this),
  361. }).always(function (data) {
  362. this.setState({
  363. loading: false
  364. });
  365. }.bind(this));
  366. },
  367. loadLocations(id) {
  368. this.setState({
  369. loading: true
  370. });
  371. $.ajax({
  372. url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',
  373. cache: false,
  374. data: {
  375. "id": id
  376. }
  377. }).done((data) => {
  378. if (!data.data) {
  379. if (data.error && data.error.length) {
  380. message.warning(data.error[0].message);
  381. return;
  382. };
  383. };
  384. data.data.map((item) => {
  385. if (item.city) {
  386. item.city = item.city.split(',');
  387. }
  388. });
  389. this.setState({
  390. locations: data.data,
  391. loading: false
  392. });
  393. })
  394. },
  395. componentWillReceiveProps(nextProps) {
  396. if (!this.state.visible && nextProps.showDesc) {
  397. this.loadData();
  398. };
  399. this.state.visible = nextProps.showDesc
  400. },
  401. handleOk() {
  402. this.setState({
  403. loading: true
  404. });
  405. if(this.state.contactMobile){
  406. if(!(/^1[1-9][0-9]\d{4,8}$/.test(this.state.contactMobile))){
  407. message.warning("不是完整的11位手机号或者正确的手机号前七位");
  408. this.setState({
  409. loading: false
  410. });
  411. return false;
  412. }
  413. }
  414. // if(this.state.mobile.length>11){
  415. // message.warning("登录账号不能超过11位");
  416. // return false;
  417. // }
  418. $.ajax({
  419. method: "post",
  420. dataType: "json",
  421. crossDomain: false,
  422. url: globalConfig.context + "/api/admin/updateAdminInfo",
  423. data: {
  424. id: this.state.id,
  425. mobile: this.state.mobile,
  426. contactMobile: this.state.contactMobile,
  427. name: this.state.name,
  428. email: this.state.email,
  429. province: this.state.province,
  430. password: this.state.password,
  431. pwd: this.state.pwd
  432. }
  433. }).always(function (data) {
  434. if (data.error && data.error.length) {
  435. message.warning(data.error[0].message);
  436. } else {
  437. this.setState({
  438. loading: false
  439. });
  440. message.success('保存成功!');
  441. this.props.closeDesc(false, true);
  442. };
  443. }.bind(this));
  444. },
  445. handleCancel(e) {
  446. this.setState({
  447. visible: false,
  448. });
  449. this.props.closeDesc(false);
  450. },
  451. render() {
  452. return (
  453. <div className="topTab-modal">
  454. <Spin spinning={this.state.loading} className='spin-box'>
  455. <Modal maskClosable={false} title="用户设置" visible={this.state.visible}
  456. onOk={this.handleOk} onCancel={this.handleCancel}
  457. width='380px' >
  458. <ul className="modal-content">
  459. <li>
  460. <span className='modal-text'>名字</span>
  461. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  462. </li>
  463. <li>
  464. <span className='modal-text'>职位</span>
  465. <span>{this.state.position}</span>
  466. </li>
  467. <li>
  468. <span className='modal-text'>登录账号</span>
  469. <span>{this.state.mobile}</span>
  470. </li>
  471. <li>
  472. <span className='modal-text'>联系方式</span>
  473. <Input value={this.state.contactMobile} onChange={(e) => { this.state.contactMobile = e.target.value; this.setState({ contactMobile: this.state.contactMobile }); }} />
  474. </li>
  475. <li>
  476. <span className='modal-text'>省份</span>
  477. <div style={{ display: "inline-block", width: '78%' }}>
  478. {this.state.locations.map((item, i) => {
  479. return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
  480. return getProvince(c) + ' '
  481. }) : '')}</Tag>
  482. })}
  483. </div>
  484. </li>
  485. <li>
  486. <span className='modal-text'>邮箱</span>
  487. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  488. </li>
  489. <li>
  490. <span className='modal-text'>原密码</span>
  491. <Input value={this.state.pwd} type="password" onChange={(e) => { this.state.pwd = e.target.value; this.setState({ pwd: this.state.pwd }); }} />
  492. </li>
  493. <li>
  494. <span className='modal-text'>密码</span>
  495. <Input value={this.state.password} type="password" onChange={(e) => { this.state.password = e.target.value; this.setState({ password: this.state.password }); }} />
  496. </li>
  497. </ul>
  498. </Modal>
  499. </Spin>
  500. </div>
  501. );
  502. }
  503. });
  504. const TopTab = React.createClass({
  505. getInitialState() {
  506. return {
  507. username: '请登录!',
  508. defaultActiveKey:'-1',
  509. htmlMenus:[],
  510. };
  511. },
  512. logOut() {
  513. let theActive = this.props.active;
  514. $.ajax({
  515. method: "get",
  516. dataType: "json",
  517. url: globalConfig.context + "/login",
  518. }).done(function (data) {
  519. window.location.href = globalConfig.context + "/admin/login.html"
  520. });
  521. },
  522. componentWillMount() {
  523. if (this.props.active) {
  524. this.loadData();
  525. };
  526. this.mainMenu();
  527. },
  528. //主菜单请求
  529. mainMenu(){
  530. this.setState({
  531. loading:true
  532. });
  533. $.ajax({
  534. method: "get",
  535. dataType: "json",
  536. crossDomain: false,
  537. url: globalConfig.context + "/api/admin/selectNavList",
  538. data: {
  539. },
  540. success:function(data){
  541. if (!data.data) {
  542. if (data.error && data.error.length) {
  543. message.warning(data.error[0].message);
  544. return;
  545. };
  546. };
  547. let menu=data.data;
  548. var htmlMenu=[];
  549. let index = menu.findIndex(v=>getActives(v.name) === this.props.active);
  550. this.setState({
  551. htmlMenus:menu,
  552. defaultActiveKey:index+''
  553. })
  554. }.bind(this),
  555. }).always(function(data){
  556. this.setState({
  557. loading:false
  558. })
  559. }.bind(this))
  560. },
  561. loadData() {
  562. this.setState({
  563. loading: true
  564. });
  565. $.ajax({
  566. method: "get",
  567. dataType: "json",
  568. crossDomain: false,
  569. url: globalConfig.context + "/api/admin/notice/unreadCount",
  570. success: function (data) {
  571. if (!data.data) {
  572. if (data.error[0] && data.error[0]) {
  573. message.warning(data.error[0].message);
  574. return;
  575. };
  576. };
  577. this.setState({
  578. badge: data.data,
  579. });
  580. }.bind(this),
  581. }).always(function (data) {
  582. this.setState({
  583. loading: false
  584. });
  585. }.bind(this));
  586. },
  587. closeUserModal(e, s) {
  588. this.state.userModalShow = e;
  589. if (s) {
  590. this.loadData();
  591. };
  592. },
  593. closeMessageModal(e, s) {
  594. this.state.messageModalShow = e;
  595. if (s) {
  596. this.loadData();
  597. };
  598. },
  599. render() {
  600. return (
  601. <div className="account-top" >
  602. <div className="acc-top-user">
  603. <span className="acc-top-user-name">欢迎您 , {adminData.name || adminData.mobile ? <a onClick={() => {
  604. // if (window.showPermissionList && window.showRoleList) {
  605. // return
  606. // };
  607. this.setState({ userModalShow: true });
  608. }}> {adminData.name || adminData.mobile} </a> : <a onClick={this.logOut}>{this.state.username}</a>} <a onClick={this.logOut}>[ 退出 ]</a></span>
  609. <span className="acc-top-user-toindex"><a href={jumpUrl||'' + "/portal/index.html"}>返回首页</a></span>
  610. {this.props.active ? <a onClick={() => { this.setState({ messageModalShow: true }); }} className="user-badge">
  611. <Icon type="mail" />
  612. {
  613. !window.showSystem && this.state.badge ?
  614. <Badge status="processing" /> : null
  615. }
  616. </a> : null}
  617. </div>
  618. <div className="acc-index">
  619. <div className="acc-index-imgbox">
  620. <img src={logo} alt="" />
  621. </div>
  622. <span><a href={globalConfig.context + "/admin/index.html"}>管理中心首页</a></span>
  623. </div>
  624. <div className="acc-top-tab">
  625. {this.state.htmlMenus.length > 0 ? <Tabs
  626. defaultActiveKey={this.state.defaultActiveKey}
  627. activeKey={this.state.defaultActiveKey}
  628. tabPosition='top'
  629. onTabClick={v=>{
  630. window.location.href=globalConfig.context + this.state.htmlMenus[parseInt(v)].url+'?rid='+this.state.htmlMenus[parseInt(v)].id;
  631. }}
  632. // onChange={v=>{
  633. // window.location.href=globalConfig.context + this.state.htmlMenus[parseInt(v)].url+'?rid='+this.state.htmlMenus[parseInt(v)].id;
  634. // }}
  635. >
  636. {this.state.htmlMenus.map((v,k)=>(
  637. <TabPane key={k} tab={v.name}/>
  638. ))}
  639. </Tabs> : null}
  640. </div>
  641. <UserModal showDesc={this.state.userModalShow} closeDesc={this.closeUserModal} />
  642. <MessageModal showDesc={this.state.messageModalShow} closeDesc={this.closeMessageModal} />
  643. </div >
  644. )
  645. }
  646. });
  647. export default TopTab;