kede-client/js/component/manageCenter/userManage/batchImport.jsx

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='1200px'
                    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;