publicCustomer.jsx 33 KB

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