platform-bi-web/app/components/datasource/dataConnectBox.jsx

import React from 'react'
import { Modal, Form, Row, Col, Input, InputNumber, Select, Icon, Menu, Dropdown } from 'antd'
const FormItem = Form.Item
const SelectOption = Select.Option
const OptionGroup = Select.OptGroup
const InputGroup = Input.Group
const SubMenu = Menu.SubMenu
const MenuItem = Menu.Item
const MenuItemGroup = Menu.ItemGroup;
import { connect } from 'dva'
import dataConnect from '../../models/dataConnect'

const DataConnectBox = ({operation, dispatch, dataConnect, visibleBox, hideBox, form}) => {
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };

    const okHandler = (model) => {
        if(operation == 'create') {
            dispatch({ type: 'dataConnect/remoteAdd' });
        }else if(operation == 'modify') {
            dispatch({ type: 'dataConnect/remoteModify', code: model.code });
        }
        hideBox();
    }

    return (
        <Modal
            className='newdataconnect-box'
            title={`${operation=='create'?'新增':'修改'}数据库连接配置`}
            visible={visibleBox}
            onOk={() => {okHandler(dataConnect.newOne)}}
            onCancel={hideBox}
            maskClosable={false}
            destroyOnClose={true}
        >
            <Form size='small'>
                <FormItem label='连接配置名' {...formItemLayout}>
                    <Input
                        value={dataConnect.newOne.name}
                        onChange={(e) => { dispatch({ type: 'dataConnect/setNewModelField', name: 'name', value: e.target.value }) }}>
                    </Input>
                </FormItem>
                <FormItem label='数据库类型' {...formItemLayout}>
                    <Select
                        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
                                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
                                value={dataConnect.newOne.port}
                                onChange={(value) => {
                                    dispatch({ type: 'dataConnect/setNewModelField', name: 'port', value: value });
                                }}
                            />
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label='数据库名' {...formItemLayout}>
                    <Input
                        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
                                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
                                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
                        autosize={{ minRows: 2 }}
                        value={dataConnect.newOne.description}
                        onChange={(e) => {
                            dispatch({ type: 'dataConnect/setNewModelField', name: 'description', value: e.target.value });
                        }}
                    />
                </FormItem>
            </Form>
        </Modal>
    )
}

function mapStateToProps({ present: { dataConnect } }) {
    return { dataConnect: dataConnect };
}

export default connect(mapStateToProps)(DataConnectBox)