contractDetail.jsx 23 KB

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