contractAdd.jsx 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300
  1. import React from 'react';
  2. import { Icon, Modal, Button, Form, message, Input, Spin, Select, Checkbox, InputNumber, DatePicker } from 'antd';
  3. import './contract.less';
  4. import { companySearch } from '../../../tools.js';
  5. import ajax from 'jquery/src/ajax/xhr.js'
  6. import $ from 'jquery/src/ajax';
  7. const ContractAddFrom = Form.create()(React.createClass({
  8. getInitialState() {
  9. return {
  10. loading: false,
  11. companyOption: [],
  12. accelerated: 0,
  13. acceleratedDate: 0,
  14. visible: "visible"
  15. };
  16. },
  17. loadData(id) {
  18. this.setState({
  19. loading: true
  20. });
  21. $.ajax({
  22. method: "get",
  23. dataType: "json",
  24. crossDomain: false,
  25. cache: false,
  26. url: globalConfig.context + "/api/user/contract/detail",
  27. data: {
  28. id: id || this.props.data.id
  29. }
  30. }).done((data) => {
  31. if (!data.data) {
  32. if (data.error && data.error.length) {
  33. message.warning(data.error[0].message);
  34. };
  35. } else {
  36. this.setState({
  37. data: data.data,
  38. patentCheck: data.data.patentNum ? true : false,
  39. copyrightCheck: data.data.copyrightNum ? true : false,
  40. highTechCheck: data.data.cognizanceYear ? true : false,
  41. techProjectCheck: data.data.techProjectNum ? true : false,
  42. });
  43. };
  44. }).always(function () {
  45. this.setState({
  46. loading: false
  47. });
  48. }.bind(this));
  49. },
  50. componentWillMount() {
  51. let d = new Date(), _me = this, theArr = [];
  52. d = d.getFullYear() - 1;
  53. for (let i = d; i < d + 20; i++) {
  54. theArr.push(
  55. <Select.Option value={i.toString()} key={i}>{i}</Select.Option>
  56. )
  57. };
  58. this.state.yearOption = theArr;
  59. if (this.props.data && this.props.data.id) {
  60. this.loadData(this.props.data.id);
  61. } else {
  62. this.state.data = {};
  63. this.state.patentCheck = false;
  64. this.state.copyrightCheck = false;
  65. this.state.highTechCheck = false;
  66. this.state.techProjectCheck = false;
  67. };
  68. },
  69. componentWillReceiveProps(nextProps) {
  70. if (!this.props.visible && nextProps.visible) {
  71. if (nextProps.data && nextProps.data.id) {
  72. this.loadData(nextProps.data.id);
  73. } else {
  74. this.state.data = {};
  75. this.state.patentCheck = false;
  76. this.state.copyrightCheck = false;
  77. this.state.highTechCheck = false;
  78. this.state.techProjectCheck = false;
  79. };
  80. this.props.form.resetFields();
  81. };
  82. },
  83. handleSave(e) {
  84. e.preventDefault();
  85. this.props.form.validateFields((err, values) => {
  86. if (!err) {
  87. this.props.spinState(true);
  88. $.ajax({
  89. method: "POST",
  90. dataType: "json",
  91. crossDomain: false,
  92. url: globalConfig.context + (this.state.data.id ? "/api/user/contract/update" : "/api/user/contract/apply"),
  93. data: {
  94. "id": this.state.data.id,
  95. "contacts": values.contacts, //联系人
  96. "type": values.type, //合同类型
  97. "depict": values.depict, // "合同描述",
  98. "patentNum": this.state.patentCheck ? values.patentNum : 0,
  99. "copyrightNum": this.state.copyrightCheck ? values.copyrightNum : 0,
  100. "cognizanceYear": this.state.highTechCheck ? values.cognizanceYear : undefined,
  101. "techProjectNum": this.state.techProjectCheck ? values.techProjectNum : 0,
  102. "comment": values.comment //"备注"
  103. }
  104. }).done(function (data) {
  105. if (!data.error.length) {
  106. message.success('保存成功!');
  107. this.props.okClick();
  108. this.props.closeModal();
  109. this.props.form.resetFields();
  110. } else {
  111. message.warning(data.error[0].message);
  112. }
  113. }.bind(this)).always(function () {
  114. this.props.spinState(false);
  115. }.bind(this));
  116. }
  117. });
  118. },
  119. render() {
  120. const FormItem = Form.Item;
  121. const { getFieldDecorator } = this.props.form;
  122. const theData = this.state.data || {};
  123. const formItemLayout = {
  124. labelCol: { span: 6 },
  125. wrapperCol: { span: 14 },
  126. };
  127. const _me = this;
  128. return (
  129. <Form horizontal onSubmit={this.handleSave} id="CopyrightDesc-form">
  130. <div className="clearfix">
  131. <FormItem className="half-item"
  132. {...formItemLayout}
  133. label="联系人" >
  134. {getFieldDecorator('contacts', {
  135. initialValue: theData.contacts
  136. })(
  137. <Select placeholder="请选择联系人"
  138. style={{ width: 260 }}
  139. notFoundContent="未获取到联系人列表">
  140. {this.props.contactsOption}
  141. </Select>
  142. )}
  143. </FormItem>
  144. <FormItem className="half-item"
  145. {...formItemLayout}
  146. label="合同类型" >
  147. {getFieldDecorator('type', {
  148. initialValue: theData.type
  149. })(
  150. <Select placeholder="请选择合同类型"
  151. style={{ width: 260 }}>
  152. {this.props.typeOption}
  153. </Select>
  154. )}
  155. </FormItem>
  156. </div>
  157. <FormItem
  158. labelCol={{ span: 3 }}
  159. wrapperCol={{ span: 19 }}
  160. label="合同描述" >
  161. {getFieldDecorator('depict', {
  162. initialValue: theData.depict
  163. })(
  164. <Input type="textarea"
  165. placeholder="多行输入"
  166. rows={4} />
  167. )}
  168. </FormItem>
  169. <div className="clearfix">
  170. <span style={{ float: "left", lineHeight: '32px', marginRight: '20px' }}>
  171. <Checkbox checked={this.state.highTechCheck} onChange={(e) => {
  172. this.setState({ highTechCheck: e.target.checked });
  173. }}></Checkbox>
  174. </span>
  175. <FormItem className="half-item"
  176. {...formItemLayout}
  177. label={"高企申请"} >
  178. {getFieldDecorator('cognizanceYear', {
  179. initialValue: theData.cognizanceYear || undefined
  180. })(
  181. <Select placeholder="请选择年份"
  182. style={{ width: 120 }}
  183. onSelect={(e, n) => { this.setState({ year: e }); }}>
  184. {this.state.yearOption}
  185. </Select>
  186. )}
  187. </FormItem>
  188. </div>
  189. <div className="clearfix">
  190. <span style={{ float: "left", lineHeight: '32px', marginRight: '20px' }}>
  191. <Checkbox checked={this.state.patentCheck} onChange={(e) => {
  192. this.setState({ patentCheck: e.target.checked });
  193. }}></Checkbox>
  194. </span>
  195. <FormItem className="half-item"
  196. {...formItemLayout}
  197. label={"专利申请"} >
  198. {getFieldDecorator('patentNum', {
  199. initialValue: theData.patentNum
  200. })(
  201. <InputNumber />
  202. )}
  203. </FormItem>
  204. </div>
  205. <div className="clearfix">
  206. <span style={{ float: "left", lineHeight: '32px', marginRight: '20px' }}>
  207. <Checkbox checked={this.state.copyrightCheck} onChange={(e) => {
  208. this.setState({ copyrightCheck: e.target.checked });
  209. }}></Checkbox>
  210. </span>
  211. <FormItem className="half-item"
  212. {...formItemLayout}
  213. label={"软著申请"} >
  214. {getFieldDecorator('copyrightNum', {
  215. initialValue: theData.copyrightNum
  216. })(
  217. <InputNumber />
  218. )}
  219. </FormItem>
  220. </div>
  221. <div className="clearfix">
  222. <span style={{ float: "left", lineHeight: '32px', marginRight: '20px' }}>
  223. <Checkbox checked={this.state.techProjectCheck} onChange={(e) => {
  224. this.setState({ techProjectCheck: e.target.checked });
  225. }}></Checkbox>
  226. </span>
  227. <FormItem className="half-item"
  228. {...formItemLayout}
  229. label={"科技项目申请"} >
  230. {getFieldDecorator('techProjectNum', {
  231. initialValue: theData.techProjectNum
  232. })(
  233. <InputNumber />
  234. )}
  235. </FormItem>
  236. </div>
  237. <FormItem style={{ paddingLeft: '40px' }}>
  238. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  239. <Button type="ghost" style={{ marginLeft: '20px' }} onClick={this.props.closeModal}>取消</Button>
  240. </FormItem>
  241. </Form >
  242. );
  243. },
  244. }));
  245. const ContractAdd = React.createClass({
  246. getInitialState() {
  247. return {
  248. visible: false,
  249. loading: false
  250. };
  251. },
  252. showModal() {
  253. this.setState({
  254. visible: true,
  255. data: {}
  256. });
  257. },
  258. handleCancel(e) {
  259. this.setState({
  260. visible: false,
  261. });
  262. this.props.closeAdd(false);
  263. },
  264. componentWillReceiveProps(nextProps) {
  265. this.state.visible = nextProps.showAdd;
  266. },
  267. spinChange(e) {
  268. this.setState({
  269. loading: e
  270. });
  271. },
  272. render() {
  273. return (
  274. <div className="patent-addNew">
  275. <Button className="patent-addNew" type="primary" onClick={this.props.onClick}>申请合同<Icon type="plus" /></Button>
  276. <Modal maskClosable={false} title="合同详情"
  277. visible={this.state.visible}
  278. onCancel={this.handleCancel}
  279. width='800px'
  280. footer='' >
  281. <Spin spinning={this.state.loading} className='spin-box'>
  282. <ContractAddFrom
  283. spinState={this.spinChange}
  284. closeModal={this.handleCancel}
  285. visible={this.state.visible}
  286. data={this.props.data}
  287. okClick={() => { this.props.closeAdd(false, true) }}
  288. typeOption={this.props.typeOption}
  289. contactsOption={this.props.contactsOption} />
  290. </Spin>
  291. </Modal>
  292. </div>
  293. );
  294. },
  295. });
  296. export default ContractAdd;