publicCustomer.jsx 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077
  1. import React, { Fragment } from 'react';
  2. import {
  3. Button, Cascader, Input, Select, Tag,
  4. Spin, Table, message, Form, Col, Tabs, Modal, Icon, AutoComplete, Upload
  5. } from 'antd';
  6. import ajax from 'jquery/src/ajax/xhr.js';
  7. import $ from 'jquery/src/ajax';
  8. import {areaSelect, citySelect, provinceList } from '@/NewDicProvinceList';
  9. import { beforeUploadFile, ShowModal, onReplace } from '../../../../tools.js'
  10. import { socialAttribute, customerSource } from '@/dataDic.js';
  11. import Outbound from '../../NEW/components/outbound';
  12. import ShowModalDiv from "@/showModal.jsx";
  13. import { ChooseList } from "../../../order/orderNew/chooseList";
  14. import TextArea from "antd/es/input/TextArea";
  15. import ImgList from '../../../../common/imgList/index.js';
  16. const QueryCustomer = React.createClass({
  17. loadData(pageNo, apiUrl) {
  18. // 新需求 除湖南和内蒙古外 不让其他省操作
  19. if (adminData.province != "21" && adminData.province != "11" || adminData.province != "2") {
  20. return
  21. }
  22. this.setState({
  23. loading: true,
  24. ispage: pageNo,
  25. });
  26. let api = apiUrl ? apiUrl : this.props.ApiUrl;
  27. $.ajax({
  28. method: "post",
  29. dataType: "json",
  30. crossDomain: false,
  31. url: globalConfig.context + api,
  32. data: {
  33. pageNo: pageNo || 1,
  34. pageSize: this.state.pagination.pageSize,
  35. name: this.state.nameSearch,
  36. province: !this.state.addressSearch.length
  37. ? this.state.provinceSearch
  38. : this.state.addressSearch[0],
  39. city: !this.state.addressSearch.length
  40. ? ""
  41. : this.state.addressSearch[1],
  42. sort: this.state.sort
  43. },
  44. success: function (data) {
  45. ShowModal(this);
  46. let theArr = [];
  47. if (data.error.length || data.data.list == "") {
  48. if (data.error && data.error.length) {
  49. message.warning(data.error[0].message);
  50. }
  51. } else {
  52. for (let i = 0; i < data.data.list.length; i++) {
  53. let thisdata = data.data.list[i];
  54. theArr.push({
  55. key: i,
  56. id: thisdata.uid,
  57. name: thisdata.name,
  58. contacts: thisdata.contacts,
  59. contactMobile: thisdata.contactMobile,
  60. signBills: thisdata.signBills,
  61. createTime:
  62. thisdata.createTime && thisdata.createTime.split(" ")[0],
  63. transferTime:
  64. thisdata.transferTime && thisdata.transferTime.split(" ")[0],
  65. locationProvince: thisdata.province
  66. ? (thisdata.province || '') + (thisdata.city ? "-" + thisdata.city : '') + (thisdata.area ? "-" + thisdata.area : '')
  67. : "--",
  68. myUser: thisdata.myUser
  69. });
  70. }
  71. this.state.pagination.current = data.data.pageNo;
  72. this.state.pagination.total = data.data.totalCount;
  73. }
  74. if (data.data && data.data.list && !data.data.list.length) {
  75. this.state.pagination.current = 0;
  76. this.state.pagination.total = 0;
  77. }
  78. this.setState({
  79. dataSource: theArr,
  80. pagination: this.state.pagination,
  81. selectedRowKeys: [],
  82. });
  83. }.bind(this),
  84. }).always(
  85. function () {
  86. this.setState({
  87. loading: false,
  88. });
  89. }.bind(this)
  90. );
  91. },
  92. getInitialState() {
  93. return {
  94. verification: false,
  95. businessScope: [],
  96. cooperationProjects: [],
  97. selectCooperationProjects: [],
  98. sort: 0,
  99. addressSearch: [],
  100. dataSource: [],
  101. loading: false,
  102. selectedRowKeys: [],
  103. selectedRows: [],
  104. selectedData: [],
  105. pagination: {
  106. defaultCurrent: 1,
  107. defaultPageSize: 10,
  108. showQuickJumper: true,
  109. pageSize: 10,
  110. onChange: function (page) {
  111. this.loadData(page);
  112. }.bind(this),
  113. showTotal: function (total) {
  114. return '共' + total + '条数据';
  115. }
  116. },
  117. columns: [{
  118. title: '客户名称',
  119. dataIndex: 'name',
  120. key: 'name',
  121. render: (text, record, index) =>
  122. onReplace(text)
  123. },
  124. {
  125. title: '地区',
  126. dataIndex: 'locationProvince',
  127. key: 'locationProvince',
  128. },
  129. // {
  130. // title: '联系人',
  131. // dataIndex: 'contacts',
  132. // key: 'contacts',
  133. // },{
  134. // title: '联系电话',
  135. // dataIndex: 'contactMobile',
  136. // key: 'contactss',
  137. // },
  138. {
  139. title: '创建时间',
  140. dataIndex: 'createTime',
  141. key: 'createTime',
  142. },
  143. {
  144. title: '转换时间',
  145. dataIndex: 'transferTime',
  146. key: 'transferTime',
  147. width: 500,
  148. render: (text, record) => {
  149. return <div>
  150. <span style={{ marginRight: 20 }}>{text}</span>
  151. {!this.props.intentionState &&
  152. <Outbound
  153. type="public"
  154. uid={record.id}
  155. />}
  156. </div>
  157. }
  158. },
  159. {
  160. title: '操作',
  161. dataIndex: 'abc',
  162. key: 'abc',
  163. width: 250,
  164. render: (text, record, index) => {
  165. return <div>
  166. <Button onClick={(e) => { e.stopPropagation(), this.receive(record) }} type="primary">领取</Button>
  167. <Button
  168. onClick={(e) => {
  169. e.stopPropagation(),
  170. this.rTips(record)
  171. }}
  172. style={{ marginLeft: 10 }}
  173. type="primary">领取为私有渠道信息</Button>
  174. </div>
  175. }
  176. }
  177. ],
  178. natureOptions: [{
  179. value: 1,
  180. label: "政府机构"
  181. }, {
  182. value: 2,
  183. label: "科研院所"
  184. }, {
  185. value: 3,
  186. label: "高等院校"
  187. }, {
  188. value: 4,
  189. label: "社会团体"
  190. }, {
  191. value: 5,
  192. label: "企业",
  193. children: [{
  194. value: 1,
  195. label: "国企",
  196. children: [{
  197. value: 1,
  198. label: "上市公司",
  199. }, {
  200. value: 0,
  201. label: "非上市公司",
  202. }]
  203. }, {
  204. value: 2,
  205. label: "央企",
  206. children: [{
  207. value: 1,
  208. label: "上市公司",
  209. }, {
  210. value: 0,
  211. label: "非上市公司",
  212. }]
  213. }, {
  214. value: 3,
  215. label: "私企",
  216. children: [{
  217. value: 1,
  218. label: "上市公司",
  219. }, {
  220. value: 0,
  221. label: "非上市公司",
  222. }]
  223. }, {
  224. value: 4,
  225. label: "合资企业(含港澳台)",
  226. children: [{
  227. value: 1,
  228. label: "上市公司",
  229. }, {
  230. value: 0,
  231. label: "非上市公司",
  232. }]
  233. }, {
  234. value: 5,
  235. label: "外资控股",
  236. children: [{
  237. value: 1,
  238. label: "上市公司",
  239. }, {
  240. value: 0,
  241. label: "非上市公司",
  242. }]
  243. }]
  244. }, {
  245. value: 0,
  246. label: "其他组织"
  247. }],
  248. fileList: []
  249. }
  250. },
  251. handleClose(removedTag) {
  252. let businessScope = this.state.businessScope.filter(tag => { return tag !== removedTag });
  253. this.setState({ businessScope });
  254. },
  255. handleCloseCooperation(removedTag) {
  256. let selectCooperationProjects = this.state.selectCooperationProjects.filter(tag => { return tag.value !== removedTag.value });
  257. this.setState({ selectCooperationProjects });
  258. },
  259. showInput() {
  260. let str = this.state.businessScope.join('/')
  261. this.setState({
  262. inputVisible: true,
  263. inputValue: str
  264. });
  265. },
  266. handleInputConfirm() {
  267. let inputValue = this.state.inputValue;
  268. let arr = inputValue.split('/');
  269. let lv = true;
  270. for (let i of arr) {
  271. if (!i.replace(/\s+/g, '')) {
  272. message.warning("请填写关键词且不为空");
  273. return;
  274. }
  275. if (i.length > 16) {
  276. message.warning('单个标签字数不能超过16个字符')
  277. lv = false;
  278. return;
  279. }
  280. }
  281. if (lv) {
  282. arr = Array.from(new Set(arr));
  283. arr = arr.filter(v => v);
  284. this.setState({
  285. businessScope: arr,
  286. inputVisible: false,
  287. inputValue: '',
  288. });
  289. }
  290. },
  291. //加载(自动补全)
  292. supervisor(value) {
  293. $.ajax({
  294. method: "get",
  295. dataType: "json",
  296. crossDomain: false,
  297. url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
  298. data: {
  299. businessName: value
  300. },
  301. success: function (data) {
  302. let thedata = data.data;
  303. if (data.error.length === 0) {
  304. this.setState({
  305. cooperationProjects: thedata,
  306. });
  307. } else {
  308. message.warning(data.error[0].message);
  309. }
  310. }.bind(this),
  311. }).always(
  312. function () {
  313. }.bind(this)
  314. );
  315. },
  316. onSelect(value) {
  317. let arr = this.state.cooperationProjects.filter(v => v.id === value);
  318. let arr1 = this.state.selectCooperationProjects.filter(v => v.value === value);
  319. if (arr.length > 0) {
  320. if (arr1.length > 0) {
  321. message.warning('选项已存在');
  322. } else {
  323. this.state.selectCooperationProjects.push({
  324. label: arr[0].bname,
  325. value: arr[0].id,
  326. })
  327. this.setState({
  328. selectCooperationProjects: this.state.selectCooperationProjects
  329. })
  330. }
  331. }
  332. },
  333. // 查询客户补充完整
  334. receive(e) {
  335. this.setState({
  336. loading: true,
  337. selectedRowKeys: [],
  338. });
  339. $.ajax({
  340. method: "get",
  341. dataType: "json",
  342. crossDomain: false,
  343. url: globalConfig.context + "/api/admin/customer/checkUser",
  344. data: {
  345. id: e.id || e.uid,
  346. }
  347. }).done(function (data) {
  348. if (!data.error.length) {
  349. let obj = data.data
  350. let selectCooperationProjects = !!obj.intendedProject ? obj.intendedProject.split(',') : []
  351. if (selectCooperationProjects.length > 0) {
  352. selectCooperationProjects = selectCooperationProjects.map((item) => {
  353. return { label: item }
  354. })
  355. }
  356. let nature = [];
  357. if (!!obj.nature) {
  358. nature.push(obj.nature);
  359. }
  360. if (!!obj.enterpriseNature) {
  361. nature.push(obj.enterpriseNature);
  362. }
  363. if (!!obj.listedNature) {
  364. nature.push(obj.listedNature);
  365. }
  366. this.setState({
  367. loading: false,
  368. verification: true,
  369. verificationMyUser: e.myUser,
  370. id: obj.id,
  371. name: obj.name,
  372. orgCode: obj.orgCode,
  373. ProvinceCity: [obj.province, obj.city, obj.area],
  374. // content: e.myUser == 1 ? obj.contacts : '',
  375. position: obj.position,
  376. // telnum: e.myUser == 1 ? obj.contactMobile : '',
  377. businessScope: !!obj.businessScope ? obj.businessScope.split(',') : [],
  378. selectCooperationProjects: selectCooperationProjects,
  379. level: obj.level,
  380. nature,
  381. natureOther: obj.natureOther,
  382. fileList: []
  383. });
  384. } else {
  385. message.warning(data.error[0].message);
  386. };
  387. }.bind(this));
  388. },
  389. /*单个领取(旧)*/
  390. receives(e) {
  391. this.setState({
  392. loading: true,
  393. selectedRowKeys: [],
  394. });
  395. $.ajax({
  396. method: "get",
  397. dataType: "json",
  398. crossDomain: false,
  399. url: globalConfig.context + "/api/admin/customer/receiveCustomer",
  400. data: {
  401. uid: e.id,
  402. }
  403. }).done(function (data) {
  404. if (!data.error.length) {
  405. message.success(e.signBills == 1 ? '领取成功!客户为签单客户,请在【签单单位客户】列表中查询' : '领取成功!客户为私有客户,请在【私有单位客户】列表中查询');
  406. this.setState({
  407. loading: false,
  408. });
  409. } else {
  410. message.warning(data.error[0].message);
  411. };
  412. this.loadData(this.state.ispage);
  413. }.bind(this));
  414. },
  415. rTips(e) {
  416. let _this = this;
  417. Modal.confirm({
  418. title: "温馨提示",
  419. content: (
  420. <span style={{ color: "red" }}>
  421. <p>名称中含“协会”“商会”等名称为渠道信息!</p>
  422. <p>您是否确定将客户信息,领取为“私有渠道”信息,领取后,该信息即成为渠道信息不可再修改!!!</p>
  423. <p>领取成功后,您可以通过:渠道管理-渠道列表-私有渠道,查询到此条信息</p>
  424. </span>
  425. ),
  426. onOk() {
  427. _this.receiveNew(e)
  428. },
  429. onCancel() { },
  430. });
  431. },
  432. /*领取为私有渠道信息*/
  433. receiveNew(e) {
  434. this.setState({
  435. loading: true,
  436. selectedRowKeys: [],
  437. });
  438. $.ajax({
  439. method: "post",
  440. dataType: "json",
  441. crossDomain: false,
  442. url: globalConfig.context + "/api/admin/customer/receiveAsChannel",
  443. data: {
  444. uid: e.id,
  445. }
  446. }).done(function (data) {
  447. if (!data.error.length) {
  448. message.success('领取成功!');
  449. this.setState({
  450. loading: false,
  451. })
  452. } else {
  453. message.warning(data.error[0].message);
  454. };
  455. this.loadData(this.state.ispage);
  456. }.bind(this));
  457. },
  458. closeDesc(e) {
  459. this.state.visitModul = e;
  460. },
  461. search() {
  462. this.loadData();
  463. },
  464. reset() {
  465. this.state.nameSearch = '';
  466. this.state.provinceSearch = undefined;
  467. this.state.addressSearch = [];
  468. this.state.sort = 0
  469. this.loadData()
  470. },
  471. componentWillReceiveProps(nextProps) {
  472. if (nextProps.ApiUrl != this.props.ApiUrl) {
  473. this.state.nameSearch = '';
  474. this.state.provinceSearch = undefined;
  475. this.state.addressSearch = [];
  476. this.loadData(null, nextProps.ApiUrl);
  477. };
  478. },
  479. componentWillMount() {
  480. //城市
  481. let Province = [];
  482. provinceList.map(function (item) {
  483. var id = String(item.id)
  484. Province.push(
  485. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  486. )
  487. });
  488. this.state.Provinces = Province;
  489. this.loadData();
  490. },
  491. changeList(arr) {
  492. const newArr = [];
  493. this.state.columns.forEach(item => {
  494. arr.forEach(val => {
  495. if (val === item.title) {
  496. newArr.push(item);
  497. }
  498. });
  499. });
  500. this.setState({
  501. changeList: newArr
  502. });
  503. },
  504. // 补充客户并领取
  505. handleSubmit(e) {
  506. e.preventDefault();
  507. this.props.form.validateFields((err, values) => {
  508. let re = new RegExp("^[\u4e00-\u9fa5]");
  509. // if (!re.test(values.name)) {
  510. // message.warning('公司名称必须以汉字开头!')
  511. // return
  512. // }
  513. // if (!re.test(values.name.charAt(values.name.length - 1))) {
  514. // message.warning('公司名称必须以汉字结尾!')
  515. // return
  516. // }
  517. if (values.name.length > 64) {
  518. message.warning('公司名称字数不超过64个!')
  519. return false;
  520. };
  521. let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  522. if (regu.test(values.name)) {
  523. message.warning('公司名称不能存在特殊符号或空格!')
  524. return false;
  525. }
  526. if (!/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(values.orgCode)) {
  527. message.warning('请输入正确的统一社会信用代码!')
  528. return
  529. }
  530. if (!!values.content && !/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) {
  531. message.error("请填写正确的联系人,且至少包含一个汉字");
  532. return false;
  533. }
  534. if (!!values.position && !/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
  535. message.error("请填写正确的职位,且至少包含一个汉字");
  536. return false;
  537. }
  538. if (!values.ProvinceCity[1]) {
  539. message.warning('请选择地区');
  540. return false;
  541. };
  542. if (!!values.content && values.content.length > 32) {
  543. message.warning('联系人字数不超过32个')
  544. return false;
  545. };
  546. if (!!values.telnum && values.telnum.length > 13) {
  547. message.warning('电话号码字数不超过13个')
  548. return false;
  549. };
  550. if (this.state.businessScope.length === 0) {
  551. message.warning('请选择主营产品')
  552. return false;
  553. }
  554. if (this.state.selectCooperationProjects.length === 0) {
  555. message.warning('请选择意向合作项目')
  556. return false;
  557. }
  558. if (!this.state.level && this.state.level != 0) {
  559. message.warning('请选择客户类型')
  560. return false;
  561. }
  562. if (!this.state.nature && this.state.nature != 0) {
  563. message.warning('请选择客户性质')
  564. return false;
  565. }
  566. if (this.state.nature == 0 && !this.state.natureOther) {
  567. message.warning('其他说明不能为空')
  568. return false;
  569. }
  570. if (!this.state.verificationMyUser && !this.state.fileList.length) {
  571. message.warning('请上传佐证资料')
  572. return false;
  573. }
  574. let arr = [];
  575. for (let i of this.state.selectCooperationProjects) {
  576. arr.push(i.label)
  577. }
  578. if (!err) {
  579. this.setState({
  580. loading: true
  581. });
  582. let enterpriseNature = undefined; // 企业性质 0=其他,1=国企,2=央企,3=私企,4=合资企业(含港澳台),5=外资控股
  583. let listedNature = undefined; // 上市 0=否,1=是
  584. if (this.state.nature.length >= 2) {
  585. enterpriseNature = this.state.nature[1];
  586. }
  587. if (this.state.nature.length >= 3) {
  588. listedNature = this.state.nature[2];
  589. }
  590. let fileSuccList = this.state.fileList.filter(item => item.response.data && !item.response.error.length);
  591. let materialUrlList = fileSuccList.map(item => {
  592. return item.response.data;
  593. });
  594. $.ajax({
  595. method: "POST",
  596. dataType: "json",
  597. crossDomain: false,
  598. url: globalConfig.context + '/api/admin/customer/updateAndReceiveCustomer',
  599. data: {
  600. id: this.state.id,
  601. orgCode: values.orgCode,
  602. contacts: values.content,
  603. contactMobile: values.telnum,
  604. societyTag: '0', //社会属性默认为 社会企业
  605. //source:values.customerSource,
  606. province: (values.ProvinceCity)[0],//省
  607. city: (values.ProvinceCity)[1],//市
  608. area: (values.ProvinceCity)[2],//区
  609. type: '1',
  610. intendedProject: arr.join(','),
  611. businessScope: this.state.businessScope.join(','),
  612. position: values.position,
  613. level: this.state.level,
  614. nature: this.state.nature[0],
  615. natureOther: this.state.natureOther,
  616. enterpriseNature,
  617. listedNature,
  618. materialUrl: materialUrlList.join(",")
  619. }
  620. }).done(function (data) {
  621. this.setState({
  622. loading: false
  623. });
  624. if (!data.error.length) {
  625. message.success('领取成功!');
  626. this.loadData(this.state.ispage);
  627. this.handleModalClose();
  628. } else {
  629. message.warning(data.error[0].message);
  630. }
  631. }.bind(this));
  632. }
  633. });
  634. },
  635. handleModalClose() {
  636. this.setState({
  637. verification: false,
  638. id: undefined,
  639. name: undefined,
  640. orgCode: undefined,
  641. ProvinceCity: [],
  642. content: undefined,
  643. position: undefined,
  644. telnum: undefined,
  645. businessScope: [],
  646. selectCooperationProjects: [],
  647. level: undefined,
  648. nature: undefined,
  649. natureOther: undefined,
  650. })
  651. this.props.form.resetFields();
  652. },
  653. handleFileChange(info) {
  654. let fileList = info.fileList;
  655. this.setState({ fileList });
  656. },
  657. render() {
  658. const intentionState = this.props.intentionState;
  659. const { getFieldDecorator } = this.props.form;
  660. const formItemLayout = {
  661. labelCol: { span: 6 },
  662. wrapperCol: { span: 14 },
  663. };
  664. const FormItem = Form.Item;
  665. const { TabPane } = Tabs
  666. const rowSelection = {
  667. selectedRowKeys: this.state.selectedRowKeys,
  668. onChange: (selectedRowKeys, selectedRows) => {
  669. this.setState({
  670. selectedRows: selectedRows,
  671. selectedRowKeys: selectedRowKeys
  672. });
  673. },
  674. onSelect: (recordt, selected, selectedData) => {
  675. this.setState({
  676. selectedData: selectedData,
  677. recordt: recordt.id
  678. })
  679. },
  680. };
  681. return (
  682. <div className="user-content">
  683. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  684. <div className="content-title" style={{ marginBottom: 10 }}>
  685. <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "单位公共客户" : "个人公共客户"}</span>
  686. </div>
  687. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  688. <TabPane tab="搜索" key="1">
  689. <div className="user-search">
  690. <Input
  691. placeholder="客户名称"
  692. value={this.state.nameSearch}
  693. style={{ width: 150 }}
  694. onChange={(e) => {
  695. this.setState({ nameSearch: e.target.value });
  696. }}
  697. />
  698. <Select
  699. placeholder="省"
  700. style={{ width: 80 }}
  701. value={this.state.provinceSearch}
  702. onChange={(e) => {
  703. this.setState({ provinceSearch: e });
  704. }}
  705. >
  706. {this.state.Provinces}
  707. </Select>
  708. <span style={{ marginRight: "10px" }}>
  709. <Cascader
  710. options={citySelect()}
  711. value={this.state.addressSearch}
  712. placeholder="选择城市"
  713. onChange={(e, pre) => {
  714. this.setState({ addressSearch: e });
  715. }}
  716. />
  717. </span>
  718. <span>排序:</span>
  719. <Select style={{ width: 120 }} value={this.state.sort} onChange={e => { this.setState({ sort: e }) }} placeholder="选择排序">
  720. <Option value={0}>默认</Option>
  721. <Option value={1}>降序</Option>
  722. <Option value={2}>升序</Option>
  723. </Select>
  724. <Button type="primary" onClick={this.search}>
  725. 搜索
  726. </Button>
  727. <Button onClick={this.reset}>重置</Button>
  728. </div>
  729. </TabPane>
  730. <TabPane tab="更改表格显示数据" key="2">
  731. <div style={{ marginLeft: 10 }}>
  732. <ChooseList
  733. columns={this.state.columns}
  734. changeFn={this.changeList}
  735. changeList={this.state.changeList}
  736. top={55}
  737. margin={11}
  738. />
  739. </div>
  740. </TabPane>
  741. </Tabs>
  742. <div className="patent-table">
  743. <Spin spinning={this.state.loading}>
  744. <Table
  745. size="middle"
  746. columns={
  747. this.state.changeList
  748. ? this.state.changeList
  749. : this.state.columns
  750. }
  751. dataSource={this.state.dataSource}
  752. // rowSelection={rowSelection}
  753. pagination={this.state.pagination}
  754. />
  755. </Spin>
  756. </div>
  757. <Modal maskClosable={false}
  758. visible={this.state.verification}
  759. onCancel={this.handleModalClose}
  760. width='600px'
  761. title='客户信息'
  762. footer={null}
  763. className="admin-desc-content">
  764. <Spin spinning={this.state.loading}>
  765. <div>
  766. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  767. <Spin spinning={this.state.loading}>
  768. <div>
  769. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  770. <div className="clearfix">
  771. <FormItem className="mid-item"
  772. {...formItemLayout}
  773. label="公司名称" >
  774. {getFieldDecorator('name', {
  775. rules: [{ required: true, message: '此项为必填项!' }],
  776. initialValue: this.state.name
  777. })(
  778. <Input placeholder="公司名称" disabled />
  779. // <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
  780. // <Input placeholder="公司名称" value={this.state.name} />
  781. // {this.state.verification && <Icon type="check-circle" style={{
  782. // fontSize: 16,
  783. // color: '#30e031',
  784. // position: 'absolute',
  785. // right: '80px',
  786. // }} />}
  787. // <Button onClick={this.checkUserName} type="primary" style={{ marginLeft: '10px' }}>验证</Button>
  788. // </span>
  789. )}
  790. </FormItem>
  791. </div>
  792. <div className="clearfix">
  793. <FormItem
  794. {...formItemLayout}
  795. label="统一社会信用代码"
  796. >
  797. {getFieldDecorator('orgCode', {
  798. rules: [{ required: true, message: '此项为必填项!' }],
  799. initialValue: this.state.orgCode
  800. })(
  801. <Input placeholder="统一社会信用代码" />
  802. )}
  803. </FormItem>
  804. </div>
  805. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>如,科德集团则填写91430105670766451M</Col>
  806. <div className="clearfix">
  807. <FormItem
  808. {...formItemLayout}
  809. label="省-市-区"
  810. >
  811. {getFieldDecorator('ProvinceCity', {
  812. rules: [{ required: true, message: '此项为必填项!' }],
  813. initialValue: this.state.ProvinceCity
  814. })(
  815. <Cascader options={areaSelect()} placeholder="选择城市" />
  816. )}
  817. </FormItem>
  818. </div>
  819. <div className="clearfix">
  820. <FormItem className="mid-item"
  821. {...formItemLayout}
  822. label="联系人" >
  823. {getFieldDecorator('content', {
  824. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  825. initialValue: this.state.content
  826. })(
  827. <Input placeholder="联系人姓名" />
  828. )}
  829. </FormItem>
  830. </div>
  831. <div className="clearfix">
  832. <FormItem className="mid-item"
  833. {...formItemLayout}
  834. label="职位" >
  835. {getFieldDecorator('position', {
  836. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  837. initialValue: this.state.position
  838. })(
  839. <Input placeholder="联系人职位" />
  840. )}
  841. </FormItem>
  842. </div>
  843. <div className="clearfix">
  844. <FormItem className="mid-item"
  845. {...formItemLayout}
  846. label="联系电话" >
  847. {getFieldDecorator('telnum', {
  848. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  849. initialValue: this.state.telnum
  850. })(
  851. <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
  852. )}
  853. </FormItem>
  854. </div>
  855. <div className="clearfix">
  856. <FormItem className="mid-item"
  857. {...formItemLayout}
  858. required
  859. label="主营产品" >
  860. <div>
  861. {this.state.businessScope.map((tag, index) => {
  862. const isLongTag = tag.length > 20;
  863. const tagElem = (
  864. <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
  865. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  866. </Tag>
  867. );
  868. return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
  869. })}
  870. {
  871. !this.state.inputVisible &&
  872. <Button
  873. size="small"
  874. type="primary"
  875. onClick={this.showInput}>
  876. + 新增主营产品
  877. </Button>
  878. }
  879. </div>
  880. {this.state.inputVisible && (<div>
  881. <TextArea
  882. style={{ width: '300px', height: '100px' }}
  883. value={this.state.inputValue}
  884. onChange={(e) => {
  885. this.setState({
  886. inputValue: e.target.value
  887. })
  888. }} />
  889. <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
  890. <div>
  891. <Button
  892. size="small"
  893. type="primary"
  894. onClick={this.handleInputConfirm}>
  895. 确定
  896. </Button>
  897. <Button
  898. size="small"
  899. style={{ marginLeft: '5px' }}
  900. onClick={() => {
  901. this.setState({
  902. inputVisible: false,
  903. inputValue: ''
  904. })
  905. }}>
  906. 取消
  907. </Button>
  908. </div>
  909. </div>)}
  910. </FormItem>
  911. </div>
  912. <div className="clearfix">
  913. <FormItem
  914. className="mid-item"
  915. {...formItemLayout}
  916. required
  917. label="意向合作项目" >
  918. <div>
  919. <div style={{ paddingBottom: this.state.selectCooperationProjects.length === 0 ? 0 : '10px' }}>
  920. {this.state.selectCooperationProjects.map((tag, index) => {
  921. const isLongTag = tag.label.length > 20;
  922. const tagElem = (
  923. <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
  924. {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
  925. </Tag>
  926. );
  927. return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
  928. })}
  929. </div>
  930. <div>
  931. <AutoComplete
  932. style={{ width: 200 }}
  933. onSearch={this.supervisor}
  934. onSelect={this.onSelect}
  935. placeholder="请输入关键字"
  936. >
  937. {
  938. this.state.cooperationProjects.map(function (item) {
  939. return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
  940. })
  941. }
  942. </AutoComplete>
  943. </div>
  944. </div>
  945. </FormItem>
  946. </div>
  947. <div className="clearfix">
  948. <FormItem
  949. className="mid-item"
  950. {...formItemLayout}
  951. required
  952. label="客户类型" >
  953. <Select
  954. placeholder="请选择客户类型"
  955. value={this.state.level}
  956. onChange={(e) => {
  957. this.setState({ level: e });
  958. }}
  959. >
  960. <Option value={0}>一般客户(一年以上预签)</Option>
  961. <Option value={1}>意向客户(半年内预签)</Option>
  962. <Option value={2}>重点客户(一个月内预签)</Option>
  963. </Select>
  964. </FormItem>
  965. </div>
  966. <div className="clearfix">
  967. <FormItem
  968. className="mid-item"
  969. {...formItemLayout}
  970. required
  971. label="客户性质" >
  972. {/* <Select
  973. placeholder="请选择客户性质"
  974. value={this.state.nature}
  975. onChange={(e) => {
  976. this.setState({ nature: e });
  977. }}
  978. >
  979. <Option value={1}>政府机构</Option>
  980. <Option value={2}>科研院所</Option>
  981. <Option value={3}>高等院校</Option>
  982. <Option value={4}>国有企业</Option>
  983. <Option value={5}>民营企业</Option>
  984. <Option value={6}>社会团体</Option>
  985. <Option value={0}>其他(请注明)</Option>
  986. </Select> */}
  987. <Cascader
  988. options={this.state.natureOptions}
  989. placeholder="请选择客户性质"
  990. value={this.state.nature}
  991. onChange={e => { this.setState({ nature: e }) }}
  992. />
  993. </FormItem>
  994. </div>
  995. {
  996. this.state.nature && this.state.nature.length && this.state.nature[0] === 0 ?
  997. <div className="clearfix">
  998. <FormItem
  999. className="mid-item"
  1000. {...formItemLayout}
  1001. required
  1002. label="其他说明" >
  1003. <Input
  1004. placeholder="其他说明"
  1005. value={this.state.natureOther}
  1006. onChange={e => {
  1007. this.setState({
  1008. natureOther: e.target.value
  1009. })
  1010. }}
  1011. />
  1012. </FormItem>
  1013. </div> : null
  1014. }
  1015. { !this.state.verificationMyUser && (
  1016. <FormItem
  1017. {...formItemLayout}
  1018. required
  1019. label="佐证资料" >
  1020. <div className="clearfix">
  1021. <ImgList
  1022. uploadConfig={{
  1023. action: globalConfig.context + "/api/user/achievement/uploadTextFile",
  1024. data: { 'sign': 'achievement_maturity_text_file' },
  1025. multiple: true,
  1026. listType: "picture-card",
  1027. }}
  1028. onChange={(infor) => {
  1029. this.handleFileChange(infor)
  1030. }}
  1031. fileList={this.state.fileList}
  1032. />
  1033. </div>
  1034. </FormItem>
  1035. ) }
  1036. { !this.state.verificationMyUser && <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>
  1037. 注:请上传客户信息截图、电话记录等录入凭证图片
  1038. </Col> }
  1039. </div>
  1040. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  1041. <Button type="primary" htmlType="submit" style={{}}>领取客户</Button>
  1042. </FormItem>
  1043. </Spin>
  1044. </Form >
  1045. </div>
  1046. </Spin>
  1047. </Modal>
  1048. </div>
  1049. );
  1050. }
  1051. })
  1052. export default Form.create({})(QueryCustomer);