contractDetail.jsx 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705
  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.getContactsList();
  179. this.loadColumnsData();
  180. },
  181. getContactsList(uid) {
  182. $.ajax({
  183. method: "get",
  184. dataType: "json",
  185. crossDomain: false,
  186. url: globalConfig.context + "/api/admin/getContacts",
  187. data: {
  188. uid: uid || this.props.data.uid
  189. },
  190. success: function (data) {
  191. if (!data.data) {
  192. if (data.error && data.error.length) {
  193. message.warning(data.error[0].message);
  194. return;
  195. };
  196. };
  197. this.setState({
  198. contactsList: data.data
  199. });
  200. }.bind(this),
  201. });
  202. },
  203. loadData(id) {
  204. this.setState({
  205. loading: true
  206. });
  207. $.when($.ajax({
  208. method: "get",
  209. dataType: "json",
  210. crossDomain: false,
  211. cache: false,
  212. url: globalConfig.context + "/api/admin/contract/log",
  213. data: {
  214. cid: id || this.props.data.id
  215. }
  216. }), $.ajax({
  217. method: "get",
  218. dataType: "json",
  219. crossDomain: false,
  220. cache: false,
  221. url: globalConfig.context + "/api/admin/contract/detail",
  222. data: {
  223. id: id || this.props.data.id
  224. }
  225. })).done((data1, data2) => {
  226. let _me = this;
  227. //状态流转table
  228. this.state.stateTable = [];
  229. if (data1[0].error && data1[0].error.length) {
  230. message.warning(data1[0].error[0].message);
  231. } else {
  232. data1[0].data.map(function (item, i) {
  233. _me.state.stateTable.push({
  234. key: i,
  235. recordTimeFormattedDate: item.recordTimeFormattedDate,
  236. status: item.status,
  237. principal: item.principal,
  238. operator: item.operator,
  239. comment: item.comment
  240. });
  241. });
  242. };
  243. //获取详细数据
  244. if (!data2[0].data) {
  245. if (data2[0].error && data2[0].error.length) {
  246. message.warning(data2[0].error[0].message);
  247. };
  248. } else {
  249. let detailData = data2[0].data;
  250. this.setState({
  251. data: detailData
  252. });
  253. };
  254. }).always(function () {
  255. this.setState({
  256. loading: false
  257. });
  258. }.bind(this));
  259. },
  260. loadColumnsData(id) {
  261. this.setState({
  262. loading: true
  263. });
  264. $.when($.ajax({
  265. method: "get",
  266. dataType: "json",
  267. crossDomain: false,
  268. cache: false,
  269. url: globalConfig.context + "/api/admin/contract/techProject",
  270. data: {
  271. contractId: id || this.props.data.id
  272. }
  273. }), $.ajax({
  274. method: "get",
  275. dataType: "json",
  276. crossDomain: false,
  277. cache: false,
  278. url: globalConfig.context + "/api/admin/contract/cognizance",
  279. data: {
  280. contractId: id || this.props.data.id
  281. }
  282. }), $.ajax({
  283. method: "get",
  284. dataType: "json",
  285. crossDomain: false,
  286. cache: false,
  287. url: globalConfig.context + "/api/admin/contract/copyright",
  288. data: {
  289. contractId: id || this.props.data.id
  290. }
  291. }), $.ajax({
  292. method: "get",
  293. dataType: "json",
  294. crossDomain: false,
  295. cache: false,
  296. url: globalConfig.context + "/api/admin/contract/patent",
  297. data: {
  298. contractId: id || this.props.data.id
  299. }
  300. })).done((data1, data2, data3, data4) => {
  301. let patentArr = [], techProjectArr = [], cognizanceArr = [], copyrightArr = [];
  302. if (!data1[0].data) {
  303. if (data1[0].error && data1[0].error.length) {
  304. message.warning(data1[0].error[0].message)
  305. };
  306. } else {
  307. data1[0].data.map(function (item, i) {
  308. techProjectArr.push({
  309. "key": i,
  310. "id": item.id, //科技项目ID
  311. "uid": item.uid, //用户ID
  312. "contractId": item.contractId, //合同ID
  313. "projectName": item.projectName, //项目名称
  314. "projectCatagory": item.projectCatagory, //项目类型
  315. "state": item.state, //状态
  316. "techField": item.techField, //领域
  317. "principle": item.principle, //当前负责人(技术员)
  318. "tableType": "techProject"
  319. });
  320. });
  321. };
  322. if (!data2[0].data) {
  323. if (data2[0].error && data2[0].error.length) {
  324. message.warning(data2[0].error[0].message)
  325. };
  326. } else {
  327. data2[0].data.map(function (item, i) {
  328. cognizanceArr.push({
  329. "key": i,
  330. "id": item.id, //科技项目ID
  331. "uid": item.uid, //用户ID
  332. "contractId": item.contractId, //合同ID
  333. "year": item.year,
  334. "serialNumber": item.serialNumber,
  335. "state": item.state, //状态
  336. "certificateNumber": item.certificateNumber,
  337. "techPrincipal": item.techPrincipal, //当前负责人(技术员)
  338. "tableType": "cognizance"
  339. });
  340. });
  341. };
  342. if (!data3[0].data) {
  343. if (data3[0].error && data3[0].error.length) {
  344. message.warning(data3[0].error[0].message)
  345. };
  346. } else {
  347. data3[0].data.map(function (item, i) {
  348. copyrightArr.push({
  349. "key": i,
  350. "id": item.id, //科技项目ID
  351. "uid": item.uid, //用户ID
  352. "contractId": item.contractId, //合同ID
  353. "copyrightName": item.copyrightName, //项目名称
  354. "serialNumber": item.serialNumber,
  355. "state": item.state, //状态
  356. "inUrgent": item.inUrgent, //加急天数
  357. "principal": item.principal, //当前负责人(技术员)
  358. "tableType": "copyright"
  359. });
  360. });
  361. };
  362. if (!data4[0].data) {
  363. if (data4[0].error && data4[0].error.length) {
  364. message.warning(data4[0].error[0].message)
  365. };
  366. } else {
  367. data4[0].data.map(function (item, i) {
  368. patentArr.push({
  369. "key": i,
  370. "id": item.id, //科技项目ID
  371. "uid": item.uid, //用户ID
  372. "contractId": item.contractId, //合同ID
  373. "patentName": item.patentName, //项目名称
  374. "patentNumber": item.patentNumber, //专利号
  375. "serialNumber": item.serialNumber, //编号
  376. "patentState": item.patentState, //状态
  377. "patentCatagory": item.patentCatagory, //专利类别
  378. "principal": item.principal, //当前负责人(技术员)
  379. "tableType": "patent"
  380. });
  381. });
  382. };
  383. this.setState({
  384. patentTableData: patentArr,
  385. copyrightTableData: copyrightArr,
  386. highTechTableData: cognizanceArr,
  387. techProjectTableData: techProjectArr
  388. });
  389. }).always(function () {
  390. this.setState({
  391. loading: false
  392. });
  393. }.bind(this));
  394. },
  395. foundHighTech() {
  396. },
  397. foundPatent() {
  398. $.ajax({
  399. method: "post",
  400. dataType: "json",
  401. crossDomain: false,
  402. url: globalConfig.context + "/api/admin/contract/createPatent",
  403. data: {
  404. id: this.props.data.id
  405. },
  406. success: function (data) {
  407. if (!data.data) {
  408. if (data.error && data.error.length) {
  409. message.warning(data.error[0].message);
  410. return;
  411. };
  412. };
  413. this.loadData();
  414. this.loadColumnsData();
  415. }.bind(this),
  416. });
  417. },
  418. foundCopyright() {
  419. },
  420. foundTechProject() {
  421. },
  422. componentWillReceiveProps(nextProps) {
  423. if (!this.props.visible && nextProps.visible) {
  424. this.loadData(nextProps.data.id);
  425. this.loadColumnsData(nextProps.data.id);
  426. this.getContactsList(nextProps.data.uid);
  427. };
  428. },
  429. handleSubmit(e) {
  430. e.preventDefault();
  431. this.props.form.validateFields((err, values) => {
  432. if (values.status || values.principal || values.recordTime || values.comment) {
  433. if (!values.status || !values.principal || !values.recordTime) {
  434. message.warning("请填写完整的状态流转信息!");
  435. return;
  436. };
  437. };
  438. if (!err) {
  439. this.props.spinState(true);
  440. $.ajax({
  441. method: "POST",
  442. dataType: "json",
  443. crossDomain: false,
  444. url: globalConfig.context + "/api/admin/contract/circulation",
  445. data: {
  446. "cid": this.props.data.id,
  447. "comment": values.comment,
  448. "status": values.status,
  449. "principals": values.principals //流转分发人
  450. }
  451. }).done(function (data) {
  452. if (!data.error.length) {
  453. message.success('保存成功!');
  454. this.props.clickOk();
  455. this.props.form.resetFields();
  456. this.props.spinState(false);
  457. } else {
  458. message.warning(data.error[0].message);
  459. this.props.spinState(false);
  460. }
  461. }.bind(this));
  462. }
  463. });
  464. },
  465. tableRowClick(record, index) {
  466. switch (record.tableType) {
  467. case 'patent':
  468. window.open(globalConfig.context + "/admin/servicesManage/patent.html?contractId=" + record.contractId + "#comprehensive");
  469. break;
  470. case 'copyright':
  471. window.open(globalConfig.context + "/admin/servicesManage/copyright.html?contractId=" + record.contractId + "#copyright");
  472. break;
  473. case 'cognizance':
  474. window.open(globalConfig.context + "/admin/servicesManage/highTech.html?contractId=" + record.contractId + "#highTechApply");
  475. break;
  476. case 'techProject':
  477. window.open(globalConfig.context + "/admin/servicesManage/technology.html?contractId=" + record.contractId + "#applyManage");
  478. break;
  479. };
  480. },
  481. render() {
  482. const FormItem = Form.Item;
  483. const { getFieldDecorator } = this.props.form;
  484. const theData = this.state.data || {};
  485. const formItemLayout = {
  486. labelCol: { span: 6 },
  487. wrapperCol: { span: 18 },
  488. };
  489. const _me = this;
  490. return (
  491. <Form onSubmit={this.handleSubmit} id="CopyrightDesc-form">
  492. <div className="clearfix">
  493. <FormItem className="half-item"
  494. {...formItemLayout}
  495. label="公司名称" >
  496. {getFieldDecorator('unitName')(
  497. <span>{theData.unitName}</span>
  498. )}
  499. </FormItem>
  500. <FormItem className="half-item"
  501. {...formItemLayout}
  502. label="组织机构代码" >
  503. {getFieldDecorator('orgCode')(
  504. <span>{theData.orgCode}</span>
  505. )}
  506. </FormItem>
  507. <FormItem className="half-item"
  508. {...formItemLayout}
  509. label="公司地址" >
  510. {getFieldDecorator('address')(
  511. <span>{theData.address}</span>
  512. )}
  513. </FormItem>
  514. <FormItem className="half-item"
  515. {...formItemLayout}
  516. label="联系人" >
  517. <span>{this.state.contactsList ? this.state.contactsList[theData.contacts] : ''}</span>
  518. </FormItem>
  519. </div>
  520. <p style={{ fontSize: '14px', color: '#333' }}>状态流转记录: </p>
  521. <Table style={{ margin: '10px 0', background: "#eee" }}
  522. pagination={false}
  523. dataSource={this.state.stateTable}
  524. columns={this.state.stateColumns} />
  525. <div className="clearfix" style={{ padding: '0 4px', paddingTop: '20px', marginBottom: '10px', background: '#eee' }}>
  526. <FormItem className="half-item"
  527. {...formItemLayout}
  528. label="状态流转"
  529. >
  530. {getFieldDecorator('status')(
  531. <Select
  532. style={{ width: 200 }}
  533. placeholder="选择一个状态">
  534. {this.props.statusOption}
  535. </Select>
  536. )}
  537. </FormItem>
  538. <FormItem className="half-item"
  539. {...formItemLayout}
  540. label="处理时间"
  541. >
  542. {getFieldDecorator('recordTime')(
  543. <DatePicker />
  544. )}
  545. </FormItem>
  546. <FormItem className="half-item"
  547. {...formItemLayout}
  548. label="负责人"
  549. >
  550. {getFieldDecorator('principals')(
  551. <Select
  552. showSearch
  553. style={{ width: 200 }}
  554. filterOption={companySearch}
  555. placeholder="选择负责人">
  556. {this.props.authorOption}
  557. </Select>
  558. )}
  559. </FormItem>
  560. <FormItem className="half-item"
  561. {...formItemLayout}
  562. label="备注">
  563. {getFieldDecorator('comment')(
  564. <Input />
  565. )}
  566. </FormItem>
  567. </div>
  568. <div className="clearfix">
  569. <FormItem className="half-item"
  570. {...formItemLayout}
  571. label="高企申请">
  572. {getFieldDecorator('cognizanceYear', {
  573. initialValue: theData.cognizanceYear
  574. })(
  575. <span>{theData.cognizanceYear} 年</span>
  576. )}
  577. </FormItem>
  578. {theData.cognizanceStatus == 0 ? <Button onClick={this.foundHighTech}>创建申请</Button> : <span></span>}
  579. </div>
  580. <Table className="contract-Table" size="small" scroll={{ y: 500 }}
  581. columns={this.state.highTechColumns}
  582. dataSource={this.state.highTechTableData}
  583. pagination={false}
  584. onRowClick={this.tableRowClick} />
  585. <div className="clearfix">
  586. <FormItem className="half-item"
  587. {...formItemLayout}
  588. label="专利申请">
  589. {getFieldDecorator('patentNum', {
  590. initialValue: theData.patentNum
  591. })(
  592. <span>{theData.patentNum} 条</span>
  593. )}
  594. </FormItem>
  595. {theData.patentStatus == 0 ? <Button onClick={this.foundPatent}>创建申请</Button> : <span></span>}
  596. </div>
  597. <Table className="contract-Table" size="small" scroll={{ y: 500 }}
  598. columns={this.state.patentColumns}
  599. dataSource={this.state.patentTableData}
  600. pagination={false}
  601. onRowClick={this.tableRowClick} />
  602. <div className="clearfix">
  603. <FormItem className="half-item"
  604. {...formItemLayout}
  605. label="软著申请">
  606. {getFieldDecorator('copyrightNum', {
  607. initialValue: theData.copyrightNum
  608. })(
  609. <span>{theData.copyrightNum} 条</span>
  610. )}
  611. </FormItem>
  612. {theData.copyrightStatus == 0 ? <Button onClick={this.foundCopyright}>创建申请</Button> : <span></span>}
  613. </div>
  614. <Table className="contract-Table" size="small" scroll={{ y: 500 }}
  615. columns={this.state.copyrightColumns}
  616. dataSource={this.state.copyrightTableData}
  617. pagination={false}
  618. onRowClick={this.tableRowClick} />
  619. <div className="clearfix">
  620. <FormItem className="half-item"
  621. {...formItemLayout}
  622. label=" 科技项目申请">
  623. {getFieldDecorator('techProjectNum', {
  624. initialValue: theData.techProjectNum
  625. })(
  626. <span>{theData.techProjectNum} 条</span>
  627. )}
  628. </FormItem>
  629. {theData.techProjectStatus == 0 ? <Button onClick={this.foundTechProject}>创建申请</Button> : <span></span>}
  630. </div>
  631. <Table className="contract-Table" size="small" scroll={{ y: 500 }}
  632. columns={this.state.techProjectColumns}
  633. dataSource={this.state.techProjectTableData}
  634. pagination={false}
  635. onRowClick={this.tableRowClick} />
  636. <FormItem style={{ marginTop: '20px' }}>
  637. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  638. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  639. </FormItem>
  640. </Form>
  641. );
  642. }
  643. }));
  644. const ContractDetail = React.createClass({
  645. getInitialState() {
  646. return {
  647. visible: false,
  648. loading: false
  649. };
  650. },
  651. componentWillReceiveProps(nextProps) {
  652. this.state.visible = nextProps.showDesc
  653. },
  654. showModal() {
  655. this.setState({
  656. visible: true,
  657. });
  658. },
  659. handleOk() {
  660. this.setState({
  661. visible: false,
  662. });
  663. this.props.closeDesc(false, true);
  664. },
  665. handleCancel(e) {
  666. this.setState({
  667. visible: false,
  668. });
  669. this.props.closeDesc(false);
  670. },
  671. spinChange(e) {
  672. this.setState({
  673. loading: e
  674. });
  675. },
  676. render() {
  677. return (
  678. <div className="patent-addNew">
  679. <Spin spinning={this.state.loading} className='spin-box'>
  680. <Modal title="软著详情" visible={this.state.visible}
  681. onOk={this.handleOk} onCancel={this.handleCancel}
  682. width='1000px'
  683. footer=''
  684. >
  685. <ContractDetailForm
  686. visible={this.state.visible}
  687. authorOption={this.props.authorOption}
  688. statusOption={this.props.statusOption}
  689. data={this.props.data}
  690. spinState={this.spinChange}
  691. closeModal={this.handleCancel}
  692. clickOk={this.handleOk} />
  693. </Modal>
  694. </Spin>
  695. </div>
  696. );
  697. }
  698. });
  699. export default ContractDetail;