applyChange.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549
  1. import React from 'react';
  2. import { Icon, Form, Button, Input, Select, Spin, Table, DatePicker, message, Modal, Checkbox, Upload } from 'antd';
  3. import { technologyStateList } from '../../../dataDic.js';
  4. import { getTechnologyState, beforeUpload, beforeUploadFile, techDownloadFile } from '../../../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js';
  6. import $ from 'jquery/src/ajax';
  7. const ApplyChangeFrom = Form.create()(React.createClass({
  8. loadData(id) {
  9. this.setState({
  10. loading: true
  11. });
  12. $.ajax({
  13. method: "post",
  14. dataType: "json",
  15. crossDomain: false,
  16. url: globalConfig.context + "/api/admin/techproject/techProjectDetial",
  17. data: {
  18. pid: id || this.props.data.pid
  19. },
  20. success: function (data) {
  21. if (data.error.length || !data.data) {
  22. message.warning(data.error[0].message);
  23. return;
  24. };
  25. this.state.data = data.data;
  26. if (data.data.projectMode == 1) {
  27. this.state.projectMode = data.data.projectMode;
  28. this.setState({ projectModeState: true });
  29. }
  30. if (data.data.subsidy == 1) {
  31. this.state.subsidy = data.data.subsidy;
  32. this.setState({ subsidyState: true });
  33. }
  34. this.getDepartmentList();
  35. this.getContactsList();
  36. }.bind(this),
  37. }).always(function () {
  38. this.setState({
  39. loading: false
  40. });
  41. }.bind(this));
  42. },
  43. getStateData(id) {
  44. this.setState({
  45. loading: true
  46. });
  47. $.ajax({
  48. method: "post",
  49. dataType: "json",
  50. crossDomain: false,
  51. url: globalConfig.context + "/api/admin/techproject/techProjectLog",
  52. data: {
  53. pid: id || this.props.data.pid
  54. },
  55. success: function (data) {
  56. if (data.error.length || !data.data) {
  57. message.warning(data.error[0].message);
  58. return;
  59. };
  60. var myDate = new Date();
  61. this.state.stateTable = [];
  62. for (let i = 0; i < data.data.length; i++) {
  63. this.state.stateTable.push({
  64. key: i,
  65. state: data.data[i].state,
  66. recordTime: myDate.toLocaleDateString(data.data[i].recordTime),
  67. principal: data.data[i].principal,
  68. comment: data.data[i].comment
  69. });
  70. };
  71. }.bind(this),
  72. }).always(function () {
  73. this.setState({
  74. loading: false
  75. });
  76. }.bind(this));
  77. },
  78. getDepartmentList() {
  79. this.setState({
  80. loading: true
  81. });
  82. $.ajax({
  83. method: "get",
  84. dataType: "json",
  85. crossDomain: false,
  86. url: globalConfig.context + "/api/admin/techproject/getDepartment?uid=" + this.props.data.uid,
  87. success: function (data) {
  88. this.state.departmentOption = [];
  89. if (data.error.length || !data.data) {
  90. message.warning(data.error[0].message);
  91. return;
  92. };
  93. for (var item in data.data) {
  94. this.state.departmentOption.push(
  95. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  96. )
  97. };
  98. this.setState({ department: data.data[this.state.data.department] });
  99. }.bind(this),
  100. }).always(function () {
  101. this.setState({
  102. loading: false
  103. });
  104. }.bind(this));
  105. },
  106. getContactsList() {
  107. $.ajax({
  108. method: "get",
  109. dataType: "json",
  110. crossDomain: false,
  111. url: globalConfig.context + "/api/admin/getContacts?uid=" + this.props.data.uid,
  112. success: function (data) {
  113. let theOption = [];
  114. if (data.error.length || !data.data) {
  115. return;
  116. };
  117. for (let item in data.data) {
  118. let theData = data.data[item];
  119. theOption.push(
  120. <Select.Option value={item} key={item}>{theData}</Select.Option>
  121. );
  122. };
  123. this.setState({
  124. contactsOption: theOption,
  125. contacts: data.data[this.state.data.contacts]
  126. });
  127. }.bind(this),
  128. });
  129. },
  130. getOptionList() {
  131. this.setState({
  132. loading: true
  133. });
  134. $.ajax({
  135. method: "get",
  136. dataType: "json",
  137. crossDomain: false,
  138. url: globalConfig.context + "/api/admin/techproject/status",
  139. success: function (data) {
  140. let _me = this;
  141. if (!data.data) {
  142. if (data.error && data.error.length) {
  143. message.warning(data.error[0].message);
  144. return;
  145. };
  146. };
  147. _me.state.stateOption = [];
  148. for (var item in data.data) {
  149. _me.state.stateOption.push(
  150. <Select.Option value={item} key={item}>{data.data[item]}</Select.Option>
  151. )
  152. };
  153. }.bind(this),
  154. }).always(function () {
  155. this.setState({
  156. loading: false
  157. });
  158. }.bind(this));
  159. },
  160. getInitialState() {
  161. return {
  162. loading: false,
  163. stateOption: [],
  164. departmentOption: [],
  165. projectDes: '',
  166. projectMode: 0,
  167. subsidy: 0,
  168. projectModeState: false,
  169. subsidyState: false,
  170. stateColumns: [{
  171. title: '专利状态',
  172. dataIndex: 'state',
  173. key: 'state',
  174. render: (text) => { return getTechnologyState(text) }
  175. }, {
  176. title: '处理时间',
  177. dataIndex: 'recordTime',
  178. key: 'recordTime'
  179. }, {
  180. title: '负责人',
  181. dataIndex: 'principal',
  182. key: 'principal',
  183. }, {
  184. title: '备注',
  185. dataIndex: 'comment',
  186. key: 'comment',
  187. }],
  188. stateTable: []
  189. };
  190. },
  191. componentWillMount() {
  192. this.loadData();
  193. this.getOptionList();
  194. this.getStateData();
  195. },
  196. handleSubmit(e) {
  197. e.preventDefault();
  198. this.props.form.validateFields((err, values) => {
  199. if (values.state || values.principal || values.recordTime || values.comment) {
  200. if (!values.state && !values.principal && !values.recordTime) {
  201. message.warning("请填写完整的状态流转信息!");
  202. return;
  203. };
  204. };
  205. if (!err) {
  206. this.props.spinState(true);
  207. let contacts = !isNaN(values.contacts) ? values.contacts : this.state.data.contacts;
  208. $.ajax({
  209. method: "POST",
  210. dataType: "json",
  211. crossDomain: false,
  212. url: globalConfig.context + "/api/admin/techproject/updateTechProject",
  213. data: {
  214. id: this.props.data.pid,
  215. uid: this.props.data.uid,
  216. contacts: contacts,
  217. department: values.department,
  218. projectName: values.projectName,
  219. projectCatagory: values.projectCatagory,
  220. techField: values.techField,
  221. projectDes: values.projectDes,
  222. projectMode: this.state.projectMode,
  223. projectApproval: values.projectApproval,
  224. subsidy: this.state.subsidy,
  225. approvalUrl: this.state.approvalUrl,
  226. recordTimeFormattedDate: values.recordTime ? values.recordTime.format("YYYY-MM-DD") : undefined,
  227. state: values.state,
  228. principal: values.principal,
  229. comment: values.comment,
  230. }
  231. }).done(function (data) {
  232. if (!data.error.length) {
  233. message.success('保存成功!');
  234. this.props.closeModal();
  235. this.props.form.resetFields();
  236. this.props.spinState(false);
  237. } else {
  238. message.warning(data.error[0].message);
  239. this.props.spinState(false);
  240. }
  241. }.bind(this));
  242. }
  243. });
  244. },
  245. componentWillReceiveProps(nextProps) {
  246. if (!this.props.visible && nextProps.visible) {
  247. this.loadData(nextProps.data.pid);
  248. this.getStateData(nextProps.data.pid);
  249. };
  250. },
  251. projectEstablishmentCheck(e) {
  252. if (e.target.checked == true) {
  253. this.setState({ projectModeState: true })
  254. this.state.projectMode = 1;
  255. } else if (e.target.checked == false) {
  256. this.setState({ projectModeState: false })
  257. this.state.projectMode = 0;
  258. };
  259. },
  260. subsidyCheck(e) {
  261. if (e.target.checked == true) {
  262. this.setState({ subsidyState: true })
  263. this.state.subsidy = 1;
  264. } else if (e.target.checked == false) {
  265. this.setState({ subsidyState: false })
  266. this.state.subsidy = 0;
  267. };
  268. },
  269. render() {
  270. const FormItem = Form.Item;
  271. const { getFieldDecorator } = this.props.form;
  272. const theData = this.state.data;
  273. const formItemLayout = {
  274. labelCol: { span: 6 },
  275. wrapperCol: { span: 12 },
  276. };
  277. const _me = this;
  278. if (this.state.data) {
  279. return (
  280. <Form onSubmit={this.handleSubmit} id="highTechApply-form">
  281. <div className="clearfix">
  282. <div className="half-item">
  283. <span className="item-title">公司名称: </span>
  284. <span>{theData.unitName}</span>
  285. </div>
  286. <div className="half-item">
  287. <span className="item-title">公司组织机构代码: </span>
  288. <span>{theData.orgCode}</span>
  289. </div>
  290. <div className="half-item">
  291. <span className="item-title">公司地址: </span>
  292. <span>{theData.province + ' ' + theData.city + ' ' + theData.area}</span>
  293. </div>
  294. <div className="half-item">
  295. <FormItem
  296. labelCol={{ span: 4 }}
  297. wrapperCol={{ span: 10 }}
  298. label="联系人:"
  299. >
  300. {getFieldDecorator('contacts', {
  301. initialValue: this.state.contacts
  302. })(
  303. <Select>{this.state.contactsOption}</Select>
  304. )}
  305. </FormItem>
  306. </div>
  307. </div>
  308. <div className="clearfix">
  309. <FormItem className="third-item"
  310. {...formItemLayout}
  311. label="科技部门"
  312. >
  313. {getFieldDecorator('department', {
  314. initialValue: this.state.department
  315. })(
  316. <Select>{this.state.departmentOption}</Select>
  317. )}
  318. </FormItem>
  319. </div>
  320. <div className="clearfix">
  321. <div className="half-item">
  322. <span className="item-title">派单信息: </span>
  323. <span>{theData.dispatchInfo}</span>
  324. </div>
  325. </div>
  326. <div className="clearfix">
  327. <div className="half-item">
  328. <FormItem
  329. labelCol={{ span: 4 }}
  330. wrapperCol={{ span: 12 }}
  331. label="项目名称"
  332. >
  333. {getFieldDecorator('projectName', {
  334. initialValue: theData.projectName
  335. })(
  336. <Input />
  337. )}
  338. </FormItem>
  339. </div>
  340. </div>
  341. <div className="clearfix">
  342. <div className="half-item">
  343. <FormItem
  344. labelCol={{ span: 4 }}
  345. wrapperCol={{ span: 12 }}
  346. label="项目类型"
  347. >
  348. {getFieldDecorator('projectCatagory', {
  349. initialValue: theData.projectCatagory
  350. })(
  351. <Input />
  352. )}
  353. </FormItem>
  354. </div>
  355. </div>
  356. <div className="clearfix">
  357. <div className="half-item">
  358. <FormItem
  359. labelCol={{ span: 4 }}
  360. wrapperCol={{ span: 12 }}
  361. label="技术领域"
  362. >
  363. {getFieldDecorator('techField', {
  364. initialValue: theData.techField
  365. })(
  366. <Input />
  367. )}
  368. </FormItem>
  369. </div>
  370. </div>
  371. <div className="clearfix">
  372. <span className="item-title">项目简介: </span>
  373. {getFieldDecorator('projectDes', {
  374. initialValue: theData.projectDes
  375. })(
  376. <Input type="textarea"
  377. placeholder="多行输入"
  378. rows={6} />
  379. )}
  380. </div>
  381. <div className="clearfix">
  382. <div className="half-item">
  383. <span className="item-title">是否立项: </span>
  384. <Checkbox
  385. onChange={this.projectEstablishmentCheck}
  386. checked={this.state.projectModeState}
  387. >
  388. </Checkbox>
  389. </div>
  390. <div className="half-item">
  391. <FormItem
  392. {...formItemLayout}
  393. label="立项金额"
  394. >
  395. {getFieldDecorator('projectApproval', {
  396. initialValue: theData.projectApproval
  397. })(
  398. <Input style={{ width: 150, marginRight: 10 }} />
  399. )}
  400. <span>万元</span>
  401. </FormItem>
  402. </div>
  403. </div>
  404. <div className="clearfix">
  405. <div className="half-item">
  406. <span className="item-title">是否后补助: </span>
  407. <Checkbox
  408. onChange={this.subsidyCheck}
  409. checked={this.state.subsidyState}
  410. >
  411. </Checkbox>
  412. </div>
  413. </div>
  414. <div className="hrSituation-roster">
  415. <Upload
  416. name="avatar"
  417. action={globalConfig.context + "/api/admin/techproject/upload"}
  418. data={{ 'uid': this.props.data.uid }}
  419. beforeUpload={beforeUploadFile}
  420. showUploadList={false}
  421. onChange={(info) => {
  422. if (info.file.status !== 'uploading') {
  423. console.log(info.file, info.fileList);
  424. }
  425. if (info.file.status === 'done') {
  426. if (!info.file.response.error.length) {
  427. message.success(`${info.file.name} 文件上传成功!`);
  428. } else {
  429. message.warning(info.file.response.error[0].message);
  430. return;
  431. };
  432. this.state.approvalUrl = info.file.response.data;
  433. } else if (info.file.status === 'error') {
  434. message.error(`${info.file.name} 文件上传失败。`);
  435. }
  436. }}
  437. >
  438. <Button><Icon type="upload" /> 项目材料上传 </Button>
  439. </Upload>
  440. <p style={{ marginTop: '10px' }}>{theData.approvalUrl ? <a onClick={techDownloadFile.bind(null, "/api/admin/techproject/download", this.state.data.id)}>{theData.approvalDownloadFileName}</a> : <span><Icon type="exclamation-circle" style={{ color: '#ffbf00', marginRight: '6px' }} />未上传!</span>}</p>
  441. </div>
  442. <div className="form-title">状态流转记录: </div>
  443. <Table pagination={false} dataSource={this.state.stateTable} columns={this.state.stateColumns} />
  444. <div className="clearfix">
  445. <FormItem className="third-item"
  446. {...formItemLayout}
  447. label="状态流转"
  448. >
  449. {getFieldDecorator('state')(
  450. <Select placeholder="选择一个状态">{this.state.stateOption}</Select>
  451. )}
  452. </FormItem>
  453. <FormItem className="third-item"
  454. labelCol={{ span: 6 }}
  455. wrapperCol={{ span: 12 }}
  456. label="处理时间"
  457. >
  458. {getFieldDecorator('recordTime')(
  459. <DatePicker />
  460. )}
  461. </FormItem>
  462. <FormItem className="third-item"
  463. {...formItemLayout}
  464. label="负责人"
  465. >
  466. {getFieldDecorator('principal')(
  467. <Select placeholder="选择负责人">{this.props.authorOption}</Select>
  468. )}
  469. </FormItem>
  470. </div>
  471. <FormItem
  472. labelCol={{ span: 2 }}
  473. wrapperCol={{ span: 12 }}
  474. label="备注"
  475. >
  476. {getFieldDecorator('comment')(
  477. <Input />
  478. )}
  479. </FormItem>
  480. <FormItem style={{ marginTop: '20px' }}>
  481. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  482. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  483. </FormItem>
  484. </Form >
  485. );
  486. } else {
  487. return (<div></div>)
  488. };
  489. },
  490. }));
  491. const ApplyChange = React.createClass({
  492. getInitialState() {
  493. return {
  494. visible: false,
  495. loading: false
  496. };
  497. },
  498. componentWillReceiveProps(nextProps) {
  499. this.state.visible = nextProps.showDesc
  500. },
  501. showModal() {
  502. this.setState({
  503. visible: true,
  504. });
  505. },
  506. handleOk() {
  507. this.setState({
  508. visible: false,
  509. });
  510. this.props.closeDesc(false);
  511. },
  512. handleCancel(e) {
  513. this.setState({
  514. visible: false,
  515. });
  516. this.props.closeDesc(false);
  517. },
  518. spinChange(e) {
  519. this.setState({
  520. loading: e
  521. });
  522. },
  523. render() {
  524. return (
  525. <div className="patent-addNew">
  526. <Spin spinning={this.state.loading} className='spin-box'>
  527. <Modal title="编辑科技项目" visible={this.state.visible}
  528. onOk={this.handleOk} onCancel={this.handleCancel}
  529. width='1000px'
  530. footer=''
  531. >
  532. <ApplyChangeFrom
  533. visible={this.state.visible}
  534. authorOption={this.props.authorOption}
  535. data={this.props.data}
  536. spinState={this.spinChange} closeModal={this.handleCancel} />
  537. </Modal>
  538. </Spin>
  539. </div>
  540. );
  541. }
  542. });
  543. export default ApplyChange;