myClient.jsx 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125
  1. import React from 'react';
  2. import { Radio, Icon, Button, Input, Select, Spin, Table, Switch, message, DatePicker, Modal, Upload,Form ,Row,Col,TimePicker} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import moment from 'moment';
  6. import './myClient.less';
  7. import TechAchievementDesc from './myClientDesc.jsx';
  8. import { achievementCategoryList, techAuditStatusList,cityArr,customerStatus,intentionalService,newFollow ,contact} from '../../dataDic.js';
  9. import { beforeUploadFile, companySearch, getAchievementCategory, getSearchUrl, getTechAuditStatus,getcustomerTyp,getcityArr,getcustomerStatue,getCompanyIntention,getfllowSituation,getcontact} from '../../tools.js';
  10. import BatchImport from './batchImport';
  11. //图片组件
  12. const PicturesWall = React.createClass({
  13. getInitialState() {
  14. return {
  15. previewVisible: false,
  16. previewImage: '',
  17. fileList: [],
  18. }
  19. },
  20. handleCancel() {
  21. this.setState({ previewVisible: false })
  22. },
  23. handlePreview(file) {
  24. this.setState({
  25. previewImage: file.url || file.thumbUrl,
  26. previewVisible: true,
  27. });
  28. },
  29. handleChange(info) {
  30. let fileList = info.fileList;
  31. this.setState({ fileList });
  32. this.props.fileList(fileList);
  33. },
  34. componentWillReceiveProps(nextProps) {
  35. this.state.fileList = nextProps.pictureUrl;
  36. },
  37. render() {
  38. const { previewVisible, previewImage, fileList } = this.state;
  39. const uploadButton = (
  40. <div>
  41. <Icon type="plus" />
  42. <div className="ant-upload-text">点击上传</div>
  43. </div>
  44. );
  45. return (
  46. <div className="clearfix">
  47. <Upload
  48. action={globalConfig.context + "/api/admin/achievement/uploadPicture"}
  49. data={{ 'sign': this.props.pictureSign }}
  50. listType="picture-card"
  51. fileList={fileList}
  52. onPreview={this.handlePreview}
  53. onChange={this.handleChange} >
  54. {fileList.length >= 5 ? null : uploadButton}
  55. </Upload>
  56. <Modal maskClosable={false} visible={previewVisible} footer={null} onCancel={this.handleCancel}>
  57. <img alt="example" style={{ width: '100%' }} src={previewImage} />
  58. </Modal>
  59. </div>
  60. );
  61. }
  62. });
  63. const AchievementList = Form.create()(React.createClass({
  64. loadData(pageNumber, apiUrl) {
  65. this.state.data = [];
  66. this.setState({
  67. loading: true
  68. });
  69. $.ajax({
  70. method: "post",
  71. dataType: "json",
  72. crossDomain: false,
  73. url:globalConfig.context + '/api/admin/customer/listPrivateCustomer',
  74. data: {
  75. pageNumber: pageNumber || 1,
  76. pageSize: this.state.pagination.pageSize,
  77. customerName: this.state.customerName, //名称1
  78. shareTyp: this.state.shareTyp, //客户类型1
  79. province:this.state.province,//地区
  80. customerStatus:this.state.customerStatus,//客户状态1
  81. contactName:this.state.contactName,//联系人姓名1
  82. adminName:this.state.adminName,//跟单人1
  83. companyIntention:this.state.companyIntention,//意向服务
  84. followSituation:this.state.followSituation,//最新跟进
  85. //releaseDateStartDate: this.state.releaseDate[0],
  86. //releaseDateEndDate: this.state.releaseDate[1],
  87. },
  88. success: function (data) {
  89. let theArr = [];
  90. if (!data.data || !data.data.list) {
  91. if (data.error && data.error.length) {
  92. message.warning(data.error[0].message);
  93. };
  94. } else {
  95. for (let i = 0; i < data.data.list.length; i++) {
  96. let thisdata = data.data.list[i];
  97. theArr.push({
  98. key: i,
  99. id: thisdata.id,
  100. companyName:thisdata.companyName,//公司名称
  101. _shareType:thisdata._shareType,//客户类型
  102. locationProvince:thisdata.locationProvince,//地区
  103. contactName:thisdata.contactName, //联系人姓名
  104. telNum:thisdata.telNum,//手机号
  105. _customerStatus:thisdata._customerStatus,//客户状态
  106. _companyIntention:thisdata._companyIntention,//意向服务
  107. _followSituation:thisdata._followSituation,//最新跟进
  108. adminName:thisdata.adminName, //跟进人
  109. followDate:thisdata.followDate
  110. });
  111. };
  112. this.state.pagination.current = data.data.pageNumber;
  113. this.state.pagination.total = data.data.totalCount;
  114. };
  115. this.setState({
  116. dataSource: theArr,
  117. pagination: this.state.pagination
  118. });
  119. }.bind(this),
  120. }).always(function () {
  121. this.setState({
  122. loading: false
  123. });
  124. }.bind(this));
  125. },
  126. //点击便捷记录
  127. setModal1Visible(modal1Visible) {
  128. this.setState({ modal1Visible });
  129. this.setState({
  130. showDesc: false
  131. });
  132. },
  133. setModal2Visible(modal2Visible) {
  134. this.setState({ modal2Visible });
  135. },
  136. //点击修改
  137. setModal3Visible(modal3Visible) {
  138. this.setState({ modal3Visible });
  139. this.setState({
  140. showDesc: false
  141. });
  142. alert("22233")
  143. },
  144. //历史记录中点击跟进人模板出现
  145. setModal4Visible(modal4Visible) {
  146. this.setState({ modal4Visible }); //需要一个请求数据
  147. },
  148. getPictureUrl(e) {
  149. this.setState({pictureUrl: e });
  150. },
  151. componentWillReceiveProps(nextProps) {
  152. if (!this.props.visible && nextProps.visible) {
  153. if (nextProps.data && nextProps.data.id) {
  154. this.loadData(nextProps.data.id, nextProps.detailApiUrl);
  155. };
  156. this.state.technicalPictureUrl = [];
  157. };
  158. },
  159. //快捷设置保存提交
  160. handleSubmit(e) {
  161. e.preventDefault();
  162. let deletedIds;
  163. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  164. let rowItem = this.state.selectedRows[idx];
  165. if (rowItem.id) {
  166. deletedIds=rowItem.id
  167. };
  168. };
  169. this.setState({
  170. selectedRowKeys: [],
  171. });
  172. this.props.form.validateFields((err, values) => {
  173. //url转化
  174. let theTechnicalPictureUrl = [];
  175. if (this.state.technicalPictureUrl.length) {
  176. let picArr = [];
  177. this.state.technicalPictureUrl.map(function (item) {
  178. picArr.push(item);
  179. });
  180. theTechnicalPictureUrl = picArr.join(",");
  181. };
  182. if (!err) {
  183. this.setState({
  184. loading: true
  185. });
  186. $.ajax({
  187. method: "POST",
  188. dataType: "json",
  189. crossDomain: false,
  190. url:globalConfig.context + '/api/admin/achievement/apply',
  191. data: {
  192. id: deletedIds,//编号id
  193. // serialNumber: values.serialNumber,//联系方式
  194. // serialNumber: values.serialNumber,//更新的客户状态
  195. // serialNumber: values.serialNumber,//最新跟进状态
  196. // serialNumber: values.serialNumber,//跟进结果
  197. TechnicalPictureUrl: theTechnicalPictureUrl,//上传的图片
  198. // ownerEmail: this.state.switchValue ? values.ownerEmail : undefined,//开关控制下详细资料
  199. }
  200. }).done(function (data) {
  201. this.setState({
  202. loading: false
  203. });
  204. if (!data.error.length) {
  205. message.success('保存成功!');
  206. this.setModal1Visible(false)
  207. } else {
  208. message.warning(data.error[0].message);
  209. }
  210. this.loadData();
  211. }.bind(this));
  212. }
  213. });
  214. },
  215. submitcontact(e){
  216. let deletedIds;
  217. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  218. let rowItem = this.state.selectedRows[idx];
  219. if (rowItem.id) {
  220. deletedIds=rowItem.id
  221. };
  222. };
  223. this.setState({
  224. selectedRowKeys: [],
  225. });
  226. e.preventDefault();
  227. this.props.form.validateFields((err, values) => {
  228. if (!err) {
  229. this.setState({
  230. loading: true
  231. });
  232. $.ajax({
  233. method: "POST",
  234. dataType: "json",
  235. crossDomain: false,
  236. url: globalConfig.context + '/api/admin/customer/addCustomer',
  237. data: {
  238. id: deletedIds,//编号id
  239. // serialNumber: values.serialNumber,//联系方式
  240. // serialNumber: values.serialNumber,//更新的客户状态
  241. // serialNumber: values.serialNumber,//最新跟进状态
  242. // serialNumber: values.serialNumber,//跟进结果
  243. // ownerEmail: this.state.switchValue ? values.ownerEmail : undefined,//开关控制下详细资料
  244. }
  245. }).done(function (data) {
  246. this.setState({
  247. loading: false
  248. });
  249. if (!data.error.length) {
  250. message.success('保存成功!');
  251. this.setModal2Visible(false)
  252. } else {
  253. message.warning(data.error[0].message);
  254. }
  255. this.loadData();
  256. }.bind(this));
  257. }
  258. });
  259. },
  260. getTechnicalPictureUrl(e) {
  261. this.setState({ technicalPictureUrl: e });
  262. },
  263. //新建联系人modal框显示
  264. showModal(){
  265. this.setState({
  266. visible: true,
  267. });
  268. },
  269. //指定转交人的点击函数
  270. showModa(){
  271. alert("点击开始转交");
  272. this.setState({
  273. visible: true,
  274. });
  275. $.ajax({
  276. method: "get",
  277. dataType: "json",
  278. crossDomain: false,
  279. url: globalConfig.context + "/api/admin/achievement/offShelf",
  280. data: {
  281. "id": ''
  282. }
  283. }).done(function (data) {
  284. if (data.error && data.error.length) {
  285. message.warning(data.error[0].message);
  286. } else {
  287. let theAssigne = [];
  288. if (!data.data || !data.data.list) {
  289. if (data.error && data.error.length) {
  290. message.warning(data.error[0].message);
  291. };
  292. } else {
  293. for (let i = 0; i < data.data.list.length; i++) {
  294. let thisdata = data.data.list[i];
  295. //处理数据 进行循环
  296. theAssigne.push({
  297. key: i,
  298. id: thisdata.id,
  299. });
  300. };
  301. };
  302. this.setState({
  303. dataid: theAssigne,
  304. });
  305. }
  306. }.bind(this));
  307. },
  308. //选择了指定人之后的保存点击函数,需要修改函数
  309. changeAssigner() {
  310. alert("选好了开始转交");
  311. this.setState({
  312. visible: false,
  313. });
  314. let changeIds;
  315. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  316. let rowItem = this.state.selectedRows[idx];
  317. if (rowItem.id) {
  318. changeIds=rowItem.id
  319. };
  320. };
  321. $.ajax({
  322. method: "GET",
  323. dataType: "json",
  324. crossDomain: false,
  325. url: globalConfig.context + "/api/admin/customer/deleteCustomer",
  326. data: {
  327. id: changeIds
  328. }
  329. }).done(function (data) {
  330. if (!data.data.error.length) {
  331. message.success('转交成功!');
  332. this.setState({
  333. loading: false,
  334. });
  335. } else {
  336. message.warning(data.error[0].message);
  337. };
  338. this.loadData();
  339. }.bind(this));
  340. },
  341. handleOk(e){
  342. this.setState({
  343. visible: false,
  344. });
  345. },
  346. handleCancel(e){
  347. this.setState({
  348. visible: false,
  349. });
  350. },
  351. getInitialState() {
  352. return {
  353. technicalPictureUrl: [],
  354. modal1Visible: false,
  355. modal2Visible: false,
  356. visible: false ,
  357. searchMore: true,
  358. searchType: 0,
  359. validityPeriodDate: [],
  360. releaseDate: [],
  361. selectedRowKeys: [],
  362. selectedRows: [],
  363. loading: false,
  364. pagination: {
  365. defaultCurrent: 1,
  366. defaultPageSize: 10,
  367. showQuickJumper: true,
  368. pageSize: 10,
  369. onChange: function (page) {
  370. this.loadData(page);
  371. }.bind(this),
  372. showTotal: function (total) {
  373. return '共' + total + '条数据';
  374. }
  375. },
  376. columns: [
  377. {
  378. title: '公司名称',
  379. dataIndex: 'companyName',
  380. key: 'companyName',
  381. render: text => {
  382. return (
  383. <Button onClick={this.tableRowClick} >{text}</Button>
  384. )
  385. }
  386. }, {
  387. title: '客户类型',
  388. dataIndex: '_shareType',
  389. key: '_shareType'
  390. // render: text => { return getcustomerTyp(text); }
  391. }, {
  392. title: '地区',
  393. dataIndex: 'locationProvince',
  394. key: 'locationProvince',
  395. render: text => { return getcityArr(text); }
  396. }, {
  397. title: '联系人姓名',
  398. dataIndex: 'contactName',
  399. key: 'contactName',
  400. },
  401. {
  402. title: '手机号',
  403. dataIndex: 'telNum',
  404. key:'telNum',
  405. },
  406. {
  407. title: '客户状态',
  408. dataIndex: '_customerStatus',
  409. key: '_customerStatus'
  410. //render: text => { return getcustomerStatue(text) }
  411. },
  412. {
  413. title: '意向服务',
  414. dataIndex: '_companyIntention',
  415. key: '_companyIntention'
  416. //render: text => { return getCompanyIntention(text) }
  417. },
  418. {
  419. title: '最新跟进',
  420. dataIndex: '_followSituation',
  421. key: '_followSituation',
  422. render:text => {
  423. const theData = this.props.data || {};
  424. const FormItem = Form.Item;
  425. const { getFieldDecorator } = this.props.form;
  426. const formItemLayout = {
  427. labelCol: { span: 8 },
  428. wrapperCol: { span: 14 },
  429. };
  430. const formItemLayput = {
  431. labelCol: { span: 10 },
  432. wrapperCol: { span: 14 },
  433. };
  434. return (
  435. <div>
  436. <Button onClick={() => this.setModal3Visible(true)} style={{marginRight:'10px'}}>{text}</Button>
  437. <Button type="primary" onClick={() => this.setModal1Visible(true)}><Icon type="plus" /></Button>
  438. <Modal
  439. style={{left:'500px'}}
  440. footer=''
  441. title="跟进人详细信息"
  442. width='400px'
  443. visible={this.state.modal4Visible}
  444. onOk={() => this.setModal4Visible(false)}
  445. onCancel={() => this.setModal4Visible(false)}
  446. >
  447. <Form horizontal onSubmit={this.submitcontact} id="demand-form">
  448. <Spin spinning={this.state.loading}>
  449. <div className='clearfix'>
  450. <FormItem className="half-item"
  451. {...formItemLayput}
  452. label="所属公司" >
  453. <span>{theData.id}</span>
  454. </FormItem>
  455. <FormItem className="half-item"
  456. {...formItemLayput}
  457. label="主要联系人" >
  458. <span>{theData.id}</span>
  459. </FormItem>
  460. <FormItem className="half-item"
  461. {...formItemLayput}
  462. label="性别" >
  463. <span>{theData.id}</span>
  464. </FormItem>
  465. <FormItem className="half-item"
  466. {...formItemLayput}
  467. label="姓名" >
  468. <span>{theData.id}</span>
  469. </FormItem>
  470. <FormItem className="half-item"
  471. {...formItemLayput}
  472. label="QQ号" >
  473. <span>{theData.id}</span>
  474. </FormItem>
  475. <FormItem className="half-item"
  476. {...formItemLayput}
  477. label="手机号" >
  478. <span>{theData.id}</span>
  479. </FormItem>
  480. <FormItem className="half-item"
  481. {...formItemLayput}
  482. label="部门" >
  483. <span>{theData.id}</span>
  484. </FormItem>
  485. <FormItem className="half-item"
  486. {...formItemLayput}
  487. label="职位" >
  488. <span>{theData.id}</span>
  489. </FormItem>
  490. <FormItem className="half-item"
  491. {...formItemLayput}
  492. label="微信号" >
  493. <span>{theData.id}</span>
  494. </FormItem>
  495. </div>
  496. </Spin>
  497. </Form>
  498. </Modal>
  499. <Modal
  500. footer=''
  501. title="历史记录列表"
  502. width='600px'
  503. visible={this.state.modal3Visible}
  504. onOk={() => this.setModal3Visible(false)}
  505. onCancel={() => this.setModal3Visible(false)}
  506. >
  507. <Form horizontal id="demand-form">
  508. <Spin spinning={this.state.loading}>
  509. <div className="clearfix">
  510. <FormItem className="half-item"
  511. {...formItemLayput}
  512. label="" >
  513. <span style={{marginLeft:'60px'}}>历史记录</span>
  514. </FormItem>
  515. <FormItem className="half-item"
  516. {...formItemLayput}
  517. label="" >
  518. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" ,marginLeft:'100px'}}
  519. onClick={this.delectRow}>删除记录</Button>
  520. </FormItem>
  521. <FormItem className="half-item"
  522. {...formItemLayput}
  523. label="时间" >
  524. <span>{theData.category}</span>
  525. </FormItem>
  526. <FormItem className="half-item"
  527. {...formItemLayput}
  528. label="跟进人" >
  529. <span style={{color:'#f00'}} onClick={() => this.setModal4Visible(true)}>{theData.category}</span>
  530. </FormItem>
  531. <FormItem className="half-item"
  532. {...formItemLayput}
  533. label="客户" >
  534. <span>{theData.category}</span>
  535. </FormItem>
  536. <FormItem className="half-item"
  537. {...formItemLayput}
  538. label="联系方式" >
  539. <span>{theData.category}</span>
  540. </FormItem>
  541. </div>
  542. <div className="clearfix">
  543. <FormItem className="half-item"
  544. {...formItemLayput}
  545. label="跟进状态" >
  546. <span>{theData.category}</span>
  547. </FormItem>
  548. </div>
  549. <div className="clearfix">
  550. <FormItem
  551. labelCol={{ span: 5 }}
  552. wrapperCol={{ span: 18 }}
  553. label="跟进结果" >
  554. <span>{theData.category}</span>
  555. </FormItem>
  556. </div>
  557. <div className="clearfix">
  558. <FormItem
  559. labelCol={{ span: 5 }}
  560. wrapperCol={{ span: 18 }}
  561. label="附件" >
  562. <div className="clearfix">
  563. <Upload className="demandDetailShow-upload"
  564. listType="picture-card"
  565. fileList={this.state.technicalPictureUrl}
  566. onPreview={(file) => {
  567. this.setState({
  568. previewImage: file.url || file.thumbUrl,
  569. previewVisible: true,
  570. });
  571. }} >
  572. </Upload>
  573. <Modal maskClosable={false} footer={null}
  574. visible={this.state.previewVisible}
  575. onCancel={() => { this.setState({ previewVisible: false }) }}>
  576. <img alt="" style={{ width: '100%' }} src={this.state.previewImage || ''} />
  577. </Modal>
  578. </div>
  579. </FormItem>
  580. </div>
  581. </Spin>
  582. <Button style={{ marginRight: '20px',marginLeft:'210px',marginBottom:'50px' ,marginTop:'50px'}} type="primary" onClick={this.handleSubmit}>保存</Button>
  583. <Button className="set-submit" type="ghost" onClick={() => this.setModal3Visible(false)} id='change_rem'>取消</Button>
  584. </Form>
  585. </Modal>
  586. <Modal
  587. footer=''
  588. title="便捷修改"
  589. width='1000px'
  590. visible={this.state.modal1Visible}
  591. onOk={() => this.setModal1Visible(false)}
  592. onCancel={() => this.setModal1Visible(false)}
  593. >
  594. <Form horizontal onSubmit={this.handleSubmit} id="demand-form">
  595. <Spin spinning={this.state.loading}>
  596. <div className="user-search">
  597. <Row>
  598. <FormItem className="half-item"
  599. {...formItemLayout}
  600. label="客户公司名称:" >
  601. <span>{getcustomerTyp(theData.customerTyp)}</span>
  602. </FormItem>
  603. <FormItem className="half-item"
  604. {...formItemLayout}
  605. label="最新联系人:" >
  606. <span style={{width:'120px',display:'inline-block',marginLeft:'20px'}}>{getcustomerTyp(theData.customerTyp)}</span>
  607. <Button type="primary" onClick={() => this.setModal2Visible(true)}>添加</Button>
  608. <Modal
  609. footer=''
  610. width='800px'
  611. title="添加详情"
  612. visible={this.state.modal2Visible}
  613. onOk={() => this.setModal2Visible(false)}
  614. onCancel={() => this.setModal2Visible(false)}
  615. >
  616. <Form horizontal onSubmit={this.submitcontact} id="demand-form">
  617. <Spin spinning={this.state.loading}>
  618. <Row>
  619. <FormItem className="half-item"
  620. {...formItemLayout}
  621. label="所属公司" >
  622. <span>{theData.id}</span>
  623. </FormItem>
  624. </Row>
  625. <Row>
  626. <FormItem
  627. labelCol={{ span: 4 }}
  628. wrapperCol={{ span: 14 }}
  629. label="是否是主要联系人:" style={{marginRight:'10px'}}>
  630. <Radio.Group value={this.state.hots} onChange={(e) => {
  631. this.setState({ hots: e.target.value })
  632. }}>
  633. <Radio value={0}>是</Radio>
  634. <Radio value={1}>否</Radio>
  635. </Radio.Group>
  636. </FormItem>
  637. <FormItem
  638. labelCol={{ span: 4 }}
  639. wrapperCol={{ span: 14 }}
  640. label="性别:" style={{marginRight:'10px',marginTop: '-15px'}}>
  641. <Radio.Group value={this.state.hot} onChange={(e) => {
  642. this.setState({ hot: e.target.value })
  643. }}>
  644. <Radio value={0}>男</Radio>
  645. <Radio value={1}>女</Radio>
  646. </Radio.Group>
  647. </FormItem>
  648. </Row>
  649. <Row style={{ paddingLeft:'50px' }}>
  650. <Col span={2}>*姓名:</Col>
  651. <Col span={8}>
  652. <Input value={this.state.paymentId} required
  653. onChange={(e) => { this.setState({ paymentId: e.target.value }) }} />
  654. </Col>
  655. <Col span={2} style={{ marginLeft: '50px' }}>QQ号:</Col>
  656. <Col span={8}>
  657. <Input value={this.state.entId}
  658. onChange={(e) => { this.setState({ entId: e.target.value }) }} />
  659. </Col>
  660. </Row>
  661. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  662. <Col span={2}>*手机号:</Col>
  663. <Col span={8}>
  664. <Input value={this.state.pay} required
  665. onChange={(e) => { this.setState({ pay: e.target.value }) }} />
  666. </Col>
  667. <Col span={2} style={{ marginLeft: '50px' }}>座机号:</Col>
  668. <Col span={8}>
  669. <Input value={this.state.paym}
  670. onChange={(e) => { this.setState({ paym: e.target.value }) }} />
  671. </Col>
  672. </Row>
  673. <Row style={{ marginTop: '20px' ,paddingLeft:'50px'}}>
  674. <Col span={2}>部门:</Col>
  675. <Col span={8}>
  676. <Input value={this.state.paytId}
  677. onChange={(e) => { this.setState({ paytId: e.target.value }) }} />
  678. </Col>
  679. <Col span={2} style={{ marginLeft: '50px' }}>职位:</Col>
  680. <Col span={8}>
  681. <Input value={this.state.paentId}
  682. onChange={(e) => { this.setState({ paentId: e.target.value }) }} />
  683. </Col>
  684. </Row>
  685. <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
  686. <Col span={2}>微信号:</Col>
  687. <Col span={8}>
  688. <Input value={this.state.payId}
  689. onChange={(e) => { this.setState({ payId: e.target.value }) }} />
  690. </Col>
  691. </Row>
  692. <Row style={{ marginTop: '20px',paddingLeft:'50px' ,marginBottom:'50px'}}>
  693. <Button className="set-submit" type="primary" htmlType="submit" id="change_keep" style={{marginLeft:'60px'}}>保存</Button>
  694. <Button className="set-submit" type="ghost" onClick={() => this.setModal2Visible(false)} id='change_rem'>取消</Button>
  695. </Row>
  696. </Spin>
  697. </Form>
  698. </Modal>
  699. </FormItem>
  700. </Row>
  701. <FormItem className="half-item"
  702. {...formItemLayout}
  703. label="最新跟进时间:" >
  704. <span>{theData.customerTyp}</span>
  705. </FormItem>
  706. <FormItem className="half-item"
  707. {...formItemLayout}
  708. label="联系方式" >
  709. {getFieldDecorator('contact', {
  710. initialValue: getcontact(theData.contact)
  711. })(
  712. <Select placeholder="选择方式" style={{width:'100px'}} >
  713. <Select.Option value="电话">电话</Select.Option>
  714. <Select.Option value="邮件">邮件</Select.Option>
  715. <Select.Option value="面谈">面谈</Select.Option>
  716. <Select.Option value="短信">短信</Select.Option>
  717. </Select>
  718. )}
  719. {getFieldDecorator('contacts', {
  720. initialValue: getcontact(theData.contacts)
  721. })(
  722. <Input style={{width:'180px'}}/>
  723. )}
  724. </FormItem>
  725. <FormItem className="half-item"
  726. {...formItemLayout}
  727. label="客户状态:" >
  728. <span>{getcustomerStatue(theData.customerStatue)}</span>
  729. </FormItem>
  730. <div className="clearfix">
  731. <FormItem className="half-item"
  732. {...formItemLayout}
  733. label="更新当前客户状态" >
  734. {getFieldDecorator('customerStatue', {
  735. initialValue: getcustomerStatue(theData.customerStatue)
  736. })(
  737. <Select placeholder="选择客户状态" style={{width:'200px'}}>
  738. {
  739. customerStatus.map(function (item) {
  740. return <Select.Option key={item.value} style={{width:'100px'}}>{item.key}</Select.Option>
  741. })
  742. }
  743. </Select>
  744. )}
  745. </FormItem>
  746. </div>
  747. <FormItem className="half-item"
  748. {...formItemLayout}
  749. label="最新跟进状态" >
  750. {getFieldDecorator('fllowSituation', {
  751. initialValue: getfllowSituation(theData.fllowSituation)
  752. })(
  753. <Select placeholder="选择跟进状态" style={{width:'200px'}}>
  754. {
  755. newFollow.map(function (item) {
  756. return <Select.Option key={item.value} style={{width:'100px'}}>{item.key}</Select.Option>
  757. })
  758. }
  759. </Select>
  760. )}
  761. </FormItem>
  762. <div className="clearfix">
  763. <FormItem
  764. labelCol={{ span: 4 }}
  765. wrapperCol={{ span: 18 }}
  766. label="跟进结果" >
  767. {getFieldDecorator('remarks', {
  768. initialValue: theData.remarks
  769. })(
  770. <Input type="textarea" rows={4} />
  771. )}
  772. </FormItem>
  773. </div>
  774. <div className="clearfix">
  775. <FormItem
  776. labelCol={{ span: 4 }}
  777. wrapperCol={{ span: 18 }}
  778. label="技术图片" >
  779. <PicturesWall
  780. pictureSign="achievement_technical_picture"
  781. fileList={this.getTechnicalPictureUrl}
  782. pictureUrl={this.state.technicalPictureUrl} />
  783. <p>图片建议:图片要清晰。</p>
  784. </FormItem>
  785. </div>
  786. <Button style={{ marginRight: '20px' ,marginLeft:'160px',marginBottom:'50px'}} type="primary" onClick={this.handleSubmit}>保存</Button>
  787. <Button className="set-submit" type="ghost" onClick={() => this.setModal1Visible(false)} id='change_rem'>取消</Button>
  788. </div>
  789. </Spin>
  790. </Form >
  791. </Modal>
  792. </div>
  793. )
  794. }
  795. },
  796. {
  797. title: '跟单人',
  798. dataIndex: 'adminName',
  799. key: 'adminName',
  800. },
  801. {
  802. title: '时间',
  803. dataIndex: 'followDate',
  804. key: 'followDate',
  805. }
  806. ],
  807. dataSource: [],
  808. searchTime: [,]
  809. };
  810. },
  811. componentWillMount() {
  812. let theArr = [];
  813. customerStatus.map(function (item) {
  814. theArr.push(
  815. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  816. )
  817. });
  818. let auditArr = [];
  819. cityArr.map(function (item) {
  820. auditArr.push(
  821. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  822. )
  823. });
  824. let intentionalArr = [];
  825. intentionalService.map(function (item) {
  826. intentionalArr.push(
  827. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  828. )
  829. });
  830. let newArr = [];
  831. newFollow.map(function (item) {
  832. newArr.push(
  833. <Select.Option value={item.value} key={item.key}>{item.key}</Select.Option>
  834. )
  835. });
  836. this.state.customerStatuarr = theArr;
  837. this.state.auditStatusOption = auditArr;
  838. this.state.intentionalOption = intentionalArr;
  839. this.state.newOption = newArr;
  840. if (window.location.search) {
  841. let theObj = getSearchUrl(window.location.search);
  842. if (theObj.rid) {
  843. theObj.id = theObj.rid;
  844. if (theObj.rid != 'null') {
  845. this.tableRowClick(theObj);
  846. };
  847. };
  848. };
  849. this.loadData();
  850. },
  851. tableRowClick(record, index) {
  852. this.state.RowData = record;
  853. this.setState({
  854. showDesc: true
  855. });
  856. },
  857. //删除功能
  858. delectRow() {
  859. let deletedIds;
  860. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  861. let rowItem = this.state.selectedRows[idx];
  862. if (rowItem.id) {
  863. deletedIds=rowItem.id
  864. };
  865. };
  866. this.setState({
  867. selectedRowKeys: [],
  868. loading: deletedIds.length > 0
  869. });
  870. $.ajax({
  871. method: "post",
  872. dataType: "json",
  873. crossDomain: false,
  874. url: globalConfig.context + "/api/admin/customer/deleteCustomer",
  875. data: {
  876. id: deletedIds
  877. }
  878. }).done(function (data) {
  879. if (!data.error.length) {
  880. message.success('删除成功!');
  881. this.setState({
  882. loading: false,
  883. });
  884. } else {
  885. message.warning(data.error[0].message);
  886. };
  887. this.loadData();
  888. }.bind(this));
  889. },
  890. //转为公共客户功能
  891. changeRow() {
  892. let deletedIds;
  893. for (let idx = 0; idx < this.state.selectedRows.length; idx++) {
  894. let rowItem = this.state.selectedRows[idx];
  895. if (rowItem.id) {
  896. deletedIds=rowItem.id
  897. };
  898. };
  899. this.setState({
  900. selectedRowKeys: [],
  901. loading: deletedIds.length > 0
  902. });
  903. $.ajax({
  904. method: "GET",
  905. dataType: "json",
  906. crossDomain: false,
  907. url: globalConfig.context + "/api/admin/customer/deleteCustomer", //等待接口
  908. data: {
  909. id: deletedIds
  910. }
  911. }).done(function (data) {
  912. if (!data.data.error.length) {
  913. message.success('已转为公共客户!');
  914. this.setState({
  915. loading: false,
  916. });
  917. } else {
  918. message.warning(data.error[0].message);
  919. };
  920. this.loadData();
  921. }.bind(this));
  922. },
  923. addClick() {
  924. this.state.RowData = {};
  925. this.setState({
  926. showDesc: true
  927. });
  928. },
  929. closeDesc(e, s) {
  930. this.state.showDesc = e;
  931. if (s) {
  932. this.loadData();
  933. };
  934. },
  935. search() {
  936. this.loadData();
  937. },
  938. reset() {
  939. this.state.id = undefined;
  940. this.state.customerName = undefined;
  941. this.state.shareTyp = undefined;
  942. this.state.province = undefined;
  943. this.state.ownerType = undefined;
  944. this.state.customerStatus = undefined;
  945. this.state.auditStatus = undefined;
  946. this.state.adminName = undefined;
  947. this.state.contactName = undefined;
  948. this.state.releaseDate = [];
  949. this.loadData();
  950. },
  951. searchSwitch() {
  952. this.setState({
  953. searchMore: !this.state.searchMore
  954. });
  955. },
  956. render() {
  957. const FormItem = Form.Item
  958. const rowSelection = {
  959. selectedRowKeys: this.state.selectedRowKeys,
  960. onChange: (selectedRowKeys, selectedRows) => {
  961. this.setState({
  962. selectedRows: selectedRows.slice(-1),
  963. selectedRowKeys: selectedRowKeys.slice(-1)
  964. });
  965. }
  966. };
  967. const hasSelected = this.state.selectedRowKeys.length > 0;
  968. const { RangePicker } = DatePicker;
  969. const theData = this.props.data || {};
  970. const { getFieldDecorator } = this.props.form;
  971. const formItemLayout = {
  972. labelCol: { span: 8 },
  973. wrapperCol: { span: 14 },
  974. };
  975. return (
  976. <div className="user-content" >
  977. <div className="content-title">
  978. <span>客户管理</span>
  979. <div className="patent-addNew clearfix">
  980. <Upload
  981. action={globalConfig.context + "/api/admin/achievement/uploadTemplate"}
  982. data={{ 'sign': 'achievement_template' }}
  983. beforeUpload={beforeUploadFile}
  984. showUploadList={false}
  985. onChange={(info) => {
  986. if (info.file.status !== 'uploading') {
  987. console.log(info.file, info.fileList);
  988. }
  989. if (info.file.status === 'done') {
  990. if (!info.file.response.error.length) {
  991. message.success(`${info.file.name} 文件上传成功!`);
  992. } else {
  993. message.warning(info.file.response.error[0].message);
  994. return;
  995. };
  996. } else if (info.file.status === 'error') {
  997. message.error(`${info.file.name} 文件上传失败。`);
  998. };
  999. }} >
  1000. <Button>上传批量导入模板</Button>
  1001. </Upload>
  1002. <Button onClick={() => { window.open(globalConfig.context + '/api/admin/achievement/downloadTemplate?sign=achievement_template') }}>下载批量导入模板</Button>
  1003. <Button type="primary" className="addButton" onClick={this.addClick}>新建客户<Icon type="plus" /></Button>
  1004. <BatchImport closeDesc={this.closeDesc} />
  1005. </div>
  1006. </div>
  1007. <div className="user-search">
  1008. <Input placeholder="公司名称"
  1009. value={this.state.customerName}
  1010. onChange={(e) => { this.setState({ customerName: e.target.value }); }} />
  1011. <Select placeholder="客户类型" style={{ width: 120 }}
  1012. value={this.state.shareTyp }
  1013. onChange={(e) => { this.setState({ shareTyp : e }) }}>
  1014. <Select.Option value="0" >个人客户</Select.Option>
  1015. <Select.Option value="1" >公司客户</Select.Option>
  1016. </Select>
  1017. <Select placeholder="意向服务"
  1018. style={{ width: 160 }}
  1019. value={this.state.companyIntention}
  1020. onChange={(e) => { this.setState({ companyIntention: e }) }}>
  1021. {this.state.intentionalOption}
  1022. </Select>
  1023. <Select placeholder="跟进进度"
  1024. style={{ width: 160 }}
  1025. value={this.state.followSituation}
  1026. onChange={(e) => { this.setState({ followSituation: e }) }}>
  1027. {this.state.newOption}
  1028. </Select>
  1029. <Select placeholder="地区"
  1030. style={{ width: 160 }}
  1031. value={this.state.province}
  1032. onChange={(e) => { this.setState({ province: e }) }}>
  1033. {this.state.auditStatusOption}
  1034. </Select>
  1035. <Select placeholder="客户状态" style={{ width: 120 }}
  1036. value={this.state.customerStatus}
  1037. onChange={(e) => { this.setState({ customerStatus: e }) }}>
  1038. {this.state.customerStatuarr}
  1039. </Select>
  1040. <Button type="primary" onClick={this.search}>搜索</Button>
  1041. <Button onClick={this.reset}>重置</Button>
  1042. <Button style={{ background: "#ea0862", border: "none", color: "#fff" }}
  1043. disabled={!hasSelected}
  1044. onClick={this.delectRow}>删除<Icon type="minus" /></Button>
  1045. <Button type="primary" onClick={this.showModa} >指定转交人<Icon type="plus" /></Button>
  1046. <Modal
  1047. footer=''
  1048. title="选择指定人"
  1049. visible={this.state.visible}
  1050. onOk={this.handleOk}
  1051. onCancel={this.handleCancel}
  1052. >
  1053. <FormItem
  1054. labelCol={{ span: 3 }}
  1055. wrapperCol={{ span: 20 }}
  1056. label="关键词" >
  1057. {/* {this.state.dataid.map((tag) => {
  1058. return <input type="radio" value={this.theAssigne.key} id={this.theAssigne.id} />;
  1059. })} */}
  1060. </FormItem>
  1061. <FormItem wrapperCol={{ span: 12, offset: 12 }}>
  1062. <Button className="set-submit" type="primary" htmlType="submit" id="change_keep" style={{marginLeft:"50px"}} onClick={this.changeAssigner }>保存</Button>
  1063. <Button className="set-submit" type="ghost" onClick={this.handleCancel } style={{marginLeft:"30px"}} id='change_rem'>取消</Button>
  1064. </FormItem>
  1065. </Modal>
  1066. <Button style={{ background: "#3fcf9e", border: "none", color: "#fff" }}
  1067. disabled={!hasSelected}
  1068. onClick={this.changeRow}>转为公共客户<Icon /></Button>
  1069. <span>更多搜索<Switch defaultChecked={false} onChange={this.searchSwitch} /></span>
  1070. <div className="search-more" style={this.state.searchMore ? { display: 'none' } : {}}>
  1071. <Input placeholder="跟单人" style={{width:'140px',marginRight:'10px'}}
  1072. value={this.state.adminName}
  1073. onChange={(e) => { this.setState({ adminName: e.target.value }); }} />
  1074. <Input placeholder="联系人姓名" style={{width:'140px',marginRight:'10px'}}
  1075. value={this.state.contactName}
  1076. onChange={(e) => { this.setState({ contactName: e.target.value }); }} />
  1077. <span>发布时间 :</span>
  1078. <RangePicker
  1079. value={[this.state.releaseDate[0] ? moment(this.state.releaseDate[0]) : null,
  1080. this.state.releaseDate[1] ? moment(this.state.releaseDate[1]) : null]}
  1081. onChange={(data, dataString) => { this.setState({ releaseDate: dataString }); }} />
  1082. </div>
  1083. </div>
  1084. <div className="patent-table">
  1085. <Spin spinning={this.state.loading}>
  1086. <Table columns={this.state.columns}
  1087. dataSource={this.state.dataSource}
  1088. rowSelection={rowSelection}
  1089. pagination={this.state.pagination} />
  1090. </Spin>
  1091. </div>
  1092. <TechAchievementDesc
  1093. data={this.state.RowData}
  1094. detailApiUrl={this.props['data-detailApiUrl']}
  1095. achievementCategoryOption={this.state.achievementCategoryOption}
  1096. showDesc={this.state.showDesc}
  1097. closeDesc={this.closeDesc} />
  1098. </div >
  1099. );
  1100. }
  1101. }));
  1102. export default AchievementList;