contractAdd.jsx 13 KB

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