mh_jy_safe_web/src/components/CustomPages/SK/SK004Import.js

import React from 'react';
import { connect } from 'dva';
import { Button, Icon, Upload, Form } from 'antd';
import config from "../../../config.js";
import storage from '../../../utils/storage';
import { initFilter, extendRule, downLoad, extendInclude, setDataFieldValue, guid, initQueryFilter, showFiles, showApprove, showUserSign, showUsersSign } from "../../../utils/common";

class SK004Import extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: null,
            Msg: '',
            isMsgShow: false,
            url: props.data.url,
            fileName: props.data.fileName,
            isOk: true
        }
    }

    getRequestHeaders = () => {
        // 请求参数
        const addHeader = 'Bearer ' + storage('lacal').getItem('accessToken').val
        const userId = storage('lacal').getItem('userid').val
        const user = storage('lacal').getItem('loginUserVerify').val
        const RootOrgId = storage('lacal').getItem('RootOrgId').val
        const orgId = storage('lacal').getItem('webOrgId').val
        const Tenant = storage('lacal').getItem('Tenant').val
        const headers = {
            // 'Content-Type': type === 'post' ? 'application/json' : 'application/x-www-form-urlencoded',
            Authorization: addHeader,
            userid: userId,
            username: user ? user.username : '',
            RootOrgId,
            orgId,
            Tenant: Tenant
        }
        return headers
    }

    fillImportData = (ret) => {
        if (!ret) {
            this.setState({
                data: [],
                selectedRowKeys: [],
                messages: '',
            })
            return;
        }
        if (ret.ErrorMessage) {
            this.setState({
                messages: ('错误：' + ret.ErrorMessage)
            });
        }
        let messages = '';
        if (ret.Data && ret.Data.MessageList && ret.Data.MessageList.length) {
            var tmps = [];
            ret.Data.MessageList.forEach((n, i) => {
                tmps.push(n);
            });
            messages = tmps.join('\n');
        }
        const selectedRowKeys = [];
        if (ret.Data && ret.Data.Data) {
            ret.Data.Data.forEach((n, i) => {
                selectedRowKeys.push(n.ID);
            });
        }
        this.setState({
            data: (ret.Data && ret.Data.Data ? ret.Data.Data : []),
            selectedRowKeys,
            messages
        });
    }


    //渲染页面
    render() {
        const { data, Msg, isMsgShow, url, urlDown, isOk, fileName } = this.state;
        const that = this;
        const uploadProps = {
            name: 'file',
            action: config.serviceHost(url),
            data: { OrgId: this.props.login.OrgId },//, ImportConfigCode: configCode, delFlag: delFlag
            fileList: this.state.updateLoadFileList,
            accept: '.xls,.xlsx',
            headers: this.getRequestHeaders(),
            onChange(info) {
                var Msg = ''
                var isOk = true
                if (info.file.status === 'done') {
                    if (info.file.response.IsSuccessful) {
                        Msg = "【" + info.file.name + '】' + info.file.response.Data.Data
                        // message.info(`${info.file.name} 导入并保存成功`);
                    } else {
                        //失败
                        Msg = info.file.response.ErrorMessage
                        isOk = false
                        // message.error(`${info.file.response.ErrorMessage} `);
                    }
                } else if (info.file.status === 'error') {
                    isOk = false
                    if (info.file.response && info.file.response.ErrorMessage) {
                        Msg = "【" + info.file.name + '】导入错误，详情：' + info.file.response.ErrorMessage
                        // message.error(`${info.file.name} 导入错误，详情：${info.file.response.ErrorMessage}`);
                    }
                    else {
                        Msg = "【" + info.file.name + '】导入错误'
                        // message.error(`${info.file.name} 导入错误`);
                    }
                }

                that.setState({
                    updateLoadFileList: info.fileList,
                    data: info,
                    Msg: '导入说明：' + Msg,
                    isMsgShow: true,
                    isOk: isOk
                });
            },
        };

        return <div>
            <div style={{ padding: '10px' }}>
                <Form>
                    <table>
                        <tr >
                            <td>
                                <Button onClick={() => { downLoad(config.picServerHost, fileName) }}>
                                    <Icon type="vertical-align-bottom" /> 下载模板   {/* <a href={config.serviceHost(urlDown)}>下载模板</a> */}
                                </Button>
                            </td>
                            <td>
                                <Upload style={{ marginLeft: '30px' }} {...uploadProps}>
                                    <Button>
                                        <Icon type="upload" /> 数据导入
                                    </Button>
                                </Upload>
                            </td>
                        </tr>
                        {
                            isMsgShow ? (
                                isOk ? <tr >
                                    <td colSpan={2}>
                                        {Msg}
                                    </td>
                                </tr>
                                    :
                                    <tr style={{ color: 'red' }}>
                                        <td colSpan={2}>
                                            {Msg}
                                        </td>
                                    </tr>
                            )
                                : null
                        }
                    </table>
                </Form>
            </div>
        </div>
    }
}
export default connect(({ login, app }) => ({ login, app }))(SK004Import)