import React from 'react'; import { Button,Cascader,Input, Select, Spin, Table, message, Form ,AutoComplete} from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import { citySelect, provinceList } from '@/NewDicProvinceList'; import Detaile from './detail.jsx'; const QueryCustomer = React.createClass({ loadData(pageNo, apiUrl) { this.setState({ visitModul:false, loading: true, ispage:pageNo, modalVisible:false }); let api=apiUrl?apiUrl:this.props.ApiUrl; $.ajax({ method: "post", dataType: "json", crossDomain: false, url: globalConfig.context + api, data: { pageNo: pageNo || 1, pageSize: this.state.pagination.pageSize, name: this.state.nameSearch, departmentId: this.state.departmenttSearch, aid: this.state.theTypes, }, success: function(data) { let theArr = []; if(data.error.length || data.data.list == "") { if(data.error && data.error.length) { message.warning(data.error[0].message); }; } else { for(let i = 0; i < data.data.list.length; i++) { let thisdata = data.data.list[i]; let diqu=(thisdata.province==null?"":thisdata.province)+(thisdata.city==null?"":"-"+thisdata.city)+(thisdata.area==null?"":"-"+thisdata.area); theArr.push({ key: i, id: thisdata.uid, name: thisdata.name, adminName: thisdata.adminName, informationMaintainer:thisdata.informationMaintainer, createTime: thisdata.createTime&&thisdata.createTime.split(' ')[0], locationProvince: diqu }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; if(data.data&&data.data.list&&!data.data.list.length){ this.state.pagination.current=0 this.state.pagination.total=0 } this.setState({ dataSource: theArr, pagination: this.state.pagination, selectedRowKeys:[] }); }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, //部门 departmentList() { this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/organization/selectSuperId", data: { }, success: function(data) { let thedata = data.data; let theArr = []; if(!thedata) { if(data.error && data.error.length) { message.warning(data.error[0].message); }; thedata = {}; } else { thedata.map(function(item, index) { theArr.push({ key: index, name: item.name, id: item.id, }) }) } this.setState({ departmentArr: theArr, }) }.bind(this), }).always(function() { this.setState({ loading: false }); }.bind(this)); }, getInitialState(){ return { addressSearch: [], dataSource:[], loading:false, departmentArr: [], selectedRowKeys: [], selectedRowKey: [], selectedRows: [], pagination: { defaultCurrent: 1, defaultPageSize: 10, showQuickJumper: true, pageSize: 10, onChange: function(page) { this.loadData(page); }.bind(this), showTotal: function(total) { return '共' + total + '条数据'; } }, columns: [{ title: '客户名称', dataIndex: 'name', key: 'name', }, { title: '地区', dataIndex: 'locationProvince', key: 'locationProvince', },{ title: '创建时间', dataIndex: 'createTime', key: 'createTime', }, { title: '客户所属人', dataIndex: 'adminName', key: 'adminName', }, { title: '资料所属人', dataIndex: 'informationMaintainer', key: 'informationMaintainer', }, { title: '操作', dataIndex: 'abc', key: 'abc', render: (text, record, index) => { return <div> <Button onClick={(e) =>{ e.stopPropagation(), this.seeDetail(record)}} type="primary">查看详情</Button> </div> } } ], } }, seeDetail(record){ this.setState({ data:record, visitModul:true }) }, closeDesc(e) { this.state.visitModul = e; }, search() { this.loadData(); }, reset() { this.state.nameSearch=''; this.state.departmenttSearch=undefined; this.state.theTypes=''; this.state.auto=''; this.state.provinceSearch=undefined; this.state.addressSearch=[]; this.loadData() }, componentWillReceiveProps(nextProps) { if(nextProps.ApiUrl!=this.props.ApiUrl) { this.state.nameSearch=''; this.state.provinceSearch=undefined; this.state.addressSearch=[]; this.loadData(null,nextProps.ApiUrl); }; }, componentWillMount() { this.departmentList(); //城市 let Province = []; provinceList.map(function(item) { var id = String(item.id) Province.push( <Select.Option value={id} key={item.name}>{item.name}</Select.Option> ) }); this.state.Provinces = Province; this.loadData(); }, //指定转交人自动补全 supervisor(e){ $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/customer/listAdminByName", data:{ adminName:e }, success: function (data) { let thedata=data.data; if (!thedata) { if (data.error && data.error.length) { message.warning(data.error[0].message); }; thedata = {}; }; this.setState({ customerArr:thedata, }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, //输入转交人输入框失去焦点是判断客户是否存在 selectAuto(value,options){ this.setState({ auto:value }) }, blurChange(e){ let theType=''; let contactLists=this.state.customerArr||[]; if (e) { contactLists.map(function (item) { if (item.name == e.toString()) { theType = item.id; } }); } this.setState({ theTypes:theType }) }, //值改变时请求客户名称 httpChange(e){ if(e.length>=1){ this.supervisor(e); } this.setState({ auto:e }) }, render(){ let departmentArr = this.state.departmentArr || []; const intentionState=this.props.intentionState; const FormItem = Form.Item; const rowSelection = { selectedRowKeys: this.state.selectedRowKeys, onChange: (selectedRowKeys, selectedRows) => { this.setState({ modalVisible:false, selectedRows: selectedRows.slice(-1), selectedRowKeys: selectedRowKeys.slice(-1) }); }, onSelect: (recordt, selected, selectedRows) => { this.setState({ modalVisible:false, recordt: recordt.id }) }, }; const dataSources=this.state.customerArr || []; const options = dataSources.map((group) => <Select.Option key={group.id} value={group.name}>{group.name}</Select.Option> ) const hasSelected = this.state.selectedRowKeys.length > 0; return( <div className="user-content" > <div className="content-title"> <span>{!intentionState?'单位客户查询':'个人客户查询'}</span> </div> <div className="user-search"> <Input placeholder="客户名称" value={this.state.nameSearch} onChange={(e) => { this.setState({ nameSearch: e.target.value }); }} /> <Select placeholder="选择部门" style={{ width: 150 ,marginRight:'10px',marginLeft:'10px'}} value={this.state.departmenttSearch} onChange={(e) => { this.setState({ departmenttSearch: e }) }}> { departmentArr.map(function (item) { return <Select.Option key={item.id} >{item.name}</Select.Option> }) } </Select> <AutoComplete className="certain-category-search" dropdownClassName="certain-category-search-dropdown" dropdownMatchSelectWidth={false} dropdownStyle={{ width: 120 }} style={{ width: '120px'}} dataSource={options} placeholder="客户所有人姓名" value={this.state.auto} onChange={this.httpChange} filterOption={true} onBlur={this.blurChange} onSelect={this.selectAuto} > <Input /> </AutoComplete> <Button type="primary" onClick={this.search}>搜索</Button> <Button onClick={this.reset}>重置</Button> </div> <div className="patent-table"> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} rowSelection={rowSelection} pagination={this.state.pagination} /> </Spin> </div> <Detaile visitModul={this.state.visitModul} data={this.state.data} detailApi={this.props.detailApi} closeDesc={this.closeDesc} /> </div> ) } }) export default QueryCustomer;