kede-client/js/component/manageCenter/povertyInquiry/component/nationwide.jsx

import React, { Component } from "react";
import {
  Button,
  message,
  Spin,
  Upload,
  Tabs,
  Table,
  Modal,
} from "antd";
import $ from "jquery/src/ajax";
import { ShowModal } from "@/tools";
import moment from "moment";
import ShowModalDiv from "@/showModal.jsx";
import './index.less';

const { TabPane } = Tabs;


class Complete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 0,
      Loading: false,
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          width: 130,
        },
        {
          title: "是否有效",
          dataIndex: "povertyStatus",
          key: "povertyStatus",
          width: 130,
        },
        {
          title: "",
          dataIndex: "op",
          key: "op",
        },

      ],
      dataSource: [],
      totalcount: 0,
      effectiveCount: 0,
      id: "",
      upLoad: {
        customRequest: (options) => {
          this.setState({
            Loading: true,
          })
          let params = new FormData();
          params.append("file", options.file);
          $.ajax({
            method: "post",
            url: globalConfig.context + "/open/selectFlag",
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            data: params
          }).done(
            function (data) {
              this.setState({
                Loading: false,
              })
              if (data.error.length === 0) {
                let info = data.data
                this.setState({
                  dataSource: info.list,
                  totalcount: info.totalcount,
                  effectiveCount: info.effectiveCount,
                  id: info.id,
                })
              } else {
                message.warning(data.error[0].message);
              }
            }.bind(this)
          ).always(
            function () {
              this.setState({
                Loading: false,
              });
            }.bind(this)
          );
        },
        name: "file",
        action: globalConfig.context + "/api/user/channel/import",
      },
    };

    this.exportExec = this.exportExec.bind(this);
    this.onSwitch = this.onSwitch.bind(this);
  }

  componentWillMount() {

  }

  // 导出
  exportExec() {
    message.config({
      duration: 20,
    });
    let loading = message.loading("下载中...");
    this.setState({
      Loading: true,
    });

    let data = {
      id: this.state.id,
      type: this.state.type,
    };
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/open/selectPovertyFlagById/export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        loading();
        this.setState({
          Loading: false,
        });
      }.bind(this)
    );
  }

  // 导出下载
  download(fileName) {
    window.location.href =
      globalConfig.context + "/open/download?fileName=" + fileName;
  }

  // 下载模板
  downLoadFile() {
    window.open(globalConfig.context + '/open/downloadPovertyTemplate')
  }

  // 有效数据切换
  onSwitch() {
    this.setState({
      Loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/open/selectPovertyFlagById",
      data: {
        id: this.state.id,
        type: this.state.type == 0 ? 1 : 0,
      },
      success: function (data) {
        this.setState({
          Loading: false,
        });
        if (data.error.length === 0) {
          this.setState({
            type: this.state.type == 0 ? 1 : 0,
            dataSource: data.data.list,
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          Loading: false,
        });
      }.bind(this)
    );
  }


  render() {
    const { columns, dataSource, totalcount, effectiveCount, id, type } = this.state;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>建档立卡脱贫户-批量查询</span>
        </div>
        <Tabs defaultActiveKey="1">
          <TabPane tab="操作" key="1">
            <div
              style={{
                width: "100%",
                paddingBottom: 10,
                display: "flex",
                flexDirection: "row",
                justifyContent: "space-between",
              }}
            >
              <div
                style={{
                  display: "flex"

                }}
              >
                <Upload {...this.state.upLoad} disabled={this.state.Loading}>
                  <Button
                    type="primary"
                    onClick={() => {

                    }}
                    style={{ marginLeft: "10px" }}
                  >
                    导入查询数据
                  </Button>
                </Upload>
                <Button
                  type="primary"
                  onClick={this.downLoadFile}
                  style={{ marginLeft: "10px" }}
                >
                  下载批量查询模板
                </Button>
                <Button
                  type="primary"
                  loading={this.state.Loading}
                  onClick={this.exportExec}
                  style={{ marginLeft: "10px" }}
                  disabled={!id}
                >
                  导出EXCEL
                </Button>
              </div>
              <div>
                <span>数据统计：有效数据<span style={{ color: "red" }}>{effectiveCount}</span>条，共<span style={{ color: "red" }}>{totalcount}</span>条数据</span>
                <Button
                  type="primary"
                  onClick={this.onSwitch}
                  style={{ margin: "0 10px" }}
                  disabled={!id}
                >
                  {type == 0 ? "仅显示有效数据" : "显示所有数据"}
                </Button>
              </div>
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.Loading}>
            <Table
              bordered
              size="middle"
              columns={columns}
              dataSource={dataSource}
            />
          </Spin>
        </div>
      </div>
    );
  }
}

export default Complete;