queryCutomer.jsx 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. import React from 'react';
  2. import { Button,Cascader,Input, Select, Spin, Table, message, Form ,AutoComplete} from 'antd';
  3. import ajax from 'jquery/src/ajax/xhr.js';
  4. import $ from 'jquery/src/ajax';
  5. import {ShowModal} from '../../../../tools.js'
  6. import { citySelect, provinceList } from '@/NewDicProvinceList';
  7. import ShowModalDiv from "@/showModal.jsx";
  8. import Detaile from './detail.jsx';
  9. const QueryCustomer = React.createClass({
  10. loadData(pageNo, apiUrl) {
  11. this.setState({
  12. visitModul:false,
  13. loading: true,
  14. ispage:pageNo,
  15. modalVisible:false
  16. });
  17. let api=apiUrl?apiUrl:this.props.ApiUrl;
  18. $.ajax({
  19. method: "post",
  20. dataType: "json",
  21. crossDomain: false,
  22. url: globalConfig.context + api,
  23. data: {
  24. pageNo: pageNo || 1,
  25. pageSize: this.state.pagination.pageSize,
  26. name: this.state.nameSearch,
  27. departmentId: this.state.departmenttSearch,
  28. aid: this.state.theTypes,
  29. },
  30. success: function(data) {
  31. ShowModal(this);
  32. let theArr = [];
  33. if(data.error.length || data.data.list == "") {
  34. if(data.error && data.error.length) {
  35. message.warning(data.error[0].message);
  36. };
  37. } else {
  38. for(let i = 0; i < data.data.list.length; i++) {
  39. let thisdata = data.data.list[i];
  40. let diqu=(thisdata.province==null?"":thisdata.province)+(thisdata.city==null?"":"-"+thisdata.city)+(thisdata.area==null?"":"-"+thisdata.area);
  41. theArr.push({
  42. key: i,
  43. id: thisdata.uid,
  44. name: thisdata.name,
  45. adminName: thisdata.adminName,
  46. informationMaintainer:thisdata.informationMaintainer,
  47. createTime: thisdata.createTime&&thisdata.createTime.split(' ')[0],
  48. locationProvince: diqu
  49. });
  50. };
  51. this.state.pagination.current = data.data.pageNo;
  52. this.state.pagination.total = data.data.totalCount;
  53. };
  54. if(data.data&&data.data.list&&!data.data.list.length){
  55. this.state.pagination.current=0
  56. this.state.pagination.total=0
  57. }
  58. this.setState({
  59. dataSource: theArr,
  60. pagination: this.state.pagination,
  61. selectedRowKeys:[]
  62. });
  63. }.bind(this),
  64. }).always(function() {
  65. this.setState({
  66. loading: false
  67. });
  68. }.bind(this));
  69. },
  70. //部门
  71. departmentList() {
  72. this.setState({
  73. loading: true
  74. });
  75. $.ajax({
  76. method: "get",
  77. dataType: "json",
  78. crossDomain: false,
  79. url: globalConfig.context + "/api/admin/organization/selectSuperId",
  80. data: {
  81. },
  82. success: function(data) {
  83. let thedata = data.data;
  84. let theArr = [];
  85. if(!thedata) {
  86. if(data.error && data.error.length) {
  87. message.warning(data.error[0].message);
  88. };
  89. thedata = {};
  90. } else {
  91. thedata.map(function(item, index) {
  92. theArr.push({
  93. key: index,
  94. name: item.name,
  95. id: item.id,
  96. })
  97. })
  98. }
  99. this.setState({
  100. departmentArr: theArr,
  101. })
  102. }.bind(this),
  103. }).always(function() {
  104. this.setState({
  105. loading: false
  106. });
  107. }.bind(this));
  108. },
  109. getInitialState(){
  110. return {
  111. addressSearch: [],
  112. dataSource:[],
  113. loading:false,
  114. departmentArr: [],
  115. selectedRowKeys: [],
  116. selectedRowKey: [],
  117. selectedRows: [],
  118. pagination: {
  119. defaultCurrent: 1,
  120. defaultPageSize: 10,
  121. showQuickJumper: true,
  122. pageSize: 10,
  123. onChange: function(page) {
  124. this.loadData(page);
  125. }.bind(this),
  126. showTotal: function(total) {
  127. return '共' + total + '条数据';
  128. }
  129. },
  130. columns: [{
  131. title: '客户名称',
  132. dataIndex: 'name',
  133. key: 'name',
  134. }, {
  135. title: '地区',
  136. dataIndex: 'locationProvince',
  137. key: 'locationProvince',
  138. },{
  139. title: '创建时间',
  140. dataIndex: 'createTime',
  141. key: 'createTime',
  142. },
  143. {
  144. title: '客户所属人',
  145. dataIndex: 'adminName',
  146. key: 'adminName',
  147. },
  148. {
  149. title: '资料所属人',
  150. dataIndex: 'informationMaintainer',
  151. key: 'informationMaintainer',
  152. },
  153. {
  154. title: '操作',
  155. dataIndex: 'abc',
  156. key: 'abc',
  157. render: (text, record, index) => {
  158. return <div>
  159. <Button onClick={(e) =>{ e.stopPropagation(), this.seeDetail(record)}} type="primary">查看详情</Button>
  160. </div>
  161. }
  162. }
  163. ],
  164. }
  165. },
  166. seeDetail(record){
  167. this.setState({
  168. data:record,
  169. visitModul:true
  170. })
  171. },
  172. closeDesc(e) {
  173. this.state.visitModul = e;
  174. },
  175. search() {
  176. this.loadData();
  177. },
  178. reset() {
  179. this.state.nameSearch='';
  180. this.state.departmenttSearch=undefined;
  181. this.state.theTypes='';
  182. this.state.auto='';
  183. this.state.provinceSearch=undefined;
  184. this.state.addressSearch=[];
  185. this.loadData()
  186. },
  187. componentWillReceiveProps(nextProps) {
  188. if(nextProps.ApiUrl!=this.props.ApiUrl) {
  189. this.state.nameSearch='';
  190. this.state.provinceSearch=undefined;
  191. this.state.addressSearch=[];
  192. this.loadData(null,nextProps.ApiUrl);
  193. };
  194. },
  195. componentWillMount() {
  196. this.departmentList();
  197. //城市
  198. let Province = [];
  199. provinceList.map(function(item) {
  200. var id = String(item.id)
  201. Province.push(
  202. <Select.Option value={id} key={item.name}>{item.name}</Select.Option>
  203. )
  204. });
  205. this.state.Provinces = Province;
  206. this.loadData();
  207. },
  208. //指定转交人自动补全
  209. supervisor(e){
  210. $.ajax({
  211. method: "get",
  212. dataType: "json",
  213. crossDomain: false,
  214. url: globalConfig.context + "/api/admin/customer/listAdminByName",
  215. data:{
  216. adminName:e
  217. },
  218. success: function (data) {
  219. let thedata=data.data;
  220. if (!thedata) {
  221. if (data.error && data.error.length) {
  222. message.warning(data.error[0].message);
  223. };
  224. thedata = {};
  225. };
  226. this.setState({
  227. customerArr:thedata,
  228. });
  229. }.bind(this),
  230. }).always(function () {
  231. this.setState({
  232. loading: false
  233. });
  234. }.bind(this));
  235. },
  236. //输入转交人输入框失去焦点是判断客户是否存在
  237. selectAuto(value,options){
  238. this.setState({
  239. auto:value
  240. })
  241. },
  242. blurChange(e){
  243. let theType='';
  244. let contactLists=this.state.customerArr||[];
  245. if (e) {
  246. contactLists.map(function (item) {
  247. if (item.name == e.toString()) {
  248. theType = item.id;
  249. }
  250. });
  251. }
  252. this.setState({
  253. theTypes:theType
  254. })
  255. },
  256. //值改变时请求客户名称
  257. httpChange(e){
  258. if(e.length>=1){
  259. this.supervisor(e);
  260. }
  261. this.setState({
  262. auto:e
  263. })
  264. },
  265. render(){
  266. let departmentArr = this.state.departmentArr || [];
  267. const intentionState=this.props.intentionState;
  268. const FormItem = Form.Item;
  269. const rowSelection = {
  270. selectedRowKeys: this.state.selectedRowKeys,
  271. onChange: (selectedRowKeys, selectedRows) => {
  272. this.setState({
  273. modalVisible:false,
  274. selectedRows: selectedRows.slice(-1),
  275. selectedRowKeys: selectedRowKeys.slice(-1)
  276. });
  277. },
  278. onSelect: (recordt, selected, selectedRows) => {
  279. this.setState({
  280. modalVisible:false,
  281. recordt: recordt.id
  282. })
  283. },
  284. };
  285. const dataSources=this.state.customerArr || [];
  286. const options = dataSources.map((group) =>
  287. <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option>
  288. )
  289. const hasSelected = this.state.selectedRowKeys.length > 0;
  290. return (
  291. <div className="user-content">
  292. <ShowModalDiv ShowModal={this.state.showModal} />
  293. <div className="content-title">
  294. <span>{!intentionState ? "单位客户查询" : "个人客户查询"}</span>
  295. </div>
  296. <div className="user-search">
  297. <Input
  298. placeholder="请输入精确客户全称"
  299. value={this.state.nameSearch}
  300. onChange={e => {
  301. this.setState({ nameSearch: e.target.value });
  302. }}
  303. />
  304. {/* <Select placeholder="选择部门"
  305. style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}}
  306. value={this.state.departmenttSearch}
  307. onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
  308. {
  309. departmentArr.map(function (item) {
  310. return <Select.Option key={item.id} >{item.name}</Select.Option>
  311. })
  312. }
  313. </Select> */}
  314. {/* <AutoComplete
  315. className="certain-category-search"
  316. dropdownClassName="certain-category-search-dropdown"
  317. dropdownMatchSelectWidth={false}
  318. dropdownStyle={{ width: 120 }}
  319. style={{ width: '120px'}}
  320. dataSource={options}
  321. placeholder="客户所有人姓名"
  322. value={this.state.auto}
  323. onChange={this.httpChange}
  324. filterOption={true}
  325. onBlur={this.blurChange}
  326. onSelect={this.selectAuto}
  327. >
  328. <Input />
  329. </AutoComplete> */}
  330. <Button type="primary" onClick={this.search}>
  331. 搜索
  332. </Button>
  333. <Button onClick={this.reset}>重置</Button>
  334. </div>
  335. <div className="patent-table">
  336. <Spin spinning={this.state.loading}>
  337. <Table
  338. columns={this.state.columns}
  339. dataSource={this.state.dataSource}
  340. rowSelection={rowSelection}
  341. pagination={this.state.pagination}
  342. />
  343. </Spin>
  344. </div>
  345. <Detaile
  346. visitModul={this.state.visitModul}
  347. data={this.state.data}
  348. detailApi={this.props.detailApi}
  349. closeDesc={this.closeDesc}
  350. />
  351. </div>
  352. );
  353. }
  354. })
  355. export default QueryCustomer;