topTab.jsx 22 KB

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