queryCutomer.jsx 39 KB

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