queryCutomer.jsx 9.7 KB

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