publicCustomer.jsx 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  1. import React from 'react';
  2. import { Button, Cascader, Input, Select, Spin, Table, message, Form, Tabs } 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. render: (text, record, index) => {
  136. return <div>
  137. <Button onClick={(e) => { e.stopPropagation(), this.receive(record) }} type="primary">领取</Button>
  138. </div>
  139. }
  140. }
  141. ],
  142. }
  143. },
  144. /*单个领取*/
  145. receive(e) {
  146. this.setState({
  147. loading: true,
  148. selectedRowKeys: [],
  149. });
  150. $.ajax({
  151. method: "get",
  152. dataType: "json",
  153. crossDomain: false,
  154. url: globalConfig.context + "/api/admin/customer/receiveCustomer",
  155. data: {
  156. uid: e.id,
  157. }
  158. }).done(function (data) {
  159. if (!data.error.length) {
  160. message.success('领取成功!');
  161. this.setState({
  162. loading: false,
  163. });
  164. } else {
  165. message.warning(data.error[0].message);
  166. };
  167. this.loadData(this.state.ispage);
  168. }.bind(this));
  169. },
  170. closeDesc(e) {
  171. this.state.visitModul = e;
  172. },
  173. search() {
  174. this.loadData();
  175. },
  176. reset() {
  177. this.state.nameSearch = '';
  178. this.state.provinceSearch = undefined;
  179. this.state.addressSearch = [];
  180. this.state.sort = 0
  181. this.loadData()
  182. },
  183. componentWillReceiveProps(nextProps) {
  184. if (nextProps.ApiUrl != this.props.ApiUrl) {
  185. this.state.nameSearch = '';
  186. this.state.provinceSearch = undefined;
  187. this.state.addressSearch = [];
  188. this.loadData(null, nextProps.ApiUrl);
  189. };
  190. },
  191. componentWillMount() {
  192. //城市
  193. let Province = [];
  194. provinceList.map(function (item) {
  195. var id = String(item.id)
  196. Province.push(
  197. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  198. )
  199. });
  200. this.state.Provinces = Province;
  201. this.loadData();
  202. },
  203. changeList(arr) {
  204. const newArr = [];
  205. this.state.columns.forEach(item => {
  206. arr.forEach(val => {
  207. if (val === item.title) {
  208. newArr.push(item);
  209. }
  210. });
  211. });
  212. this.setState({
  213. changeList: newArr
  214. });
  215. },
  216. render() {
  217. const intentionState = this.props.intentionState;
  218. const FormItem = Form.Item;
  219. const { TabPane } = Tabs
  220. const rowSelection = {
  221. selectedRowKeys: this.state.selectedRowKeys,
  222. onChange: (selectedRowKeys, selectedRows) => {
  223. this.setState({
  224. selectedRows: selectedRows,
  225. selectedRowKeys: selectedRowKeys
  226. });
  227. },
  228. onSelect: (recordt, selected, selectedData) => {
  229. this.setState({
  230. selectedData: selectedData,
  231. recordt: recordt.id
  232. })
  233. },
  234. };
  235. return (
  236. <div className="user-content">
  237. <ShowModalDiv ShowModal={this.state.showModal} />
  238. <div className="content-title">
  239. <span>{!intentionState ? "单位公共客户" : "个人公共客户"}</span>
  240. </div>
  241. <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
  242. <TabPane tab="搜索" key="1">
  243. <div className="user-search">
  244. <Input
  245. placeholder="客户名称"
  246. value={this.state.nameSearch}
  247. style={{ width: 150 }}
  248. onChange={(e) => {
  249. this.setState({ nameSearch: e.target.value });
  250. }}
  251. />
  252. <Select
  253. placeholder="省"
  254. style={{ width: 80 }}
  255. value={this.state.provinceSearch}
  256. onChange={(e) => {
  257. this.setState({ provinceSearch: e });
  258. }}
  259. >
  260. {this.state.Provinces}
  261. </Select>
  262. <span style={{ marginRight: "10px" }}>
  263. <Cascader
  264. options={citySelect()}
  265. value={this.state.addressSearch}
  266. placeholder="选择城市"
  267. onChange={(e, pre) => {
  268. this.setState({ addressSearch: e });
  269. }}
  270. />
  271. </span>
  272. <span>排序:</span>
  273. <Select style={{ width: 120 }} value={this.state.sort} onChange={e => { this.setState({ sort: e }) }} placeholder="选择排序">
  274. <Option value={0}>默认</Option>
  275. <Option value={1}>降序</Option>
  276. <Option value={2}>升序</Option>
  277. </Select>
  278. <Button type="primary" onClick={this.search}>
  279. 搜索
  280. </Button>
  281. <Button onClick={this.reset}>重置</Button>
  282. </div>
  283. </TabPane>
  284. <TabPane tab="更改表格显示数据" key="2">
  285. <div style={{ marginLeft: 10 }}>
  286. <ChooseList
  287. columns={this.state.columns}
  288. changeFn={this.changeList}
  289. changeList={this.state.changeList}
  290. top={55}
  291. margin={11}
  292. />
  293. </div>
  294. </TabPane>
  295. </Tabs>
  296. <div className="patent-table">
  297. <Spin spinning={this.state.loading}>
  298. <Table
  299. size="middle"
  300. columns={
  301. this.state.changeList
  302. ? this.state.changeList
  303. : this.state.columns
  304. }
  305. dataSource={this.state.dataSource}
  306. // rowSelection={rowSelection}
  307. pagination={this.state.pagination}
  308. />
  309. </Spin>
  310. </div>
  311. </div>
  312. );
  313. }
  314. })
  315. export default QueryCustomer;