platform-bi-web/src/components/dataSourceDetail/dataConnectBox.jsx

import React from 'react'
import { Modal, Form, Row, Col, Input, InputNumber, Select, Button, Icon } from 'antd'
import { connect } from 'dva'
import './dataConnectBox.less'
const FormItem = Form.Item
const SelectOption = Select.Option

class DataConnectBox extends React.Component {

    hideBox() {
        const { dispatch } = this.props;
        dispatch({ type: 'dataConnect/setNewModelField', name: 'visibleBox', value: false });
    }

    okHandler() {
        const { dispatch, dataConnect} = this.props;
        const operation = dataConnect.newOne.boxOperation;
        if(operation === 'create') {
            dispatch({ type: 'dataConnect/remoteAdd' }).then((success) => {
                success && this.hideBox()
            });
        }else if(operation === 'modify') {
            dispatch({ type: 'dataConnect/remoteModify', code: dataConnect.newOne.code }).then((success) => {
                success && this.hideBox();
            });
        }
    }

    render() {
        const { dispatch, dataConnect } = this.props;
        const operation = dataConnect.newOne.boxOperation;
        const disabled = operation === 'view';

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };

        return (
            <Modal
                className='dataconnect-box'
                title={<Row type='flex' justify='space-between'><Col>{`${operation === 'create'?'新建':(operation === 'modify' ? '修改' : '查看')}数据库连接`}</Col><Col style={{ marginRight: '35px', fontSize: '14px', cursor: 'pointer', color: 'red' }} onClick={() => {
                    // 密码input特殊处理
                    document.getElementsByClassName('password')[0].value = '';
                    dispatch({ type:'dataConnect/resetNewModel'})
                }}>
                    {/* <Icon type='delete' />清空 */}
                </Col></Row>}
                visible={dataConnect.newOne.visibleBox}
                onCancel={() => { this.hideBox() }}
                maskClosable={false}
                destroyOnClose={true}
                footer={
                    operation === 'view' ? null : (
                        <Row>
                            <Col className='validatemessage' span={12}>
                                {/* {dataConnect.newOne.invalid !== undefined ? (dataConnect.newOne.invalid ? <span style={{ color: '#F5222D' }}>{dataConnect.newOne.invalidText}</span> : <span style={{ color: '#52C41A' }}>测试通过</span>) : ''} */}
                            </Col>
                            <Col span={12}>
                                <Button disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => dispatch({ type:'dataConnect/remoteValidate'})}>
                                {dataConnect.newOne.validating ? (<Icon type='loading' />) : ''}{dataConnect.newOne.validating ? '测试中' : '测试'}
                                </Button>
                                <Button disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => dispatch({ type:'dataConnect/resetNewModel'})}>清空</Button>
                                {/* <Button onClick={() => {this.hideBox()}}>取 消</Button> */}
                                <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => {this.okHandler()}}>
                                    {dataConnect.newOne.saving ? (<Icon type='loading' />) : ''}
                                    {dataConnect.newOne.saving ? '校验中' : '保存'}
                                </Button>
                            </Col>
                        </Row>
                    )
                }
            >
                <Form size='small'>
                    <FormItem
                        label='连接名'
                        {...formItemLayout}
                        validateStatus={dataConnect.validInfo.name ? dataConnect.validInfo.name.validateStatus : ''}
                        help={dataConnect.validInfo.name ? dataConnect.validInfo.name.help : ''}
                    >
                        <Input
                            disabled={disabled}
                            placeholder="输入数据库连接名称"
                            value={dataConnect.newOne.name}
                            onChange={(e) => { dispatch({ type: 'dataConnect/setNewModelField', name: 'name', value: e.target.value }) }}
                        >
                        </Input>
                    </FormItem>
                    <FormItem label='数据库类型' {...formItemLayout}>
                        <Select
                            disabled={true}
                            placeholder="选择数据库类型"
                            defaultValue='oracle'
                            value={dataConnect.newOne.dbType}
                            onChange={(value) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbType', value: value} );
                            }}
                        >
                            <SelectOption value='oracle'>
                                ORACLE
                            </SelectOption>
                            <SelectOption value='mysql'>
                                MYSQL
                            </SelectOption>
                            <SelectOption value='sqlserver'>
                                SQLSERVER
                            </SelectOption>
                            <SelectOption value='sqlite'>
                                SQLITE
                            </SelectOption>
                        </Select>
                    </FormItem>
                    <Row>
                        <Col span={19}>
                            <FormItem label='数据库地址' {...{
                                labelCol: { span: 5 },
                                wrapperCol: { span: 19 }
                            }}>
                                <Input
                                    disabled={disabled}
                                    placeholder="格式：192.168.1.1"
                                    value={dataConnect.newOne.address}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'address', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                        <Col span={5}>
                            <FormItem className='input-port' label='端口' {...{
                                labelCol: { span: 12 },
                                wrapperCol: { span: 12 }
                            }}>
                                <InputNumber
                                    disabled={disabled}
                                    value={dataConnect.newOne.port}
                                    onChange={(value) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem label='数据库名(SID)' {...formItemLayout}>
                        <Input
                            disabled={disabled}
                            value={dataConnect.newOne.dbName}
                            onChange={(e) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'dbName', value: e.target.value });
                            }}
                        />
                    </FormItem>
                    <Row>
                        <Col span={12}>
                            <FormItem label='用户名' {...{
                                labelCol: { span: 8 },
                                wrapperCol: { span: 16 }
                            }}>
                                <Input
                                    disabled={disabled}
                                    value={dataConnect.newOne.userName}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'userName', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem label='密码' {...{
                                labelCol: { span: 8 },
                                wrapperCol: { span: 16 }
                            }}>
                                <Input
                                    disabled={disabled}
                                    className='password'
                                    type='password'
                                    // value={dataConnect.newOne.password}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataConnect/setNewModelField', name: 'password', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                        </Col>
                    </Row>
                    <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                        <Input.TextArea
                            disabled={disabled}
                            autosize={{ minRows: 2 }}
                            value={dataConnect.newOne.description}
                            onChange={(e) => {
                                dispatch({ type: 'dataConnect/setNewModelField', name: 'description', value: e.target.value });
                            }}
                        />
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}

function mapStateToProps(state) {
    const dataConnect = state.present.dataConnect;
    return { dataConnect };
}

export default connect(mapStateToProps)(DataConnectBox)