queryCutomer.jsx 39 KB

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