contractDetail.jsx 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687
  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. },
  399. foundCopyright() {
  400. },
  401. foundTechProject() {
  402. },
  403. componentWillReceiveProps(nextProps) {
  404. if (!this.props.visible && nextProps.visible) {
  405. this.loadData(nextProps.data.id);
  406. this.loadColumnsData(nextProps.data.id);
  407. this.getContactsList(nextProps.data.uid);
  408. };
  409. },
  410. handleSubmit(e) {
  411. e.preventDefault();
  412. this.props.form.validateFields((err, values) => {
  413. if (values.status || values.principal || values.recordTime || values.comment) {
  414. if (!values.status || !values.principal || !values.recordTime) {
  415. message.warning("请填写完整的状态流转信息!");
  416. return;
  417. };
  418. };
  419. if (!err) {
  420. this.props.spinState(true);
  421. $.ajax({
  422. method: "POST",
  423. dataType: "json",
  424. crossDomain: false,
  425. url: globalConfig.context + "/api/admin/contract/circulation",
  426. data: {
  427. "cid": this.props.data.id,
  428. "comment": values.comment,
  429. "status": values.status,
  430. "principals": values.principals //流转分发人
  431. }
  432. }).done(function (data) {
  433. if (!data.error.length) {
  434. message.success('保存成功!');
  435. this.props.clickOk();
  436. this.props.form.resetFields();
  437. this.props.spinState(false);
  438. } else {
  439. message.warning(data.error[0].message);
  440. this.props.spinState(false);
  441. }
  442. }.bind(this));
  443. }
  444. });
  445. },
  446. tableRowClick(record, index) {
  447. switch (record.tableType) {
  448. case 'patent':
  449. window.open(globalConfig.context + "/admin/servicesManage/patent.html?contractId=" + record.contractId + "#comprehensive");
  450. break;
  451. case 'copyright':
  452. window.open(globalConfig.context + "/admin/servicesManage/copyright.html?contractId=" + record.contractId + "#copyright");
  453. break;
  454. case 'cognizance':
  455. window.open(globalConfig.context + "/admin/servicesManage/highTech.html?contractId=" + record.contractId + "#highTechApply");
  456. break;
  457. case 'techProject':
  458. window.open(globalConfig.context + "/admin/servicesManage/technology.html?contractId=" + record.contractId + "#applyManage");
  459. break;
  460. };
  461. },
  462. render() {
  463. const FormItem = Form.Item;
  464. const { getFieldDecorator } = this.props.form;
  465. const theData = this.state.data || {};
  466. const formItemLayout = {
  467. labelCol: { span: 6 },
  468. wrapperCol: { span: 18 },
  469. };
  470. const _me = this;
  471. return (
  472. <Form onSubmit={this.handleSubmit} id="CopyrightDesc-form">
  473. <div className="clearfix">
  474. <FormItem className="half-item"
  475. {...formItemLayout}
  476. label="公司名称" >
  477. {getFieldDecorator('unitName')(
  478. <span>{theData.unitName}</span>
  479. )}
  480. </FormItem>
  481. <FormItem className="half-item"
  482. {...formItemLayout}
  483. label="组织机构代码" >
  484. {getFieldDecorator('orgCode')(
  485. <span>{theData.orgCode}</span>
  486. )}
  487. </FormItem>
  488. <FormItem className="half-item"
  489. {...formItemLayout}
  490. label="公司地址" >
  491. {getFieldDecorator('address')(
  492. <span>{theData.address}</span>
  493. )}
  494. </FormItem>
  495. <FormItem className="half-item"
  496. {...formItemLayout}
  497. label="联系人" >
  498. <span>{this.state.contactsList ? this.state.contactsList[theData.contacts] : ''}</span>
  499. </FormItem>
  500. </div>
  501. <p style={{ fontSize: '14px', color: '#333' }}>状态流转记录: </p>
  502. <Table style={{ margin: '10px 0', background: "#eee" }}
  503. pagination={false}
  504. dataSource={this.state.stateTable}
  505. columns={this.state.stateColumns} />
  506. <div className="clearfix" style={{ padding: '0 4px', paddingTop: '20px', marginBottom: '10px', background: '#eee' }}>
  507. <FormItem className="half-item"
  508. {...formItemLayout}
  509. label="状态流转"
  510. >
  511. {getFieldDecorator('status')(
  512. <Select
  513. style={{ width: 200 }}
  514. placeholder="选择一个状态">
  515. {this.props.statusOption}
  516. </Select>
  517. )}
  518. </FormItem>
  519. <FormItem className="half-item"
  520. {...formItemLayout}
  521. label="处理时间"
  522. >
  523. {getFieldDecorator('recordTime')(
  524. <DatePicker />
  525. )}
  526. </FormItem>
  527. <FormItem className="half-item"
  528. {...formItemLayout}
  529. label="负责人"
  530. >
  531. {getFieldDecorator('principals')(
  532. <Select
  533. showSearch
  534. style={{ width: 200 }}
  535. filterOption={companySearch}
  536. placeholder="选择负责人">
  537. {this.props.authorOption}
  538. </Select>
  539. )}
  540. </FormItem>
  541. <FormItem className="half-item"
  542. {...formItemLayout}
  543. label="备注">
  544. {getFieldDecorator('comment')(
  545. <Input />
  546. )}
  547. </FormItem>
  548. </div>
  549. <div className="clearfix">
  550. <FormItem className="half-item"
  551. {...formItemLayout}
  552. label="高企申请">
  553. {getFieldDecorator('cognizanceYear', {
  554. initialValue: theData.cognizanceYear
  555. })(
  556. <span>{theData.cognizanceYear} 年</span>
  557. )}
  558. {theData.cognizanceStatus == 1 ? <Button onClick={this.foundHighTech}>创建申请</Button> : <span></span>}
  559. </FormItem>
  560. </div>
  561. <Table size="small" scroll={{ y: 500 }}
  562. columns={this.state.highTechColumns}
  563. dataSource={this.state.highTechTableData}
  564. pagination={false}
  565. onRowClick={this.tableRowClick} />
  566. <div className="clearfix">
  567. <FormItem className="half-item"
  568. {...formItemLayout}
  569. label="专利申请">
  570. {getFieldDecorator('patentNum', {
  571. initialValue: theData.patentNum
  572. })(
  573. <span>{theData.patentNum} 条</span>
  574. )}
  575. {theData.patentStatus == 1 ? <Button onClick={this.foundPatent}>创建申请</Button> : <span></span>}
  576. </FormItem>
  577. </div>
  578. <Table size="small" scroll={{ y: 500 }}
  579. columns={this.state.patentColumns}
  580. dataSource={this.state.patentTableData}
  581. pagination={false}
  582. onRowClick={this.tableRowClick} />
  583. <div className="clearfix">
  584. <FormItem className="half-item"
  585. {...formItemLayout}
  586. label="软著申请">
  587. {getFieldDecorator('copyrightNum', {
  588. initialValue: theData.copyrightNum
  589. })(
  590. <span>{theData.copyrightNum} 条</span>
  591. )}
  592. {theData.copyrightStatus == 1 ? <Button onClick={this.foundCopyright}>创建申请</Button> : <span></span>}
  593. </FormItem>
  594. </div>
  595. <Table size="small" scroll={{ y: 500 }}
  596. columns={this.state.copyrightColumns}
  597. dataSource={this.state.copyrightTableData}
  598. pagination={false}
  599. onRowClick={this.tableRowClick} />
  600. <div className="clearfix">
  601. <FormItem className="half-item"
  602. {...formItemLayout}
  603. label=" 科技项目申请">
  604. {getFieldDecorator('techProjectNum', {
  605. initialValue: theData.techProjectNum
  606. })(
  607. <span>{theData.techProjectNum} 条</span>
  608. )}
  609. {theData.techProjectStatus == 1 ? <Button onClick={this.foundTechProject}>创建申请</Button> : <span></span>}
  610. </FormItem>
  611. </div>
  612. <Table size="small" scroll={{ y: 500 }}
  613. columns={this.state.techProjectColumns}
  614. dataSource={this.state.techProjectTableData}
  615. pagination={false}
  616. onRowClick={this.tableRowClick} />
  617. <FormItem style={{ marginTop: '20px' }}>
  618. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  619. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  620. </FormItem>
  621. </Form>
  622. );
  623. }
  624. }));
  625. const ContractDetail = React.createClass({
  626. getInitialState() {
  627. return {
  628. visible: false,
  629. loading: false
  630. };
  631. },
  632. componentWillReceiveProps(nextProps) {
  633. this.state.visible = nextProps.showDesc
  634. },
  635. showModal() {
  636. this.setState({
  637. visible: true,
  638. });
  639. },
  640. handleOk() {
  641. this.setState({
  642. visible: false,
  643. });
  644. this.props.closeDesc(false, true);
  645. },
  646. handleCancel(e) {
  647. this.setState({
  648. visible: false,
  649. });
  650. this.props.closeDesc(false);
  651. },
  652. spinChange(e) {
  653. this.setState({
  654. loading: e
  655. });
  656. },
  657. render() {
  658. return (
  659. <div className="patent-addNew">
  660. <Spin spinning={this.state.loading} className='spin-box'>
  661. <Modal title="软著详情" visible={this.state.visible}
  662. onOk={this.handleOk} onCancel={this.handleCancel}
  663. width='1000px'
  664. footer=''
  665. >
  666. <ContractDetailForm
  667. visible={this.state.visible}
  668. authorOption={this.props.authorOption}
  669. statusOption={this.props.statusOption}
  670. data={this.props.data}
  671. spinState={this.spinChange}
  672. closeModal={this.handleCancel}
  673. clickOk={this.handleOk} />
  674. </Modal>
  675. </Spin>
  676. </div>
  677. );
  678. }
  679. });
  680. export default ContractDetail;