topTab.jsx 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. import React from 'react';
  2. import { Row, Col, Icon, Modal, Button, Spin, Select, Input, message, Badge, Table, Tabs } from 'antd';
  3. import { provinceArr } from '../dataDic.js';
  4. import { companySearch } from '../tools.js';
  5. import './topTab.less';
  6. import ajax from 'jquery/src/ajax/xhr.js'
  7. import $ from 'jquery/src/ajax';
  8. import logo from '../../../image/acc-logo.png';
  9. const MessageModal = React.createClass({
  10. getInitialState() {
  11. return {
  12. visible: false,
  13. loading: false,
  14. pagination: {
  15. defaultCurrent: 1,
  16. defaultPageSize: 10,
  17. showQuickJumper: true,
  18. pageSize: 10,
  19. onChange: function (page) {
  20. this.loadReaded(page);
  21. }.bind(this),
  22. showTotal: function (total) {
  23. return '共' + total + '条数据';
  24. }
  25. },
  26. columns: [
  27. {
  28. title: '编号',
  29. dataIndex: 'key',
  30. key: 'key'
  31. }, {
  32. title: '类型',
  33. dataIndex: 'noticeType',
  34. key: 'noticeType',
  35. render: (text) => {
  36. switch (text) {
  37. case 1:
  38. return <a href={globalConfig.context + "/admin/servicesManage/patent.html#comprehensive"}> 专利申请管理 </a>;
  39. case 3:
  40. return <a href={globalConfig.context + "/admin/servicesManage/copyright.html#copyright"}> 软著申请管理 </a>;
  41. case 2:
  42. return <a href={globalConfig.context + "/admin/servicesManage/highTech.html#highTechApply"}> 高企认定管理 </a>;
  43. case 4:
  44. return <a href={globalConfig.context + "/admin/servicesManage/technology.html#applyManage"}> 科技项目申报管理 </a>;
  45. }
  46. }
  47. }, {
  48. title: '时间',
  49. dataIndex: 'createTimeFormattedDate',
  50. key: 'createTimeFormattedDate'
  51. }, {
  52. title: '内容',
  53. dataIndex: 'content',
  54. key: 'content',
  55. }
  56. ],
  57. data: []
  58. };
  59. },
  60. loadReaded(pageNo) {
  61. this.state.data = [];
  62. this.setState({
  63. loading: true
  64. });
  65. $.ajax({
  66. method: "get",
  67. dataType: "json",
  68. crossDomain: false,
  69. url: globalConfig.context + "/api/admin/notice/readed",
  70. data: {
  71. pageNo: pageNo || 1,
  72. pageSize: this.state.pagination.pageSize,
  73. }
  74. }).done((data) => {
  75. if (!data.data) {
  76. if (data.error && data.error.length) {
  77. message.warning(data.error[0].message);
  78. return;
  79. };
  80. };
  81. this.state.data = [];
  82. for (let i = 0; i < data.data.list.length; i++) {
  83. let thisdata = data.data.list[i];
  84. this.state.data.push({
  85. key: i + 1,
  86. id: thisdata.id,
  87. aid: thisdata.aid,
  88. noticeType: thisdata.noticeType,
  89. content: thisdata.content,
  90. createTime: thisdata.createTime,
  91. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  92. });
  93. };
  94. this.state.pagination.current = data.data.pageNo;
  95. this.state.pagination.total = data.data.totalCount;
  96. this.setState({
  97. dataSource: this.state.data,
  98. pagination: this.state.pagination
  99. });
  100. }).always(function () {
  101. this.setState({
  102. loading: false
  103. });
  104. }.bind(this));
  105. },
  106. loadUnread() {
  107. this.state.data = [];
  108. this.setState({
  109. loading: true
  110. });
  111. $.ajax({
  112. method: "get",
  113. dataType: "json",
  114. crossDomain: false,
  115. url: globalConfig.context + "/api/admin/notice/unread",
  116. // data: {
  117. // pageNo: pageNo || 1,
  118. // pageSize: this.state.pagination.pageSize,
  119. // }
  120. }).done((data) => {
  121. if (!data.data) {
  122. if (data.error && data.error.length) {
  123. message.warning(data.error[0].message);
  124. return;
  125. };
  126. };
  127. this.state.data = [];
  128. for (let i = 0; i < data.data.list.length; i++) {
  129. let thisdata = data.data.list[i];
  130. this.state.data.push({
  131. key: i + 1,
  132. id: thisdata.id,
  133. aid: thisdata.aid,
  134. noticeType: thisdata.noticeType,
  135. content: thisdata.content,
  136. createTime: thisdata.createTime,
  137. createTimeFormattedDate: thisdata.createTimeFormattedDate,
  138. });
  139. };
  140. this.setState({
  141. unreadData: this.state.data
  142. });
  143. // this.state.pagination.current = data.data.pageNo;
  144. // this.state.pagination.total = data.data.totalCount;
  145. // this.setState({
  146. // dataSource: this.state.data,
  147. // pagination: this.state.pagination
  148. // });
  149. }).always(function () {
  150. this.setState({
  151. loading: false
  152. });
  153. }.bind(this));
  154. },
  155. componentWillReceiveProps(nextProps) {
  156. if (!this.state.visible && nextProps.showDesc) {
  157. this.loadReaded();
  158. this.loadUnread();
  159. };
  160. this.state.visible = nextProps.showDesc
  161. },
  162. handleOk() {
  163. this.setState({
  164. visible: false,
  165. });
  166. this.props.closeDesc(false, true);
  167. },
  168. handleCancel(e) {
  169. this.setState({
  170. visible: false,
  171. });
  172. this.props.closeDesc(false, true);
  173. },
  174. render() {
  175. return (
  176. <div className="topTab-modal">
  177. <Spin spinning={this.state.loading} className='spin-box'>
  178. <Modal title="信息中心" visible={this.state.visible}
  179. onOk={this.handleOk} onCancel={this.handleCancel}
  180. width='600px' footer={
  181. <Button key="back" onClick={this.handleCancel}>返回</Button>
  182. }
  183. >
  184. <Tabs defaultActiveKey="1">
  185. <Tabs.TabPane tab="新信息" key="1">
  186. <Table columns={this.state.columns}
  187. dataSource={this.state.unreadData}
  188. pagination={false} />
  189. </Tabs.TabPane>
  190. <Tabs.TabPane tab="已读信息" key="2">
  191. <Table columns={this.state.columns}
  192. dataSource={this.state.dataSource}
  193. pagination={this.state.pagination} />
  194. </Tabs.TabPane>
  195. </Tabs>
  196. </Modal>
  197. </Spin>
  198. </div>
  199. );
  200. }
  201. });
  202. const UserModal = React.createClass({
  203. getInitialState() {
  204. return {
  205. visible: false,
  206. loading: false,
  207. provinceOption: []
  208. };
  209. },
  210. componentWillMount() {
  211. let _me = this;
  212. provinceArr.map(function (item) {
  213. _me.state.provinceOption.push(
  214. <Select.Option value={item} key={item}>{item}</Select.Option>
  215. )
  216. });
  217. },
  218. loadData() {
  219. this.setState({
  220. loading: true
  221. });
  222. $.ajax({
  223. method: "get",
  224. dataType: "json",
  225. crossDomain: false,
  226. url: globalConfig.context + "/api/admin/adminInfo",
  227. success: function (data) {
  228. if (!data.data) {
  229. if (data.error[0] && data.error[0]) {
  230. message.warning(data.error[0].message);
  231. };
  232. return;
  233. };
  234. this.setState({
  235. id: data.data.id,
  236. mobile: data.data.mobile,
  237. name: data.data.name,
  238. email: data.data.email,
  239. createTime: data.data.createTime,
  240. number: data.data.number,
  241. province: data.data.province,
  242. createTimeFormattedDate: data.data.createTimeFormattedDate
  243. });
  244. }.bind(this),
  245. }).always(function (data) {
  246. this.setState({
  247. loading: false
  248. });
  249. }.bind(this));
  250. },
  251. componentWillReceiveProps(nextProps) {
  252. if (!this.state.visible && nextProps.showDesc) {
  253. this.loadData();
  254. };
  255. this.state.visible = nextProps.showDesc
  256. },
  257. handleOk() {
  258. this.setState({
  259. loading: true
  260. });
  261. $.ajax({
  262. method: "post",
  263. dataType: "json",
  264. crossDomain: false,
  265. url: globalConfig.context + "/api/admin/updateAdminInfo",
  266. data: {
  267. id: this.state.id,
  268. mobile: this.state.mobile,
  269. name: this.state.name,
  270. email: this.state.email,
  271. province: this.state.province,
  272. password: this.state.password,
  273. pwd: this.state.pwd
  274. }
  275. }).always(function (data) {
  276. if (data.error && data.error.length) {
  277. message.warning(data.error[0].message);
  278. this.setState({
  279. loading: false
  280. });
  281. } else {
  282. message.success('保存成功!');
  283. this.props.closeDesc(false, true);
  284. };
  285. }.bind(this));
  286. },
  287. handleCancel(e) {
  288. this.setState({
  289. visible: false,
  290. });
  291. this.props.closeDesc(false);
  292. },
  293. render() {
  294. return (
  295. <div className="topTab-modal">
  296. <Spin spinning={this.state.loading} className='spin-box'>
  297. <Modal title="用户设置" visible={this.state.visible}
  298. onOk={this.handleOk} onCancel={this.handleCancel}
  299. width='380px'
  300. >
  301. <ul className="modal-content">
  302. <li>
  303. <span className='modal-text'>名字</span>
  304. <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
  305. </li>
  306. <li>
  307. <span className='modal-text'>登录账号</span>
  308. <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
  309. </li>
  310. <li>
  311. <span className='modal-text'>省份</span>
  312. <Select placeholder="选择省份"
  313. style={{ width: 200 }}
  314. value={this.state.province}
  315. showSearch
  316. filterOption={companySearch}
  317. onChange={(e) => { this.setState({ province: e }) }}>
  318. {this.state.provinceOption}
  319. </Select>
  320. </li>
  321. <li>
  322. <span className='modal-text'>邮箱</span>
  323. <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
  324. </li>
  325. <li>
  326. <span className='modal-text'>密码</span>
  327. <Input value={this.state.password} onChange={(e) => { this.state.password = e.target.value; this.setState({ password: this.state.password }); }} />
  328. </li>
  329. <li>
  330. <span className='modal-text'>原密码</span>
  331. <Input value={this.state.pwd} onChange={(e) => { this.state.pwd = e.target.value; this.setState({ pwd: this.state.pwd }); }} />
  332. </li>
  333. </ul>
  334. </Modal>
  335. </Spin>
  336. </div>
  337. );
  338. }
  339. });
  340. const TopTab = React.createClass({
  341. getInitialState() {
  342. return {
  343. username: '请登录!',
  344. };
  345. },
  346. logOut() {
  347. let theActive = this.props.active;
  348. $.ajax({
  349. method: "get",
  350. dataType: "json",
  351. url: globalConfig.context + "/login",
  352. }).done(function (data) {
  353. window.location.href = globalConfig.context + "/admin/login.html"
  354. });
  355. },
  356. componentWillMount() {
  357. this.loadData();
  358. },
  359. loadData() {
  360. this.setState({
  361. loading: true
  362. });
  363. $.ajax({
  364. method: "get",
  365. dataType: "json",
  366. crossDomain: false,
  367. url: globalConfig.context + "/api/admin/notice/unreadCount",
  368. success: function (data) {
  369. if (!data.data) {
  370. if (data.error[0] && data.error[0]) {
  371. message.warning(data.error[0].message);
  372. return;
  373. };
  374. };
  375. this.setState({
  376. badge: data.data,
  377. });
  378. }.bind(this),
  379. }).always(function (data) {
  380. this.setState({
  381. loading: false
  382. });
  383. }.bind(this));
  384. },
  385. closeUserModal(e, s) {
  386. this.state.userModalShow = e;
  387. if (s) {
  388. this.loadData();
  389. };
  390. },
  391. closeMessageModal(e, s) {
  392. this.state.messageModalShow = e;
  393. if (s) {
  394. this.loadData();
  395. };
  396. },
  397. render() {
  398. return (
  399. <div className="account-top" >
  400. <div className="acc-top-user">
  401. <span className="acc-top-user-name">欢迎您 , {adminData.name || adminData.mobile ? <a onClick={() => { this.setState({ userModalShow: true }); }}> {adminData.name || adminData.mobile} </a> : <a onClick={this.logOut}>{this.state.username}</a>} <a onClick={this.logOut}>[ 退出 ]</a></span>
  402. <span className="acc-top-user-toindex"><a href={globalConfig.avatarHost + "/html/index.html"}>返回首页</a></span>
  403. <a onClick={() => { this.setState({ messageModalShow: true }); }} className="user-badge">
  404. <Icon type="mail" />
  405. {(() => {
  406. if (this.state.badge) {
  407. return <Badge status="processing" />
  408. }
  409. })()}
  410. </a>
  411. </div>
  412. <div className="acc-index">
  413. <div className="acc-index-imgbox">
  414. <img src={logo} alt="" />
  415. </div>
  416. <span><a href={globalConfig.context + "/admin/index.html"}>管理中心首页</a></span>
  417. </div>
  418. <div className="acc-top-tab">
  419. <Row>
  420. <Col style={{ display: window.showUserManage ? 'block' : 'none' }} className={this.props.active === 'userManage' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/userManage.html"}>用户管理</a></Col>
  421. <Col style={{ display: window.showServices ? 'block' : 'none' }} className={this.props.active === 'services' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/servicesManage/patent.html"}>科技服务管理</a></Col>
  422. <Col style={{ display: window.showAchievement ? 'block' : 'none' }} className={this.props.active === 'achievement' ? 'active' : ''} span={3}><a href="">科技成果管理</a></Col>
  423. <Col style={{ display: window.showDemand ? 'block' : 'none' }} className={this.props.active === 'demand' ? 'active' : ''} span={3}><a href="">科技需求管理</a></Col>
  424. <Col style={{ display: window.showIdea ? 'block' : 'none' }} className={this.props.active === 'idea' ? 'active' : ''} span={3}><a href="">科技思想管理</a></Col>
  425. <Col style={{ display: window.showSystem ? 'block' : 'none' }} className={this.props.active === 'system' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/set.html"}>系统设置</a></Col>
  426. </Row>
  427. </div>
  428. <UserModal showDesc={this.state.userModalShow} closeDesc={this.closeUserModal} />
  429. <MessageModal showDesc={this.state.messageModalShow} closeDesc={this.closeMessageModal} />
  430. </div >
  431. )
  432. }
  433. });
  434. export default TopTab;