publicCustomer.jsx 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369
  1. import React from 'react';
  2. import { Button, Cascader, Input, Select, Spin, Table, message, Form, Tabs, Modal } from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import { citySelect, provinceList } from '@/NewDicProvinceList';
  6. import { ShowModal, onReplace } from '../../../../tools.js'
  7. import ShowModalDiv from "@/showModal.jsx";
  8. import { ChooseList } from "../../../order/orderNew/chooseList";
  9. const QueryCustomer = React.createClass({
  10. loadData(pageNo, apiUrl) {
  11. this.setState({
  12. loading: true,
  13. ispage: pageNo,
  14. });
  15. let api = apiUrl ? apiUrl : this.props.ApiUrl;
  16. $.ajax({
  17. method: "post",
  18. dataType: "json",
  19. crossDomain: false,
  20. url: globalConfig.context + api,
  21. data: {
  22. pageNo: pageNo || 1,
  23. pageSize: this.state.pagination.pageSize,
  24. name: this.state.nameSearch,
  25. province: !this.state.addressSearch.length
  26. ? this.state.provinceSearch
  27. : this.state.addressSearch[0],
  28. city: !this.state.addressSearch.length
  29. ? ""
  30. : this.state.addressSearch[1],
  31. sort: this.state.sort
  32. },
  33. success: function (data) {
  34. ShowModal(this);
  35. let theArr = [];
  36. if (data.error.length || data.data.list == "") {
  37. if (data.error && data.error.length) {
  38. message.warning(data.error[0].message);
  39. }
  40. } else {
  41. for (let i = 0; i < data.data.list.length; i++) {
  42. let thisdata = data.data.list[i];
  43. theArr.push({
  44. key: i,
  45. id: thisdata.uid,
  46. name: thisdata.name,
  47. contacts: thisdata.contacts,
  48. contactMobile: thisdata.contactMobile,
  49. createTime:
  50. thisdata.createTime && thisdata.createTime.split(" ")[0],
  51. transferTime:
  52. thisdata.transferTime && thisdata.transferTime.split(" ")[0],
  53. locationProvince: thisdata.province
  54. ? (thisdata.province || '') + (thisdata.city ? "-" + thisdata.city : '') + (thisdata.area ? "-" + thisdata.area : '')
  55. : "--",
  56. });
  57. }
  58. this.state.pagination.current = data.data.pageNo;
  59. this.state.pagination.total = data.data.totalCount;
  60. }
  61. if (data.data && data.data.list && !data.data.list.length) {
  62. this.state.pagination.current = 0;
  63. this.state.pagination.total = 0;
  64. }
  65. this.setState({
  66. dataSource: theArr,
  67. pagination: this.state.pagination,
  68. selectedRowKeys: [],
  69. });
  70. }.bind(this),
  71. }).always(
  72. function () {
  73. this.setState({
  74. loading: false,
  75. });
  76. }.bind(this)
  77. );
  78. },
  79. getInitialState() {
  80. return {
  81. sort: 0,
  82. addressSearch: [],
  83. dataSource: [],
  84. loading: false,
  85. selectedRowKeys: [],
  86. selectedRows: [],
  87. selectedData: [],
  88. pagination: {
  89. defaultCurrent: 1,
  90. defaultPageSize: 10,
  91. showQuickJumper: true,
  92. pageSize: 10,
  93. onChange: function (page) {
  94. this.loadData(page);
  95. }.bind(this),
  96. showTotal: function (total) {
  97. return '共' + total + '条数据';
  98. }
  99. },
  100. columns: [{
  101. title: '客户名称',
  102. dataIndex: 'name',
  103. key: 'name',
  104. render: (text, record, index) =>
  105. onReplace(text)
  106. },
  107. {
  108. title: '地区',
  109. dataIndex: 'locationProvince',
  110. key: 'locationProvince',
  111. },
  112. // {
  113. // title: '联系人',
  114. // dataIndex: 'contacts',
  115. // key: 'contacts',
  116. // },{
  117. // title: '联系电话',
  118. // dataIndex: 'contactMobile',
  119. // key: 'contactss',
  120. // },
  121. {
  122. title: '创建时间',
  123. dataIndex: 'createTime',
  124. key: 'createTime',
  125. },
  126. {
  127. title: '转换时间',
  128. dataIndex: 'transferTime',
  129. key: 'transferTime',
  130. },
  131. {
  132. title: '操作',
  133. dataIndex: 'abc',
  134. key: 'abc',
  135. width: 250,
  136. render: (text, record, index) => {
  137. return <div>
  138. <Button onClick={(e) => { e.stopPropagation(), this.receive(record) }} type="primary">领取</Button>
  139. <Button
  140. onClick={(e) => {
  141. e.stopPropagation(),
  142. this.rTips(record)
  143. }}
  144. style={{ marginLeft: 10 }}
  145. type="primary">领取为私有渠道信息</Button>
  146. </div>
  147. }
  148. }
  149. ],
  150. }
  151. },
  152. /*单个领取*/
  153. receive(e) {
  154. this.setState({
  155. loading: true,
  156. selectedRowKeys: [],
  157. });
  158. $.ajax({
  159. method: "get",
  160. dataType: "json",
  161. crossDomain: false,
  162. url: globalConfig.context + "/api/admin/customer/receiveCustomer",
  163. data: {
  164. uid: e.id,
  165. }
  166. }).done(function (data) {
  167. if (!data.error.length) {
  168. message.success('领取成功!');
  169. this.setState({
  170. loading: false,
  171. });
  172. } else {
  173. message.warning(data.error[0].message);
  174. };
  175. this.loadData(this.state.ispage);
  176. }.bind(this));
  177. },
  178. rTips(e) {
  179. let _this = this;
  180. Modal.confirm({
  181. title: "温馨提示",
  182. content: (
  183. <span style={{ color: "red" }}>
  184. <p>名称中含“协会”“商会”等名称为渠道信息!</p>
  185. <p>您是否确定将客户信息,领取为“私有渠道”信息,领取后,该信息即成为渠道信息不可再修改!!!</p>
  186. <p>领取成功后,您可以通过:渠道管理-渠道列表-私有渠道,查询到此条信息</p>
  187. </span>
  188. ),
  189. onOk() {
  190. _this.receiveNew(e)
  191. },
  192. onCancel() { },
  193. });
  194. },
  195. /*领取为私有渠道信息*/
  196. receiveNew(e) {
  197. this.setState({
  198. loading: true,
  199. selectedRowKeys: [],
  200. });
  201. $.ajax({
  202. method: "post",
  203. dataType: "json",
  204. crossDomain: false,
  205. url: globalConfig.context + "/api/admin/customer/receiveAsChannel",
  206. data: {
  207. uid: e.id,
  208. }
  209. }).done(function (data) {
  210. if (!data.error.length) {
  211. message.success('领取成功!');
  212. this.setState({
  213. loading: false,
  214. });
  215. } else {
  216. message.warning(data.error[0].message);
  217. };
  218. this.loadData(this.state.ispage);
  219. }.bind(this));
  220. },
  221. closeDesc(e) {
  222. this.state.visitModul = e;
  223. },
  224. search() {
  225. this.loadData();
  226. },
  227. reset() {
  228. this.state.nameSearch = '';
  229. this.state.provinceSearch = undefined;
  230. this.state.addressSearch = [];
  231. this.state.sort = 0
  232. this.loadData()
  233. },
  234. componentWillReceiveProps(nextProps) {
  235. if (nextProps.ApiUrl != this.props.ApiUrl) {
  236. this.state.nameSearch = '';
  237. this.state.provinceSearch = undefined;
  238. this.state.addressSearch = [];
  239. this.loadData(null, nextProps.ApiUrl);
  240. };
  241. },
  242. componentWillMount() {
  243. //城市
  244. let Province = [];
  245. provinceList.map(function (item) {
  246. var id = String(item.id)
  247. Province.push(
  248. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  249. )
  250. });
  251. this.state.Provinces = Province;
  252. this.loadData();
  253. },
  254. changeList(arr) {
  255. const newArr = [];
  256. this.state.columns.forEach(item => {
  257. arr.forEach(val => {
  258. if (val === item.title) {
  259. newArr.push(item);
  260. }
  261. });
  262. });
  263. this.setState({
  264. changeList: newArr
  265. });
  266. },
  267. render() {
  268. const intentionState = this.props.intentionState;
  269. const FormItem = Form.Item;
  270. const { TabPane } = Tabs
  271. const rowSelection = {
  272. selectedRowKeys: this.state.selectedRowKeys,
  273. onChange: (selectedRowKeys, selectedRows) => {
  274. this.setState({
  275. selectedRows: selectedRows,
  276. selectedRowKeys: selectedRowKeys
  277. });
  278. },
  279. onSelect: (recordt, selected, selectedData) => {
  280. this.setState({
  281. selectedData: selectedData,
  282. recordt: recordt.id
  283. })
  284. },
  285. };
  286. return (
  287. <div className="user-content">
  288. <ShowModalDiv ShowModal={this.state.showModal} />
  289. <div className="content-title" style={{ marginBottom: 10 }}>
  290. <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "单位公共客户" : "个人公共客户"}</span>
  291. </div>
  292. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  293. <TabPane tab="搜索" key="1">
  294. <div className="user-search">
  295. <Input
  296. placeholder="客户名称"
  297. value={this.state.nameSearch}
  298. style={{ width: 150 }}
  299. onChange={(e) => {
  300. this.setState({ nameSearch: e.target.value });
  301. }}
  302. />
  303. <Select
  304. placeholder="省"
  305. style={{ width: 80 }}
  306. value={this.state.provinceSearch}
  307. onChange={(e) => {
  308. this.setState({ provinceSearch: e });
  309. }}
  310. >
  311. {this.state.Provinces}
  312. </Select>
  313. <span style={{ marginRight: "10px" }}>
  314. <Cascader
  315. options={citySelect()}
  316. value={this.state.addressSearch}
  317. placeholder="选择城市"
  318. onChange={(e, pre) => {
  319. this.setState({ addressSearch: e });
  320. }}
  321. />
  322. </span>
  323. <span>排序:</span>
  324. <Select style={{ width: 120 }} value={this.state.sort} onChange={e => { this.setState({ sort: e }) }} placeholder="选择排序">
  325. <Option value={0}>默认</Option>
  326. <Option value={1}>降序</Option>
  327. <Option value={2}>升序</Option>
  328. </Select>
  329. <Button type="primary" onClick={this.search}>
  330. 搜索
  331. </Button>
  332. <Button onClick={this.reset}>重置</Button>
  333. </div>
  334. </TabPane>
  335. <TabPane tab="更改表格显示数据" key="2">
  336. <div style={{ marginLeft: 10 }}>
  337. <ChooseList
  338. columns={this.state.columns}
  339. changeFn={this.changeList}
  340. changeList={this.state.changeList}
  341. top={55}
  342. margin={11}
  343. />
  344. </div>
  345. </TabPane>
  346. </Tabs>
  347. <div className="patent-table">
  348. <Spin spinning={this.state.loading}>
  349. <Table
  350. size="middle"
  351. columns={
  352. this.state.changeList
  353. ? this.state.changeList
  354. : this.state.columns
  355. }
  356. dataSource={this.state.dataSource}
  357. // rowSelection={rowSelection}
  358. pagination={this.state.pagination}
  359. />
  360. </Spin>
  361. </div>
  362. </div>
  363. );
  364. }
  365. })
  366. export default QueryCustomer;