trunk/pc4public/hrm/importRelatedComponet/ImportResult.js

import {
    inject,
    observer
} from 'mobx-react';
import {
    WeaDialog,
    WeaNewScroll,
    WeaMoreButton,
    WeaLocaleProvider,
} from 'ecCom'
import {
    Row,
    Col,
    Icon,
    Spin,
    Modal,
    Table,
    Button,
} from 'antd'
import {
    WeaTableNew
} from 'comsMobx';
import {
    toJS
} from 'mobx';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

import ImportLog from './ImportLog'

@observer
export default class ImportResult extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 740,
            height: 450,
        }
    }

    getButtons = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog,
            setLogDialogVisible,
        } = hrmImportCommon, {
            failnum,
            succnum,
            importStatus
        } = resultDialog;

        const buttons = [];

        if (importStatus == 'over' || importStatus == 'error') {
            // if (failnum > 0 && succnum > 0) {
            //     buttons.push(<Button type="primary" disabled onClick={() => {}}>{getLabel(384190, '下载错误数据')}</Button>);
            // }
            // buttons.push(<Button type="primary" disabled onClick={() => {}}>{getLabel(384191, '下载全部数据')}</Button>);
            buttons.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4ksz23`} type="primary" onClick={() => setLogDialogVisible(true)}>{getLabel(24835, '导入日志')}</Button>);
        }
        buttons.push(<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@qk0c87`} />);

        return buttons;
    }

    reRenderColumns = (c) => {
        c.forEach(item => {
            if (item.dataIndex == 'operatedetail') {
                item.render = function(text, record) {
                    return <span style={{color: '#FF0000'}}>{text}</span>
                }
            }
        });
    }

    getErrorInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            errorTip,
            errorInfo
        } = resultDialog

        const columns = [{
            "title": getLabel(24960, '提示信息'),
            "width": "100%",
            "dataIndex": "message",
            render: (text, record, index) => {
                return <span style={{ color: '#FF0000' }}>{text}</span>
            }
        }];

        const elements = <div style={{color: '#FF0000'}} className='hrm-import-table-th'>
                            <div style={{margin: '20px 0'}}>
                                <div className='hrm-import-error-tip'>
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@j3fwh3`} type={'cross'} style={{ color: '#fff',fontSize: 18 }} />
                                </div>
                                {errorTip}
                            </div>
                            <div style={{padding: '0 30px'}}><Table ecId={`${this && this.props && this.props.ecId || ''}_Table@mzv81b`} dataSource={errorInfo} columns={columns} pagination={false} bordered/></div>
                         </div>;
        return elements;
    }

    getResultInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            succnum,
            failnum,
            tableStore,
        } = resultDialog, {
            height
        } = this.state;

        const icon = <div style={{backgroundColor: succnum>0 ? '#54D3A2' : '#FF0000',marginLeft: 270 }} className='hrm-import-error-tip'>
                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@3azhd5`} type={succnum>0 ? 'check' : 'cross'} style={{ color: '#fff',fontSize: 18 }} />
                      </div>;
        const tip = <span style={{color: succnum > 0 ? '#54D3A2' : '#FF0000'}}>{(succnum > 0 && failnum == 0) ? getLabel(384061, '共{rownum}条数据，全部导入成功！').replace('{rownum}',`${succnum+failnum}`) : getLabel(384060, '共{rownum}条数据，{succnum}条导入成功！').replace('{rownum}',`${succnum+failnum}`).replace('{succnum}',`${succnum}`)}</span>

        const resultTable = ((succnum + failnum > 0) && failnum > 0) && <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@9ckeyn`}
                                                                            comsWeaTableStore={tableStore}
                                                                            bordered
                                                                            pagination={true}
                                                                            rowKey={(record, index) => index}
                                                                            getColumns={c => this.reRenderColumns(c)}
                                                                        />
        return <div>
                    <div style={( (succnum + failnum > 0) && failnum > 0) ? {marginTop: 20} : {marginTop: height/2 -30}}>{icon}{tip}</div>
                    <div style={{padding: '10px 20px'}}>{resultTable}</div>
                </div>
    }

    getImportProcessInfo = () => {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog
        } = hrmImportCommon, {
            datas,
            importStatus
        } = resultDialog;

        const columns = [{
            "title": getLabel(27592, '行'),
            "width": "15%",
            "dataIndex": "rownum"
        }, {
            "title": getLabel(602, '状态'),
            "width": "15%",
            "dataIndex": "status",
            render: (text, record, index) => {
                return <span style={{ color: text=='1'?'#54D3A2':'#FF0000'}}>{text=='1' ? getLabel(15242, '成功') : getLabel(498, '失败')}</span>
            }
        }, {
            "title": getLabel(24960, '提示信息'),
            "width": "70%",
            "dataIndex": "message",
            render: (text, record, index) => {
                // return <span style={{ color: '#FF0000' }}>{text}</span>
                return <span>{text}</span>
            }
        }];

        const loadingTip = (importStatus !== 'over' || importStatus !== 'error') && <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@36k9b8`} tip={getLabel(384042, '服务器正在处理数据导入，请稍后……')}></Spin>;

        const processTable = <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@1brmw9`} dataSource={toJS(datas)} columns={columns} pagination={false} bordered/>

        return <div className='hrm-import-ant-table'>
                    <div style={{margin: '20px 0',paddingLeft: 260}} className='hrm-import-loading'>{loadingTip}</div>
                    <div style={{padding: '0 20px 10px'}}>{processTable}</div> 
                </div>
    }

    render() {
        const {
            hrmImportCommon
        } = this.props, {
            resultDialog,
            logDialog,
            setResultInfoDialogVisible,
            hasErrorInfo,
            setScoll
        } = hrmImportCommon, {
            title,
            visible,
            importStatus,
            errorInfo,
            loading
        } = resultDialog, {
            width,
            height
        } = this.state;

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@xq9xj1`}
                    title={title}
                    icon="icon-coms-hrm"
                    iconBgcolor="#217346"
                    visible={visible}
                    closable={true}
                    onCancel={() => setResultInfoDialogVisible(false)}
                    buttons={this.getButtons()}
                    style={{width: width, height: height}}
                    onChangeHeight={(h) => this.setState({height: h})}
                >
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@h9aevl`} spinning={loading}> 
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@gl3xsc`} height={height} ref={com => setScoll(com)}>
                            {
                                 !loading && (hasErrorInfo(errorInfo) ? this.getErrorInfo(errorInfo) : 
                                    (importStatus == 'over' || importStatus == 'error' ) ? this.getResultInfo() : this.getImportProcessInfo() )
                            }
                        </WeaNewScroll>
                    </Spin>
                </WeaDialog>
                {logDialog.visible && <ImportLog ecId={`${this && this.props && this.props.ecId || ''}_ImportLog@v1a84q`} hrmImportCommon={hrmImportCommon}/>}
            </div>
        )
    }
}