addIntention.jsx 17 KB

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