contractDetail.jsx 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Input, Select, DatePicker, Button, Table, Form, Upload } from 'antd';
  3. import './contract.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import $ from 'jquery/src/ajax';
  6. import moment from 'moment';
  7. import { copyrightStateList } from '../../../dataDic.js';
  8. import { companySearch, getCopyrightState, getPatentType, getPatentState, gethighTechState, getTechnologyState } from '../../../tools.js';
  9. const ContractDetailForm = Form.create()(React.createClass({
  10. getInitialState() {
  11. return {
  12. visible: false,
  13. loading: false,
  14. stateOption: [],
  15. stateTable: [],
  16. contactsOption: [],
  17. stateColumns: [
  18. {
  19. title: '申请状态',
  20. dataIndex: 'status',
  21. key: 'status',
  22. render: (text) => { return getCopyrightState(text) }
  23. }, {
  24. title: '处理时间',
  25. dataIndex: 'recordTimeFormattedDate',
  26. key: 'recordTimeFormattedDate',
  27. }, {
  28. title: '负责人',
  29. dataIndex: 'principal',
  30. key: 'principal',
  31. }, {
  32. title: '操作人',
  33. dataIndex: 'operator',
  34. key: 'operator',
  35. }, {
  36. title: '备注',
  37. dataIndex: 'comment',
  38. key: 'comment',
  39. }
  40. ],
  41. patentColumns: [
  42. {
  43. title: '专利名称',
  44. dataIndex: 'patentName',
  45. key: 'patentName',
  46. width: 200
  47. }, {
  48. title: '专利编号',
  49. dataIndex: 'patentNumber',
  50. key: 'patentNumber',
  51. width: 200
  52. }, {
  53. title: '专利状态',
  54. dataIndex: 'patentState',
  55. key: 'patentState',
  56. render: text => { return getPatentState(text) },
  57. width: 120
  58. }, {
  59. title: '专利类型',
  60. dataIndex: 'patentCatagory',
  61. key: 'patentCatagory',
  62. render: text => { return getPatentType(text) },
  63. width: 160
  64. }, {
  65. title: '当前操作人',
  66. dataIndex: 'principal',
  67. key: 'principal',
  68. width: 200
  69. }
  70. ],
  71. copyrightColumns: [
  72. {
  73. title: '软著名称',
  74. dataIndex: 'copyrightName',
  75. key: 'copyrightName',
  76. width: 200
  77. }, {
  78. title: '软著编号',
  79. dataIndex: 'serialNumber',
  80. key: 'serialNumber',
  81. width: 200
  82. }, {
  83. title: '软著状态',
  84. dataIndex: 'status',
  85. key: 'status',
  86. render: (text) => { return getCopyrightState(text) },
  87. width: 120
  88. }, {
  89. title: '加急天数',
  90. dataIndex: 'inUrgent',
  91. key: 'inUrgent',
  92. render: (text) => {
  93. switch (text) {
  94. case 0:
  95. return '不加急(45个工作日)';
  96. case 3:
  97. return '3个工作日';
  98. case 5:
  99. return '5个工作日';
  100. case 10:
  101. return '6-10个工作日';
  102. case 15:
  103. return '11-15个工作日';
  104. case 20:
  105. return '16-20个工作日';
  106. case 25:
  107. return '21-25个工作日';
  108. case 30:
  109. return '26-30个工作日';
  110. case 35:
  111. return '31-35个工作日';
  112. }
  113. },
  114. width: 220
  115. }, {
  116. title: '当前操作人',
  117. dataIndex: 'principal',
  118. key: 'principal'
  119. }
  120. ],
  121. highTechColumns: [
  122. {
  123. title: '申请年份',
  124. dataIndex: 'year',
  125. key: 'year',
  126. width: 200
  127. }, {
  128. title: '申请状态',
  129. dataIndex: 'state',
  130. key: 'state',
  131. render: (text) => { return gethighTechState(text) },
  132. width: 200
  133. }, {
  134. title: '证书编号',
  135. dataIndex: 'certificateNumber',
  136. key: 'certificateNumber',
  137. width: 260
  138. }, {
  139. title: '当前操作人',
  140. dataIndex: 'techPrincipal',
  141. key: 'techPrincipal',
  142. width: 200
  143. }
  144. ],
  145. techProjectColumns: [
  146. {
  147. title: '项目名称',
  148. dataIndex: 'projectName',
  149. key: 'projectName',
  150. width: 260
  151. }, {
  152. title: '项目类型',
  153. dataIndex: 'projectCatagory',
  154. key: 'projectCatagory',
  155. width: 200
  156. }, {
  157. title: '项目状态',
  158. dataIndex: 'state',
  159. key: 'state',
  160. render: text => { return getTechnologyState(text) },
  161. width: 120
  162. }, {
  163. title: '技术领域',
  164. dataIndex: 'techField',
  165. key: 'techField',
  166. width: 200
  167. }, {
  168. title: '当前操作人',
  169. dataIndex: 'principle',
  170. key: 'principle',
  171. width: 200
  172. }
  173. ]
  174. };
  175. },
  176. componentWillMount() {
  177. this.loadData();
  178. this.loadColumnsData();
  179. },
  180. loadData(id) {
  181. this.setState({
  182. loading: true
  183. });
  184. $.when($.ajax({
  185. method: "get",
  186. dataType: "json",
  187. crossDomain: false,
  188. cache: false,
  189. url: globalConfig.context + "/api/admin/contract/log",
  190. data: {
  191. cid: id || this.props.data.id
  192. }
  193. }), $.ajax({
  194. method: "get",
  195. dataType: "json",
  196. crossDomain: false,
  197. cache: false,
  198. url: globalConfig.context + "/api/admin/contract/detail",
  199. data: {
  200. id: id || this.props.data.id
  201. }
  202. })).done((data1, data2) => {
  203. let _me = this;
  204. //状态流转table
  205. this.state.stateTable = [];
  206. if (data1[0].error && data1[0].error.length) {
  207. message.warning(data1[0].error[0].message);
  208. } else {
  209. data1[0].data.map(function (item, i) {
  210. _me.state.stateTable.push({
  211. key: i,
  212. recordTimeFormattedDate: item.recordTimeFormattedDate,
  213. status: item.status,
  214. principal: item.principal,
  215. operator: item.operator,
  216. comment: item.comment
  217. });
  218. });
  219. };
  220. //获取详细数据
  221. if (!data2[0].data) {
  222. if (data2[0].error && data2[0].error.length) {
  223. message.warning(data2[0].error[0].message);
  224. };
  225. } else {
  226. let detailData = data2[0].data;
  227. this.setState({
  228. data: detailData
  229. });
  230. };
  231. }).always(function () {
  232. this.setState({
  233. loading: false
  234. });
  235. }.bind(this));
  236. },
  237. loadColumnsData(id) {
  238. this.setState({
  239. loading: true
  240. });
  241. $.when($.ajax({
  242. method: "get",
  243. dataType: "json",
  244. crossDomain: false,
  245. cache: false,
  246. url: globalConfig.context + "/api/admin/contract/techProject",
  247. data: {
  248. contractId: id || this.props.data.id
  249. }
  250. }), $.ajax({
  251. method: "get",
  252. dataType: "json",
  253. crossDomain: false,
  254. cache: false,
  255. url: globalConfig.context + "/api/admin/contract/cognizance",
  256. data: {
  257. contractId: id || this.props.data.id
  258. }
  259. }), $.ajax({
  260. method: "get",
  261. dataType: "json",
  262. crossDomain: false,
  263. cache: false,
  264. url: globalConfig.context + "/api/admin/contract/copyright",
  265. data: {
  266. contractId: id || this.props.data.id
  267. }
  268. }), $.ajax({
  269. method: "get",
  270. dataType: "json",
  271. crossDomain: false,
  272. cache: false,
  273. url: globalConfig.context + "/api/admin/contract/patent",
  274. data: {
  275. contractId: id || this.props.data.id
  276. }
  277. })).done((data1, data2, data3, data4) => {
  278. let patentArr = [], techProjectArr = [], cognizanceArr = [], copyrightArr = [];
  279. if (!data1[0].data) {
  280. if (data1[0].error && data1[0].error.length) {
  281. message.warning(data1[0].error[0].message)
  282. };
  283. } else {
  284. data1[0].data.map(function (item, i) {
  285. techProjectArr.push({
  286. "key": i,
  287. "id": item.id, //科技项目ID
  288. "uid": item.uid, //用户ID
  289. "contractId": item.contractId, //合同ID
  290. "projectName": item.projectName, //项目名称
  291. "projectCatagory": item.projectCatagory, //项目类型
  292. "state": item.state, //状态
  293. "techField": item.techField, //领域
  294. "principle": item.principle, //当前负责人(技术员)
  295. "tableType": "techProject"
  296. });
  297. });
  298. };
  299. if (!data2[0].data) {
  300. if (data2[0].error && data2[0].error.length) {
  301. message.warning(data2[0].error[0].message)
  302. };
  303. } else {
  304. data2[0].data.map(function (item, i) {
  305. cognizanceArr.push({
  306. "key": i,
  307. "id": item.id, //科技项目ID
  308. "uid": item.uid, //用户ID
  309. "contractId": item.contractId, //合同ID
  310. "year": item.year,
  311. "serialNumber": item.serialNumber,
  312. "state": item.state, //状态
  313. "certificateNumber": item.certificateNumber,
  314. "techPrincipal": item.techPrincipal, //当前负责人(技术员)
  315. "tableType": "cognizance"
  316. });
  317. });
  318. };
  319. if (!data3[0].data) {
  320. if (data3[0].error && data3[0].error.length) {
  321. message.warning(data3[0].error[0].message)
  322. };
  323. } else {
  324. data3[0].data.map(function (item, i) {
  325. copyrightArr.push({
  326. "key": i,
  327. "id": item.id, //科技项目ID
  328. "uid": item.uid, //用户ID
  329. "contractId": item.contractId, //合同ID
  330. "copyrightName": item.copyrightName, //项目名称
  331. "serialNumber": item.serialNumber,
  332. "state": item.state, //状态
  333. "inUrgent": item.inUrgent, //加急天数
  334. "principal": item.principal, //当前负责人(技术员)
  335. "tableType": "copyright"
  336. });
  337. });
  338. };
  339. if (!data4[0].data) {
  340. if (data4[0].error && data4[0].error.length) {
  341. message.warning(data4[0].error[0].message)
  342. };
  343. } else {
  344. data4[0].data.map(function (item, i) {
  345. patentArr.push({
  346. "key": i,
  347. "id": item.id, //科技项目ID
  348. "uid": item.uid, //用户ID
  349. "contractId": item.contractId, //合同ID
  350. "patentName": item.patentName, //项目名称
  351. "patentNumber": item.patentNumber, //专利号
  352. "serialNumber": item.serialNumber, //编号
  353. "patentState": item.patentState, //状态
  354. "patentCatagory": item.patentCatagory, //专利类别
  355. "principal": item.principal, //当前负责人(技术员)
  356. "tableType": "patent"
  357. });
  358. });
  359. };
  360. this.setState({
  361. patentTableData: patentArr,
  362. copyrightTableData: copyrightArr,
  363. highTechTableData: cognizanceArr,
  364. techProjectTableData: techProjectArr
  365. });
  366. }).always(function () {
  367. this.setState({
  368. loading: false
  369. });
  370. }.bind(this));
  371. },
  372. componentWillReceiveProps(nextProps) {
  373. if (!this.props.visible && nextProps.visible) {
  374. this.loadData(nextProps.data.id);
  375. this.loadColumnsData(nextProps.data.id);
  376. };
  377. },
  378. tableRowClick(record, index) {
  379. switch (record.tableType) {
  380. case 'patent':
  381. window.open(globalConfig.context + "/user/account/services.html?contractId=" + record.contractId + "#patent");
  382. break;
  383. case 'copyright':
  384. window.open(globalConfig.context + "/user/account/services.html?contractId=" + record.contractId + "#copyright");
  385. break;
  386. case 'cognizance':
  387. window.open(globalConfig.context + "/user/account/services.html?contractId=" + record.contractId + "#cognizance");
  388. break;
  389. case 'techProject':
  390. window.open(globalConfig.context + "/user/account/services.html?contractId=" + record.contractId + "#technology");
  391. break;
  392. };
  393. },
  394. render() {
  395. const FormItem = Form.Item;
  396. const { getFieldDecorator } = this.props.form;
  397. const theData = this.state.data || {};
  398. const formItemLayout = {
  399. labelCol: { span: 6 },
  400. wrapperCol: { span: 18 },
  401. };
  402. const _me = this;
  403. return (
  404. <Form id="CopyrightDesc-form">
  405. <div className="clearfix">
  406. <FormItem className="half-item"
  407. {...formItemLayout}
  408. label="合同编号" >
  409. {getFieldDecorator('serialNumber')(
  410. <span>{theData.serialNumber}</span>
  411. )}
  412. </FormItem>
  413. <FormItem className="half-item"
  414. {...formItemLayout}
  415. label="公司名称" >
  416. {getFieldDecorator('unitName')(
  417. <span>{theData.unitName}</span>
  418. )}
  419. </FormItem>
  420. <FormItem className="half-item"
  421. {...formItemLayout}
  422. label="组织机构代码" >
  423. {getFieldDecorator('orgCode')(
  424. <span>{theData.orgCode}</span>
  425. )}
  426. </FormItem>
  427. <FormItem className="half-item"
  428. {...formItemLayout}
  429. label="公司地址" >
  430. {getFieldDecorator('address')(
  431. <span>{theData.address}</span>
  432. )}
  433. </FormItem>
  434. <FormItem className="half-item"
  435. {...formItemLayout}
  436. label="联系人" >
  437. <span>{this.state.contactsList ? this.state.contactsList[theData.contacts] : ''}</span>
  438. </FormItem>
  439. </div>
  440. <p style={{ fontSize: '14px', color: '#333' }}>状态流转记录: </p>
  441. <Table style={{ margin: '10px 0', background: "#eee" }}
  442. pagination={false}
  443. dataSource={this.state.stateTable}
  444. columns={this.state.stateColumns} />
  445. {theData.cognizanceYear ? <div>
  446. <div className="clearfix">
  447. <FormItem className="half-item"
  448. {...formItemLayout}
  449. label="高企申请">
  450. {getFieldDecorator('cognizanceYear', {
  451. initialValue: theData.cognizanceYear
  452. })(
  453. <span>{theData.cognizanceYear} 年</span>
  454. )}
  455. </FormItem>
  456. </div>
  457. <Table className="contract-Table" size="small" scroll={{ y: 240 }}
  458. columns={this.state.highTechColumns}
  459. dataSource={this.state.highTechTableData}
  460. pagination={false}
  461. onRowClick={this.tableRowClick} />
  462. </div> : <div></div>}
  463. {theData.patentNum ? <div>
  464. <div className="clearfix">
  465. <FormItem className="half-item"
  466. {...formItemLayout}
  467. label="专利申请">
  468. {getFieldDecorator('patentNum', {
  469. initialValue: theData.patentNum
  470. })(
  471. <span>{theData.patentNum} 条</span>
  472. )}
  473. </FormItem>
  474. </div>
  475. <Table className="contract-Table" size="small" scroll={{ y: 240 }}
  476. columns={this.state.patentColumns}
  477. dataSource={this.state.patentTableData}
  478. pagination={false}
  479. onRowClick={this.tableRowClick} />
  480. </div> : <div></div>}
  481. {theData.copyrightNum ? <div>
  482. <div className="clearfix">
  483. <FormItem className="half-item"
  484. {...formItemLayout}
  485. label="软著申请">
  486. {getFieldDecorator('copyrightNum', {
  487. initialValue: theData.copyrightNum
  488. })(
  489. <span>{theData.copyrightNum} 条</span>
  490. )}
  491. </FormItem>
  492. </div>
  493. <Table className="contract-Table" size="small" scroll={{ y: 240 }}
  494. columns={this.state.copyrightColumns}
  495. dataSource={this.state.copyrightTableData}
  496. pagination={false}
  497. onRowClick={this.tableRowClick} />
  498. </div> : <div></div>}
  499. {theData.techProjectNum ? <div>
  500. <div className="clearfix">
  501. <FormItem className="half-item"
  502. {...formItemLayout}
  503. label=" 科技项目申请">
  504. {getFieldDecorator('techProjectNum', {
  505. initialValue: theData.techProjectNum
  506. })(
  507. <span>{theData.techProjectNum} 条</span>
  508. )}
  509. </FormItem>
  510. </div>
  511. <Table className="contract-Table" size="small" scroll={{ y: 240 }}
  512. columns={this.state.techProjectColumns}
  513. dataSource={this.state.techProjectTableData}
  514. pagination={false}
  515. onRowClick={this.tableRowClick} />
  516. </div> : <div></div>}
  517. <FormItem style={{ marginTop: '20px' }}>
  518. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  519. </FormItem>
  520. </Form>
  521. );
  522. }
  523. }));
  524. const ContractDetail = React.createClass({
  525. getInitialState() {
  526. return {
  527. visible: false,
  528. loading: false
  529. };
  530. },
  531. componentWillReceiveProps(nextProps) {
  532. this.state.visible = nextProps.showDesc
  533. },
  534. showModal() {
  535. this.setState({
  536. visible: true,
  537. });
  538. },
  539. handleOk() {
  540. this.setState({
  541. visible: false,
  542. });
  543. this.props.closeDesc(false, true);
  544. },
  545. handleCancel(e) {
  546. this.setState({
  547. visible: false,
  548. });
  549. this.props.closeDesc(false);
  550. },
  551. spinChange(e) {
  552. this.setState({
  553. loading: e
  554. });
  555. },
  556. render() {
  557. return (
  558. <div className="patent-addNew">
  559. <Spin spinning={this.state.loading} className='spin-box'>
  560. <Modal maskClosable={false} title="合同详情" visible={this.state.visible}
  561. onOk={this.handleOk} onCancel={this.handleCancel}
  562. width='1000px'
  563. footer=''
  564. >
  565. <ContractDetailForm
  566. visible={this.state.visible}
  567. authorOption={this.props.authorOption}
  568. statusOption={this.props.statusOption}
  569. data={this.props.data}
  570. spinState={this.spinChange}
  571. closeModal={this.handleCancel}
  572. clickOk={this.handleOk} />
  573. </Modal>
  574. </Spin>
  575. </div>
  576. );
  577. }
  578. });
  579. export default ContractDetail;