import React from 'react'; import { Input, Modal, Button, message, Select } from 'antd'; import { achievementCategoryList } from '../../dataDic.js'; import ajax from 'jquery/src/ajax/xhr.js'; import $ from 'jquery/src/ajax'; const BatchImport = React.createClass({ getInitialState: function () { return { loading: false }; }, showModal() { this.setState({ visible: true, }); }, handleOk(e) { this.setState({ visible: false, }); }, handleCancel(e) { this.setState({ visible: false, }); }, provinceChange(e) { let theArr = []; this.props.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 }); }, //提交 handleSubmit() { let theArr = this.state.inputValue.split(/[\r\n]/g); if (!theArr.length) { return; }; if (theArr.length > 999) { message.warning("数据条数不能多于1000条!"); return; }; let unitName = theArr.join(','); this.setState({ loading: true }); $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + '/api/admin/cognizanceRecord/import', data: { unitName: unitName, district: this.state.city || this.state.province, year: this.state.year } }).done(function (data) { this.setState({ loading: false }); if (!data.error.length) { message.success('导入成功!'); this.handleOk(); } else { message.warning(data.error[0].message); }; }.bind(this)); }, reset() { this.setState({ province: undefined, city: undefined, year: undefined, inputValue: undefined }); }, render() { return ( <div> <Button type="primary" onClick={this.showModal}>批量导入</Button> <Modal title="批量导入" visible={this.state.visible} onCancel={this.handleCancel} width='1000px' footer={[ <Button key="ok" className="set-submit" type="primary" loading={this.state.loading} onClick={this.handleSubmit}>保存</Button>, <Button key="clancel" className="set-submit" type="ghost" onClick={this.handleCancel}>取消</Button> ]} > <div> <span style={{ marginRight: '10px' }}>地区</span> <Select style={{ width: '100px' }} value={this.state.province} placeholder="请选择省份" notFoundContent="未获取到省份列表" showSearch filterOption={this.props.companySearch} onChange={this.provinceChange}> {this.props.provinceOption} </Select> <Select style={{ width: '120px', marginLeft: '10px' }} value={this.state.city} placeholder="请选择城市" notFoundContent="未获取到城市列表" showSearch filterOption={this.props.companySearch} onChange={this.cityChange}> {this.state.cityOption} </Select> <span style={{ marginLeft: '10px', marginRight: '10px' }}>年份</span> <Select style={{ width: 80 }} value={this.state.year} onChange={(e) => { this.setState({ year: e }) }} > {this.props.yearOption} </Select> <Button style={{ marginLeft: '20px' }} type="ghost" onClick={this.reset}>重置</Button> </div> <div style={{ margin: '10px 0' }}> 公司名称 </div> <Input type="textarea" rows={12} value={this.state.inputValue} onChange={(e) => { this.setState({ inputValue: e.target.value }); }} /> </Modal> </div> ); } }); export default BatchImport;