contractDetail.jsx 22 KB

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