queryCutomer.jsx 9.8 KB

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