addIntention.jsx 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927
  1. import React from 'react';
  2. import { Modal, message, Spin, Input, Select, Button, Form, Col, Cascader, Tag, Tooltip, AutoComplete, Icon } from 'antd';
  3. import $ from 'jquery/src/ajax';
  4. import { areaSelect } from '@/NewDicProvinceList';
  5. import { socialAttribute, customerSource } from '@/dataDic.js';
  6. import TextArea from "antd/es/input/TextArea";
  7. const confirm = Modal.confirm;
  8. const AchievementDetailForm = Form.create()(React.createClass({
  9. getInitialState() {
  10. return {
  11. loading: false,
  12. data: {},
  13. detailApi: '',
  14. businessScope: [],
  15. inputVisible: false,
  16. cooperationProjects: [],
  17. selectCooperationProjects: [],
  18. natureOptions: [{
  19. value: 1,
  20. label: "政府机构"
  21. }, {
  22. value: 2,
  23. label: "科研院所"
  24. }, {
  25. value: 3,
  26. label: "高等院校"
  27. }, {
  28. value: 4,
  29. label: "社会团体"
  30. }, {
  31. value: 5,
  32. label: "企业",
  33. children: [{
  34. value: 1,
  35. label: "国企",
  36. children: [{
  37. value: 1,
  38. label: "上市公司",
  39. }, {
  40. value: 0,
  41. label: "非上市公司",
  42. }]
  43. }, {
  44. value: 2,
  45. label: "央企",
  46. children: [{
  47. value: 1,
  48. label: "上市公司",
  49. }, {
  50. value: 0,
  51. label: "非上市公司",
  52. }]
  53. }, {
  54. value: 3,
  55. label: "私企",
  56. children: [{
  57. value: 1,
  58. label: "上市公司",
  59. }, {
  60. value: 0,
  61. label: "非上市公司",
  62. }]
  63. }, {
  64. value: 4,
  65. label: "合资企业(含港澳台)",
  66. children: [{
  67. value: 1,
  68. label: "上市公司",
  69. }, {
  70. value: 0,
  71. label: "非上市公司",
  72. }]
  73. }, {
  74. value: 5,
  75. label: "外资控股",
  76. children: [{
  77. value: 1,
  78. label: "上市公司",
  79. }, {
  80. value: 0,
  81. label: "非上市公司",
  82. }]
  83. }]
  84. }, {
  85. value: 0,
  86. label: "其他组织"
  87. }]
  88. };
  89. },
  90. handleSubmit(e) {
  91. // if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.content)) {
  92. // } else {
  93. // message.error("请填写正确的姓名,且至少包含一个汉字");
  94. // return;
  95. // }
  96. e.preventDefault();
  97. this.props.form.validateFields((err, values) => {
  98. let re = new RegExp("^[\u4e00-\u9fa5]");
  99. if (!re.test(values.name)) {
  100. message.warning('公司名称必须以汉字开头!')
  101. return
  102. }
  103. if (!re.test(values.name.charAt(values.name.length - 1))) {
  104. message.warning('公司名称必须以汉字结尾!')
  105. return
  106. }
  107. if (values.name.length > 64) {
  108. message.warning('公司名称字数不超过64个!')
  109. return false;
  110. };
  111. let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  112. if (regu.test(values.name)) {
  113. message.warning('公司名称不能存在特殊符号或空格!')
  114. return false;
  115. }
  116. if (!/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(values.orgCode)) {
  117. message.warning('请输入正确的统一社会信用代码!')
  118. return
  119. }
  120. if (/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) {
  121. } else {
  122. message.error("请填写正确的联系人,且至少包含一个汉字");
  123. return false;
  124. };
  125. if (/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
  126. } else {
  127. message.error("请填写正确的职位,且至少包含一个汉字");
  128. return false;
  129. };
  130. if (!values.ProvinceCity[1]) {
  131. message.warning('请选择地区');
  132. return false;
  133. };
  134. if (values.content.length > 32) {
  135. message.warning('联系人字数不超过32个')
  136. return false;
  137. };
  138. if (values.length > 13) {
  139. message.warning('电话号码字数不超过13个')
  140. return false;
  141. };
  142. if (this.state.businessScope.length === 0) {
  143. message.warning('请选择主营产品')
  144. return false;
  145. }
  146. if (this.state.selectCooperationProjects.length === 0) {
  147. message.warning('请选择意向合作项目')
  148. return false;
  149. }
  150. if (!this.state.level && this.state.level != 0) {
  151. message.warning('请选择客户类型')
  152. return false;
  153. }
  154. if (!this.state.nature && this.state.nature != 0) {
  155. message.warning('请选择客户性质')
  156. return false;
  157. }
  158. if (this.state.nature == 0 && !this.state.natureOther) {
  159. message.warning('其他说明不能为空')
  160. return false;
  161. }
  162. let arr = [];
  163. for (let i of this.state.selectCooperationProjects) {
  164. arr.push(i.label)
  165. }
  166. let enterpriseNature = undefined; // 企业性质 0=其他,1=国企,2=央企,3=私企,4=合资企业(含港澳台),5=外资控股
  167. let listedNature = undefined; // 上市 0=否,1=是
  168. if (this.state.nature.length >= 2) {
  169. enterpriseNature = this.state.nature[1];
  170. }
  171. if (this.state.nature.length >= 3) {
  172. listedNature = this.state.nature[2];
  173. }
  174. if (!err) {
  175. this.setState({
  176. loading: true
  177. });
  178. $.ajax({
  179. method: "POST",
  180. dataType: "json",
  181. crossDomain: false,
  182. url: globalConfig.context + '/api/admin/customer/addCustomer',
  183. data: {
  184. name: values.name,
  185. orgCode: values.orgCode,
  186. contacts: values.content,
  187. contactMobile: values.telnum,
  188. societyTag: '0', //社会属性默认为 社会企业
  189. //source:values.customerSource,
  190. province: (values.ProvinceCity)[0],//省
  191. city: (values.ProvinceCity)[1],//市
  192. area: (values.ProvinceCity)[2],//区
  193. type: '1',
  194. intendedProject: arr.join(','),
  195. businessScope: this.state.businessScope.join(','),
  196. position: values.position,
  197. level: this.state.level,
  198. nature: this.state.nature[0],
  199. natureOther: this.state.natureOther,
  200. enterpriseNature,
  201. listedNature,
  202. }
  203. }).done(function (data) {
  204. this.setState({
  205. loading: false
  206. });
  207. if (!data.error.length) {
  208. message.success('保存成功!');
  209. this.setState({
  210. verification: false
  211. })
  212. this.props.handleOk();
  213. } else {
  214. message.warning(data.error[0].message);
  215. }
  216. }.bind(this));
  217. }
  218. });
  219. },
  220. componentWillMount() {
  221. this.state.name = '';
  222. this.state.content = '';
  223. this.state.position = '';
  224. this.state.telnum = '';
  225. // this.state.societyTagt='0';
  226. this.state.customerSource = '0';
  227. this.state.inputValue = '';
  228. this.state.businessScope = [];
  229. this.state.inputVisible = false;
  230. this.state.cooperationProjects = [];
  231. this.state.selectCooperationProjects = [];
  232. },
  233. componentWillReceiveProps(nextProps) {
  234. if (!this.props.visible && nextProps.visible) {
  235. this.state.name = '';
  236. this.state.content = '';
  237. this.state.position = '';
  238. this.state.telnum = '';
  239. this.state.inputValue = '';
  240. this.state.businessScope = [];
  241. this.state.inputVisible = false;
  242. this.state.cooperationProjects = [];
  243. this.state.selectCooperationProjects = [];
  244. // this.state.societyTagt='0';
  245. this.props.form.resetFields();
  246. };
  247. },
  248. handleClose(removedTag) {
  249. let businessScope = this.state.businessScope.filter(tag => { return tag !== removedTag });
  250. this.setState({ businessScope });
  251. },
  252. handleCloseCooperation(removedTag) {
  253. let selectCooperationProjects = this.state.selectCooperationProjects.filter(tag => { return tag.value !== removedTag.value });
  254. this.setState({ selectCooperationProjects });
  255. },
  256. showInput() {
  257. let str = this.state.businessScope.join('/')
  258. this.setState({
  259. inputVisible: true,
  260. inputValue: str
  261. });
  262. },
  263. handleInputConfirm() {
  264. let inputValue = this.state.inputValue;
  265. let arr = inputValue.split('/');
  266. let lv = true;
  267. for (let i of arr) {
  268. if (!i.replace(/\s+/g, '')) {
  269. message.warning("请填写关键词且不为空");
  270. return;
  271. }
  272. if (i.length > 16) {
  273. message.warning('单个标签字数不能超过16个字符')
  274. lv = false;
  275. return;
  276. }
  277. }
  278. if (lv) {
  279. arr = Array.from(new Set(arr));
  280. arr = arr.filter(v => v);
  281. this.setState({
  282. businessScope: arr,
  283. inputVisible: false,
  284. inputValue: '',
  285. });
  286. }
  287. },
  288. //加载(自动补全)
  289. supervisor(value) {
  290. $.ajax({
  291. method: "get",
  292. dataType: "json",
  293. crossDomain: false,
  294. url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
  295. data: {
  296. businessName: value
  297. },
  298. success: function (data) {
  299. let thedata = data.data;
  300. if (data.error.length === 0) {
  301. this.setState({
  302. cooperationProjects: thedata,
  303. });
  304. } else {
  305. message.warning(data.error[0].message);
  306. }
  307. }.bind(this),
  308. }).always(
  309. function () {
  310. }.bind(this)
  311. );
  312. },
  313. onSelect(value) {
  314. let arr = this.state.cooperationProjects.filter(v => v.id === value);
  315. let arr1 = this.state.selectCooperationProjects.filter(v => v.value === value);
  316. if (arr.length > 0) {
  317. if (arr1.length > 0) {
  318. message.warning('选项已存在');
  319. } else {
  320. this.state.selectCooperationProjects.push({
  321. label: arr[0].bname,
  322. value: arr[0].id,
  323. })
  324. this.setState({
  325. selectCooperationProjects: this.state.selectCooperationProjects
  326. })
  327. }
  328. }
  329. },
  330. checkUserName() {
  331. this.setState({
  332. verification: false
  333. })
  334. let yzName = this.props.form.getFieldValue('name')
  335. if (!yzName) {
  336. message.warning('请输入公司名称');
  337. return;
  338. }
  339. let re = new RegExp("^[\u4e00-\u9fa5]");
  340. if (!re.test(yzName)) {
  341. message.warning('公司名称必须以汉字开头!')
  342. return
  343. }
  344. if (!re.test(yzName.charAt(yzName.length - 1))) {
  345. message.warning('公司名称必须以汉字结尾!')
  346. return
  347. }
  348. if (yzName.length > 64) {
  349. message.warning('公司名称字数不超过64个!')
  350. return;
  351. };
  352. let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  353. if (regu.test(yzName)) {
  354. message.warning('公司名称不能存在特殊符号或空格!')
  355. return false;
  356. }
  357. $.ajax({
  358. method: "get",
  359. dataType: "json",
  360. crossDomain: false,
  361. url: globalConfig.context + '/api/admin/customer/checkUserName',
  362. data: {
  363. userName: this.props.form.getFieldValue('name')
  364. },
  365. success: function (data) {
  366. if (data.error.length === 0) {
  367. if (!data.data) {
  368. this.setState({
  369. verification: true
  370. })
  371. } else {
  372. Modal.info({
  373. title: '提醒',
  374. content: (
  375. <div>
  376. <p>企业客户已存在!请在“客户管理-企业客户-企业客户查询”输入企业全称查询所属人信息</p>
  377. </div>
  378. ),
  379. });
  380. this.setState({
  381. verification: false
  382. })
  383. }
  384. } else {
  385. message.warning(data.error[0].message);
  386. }
  387. }.bind(this),
  388. }).always(
  389. function () {
  390. }.bind(this)
  391. );
  392. },
  393. render() {
  394. const theData = this.state.data || {};
  395. const { getFieldDecorator } = this.props.form;
  396. const FormItem = Form.Item
  397. const formItemLayout = {
  398. labelCol: { span: 6 },
  399. wrapperCol: { span: 14 },
  400. };
  401. return (
  402. <div>
  403. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  404. <Spin spinning={this.state.loading}>
  405. <div>
  406. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  407. <div className="clearfix">
  408. <FormItem className="mid-item"
  409. {...formItemLayout}
  410. label="公司名称" >
  411. {getFieldDecorator('name', {
  412. rules: [{ required: true, message: '此项为必填项!' }],
  413. initialValue: this.state.name
  414. })(
  415. <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
  416. <Input placeholder="公司名称" />
  417. {this.state.verification && <Icon type="check-circle" style={{
  418. fontSize: 16,
  419. color: '#30e031',
  420. position: 'absolute',
  421. right: '80px',
  422. }} />}
  423. <Button onClick={this.checkUserName} type="primary" style={{ marginLeft: '10px' }}>验证</Button>
  424. </span>
  425. )}
  426. </FormItem>
  427. </div>
  428. <div className="clearfix">
  429. <FormItem
  430. {...formItemLayout}
  431. label="统一社会信用代码"
  432. >
  433. {getFieldDecorator('orgCode', {
  434. rules: [{ required: true, message: '此项为必填项!' }],
  435. initialValue: this.state.orgCode
  436. })(
  437. <Input placeholder="统一社会信用代码" />
  438. )}
  439. </FormItem>
  440. </div>
  441. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>如,科德集团则填写91430105670766451M</Col>
  442. <div className="clearfix">
  443. <FormItem
  444. {...formItemLayout}
  445. label="省-市-区"
  446. >
  447. {getFieldDecorator('ProvinceCity', {
  448. rules: [{ required: true, message: '此项为必填项!' }],
  449. initialValue: this.state.ProvinceCity
  450. })(
  451. <Cascader options={areaSelect()} placeholder="选择城市" />
  452. )}
  453. </FormItem>
  454. </div>
  455. <div className="clearfix">
  456. <FormItem className="mid-item"
  457. {...formItemLayout}
  458. label="联系人" >
  459. {getFieldDecorator('content', {
  460. rules: [{ required: true, message: '此项为必填项!' }],
  461. initialValue: this.state.content
  462. })(
  463. <Input placeholder="联系人姓名" />
  464. )}
  465. </FormItem>
  466. </div>
  467. <div className="clearfix">
  468. <FormItem className="mid-item"
  469. {...formItemLayout}
  470. label="职位" >
  471. {getFieldDecorator('position', {
  472. rules: [{ required: true, message: '此项为必填项!' }],
  473. initialValue: this.state.position
  474. })(
  475. <Input placeholder="联系人职位" />
  476. )}
  477. </FormItem>
  478. </div>
  479. <div className="clearfix">
  480. <FormItem className="mid-item"
  481. {...formItemLayout}
  482. label="联系电话" >
  483. {getFieldDecorator('telnum', {
  484. rules: [{ required: true, message: '此项为必填项!' }],
  485. initialValue: this.state.telnum
  486. })(
  487. <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
  488. )}
  489. </FormItem>
  490. </div>
  491. <div className="clearfix">
  492. <FormItem className="mid-item"
  493. {...formItemLayout}
  494. required
  495. label="主营产品" >
  496. <div>
  497. {this.state.businessScope.map((tag, index) => {
  498. const isLongTag = tag.length > 20;
  499. const tagElem = (
  500. <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
  501. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  502. </Tag>
  503. );
  504. return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
  505. })}
  506. {
  507. !this.state.inputVisible &&
  508. <Button
  509. size="small"
  510. type="primary"
  511. onClick={this.showInput}>
  512. + 新增主营产品
  513. </Button>
  514. }
  515. </div>
  516. {this.state.inputVisible && (<div>
  517. <TextArea
  518. style={{ width: '300px', height: '100px' }}
  519. value={this.state.inputValue}
  520. onChange={(e) => {
  521. this.setState({
  522. inputValue: e.target.value
  523. })
  524. }} />
  525. <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
  526. <div>
  527. <Button
  528. size="small"
  529. type="primary"
  530. onClick={this.handleInputConfirm}>
  531. 确定
  532. </Button>
  533. <Button
  534. size="small"
  535. style={{ marginLeft: '5px' }}
  536. onClick={() => {
  537. this.setState({
  538. inputVisible: false,
  539. inputValue: ''
  540. })
  541. }}>
  542. 取消
  543. </Button>
  544. </div>
  545. </div>)}
  546. </FormItem>
  547. </div>
  548. <div className="clearfix">
  549. <FormItem
  550. className="mid-item"
  551. {...formItemLayout}
  552. required
  553. label="意向合作项目" >
  554. <div>
  555. <div style={{ paddingBottom: this.state.selectCooperationProjects.length === 0 ? 0 : '10px' }}>
  556. {this.state.selectCooperationProjects.map((tag, index) => {
  557. const isLongTag = tag.label.length > 20;
  558. const tagElem = (
  559. <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
  560. {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
  561. </Tag>
  562. );
  563. return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
  564. })}
  565. </div>
  566. <div>
  567. <AutoComplete
  568. style={{ width: 200 }}
  569. onSearch={this.supervisor}
  570. onSelect={this.onSelect}
  571. placeholder="请输入关键字"
  572. >
  573. {
  574. this.state.cooperationProjects.map(function (item) {
  575. return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
  576. })
  577. }
  578. </AutoComplete>
  579. </div>
  580. </div>
  581. </FormItem>
  582. </div>
  583. <div className="clearfix">
  584. <FormItem
  585. className="mid-item"
  586. {...formItemLayout}
  587. required
  588. label="客户类型" >
  589. <Select
  590. placeholder="请选择客户类型"
  591. value={this.state.level}
  592. onChange={(e) => {
  593. this.setState({ level: e });
  594. }}
  595. >
  596. <Option value={0}>一般客户(一年以上预签)</Option>
  597. <Option value={1}>意向客户(半年内预签)</Option>
  598. <Option value={2}>重点客户(一个月内预签)</Option>
  599. </Select>
  600. </FormItem>
  601. </div>
  602. <div className="clearfix">
  603. <FormItem
  604. className="mid-item"
  605. {...formItemLayout}
  606. required
  607. label="客户性质" >
  608. {/* <Select
  609. placeholder="请选择客户性质"
  610. value={this.state.nature}
  611. onChange={(e) => {
  612. this.setState({ nature: e });
  613. }}
  614. >
  615. <Option value={1}>政府机构</Option>
  616. <Option value={2}>科研院所</Option>
  617. <Option value={3}>高等院校</Option>
  618. <Option value={4}>国有企业</Option>
  619. <Option value={5}>民营企业</Option>
  620. <Option value={6}>社会团体</Option>
  621. <Option value={0}>其他(请注明)</Option>
  622. </Select> */}
  623. <Cascader
  624. options={this.state.natureOptions}
  625. placeholder="请选择客户性质"
  626. onChange={e => { this.setState({ nature: e }) }}
  627. />
  628. </FormItem>
  629. </div>
  630. {
  631. !!this.state.nature && this.state.nature[0] === 0 &&
  632. <div className="clearfix">
  633. <FormItem
  634. className="mid-item"
  635. {...formItemLayout}
  636. required
  637. label="其他说明" >
  638. <Input
  639. placeholder="其他说明"
  640. value={this.state.natureOther}
  641. onChange={e => {
  642. this.setState({
  643. natureOther: e.target.value
  644. })
  645. }}
  646. />
  647. </FormItem>
  648. </div>
  649. }
  650. {/*<div className="clearfix">*/}
  651. {/* <FormItem className="mid-item"*/}
  652. {/* {...formItemLayout}*/}
  653. {/* label="社会属性"*/}
  654. {/* >*/}
  655. {/* {getFieldDecorator('societyTagt', {*/}
  656. {/* rules: [{ required: true, message: '此项为必填项!' }],*/}
  657. {/* initialValue: this.state.societyTagt*/}
  658. {/* })(*/}
  659. {/* <Select placeholder="客户社会属性">*/}
  660. {/* {*/}
  661. {/* socialAttribute.map(function (item) {*/}
  662. {/* return <Select.Option key={item.value} >{item.key}</Select.Option>*/}
  663. {/* })*/}
  664. {/* }*/}
  665. {/* </Select>*/}
  666. {/* )}*/}
  667. {/* </FormItem>*/}
  668. {/*</div>*/}
  669. </div>
  670. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  671. <Button type="primary" htmlType="submit" style={{ marginRight: '50px' }}>保存</Button>
  672. <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>
  673. </FormItem>
  674. </Spin>
  675. </Form >
  676. </div>
  677. )
  678. }
  679. }));
  680. const AddPerson = Form.create()(React.createClass({
  681. getInitialState() {
  682. return {
  683. loading: false,
  684. data: {},
  685. detailApi: ''
  686. };
  687. },
  688. handleSubmit(e) {
  689. e.preventDefault();
  690. this.props.form.validateFields((err, values) => {
  691. if (values.companyNamet.length > 64) {
  692. message.warning('联系人字数不超过64个')
  693. return false;
  694. };
  695. if (!values.ProvinceCity[1]) {
  696. message.warning('请选择地区');
  697. return false;
  698. };
  699. if (values.telnums.length > 13) {
  700. message.warning('电话号码字数不超过13个')
  701. return false;
  702. };
  703. if (!err) {
  704. this.setState({
  705. loading: true
  706. });
  707. $.ajax({
  708. method: "POST",
  709. dataType: "json",
  710. crossDomain: false,
  711. url: globalConfig.context + '/api/admin/customer/addCustomer',
  712. data: {
  713. contacts: values.companyNamet,
  714. societyTag: values.societyTagt,
  715. name: values.companyNamet,
  716. contactMobile: values.telnums,
  717. source: values.customerSource,
  718. province: (values.ProvinceCity)[0],//省
  719. city: (values.ProvinceCity)[1],//市
  720. area: (values.ProvinceCity)[2],//区
  721. type: '0'
  722. }
  723. }).done(function (data) {
  724. this.setState({
  725. loading: false
  726. });
  727. if (!data.error.length) {
  728. message.success('保存成功!');
  729. this.props.handleOk();
  730. } else {
  731. message.warning(data.error[0].message);
  732. }
  733. }.bind(this));
  734. }
  735. });
  736. },
  737. componentWillMount() {
  738. this.state.companyNamet = '';
  739. this.state.telnum = '';
  740. this.state.societyTagt = '0';
  741. this.state.customerSource = '0';
  742. },
  743. componentWillReceiveProps(nextProps) {
  744. if (!this.props.visible && nextProps.visible) {
  745. this.state.companyNamet = '';
  746. this.state.telnum = '';
  747. this.state.societyTagt = '0';
  748. this.state.customerSource = '0';
  749. this.props.form.resetFields();
  750. };
  751. },
  752. render() {
  753. const theData = this.state.data || {};
  754. const { getFieldDecorator } = this.props.form;
  755. const FormItem = Form.Item
  756. const formItemLayout = {
  757. labelCol: { span: 6 },
  758. wrapperCol: { span: 14 },
  759. };
  760. return (
  761. <div>
  762. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  763. <Spin spinning={this.state.loading}>
  764. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  765. <div className="clearfix">
  766. <FormItem className="mid-item"
  767. {...formItemLayout}
  768. label="客户姓名" >
  769. {getFieldDecorator('companyNamet', {
  770. rules: [{ required: true, message: '此项为必填项!' }],
  771. initialValue: this.state.companyNamet
  772. })(
  773. <Input placeholder="客户姓名" />
  774. )}
  775. </FormItem>
  776. </div>
  777. <div className="clearfix">
  778. <FormItem
  779. {...formItemLayout}
  780. label="省-市-区"
  781. >
  782. {getFieldDecorator('ProvinceCity', {
  783. rules: [{ required: true, message: '此项为必填项!' }],
  784. initialValue: this.state.ProvinceCity
  785. })(
  786. <Cascader options={areaSelect()} placeholder="选择城市" />
  787. )}
  788. </FormItem>
  789. </div>
  790. <div className="clearfix">
  791. <FormItem className="mid-item"
  792. {...formItemLayout}
  793. label="联系电话" >
  794. {getFieldDecorator('telnums', {
  795. rules: [{ required: true, message: '此项为必填项!' }],
  796. initialValue: this.state.telnums
  797. })(
  798. <Input placeholder="联系电话" />
  799. )}
  800. </FormItem>
  801. </div>
  802. <div className="clearfix">
  803. <FormItem className="mid-item"
  804. {...formItemLayout}
  805. label="社会属性"
  806. >
  807. {getFieldDecorator('societyTagt', {
  808. rules: [{ required: true, message: '此项为必填项!' }],
  809. initialValue: this.state.societyTagt
  810. })(
  811. <Select placeholder="客户社会属性">
  812. {
  813. socialAttribute.map(function (item) {
  814. return <Select.Option key={item.value} >{item.key}</Select.Option>
  815. })
  816. }
  817. </Select>
  818. )}
  819. </FormItem>
  820. </div>
  821. <div className="clearfix">
  822. <FormItem className="mid-item"
  823. {...formItemLayout}
  824. label="客户来源"
  825. >
  826. {getFieldDecorator('customerSource', {
  827. rules: [{ required: true, message: '此项为必填项!' }],
  828. initialValue: this.state.customerSource
  829. })(
  830. <Select placeholder="客户来源">
  831. {
  832. customerSource.map(function (item) {
  833. return <Select.Option key={item.value} >{item.key}</Select.Option>
  834. })
  835. }
  836. </Select>
  837. )}
  838. </FormItem>
  839. </div>
  840. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  841. <Button style={{ marginRight: '50px' }} type="primary" htmlType="submit">保存</Button>
  842. <Button type="ghost" onClick={this.props.closeDesc}>取消</Button>
  843. </FormItem>
  844. </Spin>
  845. </Form >
  846. </div>
  847. )
  848. }
  849. }));
  850. const AddIntention = React.createClass({
  851. getInitialState() {
  852. return {
  853. visible: false,
  854. tabsKey: 1,
  855. loading: false,
  856. dataSource: [],
  857. };
  858. },
  859. handleCancel(e) {
  860. this.setState({
  861. visible: false,
  862. });
  863. this.props.closeDesc(false);
  864. },
  865. handleOk(e) {
  866. this.setState({
  867. visible: false,
  868. });
  869. this.props.closeDesc(false, true);
  870. },
  871. componentWillReceiveProps(nextProps) {
  872. if (!this.state.visible && nextProps.showDesc) {
  873. this.state.tabsKey = "1";
  874. };
  875. this.state.visible = nextProps.showDesc;
  876. },
  877. render() {
  878. return (
  879. <div className="patent-desc">
  880. {
  881. this.state.visible &&
  882. <Modal maskClosable={false} visible={this.state.visible}
  883. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  884. width='600px'
  885. title='新建客户'
  886. footer=''
  887. className="admin-desc-content">
  888. <Spin spinning={this.state.loading}>
  889. {this.props.api.indexOf('Personal') < 0 ? <AchievementDetailForm
  890. data={this.props.data}
  891. newmodal={this.props.newmodal}
  892. closeDesc={this.handleCancel}
  893. visible={this.state.visible}
  894. handleOk={this.handleOk} /> : <AddPerson
  895. data={this.props.data}
  896. newmodal={this.props.newmodal}
  897. closeDesc={this.handleCancel}
  898. visible={this.state.visible}
  899. handleOk={this.handleOk}
  900. />}
  901. </Spin>
  902. </Modal>
  903. }
  904. </div>
  905. );
  906. },
  907. });
  908. export default Form.create({})(AddIntention);