import React from 'react'; import { Icon, Button, Input, Select, Spin, message, Col, Row, Table } from 'antd'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; import './userList.less'; import BatchImport from './batchImport'; import { provinceList, getProvince } from '../../NewDicProvinceList'; import { companySearch } from '../../tools'; const HighTechSearch = React.createClass({ loadData(pageNo) { if (!this.state.searchName && !this.state.province && !this.state.city && !this.state.searchYear) { message.warning('请选择至少一个搜索条件!'); return; }; this.setState({ loading: true }); $.ajax({ method: "get", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/admin/cognizanceRecord/search", data: { "pageNo": pageNo || 1, "pageSize": this.state.pagination.pageSize, "district": this.state.city || this.state.province, "unitName": this.state.searchName, "year": this.state.searchYear }, success: function (data) { let theArr = []; 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]; theArr.push({ key: i + 1, id: thisdata.id, district: thisdata.district, unitName: thisdata.unitName, year: thisdata.year }); }; this.state.pagination.current = data.data.pageNo; this.state.pagination.total = data.data.totalCount; }; this.setState({ dataSource: theArr, pagination: this.state.pagination }); }.bind(this), }).always(function () { this.setState({ loading: false }); }.bind(this)); }, getInitialState() { return { loading: false, yearOption: [], 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: 'key', key: 'key', }, { title: '地区', dataIndex: 'district', key: 'district', render: (text) => { return getProvince(text) } }, { title: '公司名称', dataIndex: 'unitName', key: 'unitName', }, { title: '申报年份', dataIndex: 'year', key: 'year', } ], dataSource: [] }; }, componentWillMount() { let theProvinceArr = []; let d = new Date(); let thisYear = d.getFullYear(); for (let i = thisYear; i >= 2000; i--) { this.state.yearOption.push(<Select.Option key={i.toString()}>{i}</Select.Option>) }; provinceList.map((item) => { theProvinceArr.push( <Select.Option key={item.id}>{item.name}</Select.Option> ) }); this.state.provinceOption = theProvinceArr; //this.loadData(); }, provinceChange(e) { let theArr = []; provinceList.map((item) => { if (item.id == e) { item.cityList.map((city) => { theArr.push( <Select.Option key={city.id}>{city.name}</Select.Option> ) }); } }); this.setState({ cityOption: theArr, province: e, city: undefined }); }, cityChange(e) { this.setState({ city: e }); }, search() { this.loadData(); }, reset() { this.state.pagination.total = 0; this.setState({ city: undefined, province: undefined, searchName: undefined, searchYear: undefined, dataSource: [], }); }, render() { return ( <div className="user-content" > <div className="content-title"> <span>高企查询</span> </div> <Row className="clearfix" style={{ marginBottom: '20px' }}> <Col style={{ width: 60, float: 'left' }}> <span>企业名称</span> </Col> <Col span={5}> <Input placeholder="请输入用户全称" value={this.state.searchName} onChange={(e) => { this.setState({ searchName: e.target.value }) }} /> </Col> <Col style={{ width: 20, float: 'left' }}></Col> <Col style={{ width: 40, float: 'left' }}> <span>地区</span> </Col> <Col span={6}> <Select style={{ width: '40%' }} value={this.state.province} placeholder="请选择省份" notFoundContent="未获取到省份列表" showSearch filterOption={companySearch} onChange={this.provinceChange}> {this.state.provinceOption} </Select> <Select style={{ width: '50%', marginLeft: '10px' }} value={this.state.city} placeholder="请选择城市" notFoundContent="未获取到城市列表" showSearch filterOption={companySearch} onChange={this.cityChange}> {this.state.cityOption} </Select> </Col> <Col style={{ width: 40, float: 'left' }}> <span>年份</span> </Col> <Col span={2}> <Select style={{ width: 80 }} value={this.state.searchYear} onChange={(e) => { this.setState({ searchYear: e }) }} > {this.state.yearOption} </Select> </Col> <Col span={4}> <Button style={{ marginRight: '20px' }} type="primary" onClick={this.search}>搜索</Button> <Button style={{ marginRight: '20px' }} type="ghost" onClick={this.reset}>重置</Button> </Col> <BatchImport yearOption={this.state.yearOption} provinceOption={this.state.provinceOption} provinceList={provinceList} companySearch={companySearch} /> </Row> <Spin spinning={this.state.loading}> <Table columns={this.state.columns} dataSource={this.state.dataSource} pagination={this.state.pagination} /> </Spin> </div > ); } }); export default HighTechSearch;