queryCutomer.jsx 40 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203
  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. let nature = [];
  464. if (!!obj.nature) {
  465. nature.push(obj.nature);
  466. }
  467. if (!!obj.enterpriseNature) {
  468. nature.push(obj.enterpriseNature);
  469. }
  470. if (!!obj.listedNature) {
  471. nature.push(obj.listedNature);
  472. }
  473. this.setState({
  474. loading: false,
  475. verification: true,
  476. verificationMyUser: e.myUser,
  477. id: obj.id,
  478. name: obj.name,
  479. orgCode: obj.orgCode,
  480. ProvinceCity: [obj.province, obj.city, obj.area],
  481. // content: e.myUser == 1 ? obj.contacts : '',
  482. position: obj.position,
  483. // telnum: e.myUser == 1 ? obj.contactMobile : '',
  484. businessScope: !!obj.businessScope ? obj.businessScope.split(',') : [],
  485. selectCooperationProjects: selectCooperationProjects,
  486. level: obj.level,
  487. nature,
  488. natureOther: obj.natureOther,
  489. });
  490. } else {
  491. message.warning(data.error[0].message);
  492. };
  493. }.bind(this));
  494. },
  495. // 补充客户并领取
  496. handleSubmit(e) {
  497. e.preventDefault();
  498. this.props.form.validateFields((err, values) => {
  499. let re = new RegExp("^[\u4e00-\u9fa5]");
  500. // if (!re.test(values.name)) {
  501. // message.warning('公司名称必须以汉字开头!')
  502. // return
  503. // }
  504. // if (!re.test(values.name.charAt(values.name.length - 1))) {
  505. // message.warning('公司名称必须以汉字结尾!')
  506. // return
  507. // }
  508. if (values.name.length > 64) {
  509. message.warning('公司名称字数不超过64个!')
  510. return false;
  511. };
  512. let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~!#¥%……&*=-@-!{}|/《》?:“”【】、;;‘’,,.。、\s+]/g;
  513. if (regu.test(values.name)) {
  514. message.warning('公司名称不能存在特殊符号或空格!')
  515. return false;
  516. }
  517. if (!/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(values.orgCode)) {
  518. message.warning('请输入正确的统一社会信用代码!')
  519. return
  520. }
  521. if (!!values.content && !/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) {
  522. message.error("请填写正确的联系人,且至少包含一个汉字");
  523. return false;
  524. }
  525. if (!!values.position && /.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
  526. message.error("请填写正确的职位,且至少包含一个汉字");
  527. return false;
  528. }
  529. if (!values.ProvinceCity[1]) {
  530. message.warning('请选择地区');
  531. return false;
  532. };
  533. if (!!values.content && values.content.length > 32) {
  534. message.warning('联系人字数不超过32个')
  535. return false;
  536. };
  537. if (!!values.telnum && values.telnum.length > 13) {
  538. message.warning('电话号码字数不超过13个')
  539. return false;
  540. };
  541. if (this.state.businessScope.length === 0) {
  542. message.warning('请选择主营产品')
  543. return false;
  544. }
  545. if (this.state.selectCooperationProjects.length === 0) {
  546. message.warning('请选择意向合作项目')
  547. return false;
  548. }
  549. if (!this.state.level && this.state.level != 0) {
  550. message.warning('请选择客户类型')
  551. return false;
  552. }
  553. if (!this.state.nature && this.state.nature != 0) {
  554. message.warning('请选择客户性质')
  555. return false;
  556. }
  557. if (this.state.nature == 0 && !this.state.natureOther) {
  558. message.warning('其他说明不能为空')
  559. return false;
  560. }
  561. let arr = [];
  562. for (let i of this.state.selectCooperationProjects) {
  563. arr.push(i.label)
  564. }
  565. if (!err) {
  566. this.setState({
  567. loading: true
  568. });
  569. let enterpriseNature = undefined; // 企业性质 0=其他,1=国企,2=央企,3=私企,4=合资企业(含港澳台),5=外资控股
  570. let listedNature = undefined; // 上市 0=否,1=是
  571. if (this.state.nature.length >= 2) {
  572. enterpriseNature = this.state.nature[1];
  573. }
  574. if (this.state.nature.length >= 3) {
  575. listedNature = this.state.nature[2];
  576. }
  577. $.ajax({
  578. method: "POST",
  579. dataType: "json",
  580. crossDomain: false,
  581. url: globalConfig.context + '/api/admin/customer/updateAndReceiveCustomer',
  582. data: {
  583. id: this.state.id,
  584. orgCode: values.orgCode,
  585. contacts: values.content,
  586. contactMobile: values.telnum,
  587. societyTag: '0', //社会属性默认为 社会企业
  588. //source:values.customerSource,
  589. province: (values.ProvinceCity)[0],//省
  590. city: (values.ProvinceCity)[1],//市
  591. area: (values.ProvinceCity)[2],//区
  592. type: '1',
  593. intendedProject: arr.join(','),
  594. businessScope: this.state.businessScope.join(','),
  595. position: values.position,
  596. level: this.state.level,
  597. nature: this.state.nature[0],
  598. natureOther: this.state.natureOther,
  599. enterpriseNature,
  600. listedNature,
  601. }
  602. }).done(function (data) {
  603. this.setState({
  604. loading: false
  605. });
  606. if (!data.error.length) {
  607. message.success('领取成功!');
  608. this.loadData(this.state.ispage);
  609. this.handleModalClose();
  610. } else {
  611. message.warning(data.error[0].message);
  612. }
  613. }.bind(this));
  614. }
  615. });
  616. },
  617. handleModalClose() {
  618. this.setState({
  619. verification: false,
  620. id: undefined,
  621. name: undefined,
  622. orgCode: undefined,
  623. ProvinceCity: [],
  624. content: undefined,
  625. position: undefined,
  626. telnum: undefined,
  627. businessScope: [],
  628. selectCooperationProjects: [],
  629. level: undefined,
  630. nature: undefined,
  631. natureOther: undefined,
  632. })
  633. this.props.form.resetFields();
  634. },
  635. receives(e) {
  636. this.setState({
  637. loading: true,
  638. });
  639. $.ajax({
  640. method: "get",
  641. dataType: "json",
  642. crossDomain: false,
  643. url: globalConfig.context + "/api/admin/customer/receiveCustomer",
  644. data: {
  645. uid: e.id,
  646. }
  647. }).done(function (data) {
  648. this.setState({
  649. loading: false,
  650. });
  651. if (data.error.length === 0) {
  652. message.success(e.signBills == 1 ? '领取成功,请在【私有客户列表】中查询!' : '领取成功,请在【签单客户列表】中查询!');
  653. this.loadData(this.state.ispage);
  654. } else {
  655. message.warning(data.error[0].message);
  656. };
  657. }.bind(this));
  658. },
  659. //
  660. zhuanjiaoDetailCancel() {
  661. this.setState({
  662. zhuanjiaoVisible: false,
  663. });
  664. },
  665. //
  666. zhuanjiaoLog(record) {
  667. this.setState({
  668. zhuanjiaoVisible: true,
  669. zhuanjiaoId: record.id,
  670. });
  671. },
  672. //
  673. seeDetail(record) {
  674. this.setState({
  675. data: record,
  676. visitModul: true,
  677. });
  678. },
  679. //
  680. closeDesc(e) {
  681. this.state.visitModul = e;
  682. },
  683. //
  684. search() {
  685. this.loadData();
  686. },
  687. //
  688. reset() {
  689. this.setState({
  690. nameSearch: undefined,
  691. departmenttSearch: undefined,
  692. theTypes: undefined,
  693. auto: undefined,
  694. provinceSearch: undefined,
  695. addressSearch: [],
  696. dataSource: []
  697. })
  698. // this.loadData();
  699. },
  700. componentWillReceiveProps(nextProps) {
  701. if (nextProps.ApiUrl != this.props.ApiUrl) {
  702. this.state.nameSearch = "";
  703. this.state.provinceSearch = undefined;
  704. this.state.addressSearch = [];
  705. this.loadData(null, nextProps.ApiUrl);
  706. }
  707. },
  708. componentWillMount() {
  709. // this.departmentList();
  710. //城市
  711. let Province = [];
  712. provinceList.map(function (item) {
  713. var id = String(item.id);
  714. Province.push(
  715. <Select.Option value={id} key={item.name}>
  716. {item.name}
  717. </Select.Option>
  718. );
  719. });
  720. this.state.Provinces = Province;
  721. this.loadData();
  722. },
  723. //指定转交人自动补全
  724. supervisor(e) {
  725. $.ajax({
  726. method: "get",
  727. dataType: "json",
  728. crossDomain: false,
  729. url: globalConfig.context + "/api/admin/order/getBusinessProjectByName",
  730. data: {
  731. businessName: e,
  732. },
  733. }).done((data) => {
  734. console.log(data)
  735. let thedata = data.data || [];
  736. if (!thedata) {
  737. if (data.error && data.error.length) {
  738. message.warning(data.error[0].message);
  739. }
  740. thedata = {};
  741. }
  742. this.setState({
  743. cooperationProjects: thedata,
  744. });
  745. }).always(
  746. function () {
  747. this.setState({
  748. loading: false,
  749. });
  750. }.bind(this)
  751. );
  752. },
  753. //输入转交人输入框失去焦点是判断客户是否存在
  754. selectAuto(value, options) {
  755. this.setState({
  756. auto: value,
  757. });
  758. },
  759. blurChange(e) {
  760. let theType = "";
  761. let contactLists = this.state.customerArr || [];
  762. if (e) {
  763. contactLists.map(function (item) {
  764. if (item.name == e.toString()) {
  765. theType = item.id;
  766. }
  767. });
  768. }
  769. this.setState({
  770. theTypes: theType,
  771. });
  772. },
  773. //值改变时请求客户名称
  774. httpChange(e) {
  775. if (e.length >= 1) {
  776. this.supervisor(e);
  777. }
  778. this.setState({
  779. auto: e,
  780. });
  781. },
  782. changeList(arr) {
  783. const newArr = [];
  784. this.state.columns.forEach(item => {
  785. arr.forEach(val => {
  786. if (val === item.title) {
  787. newArr.push(item);
  788. }
  789. });
  790. });
  791. this.setState({
  792. changeList: newArr
  793. });
  794. },
  795. render() {
  796. let departmentArr = this.state.departmentArr || [];
  797. const intentionState = this.props.intentionState;
  798. const { getFieldDecorator } = this.props.form;
  799. const formItemLayout = {
  800. labelCol: { span: 6 },
  801. wrapperCol: { span: 14 },
  802. };
  803. const FormItem = Form.Item;
  804. const rowSelection = {
  805. selectedRowKeys: this.state.selectedRowKeys,
  806. onChange: (selectedRowKeys, selectedRows) => {
  807. this.setState({
  808. modalVisible: false,
  809. selectedRows: selectedRows.slice(-1),
  810. selectedRowKeys: selectedRowKeys.slice(-1),
  811. });
  812. },
  813. onSelect: (recordt, selected, selectedRows) => {
  814. this.setState({
  815. modalVisible: false,
  816. recordt: recordt.id,
  817. });
  818. },
  819. };
  820. const dataSources = this.state.customerArr || [];
  821. const options = dataSources.map((group) => (
  822. <Select.Option key={group.id} value={group.name}>
  823. {group.name}
  824. </Select.Option>
  825. ));
  826. const hasSelected = this.state.selectedRowKeys.length > 0;
  827. return (
  828. <div className="user-content">
  829. <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
  830. <div className="content-title" style={{ marginBottom: 10 }}>
  831. <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "单位客户查询" : "个人客户查询"}</span>
  832. </div>
  833. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  834. <TabPane tab="搜索" key="1">
  835. <div className="user-search">
  836. <Input
  837. style={{ width: 240 }}
  838. placeholder="请输入精确客户全称或统一社会信用代码"
  839. value={this.state.nameSearch}
  840. onChange={(e) => {
  841. this.setState({ nameSearch: e.target.value });
  842. }}
  843. />
  844. {/* <Select placeholder="选择部门"
  845. style={{ width: 150, marginRight: '10px', marginLeft: '10px' }}
  846. value={this.state.departmenttSearch}
  847. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  848. {
  849. departmentArr.map(function (item) {
  850. return <Select.Option key={item.id} >{item.name}</Select.Option>
  851. })
  852. }
  853. </Select> */}
  854. {/* <AutoComplete
  855. className="certain-category-search"
  856. dropdownClassName="certain-category-search-dropdown"
  857. dropdownMatchSelectWidth={false}
  858. dropdownStyle={{ width: 120 }}
  859. style={{ width: '120px' }}
  860. dataSource={options}
  861. placeholder="客户所有人姓名"
  862. value={this.state.auto}
  863. onChange={this.httpChange}
  864. filterOption={true}
  865. onBlur={this.blurChange}
  866. onSelect={this.selectAuto}
  867. >
  868. <Input />
  869. </AutoComplete> */}
  870. <Button type="primary" onClick={this.search}>搜索</Button>
  871. <Button onClick={this.reset}>重置</Button>
  872. </div>
  873. </TabPane>
  874. <TabPane tab="更改表格显示数据" key="2">
  875. <div style={{ marginLeft: 10 }}>
  876. <ChooseList
  877. columns={this.state.columns}
  878. changeFn={this.changeList}
  879. changeList={this.state.changeList}
  880. top={55}
  881. margin={11}
  882. />
  883. </div>
  884. </TabPane>
  885. </Tabs>
  886. <div className="patent-table">
  887. <Spin spinning={this.state.loading}>
  888. <Table
  889. size="middle"
  890. columns={
  891. this.state.changeList
  892. ? this.state.changeList
  893. : this.state.columns
  894. }
  895. dataSource={this.state.dataSource}
  896. rowSelection={rowSelection}
  897. pagination={this.state.pagination}
  898. />
  899. </Spin>
  900. </div>
  901. <Detaile
  902. visitModul={this.state.visitModul}
  903. data={this.state.data}
  904. detailApi={this.props.detailApi}
  905. closeDesc={this.closeDesc}
  906. />
  907. {this.state.zhuanjiaoVisible ? (
  908. <ZhuanjiaoDetail
  909. cancel={this.zhuanjiaoDetailCancel}
  910. visible={this.state.zhuanjiaoVisible}
  911. id={this.state.zhuanjiaoId}
  912. />
  913. ) : (
  914. ""
  915. )}
  916. <Modal maskClosable={false}
  917. visible={this.state.verification}
  918. onCancel={this.handleModalClose}
  919. width='600px'
  920. title='客户信息'
  921. footer={null}
  922. className="admin-desc-content">
  923. <Spin spinning={this.state.loading}>
  924. <div>
  925. <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
  926. <Spin spinning={this.state.loading}>
  927. <div>
  928. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
  929. <div className="clearfix">
  930. <FormItem className="mid-item"
  931. {...formItemLayout}
  932. label="公司名称" >
  933. {getFieldDecorator('name', {
  934. rules: [{ required: true, message: '此项为必填项!' }],
  935. initialValue: this.state.name
  936. })(
  937. <Input placeholder="公司名称" disabled />
  938. // <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
  939. // <Input placeholder="公司名称" value={this.state.name} />
  940. // {this.state.verification && <Icon type="check-circle" style={{
  941. // fontSize: 16,
  942. // color: '#30e031',
  943. // position: 'absolute',
  944. // right: '80px',
  945. // }} />}
  946. // <Button onClick={this.checkUserName} type="primary" style={{ marginLeft: '10px' }}>验证</Button>
  947. // </span>
  948. )}
  949. </FormItem>
  950. </div>
  951. <div className="clearfix">
  952. <FormItem
  953. {...formItemLayout}
  954. label="统一社会信用代码"
  955. >
  956. {getFieldDecorator('orgCode', {
  957. rules: [{ required: true, message: '此项为必填项!' }],
  958. initialValue: this.state.orgCode
  959. })(
  960. <Input placeholder="统一社会信用代码" />
  961. )}
  962. </FormItem>
  963. </div>
  964. <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>如,科德集团则填写91430105670766451M</Col>
  965. <div className="clearfix">
  966. <FormItem
  967. {...formItemLayout}
  968. label="省-市-区"
  969. >
  970. {getFieldDecorator('ProvinceCity', {
  971. rules: [{ required: true, message: '此项为必填项!' }],
  972. initialValue: this.state.ProvinceCity
  973. })(
  974. <Cascader options={areaSelect()} placeholder="选择城市" />
  975. )}
  976. </FormItem>
  977. </div>
  978. <div className="clearfix">
  979. <FormItem className="mid-item"
  980. {...formItemLayout}
  981. label="联系人" >
  982. {getFieldDecorator('content', {
  983. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  984. initialValue: this.state.content
  985. })(
  986. <Input placeholder="联系人姓名" />
  987. )}
  988. </FormItem>
  989. </div>
  990. <div className="clearfix">
  991. <FormItem className="mid-item"
  992. {...formItemLayout}
  993. label="职位" >
  994. {getFieldDecorator('position', {
  995. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  996. initialValue: this.state.position
  997. })(
  998. <Input placeholder="联系人职位" />
  999. )}
  1000. </FormItem>
  1001. </div>
  1002. <div className="clearfix">
  1003. <FormItem className="mid-item"
  1004. {...formItemLayout}
  1005. label="联系电话" >
  1006. {getFieldDecorator('telnum', {
  1007. rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
  1008. initialValue: this.state.telnum
  1009. })(
  1010. <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
  1011. )}
  1012. </FormItem>
  1013. </div>
  1014. <div className="clearfix">
  1015. <FormItem className="mid-item"
  1016. {...formItemLayout}
  1017. required
  1018. label="主营产品" >
  1019. <div>
  1020. {this.state.businessScope.map((tag, index) => {
  1021. const isLongTag = tag.length > 20;
  1022. const tagElem = (
  1023. <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
  1024. {isLongTag ? `${tag.slice(0, 20)}...` : tag}
  1025. </Tag>
  1026. );
  1027. return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
  1028. })}
  1029. {
  1030. !this.state.inputVisible &&
  1031. <Button
  1032. size="small"
  1033. type="primary"
  1034. onClick={this.showInput}>
  1035. + 新增主营产品
  1036. </Button>
  1037. }
  1038. </div>
  1039. {this.state.inputVisible && (<div>
  1040. <TextArea
  1041. style={{ width: '300px', height: '100px' }}
  1042. value={this.state.inputValue}
  1043. onChange={(e) => {
  1044. this.setState({
  1045. inputValue: e.target.value
  1046. })
  1047. }} />
  1048. <div style={{ color: '#f00' }}>提示:请用 / 符号隔开关键字</div>
  1049. <div>
  1050. <Button
  1051. size="small"
  1052. type="primary"
  1053. onClick={this.handleInputConfirm}>
  1054. 确定
  1055. </Button>
  1056. <Button
  1057. size="small"
  1058. style={{ marginLeft: '5px' }}
  1059. onClick={() => {
  1060. this.setState({
  1061. inputVisible: false,
  1062. inputValue: ''
  1063. })
  1064. }}>
  1065. 取消
  1066. </Button>
  1067. </div>
  1068. </div>)}
  1069. </FormItem>
  1070. </div>
  1071. <div className="clearfix">
  1072. <FormItem
  1073. className="mid-item"
  1074. {...formItemLayout}
  1075. required
  1076. label="意向合作项目" >
  1077. <div>
  1078. <div style={{ paddingBottom: this.state.selectCooperationProjects.length === 0 ? 0 : '10px' }}>
  1079. {this.state.selectCooperationProjects.map((tag, index) => {
  1080. console.log(tag)
  1081. const isLongTag = tag.label.length > 20;
  1082. const tagElem = (
  1083. <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
  1084. {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
  1085. </Tag>
  1086. );
  1087. return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
  1088. })}
  1089. </div>
  1090. <div>
  1091. <AutoComplete
  1092. style={{ width: 200 }}
  1093. onSearch={this.supervisor}
  1094. onSelect={this.onSelect}
  1095. placeholder="请输入关键字"
  1096. >
  1097. {
  1098. this.state.cooperationProjects.map(function (item) {
  1099. return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
  1100. })
  1101. }
  1102. </AutoComplete>
  1103. </div>
  1104. </div>
  1105. </FormItem>
  1106. </div>
  1107. <div className="clearfix">
  1108. <FormItem
  1109. className="mid-item"
  1110. {...formItemLayout}
  1111. required
  1112. label="客户类型" >
  1113. <Select
  1114. placeholder="请选择客户类型"
  1115. value={this.state.level}
  1116. onChange={(e) => {
  1117. this.setState({ level: e });
  1118. }}
  1119. >
  1120. <Option value={0}>一般客户(一年以上预签)</Option>
  1121. <Option value={1}>意向客户(半年内预签)</Option>
  1122. <Option value={2}>重点客户(一个月内预签)</Option>
  1123. </Select>
  1124. </FormItem>
  1125. </div>
  1126. <div className="clearfix">
  1127. <FormItem
  1128. className="mid-item"
  1129. {...formItemLayout}
  1130. required
  1131. label="客户性质" >
  1132. {/* <Select
  1133. placeholder="请选择客户性质"
  1134. value={this.state.nature}
  1135. onChange={(e) => {
  1136. this.setState({ nature: e });
  1137. }}
  1138. >
  1139. <Option value={1}>政府机构</Option>
  1140. <Option value={2}>科研院所</Option>
  1141. <Option value={3}>高等院校</Option>
  1142. <Option value={4}>国有企业</Option>
  1143. <Option value={5}>民营企业</Option>
  1144. <Option value={6}>社会团体</Option>
  1145. <Option value={0}>其他(请注明)</Option>
  1146. </Select> */}
  1147. <Cascader
  1148. options={this.state.natureOptions}
  1149. placeholder="请选择客户性质"
  1150. value={this.state.nature}
  1151. onChange={e => { this.setState({ nature: e }) }}
  1152. />
  1153. </FormItem>
  1154. </div>
  1155. {
  1156. this.state.nature == 0 &&
  1157. <div className="clearfix">
  1158. <FormItem
  1159. className="mid-item"
  1160. {...formItemLayout}
  1161. required
  1162. label="其他说明" >
  1163. <Input
  1164. placeholder="其他说明"
  1165. value={this.state.natureOther}
  1166. onChange={e => {
  1167. this.setState({
  1168. natureOther: e.target.value
  1169. })
  1170. }}
  1171. />
  1172. </FormItem>
  1173. </div>
  1174. }
  1175. </div>
  1176. <FormItem wrapperCol={{ span: 12, offset: 6 }}>
  1177. <Button type="primary" htmlType="submit" style={{}}>领取客户</Button>
  1178. </FormItem>
  1179. </Spin>
  1180. </Form >
  1181. </div>
  1182. </Spin>
  1183. </Modal>
  1184. </div>
  1185. );
  1186. },
  1187. });
  1188. export default Form.create({})(QueryCustomer);