publicCustomer.jsx 8.6 KB

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