dc/src/pages/fengkong/namelist/commoncomponents/Edit.js

import React, { Component } from 'react'
import { Modal, Upload, Button, message } from 'antd'
import { FormItem } from 'wptpc-design'

export default class Index extends Component {

  uploadProps = {
    name: 'csvFile',
    headers: {
      credentials: 'include'
    },
    beforeUpload: file => {
      if (!file.name.endsWith('.csv')) {
        message.warning('请上传 cxv 格式的文件')
        return false
      }
      if (file == null) {
        message.warn('请选择名单文件')
        return false
      }
      this.props.onChange('csvFile', file)
      return false
    }
  };

  render() {
    const { showModal, params, onChange, onOk, onCancel, batchRemark, fetching} = this.props;
    const formSetting = [ {
      label: '名单文件',
      key: 'file',
      render: () => {
        return (
          <div style={{ marginLeft: '120px' }}>
            <Upload {...this.uploadProps}>
              <Button type="primary">上传名单文件</Button>
            </Upload>
            <p>文件类型：.csv</p>
            <p>{batchRemark}</p>
          </div>
        )
      }
    },
    {
      label: '是否启用',
      type: 'select',
      key: 'valid',
      options: [
        { value: "0", label: '禁用' },
        { value: "1", label: '启用' },
      ],
      isRequired: true,
      placeholder: '请选择'
    }];
    return (
      <Modal
        title={`批量导入`}
        visible={showModal}
        onOk={onOk}
        onCancel={onCancel}
        okButtonProps={{ disabled: fetching }}
        destroyOnClose
      >
        <FormItem formSetting={formSetting} params={params} onChange={onChange} />
      </Modal>
    );
  }
}