queryCutomer.jsx 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. import React from 'react';
  2. import { Button,Cascader,Input, Select, Spin, Table, message, Form } 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 Detaile from './detail.jsx';
  7. const QueryCustomer = React.createClass({
  8. loadData(pageNo, apiUrl) {
  9. this.setState({
  10. visitModul:false,
  11. loading: true,
  12. ispage:pageNo,
  13. modalVisible:false
  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 ? this.state.provinceSearch : this.state.addressSearch[0],
  26. city: !(this.state.addressSearch).length ? '' : this.state.addressSearch[1],
  27. },
  28. success: function(data) {
  29. let theArr = [];
  30. if(data.error.length || data.data.list == "") {
  31. if(data.error && data.error.length) {
  32. message.warning(data.error[0].message);
  33. };
  34. } else {
  35. for(let i = 0; i < data.data.list.length; i++) {
  36. let thisdata = data.data.list[i];
  37. theArr.push({
  38. key: i,
  39. id: thisdata.uid,
  40. name: thisdata.name,
  41. adminName: thisdata.adminName,
  42. createTime: thisdata.createTime&&thisdata.createTime.split(' ')[0],
  43. locationProvince: thisdata.province ? thisdata.province + '-' + thisdata.city + '-' + thisdata.area : '--'
  44. });
  45. };
  46. this.state.pagination.current = data.data.pageNo;
  47. this.state.pagination.total = data.data.totalCount;
  48. };
  49. if(data.data&&data.data.list&&!data.data.list.length){
  50. this.state.pagination.current=0
  51. this.state.pagination.total=0
  52. }
  53. this.setState({
  54. dataSource: theArr,
  55. pagination: this.state.pagination,
  56. selectedRowKeys:[]
  57. });
  58. }.bind(this),
  59. }).always(function() {
  60. this.setState({
  61. loading: false
  62. });
  63. }.bind(this));
  64. },
  65. getInitialState(){
  66. return {
  67. addressSearch: [],
  68. dataSource:[],
  69. loading:false,
  70. selectedRowKeys: [],
  71. selectedRowKey: [],
  72. selectedRows: [],
  73. pagination: {
  74. defaultCurrent: 1,
  75. defaultPageSize: 10,
  76. showQuickJumper: true,
  77. pageSize: 10,
  78. onChange: function(page) {
  79. this.loadData(page);
  80. }.bind(this),
  81. showTotal: function(total) {
  82. return '共' + total + '条数据';
  83. }
  84. },
  85. columns: [{
  86. title: '客户名称',
  87. dataIndex: 'name',
  88. key: 'name',
  89. }, {
  90. title: '地区',
  91. dataIndex: 'locationProvince',
  92. key: 'locationProvince',
  93. },{
  94. title: '创建时间',
  95. dataIndex: 'createTime',
  96. key: 'createTime',
  97. },
  98. {
  99. title: '所属人',
  100. dataIndex: 'adminName',
  101. key: 'adminName',
  102. },
  103. {
  104. title: '操作',
  105. dataIndex: 'abc',
  106. key: 'abc',
  107. render: (text, record, index) => {
  108. return <div>
  109. <Button onClick={(e) =>{ e.stopPropagation(), this.seeDetail(record)}} type="primary">查看详情</Button>
  110. </div>
  111. }
  112. }
  113. ],
  114. }
  115. },
  116. seeDetail(record){
  117. this.setState({
  118. data:record,
  119. visitModul:true
  120. })
  121. },
  122. closeDesc(e) {
  123. this.state.visitModul = e;
  124. },
  125. search() {
  126. this.loadData();
  127. },
  128. reset() {
  129. this.state.nameSearch='';
  130. this.state.provinceSearch=undefined;
  131. this.state.addressSearch=[];
  132. this.loadData()
  133. },
  134. componentWillReceiveProps(nextProps) {
  135. if(nextProps.ApiUrl!=this.props.ApiUrl) {
  136. this.loadData(null,nextProps.ApiUrl);
  137. };
  138. },
  139. componentWillMount() {
  140. //城市
  141. let Province = [];
  142. provinceList.map(function(item) {
  143. var id = String(item.id)
  144. Province.push(
  145. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  146. )
  147. });
  148. this.state.Provinces = Province;
  149. this.loadData();
  150. },
  151. render(){
  152. const intentionState=this.props.intentionState;
  153. const FormItem = Form.Item;
  154. const rowSelection = {
  155. selectedRowKeys: this.state.selectedRowKeys,
  156. onChange: (selectedRowKeys, selectedRows) => {
  157. this.setState({
  158. modalVisible:false,
  159. selectedRows: selectedRows.slice(-1),
  160. selectedRowKeys: selectedRowKeys.slice(-1)
  161. });
  162. },
  163. onSelect: (recordt, selected, selectedRows) => {
  164. this.setState({
  165. modalVisible:false,
  166. recordt: recordt.id
  167. })
  168. },
  169. };
  170. const hasSelected = this.state.selectedRowKeys.length > 0;
  171. return(
  172. <div className="user-content" >
  173. <div className="content-title">
  174. <span>{!intentionState?'单位客户查询':'个人客户查询'}</span>
  175. </div>
  176. <div className="user-search">
  177. <Input placeholder="客户名称"
  178. value={this.state.nameSearch}
  179. onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} />
  180. <Select placeholder="省"
  181. style={{ width: 80 }}
  182. value={this.state.provinceSearch}
  183. onChange={(e) => {this.setState({ provinceSearch: e});}}>
  184. {this.state.Provinces}
  185. </Select>
  186. <span style={{marginRight:'10px'}}>
  187. <Cascader options={citySelect()} value={this.state.addressSearch} placeholder="选择城市"
  188. onChange={(e,pre) => { this.setState({ addressSearch: e }) }} />
  189. </span>
  190. <Button type="primary" onClick={this.search}>搜索</Button>
  191. <Button onClick={this.reset}>重置</Button>
  192. </div>
  193. <div className="patent-table">
  194. <Spin spinning={this.state.loading}>
  195. <Table columns={this.state.columns}
  196. dataSource={this.state.dataSource}
  197. rowSelection={rowSelection}
  198. pagination={this.state.pagination}
  199. />
  200. </Spin>
  201. </div>
  202. <Detaile
  203. visitModul={this.state.visitModul}
  204. data={this.state.data}
  205. detailApi={this.props.detailApi}
  206. closeDesc={this.closeDesc}
  207. />
  208. </div>
  209. )
  210. }
  211. })
  212. export default QueryCustomer;