mh_jy_safe_web/src/components/CustomPages/FM/CustomImportPage.js

import React from 'react';
import { connect } from 'dva';
import { Row, Col, Form, Input, Button, Icon, message, Radio } from 'antd';
import DropDownPagination from '../../common/DropDownPaginationEx';
import ImportPage from '../../../components/common/ImportPage';
import XLSX from 'xlsx'


class CustomImportPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showBtn: true,
      delFlag: false
    };
  };

  componentDidMount() {

  }



  handleSelectConfig = ({ record }) => {
    const { dispatch } = this.props;
    this.setState({
      data: record
    }, () => {
      dispatch({
        type: 'custom/save',
        payload: {
          ['importClick' + (record ? record.CODE : '')]: true
        },
      });
      this.setState({
        showBtn: false
      })
    });
  };
  s2ab = (s) => { // 字符串转字符流
    var buf = new ArrayBuffer(s.length)
    var view = new Uint8Array(buf)
    for (var i = 0; i !== s.length; ++i) {
      view[i] = s.charCodeAt(i) & 0xFF
    }
    return buf
  }

  getCharCol = (n) => {
    let s = "", m = 0
    while (n > 0) {
      m = n % 26 + 1
      s = String.fromCharCode(m + 64) + s
      n = (n - m) / 26
    }
    return s
  }
  // 转换要转出的数据格式
  convertData = (json) => {
    let keyMap = [] // 获取键
    for (let k in json[0]) {
      keyMap.push(k)
    }
    let tmpdata = [] // 用来保存转换好的json
    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
      v: v[k],
      position: (j > 25 ? this.getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach(function (v) {
      tmpdata[v.position] = {
        v: v.v
      }
    })
    return tmpdata
  }

  downLoadEmptyFile = (isData) => {
    const { dispatch } = this.props;
    let param = { ...this.state.data }
    param.IsData = isData
    dispatch({
      type: 'app/getDataByPost',
      payload: param,
      url: "PF/Import/DownLoadFile",
      onComplete: (ret) => {
        if (!ret) {
          message.error("没有模板文件");
          return;
        }
        let tmpWB = {
          SheetNames: [], // 保存的表标题
          Sheets: {}
        }
        if (ret.ImportTable) {
          ret.ImportTable.forEach((n) => {
            tmpWB.SheetNames.push(n.DESCRIPTION);
          });
        }

        if (ret.ImportTable) {
          ret.ImportTable.forEach((n) => {
            const exportData = []
            if (n.Nav_Fields) {
              const head = {}
              n.Nav_Fields.forEach(t => {
                if (!t.DEST_FIELD_NAME) return
                head[t.DEST_FIELD_NAME] = t.SRC_FIELD_NAME
              })
              exportData.push(head)
              //data
              if (n.Data) {
                n.Data.forEach((x) => {
                  const rowdata = {}
                  n.Nav_Fields.forEach(m => {
                    var dex = m.DEST_FIELD_NAME;
                    if (dex.indexOf(".") > 0) {
                      var tmpIndex = dex.indexOf(".");
                      var tmp = x;
                      while (tmpIndex > 0 && tmp) {
                        var nav = dex.substring(0, tmpIndex)
                        var tmp = tmp[nav];
                        dex = dex.substring(tmpIndex + 1);
                        tmpIndex = dex.indexOf(".");
                      }
                      if (tmp) {
                        rowdata[m.DEST_FIELD_NAME] = tmp[dex];
                      }
                    } else {
                      rowdata[m.DEST_FIELD_NAME] = x[m.DEST_FIELD_NAME];
                    }

                  })
                  exportData.push(rowdata)
                });

              }

              const lastData = this.convertData(exportData)
              let outputPos = Object.keys(lastData)  // 设置区域,比如表格从A1到D10


              tmpWB.Sheets[(n.DESCRIPTION + '')] = Object.assign({}, lastData,
                {
                  "!ref": outputPos[0] + ':' + outputPos[outputPos.length - 1] // 设置填充区域
                });


            }


          })



        }
        let tmpDown = new Blob([this.s2ab(XLSX.write(tmpWB, {
          bookType: 'xlsx',
          bookSST: false,
          type: 'binary',
          cellStyles: true
        } // 这里的数据是用来定义导出的格式类型
        ))], {
          type: 'string'
        })
        this.setState({ stopHandle: false })
        message.success("成功获取数据").then(() => message.destroy())
        // 创建二进制对象写入转换好的字节流
        var href = URL.createObjectURL(tmpDown)  // 创建对象超链接
        this.outFile.download = ret.Name + '.xlsx'  // 下载名称
        this.outFile.href = href  // 绑定a标签
        this.outFile.click()  // 模拟点击实现下载
        setTimeout(function () {  // 延时释放
          URL.revokeObjectURL(tmpDown) // 用URL.revokeObjectURL()来释放这个object URL
        }, 100)


      }
    });

  }
  onChange = e => {
    this.setState({
      delFlag: e.target.value,
    });
  };

  render() {
    const options = [
      { label: '否', value: false },
      { label: '是', value: true},
    ];

    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };

    return (
      <div>
        <Form>
          <div>
            <h2>{this.state.data ? this.state.data.NAME : '数据'}导入</h2>
          </div>
          <Row>
            <Col span={8}>
              <Form.Item
                label={'名称'}
                {...formItemLayout}
              >
                <DropDownPagination inputDataApi={'FM/ImportConfig/OrderPaged'} fieldName={'NAME'}
                  data={this.state.data} onSelect={this.handleSelectConfig} />
              </Form.Item>
            </Col>

            <Col span={4}>
              <Form.Item
                label={'编号'}
                {...formItemLayout}
              >
                <Input disabled={true} value={this.state.data ? this.state.data.CODE : null} />
              </Form.Item>
            </Col>
            <Col span={4}>
              <Form.Item
                label={'删除数据'}
                {...formItemLayout}
              >
                <Radio.Group  buttonStyle="solid" options={options} onChange={this.onChange} value={this.state.delFlag} />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Button disabled={this.state.showBtn} onClick={() => this.downLoadEmptyFile(false)}>
                <Icon type="download" /> 下载模板
                    </Button>
              <Button disabled={this.state.showBtn} onClick={() => this.downLoadEmptyFile(true)}>
                <Icon type="download" /> 下载模板(含数据)
                    </Button>
            </Col>
            <a ref={e => this.outFile = e}> </a>
          </Row>

          <Row style={{ marginTop: '10px' }}>
            <ImportPage configCode={this.state.data ? this.state.data.CODE : null} delFlag={this.state.delFlag} />
          </Row>


        </Form>
      </div>
    );
  }

}

CustomImportPage.propTypes = {
};

export default connect(({ login, loading, custom }) => ({ login, loading, custom }))(Form.create()(CustomImportPage));