platform-bi-web/app/components/datasource/connectConfig.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 dataSource from '../../models/dataSource'

const DataSourceConnectConfig = ({ dataSource, dispatch }) => {

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

    const dataSourceLinkMenu = (
        <Menu
            className='menu-datasource-link'
            onClick={() => {
                dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: '1111adddd' });
                dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: '1234' });
                dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: {
                    key: 'oracle',
                    label: 'ORACLE'
                } });
                dispatch({ type: 'dataSource/setNewModelField', name: 'dbName', value: 'orcl' });
                dispatch({ type: 'dataSource/setNewModelField', name: 'userName', value: 'UAS' });
                dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: 'select!#%*(' });
            }}
        >
            <MenuItem>1111</MenuItem>
            <MenuItem>2222</MenuItem>
            <MenuItem>33333</MenuItem>
            <MenuItem>44</MenuItem>
        </Menu>
    );

    return (
        <Form size='small'>
            <Row>
                <Col span={19}>
                    <FormItem label='数据库地址' {...{
                        labelCol: { span: 5 },
                        wrapperCol: { span: 19 }
                    }}>
                        <Input
                            value={dataSource.newOne.address}
                            onChange={(e) => {
                                dispatch({ type: 'dataSource/setNewModelField', name: 'address', value: e.target.value });
                            }}
                            prefix={
                                <Dropdown
                                    trigger={['click']}
                                    overlay={dataSourceLinkMenu}
                                >
                                    <div style={{cursor: 'pointer'}}><Icon type='down' /></div>
                                </Dropdown>
                            }
                        />
                    </FormItem>
                </Col>
                <Col span={5}>
                    <FormItem className='input-port' label='端口' {...{
                        labelCol: { span: 12 },
                        wrapperCol: { span: 12 }
                    }}>
                        <InputNumber
                            value={dataSource.newOne.port}
                            onChange={(value) => {
                                dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: value });
                            }}
                        />
                    </FormItem>
                </Col>
            </Row>
            <FormItem label='数据库类型' {...formItemLayout}>
                <Select
                    value={dataSource.newOne.type}
                    labelInValue={true}
                    onChange={(value) => {
                        dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: value} );
                    }}
                >
                    <SelectOption value='oracle'>
                        ORACLE
                    </SelectOption>
                    <SelectOption value='mysql'>
                        MYSQL
                    </SelectOption>
                    <SelectOption value='sqlserver'>
                        SQLSERVER
                    </SelectOption>
                    <SelectOption value='sqlite'>
                        SQLITE
                    </SelectOption>
                </Select>
            </FormItem>
            <FormItem label='数据库名' {...formItemLayout}>
                <Input
                    value={dataSource.newOne.dbName}
                    onChange={(e) => {
                        dispatch({ type: 'dataSource/setNewModelField', name: 'dbName', value: e.target.value });
                    }}
                />
            </FormItem>
            <Row>
                <Col span={12}>
                    <FormItem label='用户名' {...{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 16 }
                    }}>
                        <Input
                            value={dataSource.newOne.userName}
                            onChange={(e) => {
                                dispatch({ type: 'dataSource/setNewModelField', name: 'userName', value: e.target.value });
                            }}
                        />
                    </FormItem>
                </Col>
                <Col span={12}>
                    <FormItem label='密码' {...{
                        labelCol: { span: 8 },
                        wrapperCol: { span: 16 }
                    }}>
                        <Input
                            type='password'
                            value={dataSource.newOne.password}
                            onChange={(e) => {
                                dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: e.target.value });
                            }}
                        />
                    </FormItem>
                </Col>
            </Row>
        </Form>
    );
}

function mapStateToProps({ present: {dataSource} }) {
    return { dataSource }
}

export default connect(mapStateToProps)(DataSourceConnectConfig);