content.jsx 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663
  1. import React from 'react';
  2. import { Spin, Button, Tabs, Table, message, Modal,Tooltip } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js'
  4. import $ from 'jquery/src/ajax';
  5. import '../content.less';
  6. import './content.less';
  7. import LeftTab from './leftTab.jsx';
  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. newVisible: false,
  18. loading: false,
  19. categoryArr:[],
  20. pagination: {
  21. defaultCurrent: 1,
  22. defaultPageSize: 10,
  23. showQuickJumper: true,
  24. pageSize: 10,
  25. onChange: function (page) {
  26. this.loadReaded(page);
  27. }.bind(this),
  28. showTotal: function (total) {
  29. return '共' + total + '条数据';
  30. }
  31. },
  32. UnreadPagination: {
  33. defaultCurrent: 1,
  34. defaultPageSize: 10,
  35. showQuickJumper: true,
  36. pageSize: 9999,
  37. onChange: function (page) {
  38. this.loadUnread(page);
  39. }.bind(this),
  40. showTotal: function (total) {
  41. return '共' + total + '条数据';
  42. }
  43. },
  44. columns: [
  45. {
  46. title: '类型',
  47. dataIndex: 'noticeType',
  48. key: 'noticeType',
  49. render: (text, record) => {
  50. // return <div>{
  51. // text<8?<a href='#' onClick={(e) =>{ e.stopPropagation(),this.setStore(record)}}> {record.noticeTypeName} </a >:
  52. // <span>{record.noticeTypeName}</span>
  53. // }</div>
  54. //return <a href='#' onClick={(e) =>{ e.stopPropagation(),this.setStore(record)}}> {record.noticeTypeName} </a >
  55. return(<span>{record.noticeTypeName}</span>)
  56. }
  57. }, {
  58. title: '时间',
  59. dataIndex: 'createTimeFormattedDate',
  60. key: 'createTimeFormattedDate'
  61. }, {
  62. title: '内容',
  63. dataIndex: 'content',
  64. key: 'content',
  65. render: (text, record) => {
  66. return(
  67. <Tooltip placement="topLeft" title={text}>
  68. <div style={{
  69. maxWidth: '687px',
  70. textOverflow: "ellipsis",
  71. whiteSpace: "nowrap",
  72. overflow: 'hidden',
  73. }}>
  74. {text}
  75. </div>
  76. </Tooltip>
  77. )
  78. }
  79. },
  80. {
  81. title: "操作",
  82. dataIndex: "abc",
  83. key: "abc",
  84. render: (text, record) => {
  85. return (
  86. record.noticeType === 48 || record.noticeType === 49 ?
  87. <Button type="primary" onClick={()=>{
  88. this.category();
  89. record.id = record.uid;
  90. this.setState({
  91. followData: record,
  92. visitModul: true,
  93. });
  94. }}>立即跟进</Button> : null
  95. )
  96. }
  97. }
  98. // {
  99. // title: '公司',
  100. // dataIndex: 'unitName',
  101. // key: 'unitName',
  102. // }, {
  103. // title: '业务员',
  104. // dataIndex: 'principle',
  105. // key: 'principle',
  106. // }
  107. ],
  108. data: []
  109. };
  110. },
  111. closeDesc(){
  112. this.setState({
  113. categoryArr:[],
  114. followData:'',
  115. visitModul:false
  116. },()=>{
  117. this.loadReaded(this.state.pagination.current);
  118. })
  119. },
  120. category() {
  121. $.ajax({
  122. method: "get",
  123. dataType: "json",
  124. crossDomain: false,
  125. url: globalConfig.context + "/api/admin/Varieties/getSuperList",
  126. data: {},
  127. success: function (data) {
  128. let thedata = data.data;
  129. let theArr = [];
  130. if (!thedata) {
  131. if (data.error && data.error.length) {
  132. message.warning(data.error[0].message);
  133. }
  134. thedata = {};
  135. } else {
  136. thedata.map(function (item, index) {
  137. theArr.push({
  138. value: item.id,
  139. key: item.cname,
  140. });
  141. });
  142. }
  143. this.setState({
  144. categoryArr: theArr,
  145. });
  146. }.bind(this),
  147. });
  148. },
  149. //主菜单请求
  150. mainMenu(){
  151. this.setState({
  152. loading:true
  153. });
  154. $.ajax({
  155. method: "get",
  156. dataType: "json",
  157. crossDomain: false,
  158. url: globalConfig.context + "/api/admin/selectNavList",
  159. data: {
  160. },
  161. success:function(data){
  162. if (!data.data) {
  163. if (data.error && data.error.length) {
  164. message.warning(data.error[0].message);
  165. return;
  166. };
  167. };
  168. this.setState({
  169. menu:data.data
  170. });
  171. }.bind(this),
  172. }).always(function(data){
  173. this.setState({
  174. loading:false
  175. })
  176. }.bind(this))
  177. },
  178. finId(text){
  179. var data=this.state.menu||[];
  180. var rid='';
  181. switch(text) {
  182. case 1:
  183. data.map(function(nub, index) {
  184. if(nub.url.indexOf('demand') != -1) {
  185. rid = nub.id;
  186. }
  187. });
  188. break;
  189. case 2:
  190. data.map(function(nub, index) {
  191. if(nub.url.indexOf('demand') != -1) {
  192. rid = nub.id;
  193. }
  194. });
  195. break;
  196. case 3:
  197. data.map(function(nub, index) {
  198. if(nub.url.indexOf('achievement') != -1) {
  199. rid = nub.id;
  200. }
  201. });
  202. break;
  203. case 4:
  204. data.map(function(nub, index) {
  205. if(nub.url.indexOf('achievement') != -1) {
  206. rid = nub.id;
  207. }
  208. });
  209. break;
  210. case 5:
  211. data.map(function(nub, index) {
  212. if(nub.url.indexOf('order') != -1) {
  213. rid = nub.id;
  214. }
  215. });
  216. break;
  217. case 6:
  218. data.map(function(nub, index) {
  219. if(nub.url.indexOf('order') != -1) {
  220. rid = nub.id;
  221. }
  222. });
  223. break;
  224. case 7:
  225. data.map(function(nub, index) {
  226. if(nub.url.indexOf('servicesManage') != -1) {
  227. rid = nub.id;
  228. }
  229. });
  230. break;
  231. default:
  232. rid='';
  233. }
  234. return rid;
  235. },
  236. //跳转详情
  237. setStore(record){
  238. localStorage.setItem('newData',{});
  239. let ids = record.noticeType;
  240. let rid = this.finId(ids) || "";
  241. var urls='',
  242. dataJson={};
  243. switch (ids) {
  244. case 1:
  245. urls = "/admin/demand.html?rid=" + rid +"#techDemandAudit";
  246. dataJson = {
  247. "id":record.uid,
  248. //"id":"3f93588b-332e-4353-bbfd-f1451b4b390c",
  249. "dataCategory":"0"
  250. };
  251. break;
  252. case 2:
  253. urls = "/admin/demand.html?rid=" + rid+ "#techDemandPublish";
  254. dataJson = {
  255. "id":record.uid,
  256. //"id":"40f77e32-29fa-4a85-a6f0-7c4986bdc5e3",
  257. "dataCategory":'1'
  258. };
  259. break ;
  260. case 3:
  261. urls = "/admin/achievement.html?rid=" + rid +"#techAchievementAudit";
  262. dataJson = {
  263. "id":record.uid,
  264. //"id":"f09d5c08-4a8b-48a6-9753-86006f1a53cb",
  265. "ownerType":'1'
  266. };
  267. break ;
  268. case 4:
  269. urls = "/admin/achievement.html?rid=" + rid + "#techAchievementPublish";
  270. dataJson = {
  271. "id":record.uid,
  272. //"id":"953c9ef7-6cf6-4ab7-af89-c01521998fed",
  273. "ownerType":'1'
  274. };
  275. break ;
  276. case 5:
  277. urls = "/admin/order.html?rid=" + rid + "#myService";
  278. dataJson = {
  279. "orderNo":record.orderNo
  280. //"orderNo":"175557414077480960"
  281. };
  282. break ;
  283. case 6:
  284. urls = "/admin/order.html?rid=" + rid + "#mySettlement";
  285. dataJson = {
  286. "orderNo":record.orderNo
  287. //"orderNo":"180714111314051072"
  288. };
  289. break ;
  290. case 7:
  291. urls = "/admin/servicesManage/projectOrder.html?rid=" + rid + "#projectManage";
  292. dataJson = {
  293. //"id":record.id,
  294. "id":"69e2d8ca984240a4b9c90daac69fe5e3",
  295. "buyerType":"1"
  296. };
  297. break ;
  298. default :
  299. urls:'#';
  300. dataJson = {};
  301. };
  302. console.log(rid);
  303. if(rid){
  304. var data = dataJson;
  305. var newData = JSON.stringify(data);
  306. localStorage.setItem('newData',newData);
  307. window.location.href = globalConfig.context +urls;
  308. }
  309. },
  310. loadReaded(pageNo) {
  311. this.state.data = [];
  312. this.setState({
  313. loading: true
  314. });
  315. $.ajax({
  316. method: "get",
  317. dataType: "json",
  318. crossDomain: false,
  319. url: globalConfig.context + "/api/admin/notice/readed",
  320. data: {
  321. pageNo: pageNo || 1,
  322. pageSize: this.state.pagination.pageSize,
  323. type:this.state.unreadDataType,
  324. }
  325. }).done((data) => {
  326. if (!data.data) {
  327. if (data.error && data.error.length) {
  328. message.warning(data.error[0].message);
  329. return;
  330. };
  331. };
  332. this.state.data = [];
  333. for (let i = 0; i < data.data.list.length; i++) {
  334. let thisdata = data.data.list[i];
  335. this.state.data.push({
  336. key: i + 1,
  337. id: thisdata.id,
  338. rid: thisdata.rid,
  339. uid: thisdata.uid,
  340. aid: thisdata.aid,
  341. noticeType: thisdata.noticeType,
  342. year: thisdata.year,
  343. noticeTypeName: thisdata.noticeTypeName,
  344. content: thisdata.content,
  345. createTime: thisdata.createTime,
  346. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  347. principle: thisdata.principle,
  348. unitName: thisdata.unitName
  349. });
  350. };
  351. this.state.pagination.current = data.data.pageNo;
  352. this.state.pagination.total = data.data.totalCount;
  353. this.setState({
  354. dataSource: this.state.data,
  355. pagination: this.state.pagination,
  356. });
  357. }).always(function () {
  358. this.setState({
  359. loading: false
  360. });
  361. }.bind(this));
  362. },
  363. loadUnread(pageNo) {
  364. this.state.data = [];
  365. this.setState({
  366. loading: true
  367. });
  368. $.ajax({
  369. method: "get",
  370. dataType: "json",
  371. crossDomain: false,
  372. url: globalConfig.context + "/api/admin/notice/unread",
  373. data: {
  374. }
  375. }).done((data) => {
  376. if (data.error && data.error.length) {
  377. message.warning(data.error[0].message);
  378. return;
  379. }else{
  380. let arr = data.data.filter(v=>v.list.length > 0)
  381. if(arr.length) {
  382. this.setState({
  383. newVisible: true
  384. });
  385. }
  386. let index = data.data.findIndex(v=>v.list.length > 0);
  387. if(index >= 0){
  388. data.data[index].isRead = true;
  389. this.setState({
  390. unreadDataType: index ? data.data[index]['id']+'' : '0',
  391. unreadDataIndex:index,
  392. });
  393. }else{
  394. this.setState({
  395. unreadDataType: data.data[0]['id']+'',
  396. unreadDataIndex:'0',
  397. });
  398. }
  399. this.setState({
  400. unreadData: data.data,
  401. });
  402. }
  403. }).always(function () {
  404. this.setState({
  405. loading: false,
  406. });
  407. }.bind(this));
  408. },
  409. componentWillMount() {
  410. // this.loadReaded();
  411. this.loadUnread();
  412. this.mainMenu();
  413. },
  414. handleOk() {
  415. let arr = this.state.unreadData.filter(v=>v.list.length > 0 && !v.isRead);
  416. if(arr.length > 0){
  417. message.warning('还存在未读消息,请查看后再关闭当前页面!');
  418. return;
  419. }else{
  420. this.setState({
  421. newVisible: false
  422. });
  423. }
  424. },
  425. render() {
  426. return (
  427. <div className="set-content">
  428. <div className="set-title">
  429. <span>信息中心</span>
  430. </div>
  431. <Spin spinning={this.state.loading} className="spin-box">
  432. <Tabs defaultActiveKey={this.state.unreadDataType} activeKey={this.state.unreadDataType} onChange={v=>{
  433. let index = this.state.unreadData.findIndex(d=>d.id == v);
  434. this.state.unreadData[index].isRead = true;
  435. this.setState({
  436. unreadDataIndex:index,
  437. unreadData:this.state.unreadData,
  438. unreadDataType:v
  439. },()=>{
  440. if(this.state.dataSourceType === '2'){
  441. this.loadReaded()
  442. }
  443. })
  444. }}>
  445. {
  446. this.state.unreadData.map((v)=>(
  447. <Tabs.TabPane
  448. key={v.id+''}
  449. tab={<div>
  450. {v.list.length === 0 || v.isRead ? null : <div style={{width:'8px',height:"8px",borderRadius:'8px',background:'#f00',position: 'absolute',right: '5px', top: '2px'}}/>}
  451. {v.name}
  452. </div>
  453. }/>
  454. ))
  455. }
  456. </Tabs>
  457. <Tabs defaultActiveKey="1" type="card" tabPosition='left' value={this.state.dataSourceType} onChange={(v)=>{
  458. this.setState({
  459. dataSourceType:v
  460. })
  461. if(v === '2'){
  462. this.loadReaded()
  463. }
  464. }}>
  465. <Tabs.TabPane tab={'未读'} key="1">
  466. <Table
  467. bordered
  468. columns={this.state.columns}
  469. dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
  470. pagination={false}
  471. />
  472. </Tabs.TabPane>
  473. <Tabs.TabPane tab="已读" key="2">
  474. <Table
  475. bordered
  476. columns={this.state.columns}
  477. dataSource={this.state.dataSource}
  478. pagination={this.state.pagination}
  479. />
  480. </Tabs.TabPane>
  481. </Tabs>
  482. </Spin>
  483. <Modal
  484. maskClosable={false}
  485. style={{ position: "relative" }}
  486. title="消息提醒"
  487. visible={this.state.newVisible}
  488. width={1000}
  489. closable={false}
  490. footer={null}
  491. >
  492. <Spin spinning={this.state.loading} className="spin-box">
  493. <Tabs defaultActiveKey={this.state.unreadDataType} activeKey={this.state.unreadDataType} onChange={v=>{
  494. let index = this.state.unreadData.findIndex(d=>d.id == v);
  495. this.state.unreadData[index].isRead = true;
  496. this.setState({
  497. unreadDataIndex:index,
  498. unreadData:this.state.unreadData,
  499. unreadDataType:v
  500. })
  501. }}>
  502. {
  503. this.state.unreadData.map((v)=>(
  504. <Tabs.TabPane
  505. key={v.id+''}
  506. tab={<div>
  507. {v.list.length === 0 || v.isRead ? null : <div style={{width:'8px',height:"8px",borderRadius:'8px',background:'#f00',position: 'absolute',right: '5px', top: '2px'}}/>}
  508. {v.name}
  509. </div>
  510. }/>
  511. ))
  512. }
  513. </Tabs>
  514. <Table
  515. columns={this.state.columns}
  516. dataSource={this.state.unreadData[this.state.unreadDataIndex] ? this.state.unreadData[this.state.unreadDataIndex].list : []}
  517. pagination={false}
  518. />
  519. </Spin>
  520. <Button
  521. onClick={this.handleOk}
  522. type={"primary"}
  523. style={{
  524. position: "relative",
  525. left: "50%",
  526. transform: "translateX(-50%)",
  527. bottom: -10
  528. }}
  529. >
  530. 我已阅读以上信息
  531. </Button>
  532. </Modal>
  533. <FollowDetail
  534. categoryArr={this.state.categoryArr}
  535. followData={this.state.followData}
  536. visitModul={this.state.visitModul}
  537. closeDesc={this.closeDesc}
  538. />
  539. </div>
  540. );
  541. }
  542. });
  543. const Content = React.createClass({
  544. getInitialState() {
  545. return {
  546. loading: false,
  547. component:'<div></div>'
  548. };
  549. },
  550. getKey(key){
  551. switch(key){
  552. case 'normal':
  553. require.ensure([], () => {
  554. this.setState({
  555. component: <MessageModal />,
  556. });
  557. });
  558. break;
  559. case "contacts":
  560. let Module = require('./contacts/index').default;
  561. require.ensure([], () => {
  562. this.setState({
  563. component: <Module />,
  564. });
  565. });
  566. break;
  567. default:
  568. require.ensure([], () => {
  569. let Module = require('../module').default;
  570. this.setState({
  571. component:<Module />
  572. });
  573. });
  574. }
  575. window.location.hash=key;
  576. },
  577. componentWillMount() {
  578. if (window.location.hash) {
  579. this.getKey((window.location.hash).slice(1));
  580. } else {
  581. this.getKey('normal');
  582. };
  583. },
  584. render() {
  585. return (
  586. <div className="manage-content">
  587. <LeftTab handlekey={this.getKey} />
  588. <div className="content-right">
  589. <Spin spinning={this.state.loading} className='spin-box'>
  590. <div className="index-content">
  591. {this.state.component}
  592. </div>
  593. </Spin>
  594. </div>
  595. </div>
  596. )
  597. }
  598. });
  599. export default Content;
  600. // <div className="index-content">
  601. // <div className="index-userdata clearfix">
  602. // <p className="acc-title">{this.state.number}</p>
  603. // <div className="userdata-img">
  604. // <img src={globalConfig.staticHost + "/upload" + this.state.personPortraitUrl} alt="" />
  605. // </div>
  606. // <div className="userdata-content">
  607. // {(() => {
  608. // switch (userData.lvl || this.state.userlvl) {
  609. // case '0':
  610. // return <p className="userdata-lvl">等级:<span>LV1</span> 普通用户</p>;
  611. // case '1':
  612. // return <p className="userdata-lvl">等级:<span>LV2</span> 已认证用户</p>;
  613. // };
  614. // })()}
  615. // <p>完善资料 {this.state.per}% ,<a href="./set.html">继续完善</a>,有助于提高您的资信</p>
  616. // <p className="userdata-relate" style={{ 'display': 'none' }}>
  617. // <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
  618. // <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
  619. // <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
  620. // </p>
  621. // <div className="userdata-follow">已有<a href="">{this.state.follow}</a>人关注你</div>
  622. // </div>
  623. // </div>
  624. // <div className="index-record">
  625. // <p className="acc-title">我的轨迹</p>
  626. // <ul className="record-list clearfix">
  627. // <li>技术成果:<a href="">{this.state.chengguo}</a>项</li>
  628. // <li>技术开发:<a href="">{this.state.kaifa}</a>项</li>
  629. // <li>科技服务:<a href="">{this.state.fuwu}</a>项</li>
  630. // <li>发布需求:<a href="">{this.state.xuqiu}</a>项</li>
  631. // </ul>
  632. // </div>
  633. // <div className="index-activity">
  634. // <Tabs defaultActiveKey="1" onChange={this.tabChange}>
  635. // <TabPane tab="活动" key="1">
  636. // <p className="acc-title">即将举办的活动</p>
  637. // <ul className="activity-list">
  638. // {
  639. // this.state.activityArr.map(function (item, i) {
  640. // return <li key={i}>
  641. // <span className="list-type">[{item.type}]</span>
  642. // <span className="list-title">{item.title}</span>
  643. // <a href={item.link}>报名</a>
  644. // <span className="list-time">{item.time}</span>
  645. // </li>;
  646. // })
  647. // }
  648. // </ul>
  649. // </TabPane>
  650. // <TabPane tab="其他" key="2">Content of Tab Pane 2</TabPane>
  651. // </Tabs>
  652. // </div>
  653. // </div>