myClientDesc.jsx 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421
  1. import React from 'react';
  2. import { Tabs, Table, Icon, Tooltip, Modal, message, AutoComplete, Spin, DatePicker,Upload, Input, InputNumber, Select,TimePicker, Button, Radio, Form, Cascader, Tag, Switch } from 'antd';
  3. import './myClient.less';
  4. import ajax from 'jquery/src/ajax/xhr.js';
  5. import moment from 'moment';
  6. import { areaSelect } from '../../NewDicProvinceList';
  7. import $ from 'jquery/src/ajax';
  8. import { maturityList, innovationList, transferModeList,cityArr ,newFollow,customerStatus,intentionalService,tag} from '../../dataDic';
  9. import { IndustryObject, getIndustryCategory } from '../../DicIndustryList.js';
  10. import { beforeUploadFile, splitUrl, companySearch,getTag,getTransferMode, getAchievementCategory, getTechAuditStatus, getDemandType, getMaturity, getInnovation,beforeUpload, getBase64,getsex,getCompanyIntention,getcityArr,getfllowSituation,getcustomerStatue} from '../../tools.js';
  11. import throttle from '../../throttle.js';
  12. const CustomerDetailForm = Form.create()(React.createClass({
  13. getInitialState() {
  14. return {
  15. loading: false,
  16. data: {},
  17. tags: [],
  18. };
  19. },
  20. handleSubmit(e) {
  21. e.preventDefault();
  22. this.props.form.validateFields((err, values) => {
  23. //意向服务多选
  24. // let companyMore = [];
  25. // if (values.companyIntention.length) {
  26. // let companyList = [];
  27. // values.companyIntention.map(function (item) {
  28. // companyList.push(item);
  29. // });
  30. // companyMore = companyList.join(",");
  31. // };
  32. let yearMonth = new Date(values.createYear).toLocaleDateString();
  33. let yearString = yearMonth.split('/').join('-');
  34. let days = new Date(values.creatMent);
  35. let hours = parseInt(days.getHours())<10 ? "0"+days.getHours():days.getHours();
  36. let minutes =parseInt(days.getMinutes())<10 ? "0"+days.getMinutes():days.getMinutes();
  37. let seconds =parseInt(days.getSeconds())<10 ? "0"+days.getSeconds():days.getSeconds();
  38. let pjstringY=hours+':'+minutes+':'+seconds ;
  39. let tags=''
  40. switch(values.tag){
  41. case '科技专家':tags=0; break;
  42. case '科研单位':tags=1; break;
  43. case '民间达人':tags=2; break;
  44. }
  45. if (!err) {
  46. this.setState({
  47. loading: true
  48. });
  49. $.ajax({
  50. method: "POST",
  51. dataType: "json",
  52. crossDomain: false,
  53. url: this.props.data.id ? globalConfig.context + '/api/admin/customer/updCustomer' : globalConfig.context + '/api/admin/customer/addCustomer',
  54. data: {
  55. customerType:values.customerTyp ,//客户信息 1
  56. companyName: values.companyName,//公司名称 1
  57. companyIndustry: values.companyIndustry,//公司行业
  58. companyIntention: values.companyIntention,//公司意向1
  59. tag: tags,
  60. locationProvince: values.locationProvince,//省份1
  61. adress: values.adress,//详细地址1
  62. remarks: values.remarks,//备注1
  63. followSituation: values.followSituation,//最新跟进1
  64. customerStatus: values.customerStatus,//客户状态1
  65. name: values.name,//客户姓名1
  66. mobile: values.mobile,//座机1
  67. telNum: values.telNum,//手机号码1
  68. sex: values.sex,//性别1
  69. customerPosition: values.customerPosition,//职位1
  70. wechat: values.wechat,//微信号1
  71. qq: values.qq,//qq 1
  72. depatrment: values.depatrment,//部门 1
  73. email: values.email,//邮箱 1
  74. shareType:0,
  75. followDates:yearString+' '+pjstringY,//时间,
  76. primaryFlg:0,
  77. }
  78. }).done(function (data) {
  79. this.setState({
  80. loading: false
  81. });
  82. if (!data.error.length) {
  83. message.success('保存成功!');
  84. this.props.handleOk();
  85. } else {
  86. message.warning(data.error[0].message);
  87. }
  88. }.bind(this));
  89. }
  90. });
  91. },
  92. render() {
  93. const theData = this.state.data || {};
  94. const { getFieldDecorator } = this.props.form;
  95. const FormItem = Form.Item
  96. const formItemLayout = {
  97. labelCol: { span: 8 },
  98. wrapperCol: { span: 14 },
  99. };
  100. const { RangePicker } = DatePicker;
  101. return (
  102. <Form horizontal onSubmit={this.handleSubmit} id="demand-form">
  103. <Spin spinning={this.state.loading}>
  104. <div className="clearfix">
  105. <FormItem className="half-item"
  106. {...formItemLayout}
  107. label="客户类型" >
  108. {getFieldDecorator('customerTyp', {
  109. rules: [{ required: true, message: '此项为必填项!' }],
  110. initialValue: theData.customerTyp
  111. })(
  112. <Select placeholder="选择客户类型" style={{ width: 160 }} >
  113. <Select.Option value="0" >个人客户</Select.Option>
  114. <Select.Option value="1" >机构单位</Select.Option>
  115. <Select.Option value="2" >团体单位</Select.Option>
  116. </Select>
  117. )}
  118. </FormItem>
  119. <div className="clearfix" style={{marginLeft:'40px',marginBottom:'20px',color:'#000000'}}>基本资料:</div>
  120. <div>
  121. <FormItem className="half-item"
  122. {...formItemLayout}
  123. label="录入时间" >
  124. {getFieldDecorator('createYear', {
  125. rules: [{ required: true, message: '此项为必填项!' }],
  126. initialValue: theData.createYear ? moment(theData.createYear) : null
  127. })(
  128. <DatePicker />
  129. )}
  130. {getFieldDecorator('creatMent', {
  131. rules: [{ required: true, message: '此项为必填项!' }],
  132. initialValue: theData.creatMent ? moment(theData.creatMent) : null
  133. })(
  134. <TimePicker />
  135. )}
  136. </FormItem>
  137. </div>
  138. <div className="clearfix" style={{marginLeft:'40px',marginBottom:'20px',color:'#000000'}}>公司资料:</div>
  139. <div>
  140. <FormItem className="half-item"
  141. {...formItemLayout}
  142. label="公司名称" >
  143. {getFieldDecorator('companyName', {
  144. rules: [{ required: true, message: '此项为必填项!' }],
  145. initialValue: theData.companyName
  146. })(
  147. <Input />
  148. )}
  149. </FormItem>
  150. <FormItem className="half-item"
  151. {...formItemLayout}
  152. label="公司行业" >
  153. {getFieldDecorator('companyIndustry', {
  154. initialValue: theData.companyIndustry
  155. })(
  156. <Input />
  157. )}
  158. </FormItem>
  159. <FormItem className="half-item"
  160. {...formItemLayout}
  161. label="地区" >
  162. {getFieldDecorator('locationProvince', {
  163. initialValue: getcityArr(theData.locationProvince)
  164. })(
  165. <Select placeholder="选择地区" style={{ width: 160 }} >
  166. {
  167. cityArr.map(function (item) {
  168. return <Select.Option key={item.value} >{item.key}</Select.Option>
  169. })
  170. }
  171. </Select>
  172. )}
  173. </FormItem>
  174. {/*
  175. <FormItem
  176. {...formItemLayout}
  177. label="地区"
  178. >
  179. {getFieldDecorator('locationProvince', {
  180. initialValue: theData.locationProvince
  181. })(
  182. <Cascader options={areaSelect()} />
  183. )}
  184. </FormItem>
  185. */}
  186. <FormItem className="half-item"
  187. {...formItemLayout}
  188. label="最新跟进" >
  189. {getFieldDecorator('followSituation', {
  190. rules: [{ required: true, message: '此项为必填项!' }],
  191. initialValue: getfllowSituation(theData.followSituation)
  192. })(
  193. <Select placeholder="选择跟进进度" style={{ width: 160 }} >
  194. {
  195. newFollow.map(function (item) {
  196. return <Select.Option key={item.value} >{item.key}</Select.Option>
  197. })
  198. }
  199. </Select>
  200. )}
  201. </FormItem>
  202. <FormItem className="half-item"
  203. {...formItemLayout}
  204. label="客户状态" >
  205. {getFieldDecorator('customerStatus', {
  206. rules: [{ required: true, message: '此项为必填项!' }],
  207. initialValue: getcustomerStatue(theData.customerStatus)
  208. })(
  209. <Select placeholder="选择客户状态" style={{ width: 160 }} >
  210. {
  211. customerStatus.map(function (item) {
  212. return <Select.Option key={item.value} >{item.key}</Select.Option>
  213. })
  214. }
  215. </Select>
  216. )}
  217. </FormItem>
  218. <FormItem className="half-item"
  219. {...formItemLayout}
  220. label="详细地址" >
  221. {getFieldDecorator('adress', {
  222. initialValue: theData.adress
  223. })(
  224. <Input />
  225. )}
  226. </FormItem>
  227. <FormItem className="half-item"
  228. {...formItemLayout}
  229. label="标签" >
  230. {getFieldDecorator('tag', {
  231. initialValue: theData.tag
  232. })(
  233. <Select placeholder="选择客户标签" >
  234. {
  235. tag.map(function (item) {
  236. return <Select.Option key={item.key} >{item.key}</Select.Option>
  237. })
  238. }
  239. </Select>
  240. )}
  241. </FormItem>
  242. <div className="clearfix" >
  243. <FormItem className="half-item" style={{marginLeft:'80px'}}
  244. labelCol={{ span: 4 }}
  245. wrapperCol={{ span: 18 }}
  246. label="意向服务" >
  247. {getFieldDecorator('companyIntention', {
  248. rules: [{ required: true, message: '此项为必填项!' }],
  249. initialValue: theData.companyIntention
  250. })(
  251. <Select placeholder="选择意向服务" style={{ width: 160 }} >
  252. {
  253. intentionalService.map(function (item) {
  254. return <Select.Option key={item.value} >{item.key}</Select.Option>
  255. })
  256. }
  257. </Select>
  258. )}
  259. </FormItem>
  260. </div>
  261. <div className="clearfix">
  262. <FormItem
  263. labelCol={{ span: 4 }}
  264. wrapperCol={{ span: 18 }}
  265. label="备注" >
  266. {getFieldDecorator('remarks', {
  267. initialValue: theData.remarks
  268. })(
  269. <Input type="textarea" rows={4} />
  270. )}
  271. </FormItem>
  272. </div>
  273. </div>
  274. <div className="clearfix" style={{marginLeft:'40px',marginBottom:'20px',color:'#000000'}}>联系资料:</div>
  275. <div className="clearfix">
  276. <FormItem className="half-item"
  277. {...formItemLayout}
  278. label="姓名" >
  279. {getFieldDecorator('name', {
  280. rules: [{ required: true, message: '此项为必填项!' }],
  281. initialValue: theData.name
  282. })(
  283. <Input />
  284. )}
  285. </FormItem>
  286. <FormItem className="half-item"
  287. {...formItemLayout}
  288. label="手机号码" >
  289. {getFieldDecorator('telNum', {
  290. rules: [{ required: true, message: '此项为必填项!' }],
  291. initialValue: theData.telNum
  292. })(
  293. <Input />
  294. )}
  295. </FormItem>
  296. <FormItem className="half-item"
  297. {...formItemLayout}
  298. label="性别" >
  299. {getFieldDecorator('sex', {
  300. initialValue: theData.sex
  301. })(
  302. <Radio.Group>
  303. <Radio value="0">男</Radio>
  304. <Radio value="1">女</Radio>
  305. </Radio.Group>
  306. )}
  307. </FormItem>
  308. <FormItem className="half-item"
  309. {...formItemLayout}
  310. label="座机号" >
  311. {getFieldDecorator('mobile', {
  312. initialValue: theData.mobile
  313. })(
  314. <Input />
  315. )}
  316. </FormItem>
  317. <FormItem className="half-item"
  318. {...formItemLayout}
  319. label="QQ号码" >
  320. {getFieldDecorator('qq', {
  321. initialValue: theData.qq
  322. })(
  323. <Input />
  324. )}
  325. </FormItem>
  326. <FormItem className="half-item"
  327. {...formItemLayout}
  328. label="邮箱号" >
  329. {getFieldDecorator('email', {
  330. initialValue: theData.email
  331. })(
  332. <Input />
  333. )}
  334. </FormItem>
  335. <FormItem className="half-item"
  336. {...formItemLayout}
  337. label="微信" >
  338. {getFieldDecorator('wechat', {
  339. initialValue: theData.wechat
  340. })(
  341. <Input />
  342. )}
  343. </FormItem>
  344. <FormItem className="half-item"
  345. {...formItemLayout}
  346. label="部门" >
  347. {getFieldDecorator('depatrment', {
  348. initialValue: theData.depatrment
  349. })(
  350. <Input />
  351. )}
  352. </FormItem>
  353. <FormItem className="half-item"
  354. {...formItemLayout}
  355. label="职位" >
  356. {getFieldDecorator('customerPosition', {
  357. initialValue: theData.customerPosition
  358. })(
  359. <Input />
  360. )}
  361. </FormItem>
  362. </div>
  363. </div>
  364. <FormItem wrapperCol={{ span: 12, offset: 4 }}>
  365. <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
  366. <Button className="set-submit" type="ghost" onClick={this.props.closeDesc}>取消</Button>
  367. </FormItem>
  368. </Spin>
  369. </Form >
  370. )
  371. }
  372. }));
  373. const CustomerDetail = React.createClass({
  374. getInitialState() {
  375. return {
  376. visible: false,
  377. loading: false,
  378. };
  379. },
  380. handleCancel(e) {
  381. this.setState({
  382. visible: false,
  383. });
  384. this.props.closeDesc(false);
  385. },
  386. handleOk(e) {
  387. this.setState({
  388. visible: false,
  389. });
  390. this.props.closeDesc(false, true);
  391. },
  392. componentWillReceiveProps(nextProps) {
  393. this.state.visible = nextProps.showDesc;
  394. },
  395. render() {
  396. return (
  397. <div className="patent-desc">
  398. <Modal maskClosable={false} visible={this.state.visible}
  399. onOk={this.checkPatentProcess} onCancel={this.handleCancel}
  400. title='新建客户'
  401. width='1000px'
  402. footer=''
  403. className="admin-desc-content">
  404. <Spin spinning={this.state.loading}>
  405. <CustomerDetailForm
  406. data={this.props.data}
  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 CustomerDetail;