addIntention.jsx 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. import React from 'react';
  2. import { Icon, Modal, message, Spin, Input, Select, Button, Form ,Col} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import {socialAttribute,customerSource} from '@/dataDic.js';
  6. const AchievementDetailForm = Form.create()(React.createClass({
  7. getInitialState() {
  8. return {
  9. loading: false,
  10. data: {},
  11. detailApi:''
  12. };
  13. },
  14. handleSubmit(e) {
  15. e.preventDefault();
  16. this.props.form.validateFields((err, values) => {
  17. if(values.name.length>64){
  18. message.warning('客户名称字数不超过64个')
  19. return false;
  20. };
  21. if(values.content.length>32){
  22. message.warning('联系人字数不超过32个')
  23. return false;
  24. };
  25. if(values.length>13){
  26. message.warning('电话号码字数不超过13个')
  27. return false;
  28. };
  29. if (!err) {
  30. this.setState({
  31. loading: true
  32. });
  33. $.ajax({
  34. method: "POST",
  35. dataType: "json",
  36. crossDomain: false,
  37. url: globalConfig.context + '/api/admin/customer/addCustomer',
  38. data: {
  39. name: values.name,
  40. contacts:values.content,
  41. contactMobile:values.telnum,
  42. societyTag:values.societyTagt,
  43. source:values.customerSource,
  44. type:'1'
  45. }
  46. }).done(function (data) {
  47. this.setState({
  48. loading: false
  49. });
  50. if (!data.error.length) {
  51. message.success('保存成功!');
  52. this.props.handleOk();
  53. } else {
  54. message.warning(data.error[0].message);
  55. }
  56. }.bind(this));
  57. }
  58. });
  59. },
  60. componentWillMount() {
  61. this.state.name='';
  62. this.state.content='';
  63. this.state.telnum='';
  64. this.state.societyTagt='0';
  65. this.state.customerSource='0'
  66. },
  67. componentWillReceiveProps(nextProps) {
  68. if (!this.props.visible && nextProps.visible) {
  69. this.state.name='';
  70. this.state.content='';
  71. this.state.telnum='';
  72. this.state.societyTagt='0';
  73. this.props.form.resetFields();
  74. };
  75. },
  76. render() {
  77. const theData = this.state.data || {};
  78. const { getFieldDecorator } = this.props.form;
  79. const FormItem = Form.Item
  80. const formItemLayout = {
  81. labelCol: { span: 6 },
  82. wrapperCol: { span: 14 },
  83. };
  84. return (
  85. <div>
  86. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  87. <Spin spinning={this.state.loading}>
  88. <div>
  89. <Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  90. <div className="clearfix">
  91. <FormItem className="mid-item"
  92. {...formItemLayout}
  93. label="公司名称" >
  94. {getFieldDecorator('name', {
  95. rules: [{ required: true, message: '此项为必填项!' }],
  96. initialValue: this.state.name
  97. })(
  98. <Input placeholder="公司名称" />
  99. )}
  100. </FormItem>
  101. </div>
  102. <div className="clearfix">
  103. <FormItem className="mid-item"
  104. {...formItemLayout}
  105. label="联系人" >
  106. {getFieldDecorator('content', {
  107. rules: [{ required: true, message: '此项为必填项!' }],
  108. initialValue: this.state.content
  109. })(
  110. <Input placeholder="联系人" />
  111. )}
  112. </FormItem>
  113. </div>
  114. <div className="clearfix">
  115. <FormItem className="mid-item"
  116. {...formItemLayout}
  117. label="联系电话" >
  118. {getFieldDecorator('telnum', {
  119. rules: [{ required: true, message: '此项为必填项!' }],
  120. initialValue: this.state.telnum
  121. })(
  122. <Input placeholder="联系电话" />
  123. )}
  124. </FormItem>
  125. </div>
  126. <div className="clearfix">
  127. <FormItem className="mid-item"
  128. {...formItemLayout}
  129. label="社会属性"
  130. >
  131. {getFieldDecorator('societyTagt', {
  132. rules: [{ required: true, message: '此项为必填项!' }],
  133. initialValue: this.state.societyTagt
  134. })(
  135. <Select placeholder="客户社会属性">
  136. {
  137. socialAttribute.map(function (item) {
  138. return <Select.Option key={item.value} >{item.key}</Select.Option>
  139. })
  140. }
  141. </Select>
  142. )}
  143. </FormItem>
  144. </div>
  145. <div className="clearfix">
  146. <FormItem className="mid-item"
  147. {...formItemLayout}
  148. label="客户来源"
  149. >
  150. {getFieldDecorator('customerSource', {
  151. rules: [{ required: true, message: '此项为必填项!' }],
  152. initialValue: this.state.customerSource
  153. })(
  154. <Select placeholder="客户来源">
  155. {
  156. customerSource.map(function (item) {
  157. return <Select.Option key={item.value} >{item.key}</Select.Option>
  158. })
  159. }
  160. </Select>
  161. )}
  162. </FormItem>
  163. </div>
  164. </div>
  165. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  166. <Button type="primary" htmlType="submit" style={{marginRight:'50px'}}>保存</Button>
  167. <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>
  168. </FormItem>
  169. </Spin>
  170. </Form >
  171. </div>
  172. )
  173. }
  174. }));
  175. const AddPerson = Form.create()(React.createClass({
  176. getInitialState() {
  177. return {
  178. loading: false,
  179. data: {},
  180. detailApi:''
  181. };
  182. },
  183. handleSubmit(e) {
  184. e.preventDefault();
  185. this.props.form.validateFields((err, values) => {
  186. if(values.companyNamet.length>64){
  187. message.warning('联系人字数不超过64个')
  188. return false;
  189. };
  190. if(values.telnums.length>13){
  191. message.warning('电话号码字数不超过13个')
  192. return false;
  193. };
  194. if (!err) {
  195. this.setState({
  196. loading: true
  197. });
  198. $.ajax({
  199. method: "POST",
  200. dataType: "json",
  201. crossDomain: false,
  202. url: globalConfig.context + '/api/admin/customer/addCustomer',
  203. data: {
  204. contacts:values.companyNamet,
  205. societyTag:values.societyTagt,
  206. name: values.companyNamet,
  207. contactMobile: values.telnums,
  208. source:values.customerSource,
  209. type:'0'
  210. }
  211. }).done(function (data) {
  212. this.setState({
  213. loading: false
  214. });
  215. if (!data.error.length) {
  216. message.success('保存成功!');
  217. this.props.handleOk();
  218. } else {
  219. message.warning(data.error[0].message);
  220. }
  221. }.bind(this));
  222. }
  223. });
  224. },
  225. componentWillMount() {
  226. this.state.companyNamet='';
  227. this.state.telnum='';
  228. this.state.societyTagt='0';
  229. this.state.customerSource='0';
  230. },
  231. componentWillReceiveProps(nextProps) {
  232. if (!this.props.visible && nextProps.visible) {
  233. this.state.companyNamet='';
  234. this.state.telnum='';
  235. this.state.societyTagt='0';
  236. this.state.customerSource='0';
  237. this.props.form.resetFields();
  238. };
  239. },
  240. render() {
  241. const theData = this.state.data || {};
  242. const { getFieldDecorator } = this.props.form;
  243. const FormItem = Form.Item
  244. const formItemLayout = {
  245. labelCol: { span: 6 },
  246. wrapperCol: { span: 14 },
  247. };
  248. return (
  249. <div>
  250. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  251. <Spin spinning={this.state.loading}>
  252. <Col style={{color:'red',marginBottom:'10px'}} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  253. <div className="clearfix">
  254. <FormItem className="mid-item"
  255. {...formItemLayout}
  256. label="客户姓名" >
  257. {getFieldDecorator('companyNamet', {
  258. rules: [{ required: true, message: '此项为必填项!' }],
  259. initialValue: this.state.companyNamet
  260. })(
  261. <Input placeholder="客户姓名" />
  262. )}
  263. </FormItem>
  264. </div>
  265. <div className="clearfix">
  266. <FormItem className="mid-item"
  267. {...formItemLayout}
  268. label="联系电话" >
  269. {getFieldDecorator('telnums', {
  270. rules: [{ required: true, message: '此项为必填项!' }],
  271. initialValue: this.state.telnums
  272. })(
  273. <Input placeholder="联系电话" />
  274. )}
  275. </FormItem>
  276. </div>
  277. <div className="clearfix">
  278. <FormItem className="mid-item"
  279. {...formItemLayout}
  280. label="社会属性"
  281. >
  282. {getFieldDecorator('societyTagt', {
  283. rules: [{ required: true, message: '此项为必填项!' }],
  284. initialValue: this.state.societyTagt
  285. })(
  286. <Select placeholder="客户社会属性">
  287. {
  288. socialAttribute.map(function (item) {
  289. return <Select.Option key={item.value} >{item.key}</Select.Option>
  290. })
  291. }
  292. </Select>
  293. )}
  294. </FormItem>
  295. </div>
  296. <div className="clearfix">
  297. <FormItem className="mid-item"
  298. {...formItemLayout}
  299. label="客户来源"
  300. >
  301. {getFieldDecorator('customerSource', {
  302. rules: [{ required: true, message: '此项为必填项!' }],
  303. initialValue: this.state.customerSource
  304. })(
  305. <Select placeholder="客户来源">
  306. {
  307. customerSource.map(function (item) {
  308. return <Select.Option key={item.value} >{item.key}</Select.Option>
  309. })
  310. }
  311. </Select>
  312. )}
  313. </FormItem>
  314. </div>
  315. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  316. <Button style={{marginRight:'50px'}} type="primary" htmlType="submit">保存</Button>
  317. <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>
  318. </FormItem>
  319. </Spin>
  320. </Form >
  321. </div>
  322. )
  323. }
  324. }));
  325. const AddIntention = React.createClass({
  326. getInitialState() {
  327. return {
  328. visible: false,
  329. tabsKey: 1,
  330. loading: false,
  331. dataSource: [],
  332. };
  333. },
  334. handleCancel(e) {
  335. this.setState({
  336. visible: false,
  337. });
  338. this.props.closeDesc(false);
  339. },
  340. handleOk(e) {
  341. this.setState({
  342. visible: false,
  343. });
  344. this.props.closeDesc(false, true);
  345. },
  346. componentWillReceiveProps(nextProps) {
  347. if (!this.state.visible && nextProps.showDesc) {
  348. this.state.tabsKey = "1";
  349. };
  350. this.state.visible = nextProps.showDesc;
  351. },
  352. render() {
  353. return (
  354. <div className="patent-desc">
  355. <Modal maskClosable={false} visible={this.state.visible}
  356. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  357. width='600px'
  358. title='新建客户'
  359. footer=''
  360. className="admin-desc-content">
  361. <Spin spinning={this.state.loading}>
  362. {this.props.api.indexOf('Personal')<0?<AchievementDetailForm
  363. data={this.props.data}
  364. newmodal={this.props.newmodal}
  365. closeDesc={this.handleCancel}
  366. visible={this.state.visible}
  367. handleOk={this.handleOk} />:<AddPerson
  368. data={this.props.data}
  369. newmodal={this.props.newmodal}
  370. closeDesc={this.handleCancel}
  371. visible={this.state.visible}
  372. handleOk={this.handleOk}
  373. />}
  374. </Spin>
  375. </Modal>
  376. </div>
  377. );
  378. },
  379. });
  380. export default AddIntention;