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

import React from 'react'
import { Modal, Form, Row, Col, Input, 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 DataSourceBox = ({operation, dispatch, dataSource, visibleBox, hideBox, form}) => {
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };

    const okHandler = () => {
        if(operation == 'create') {
            dispatch({ type: 'dataSource/addDataSource' });
        }else if(operation == 'edit') {
            dispatch({ type: 'dataSource/modifyDataSource' });
        }
        hideBox();
    }

    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 (
        <Modal
            className='newdatasource-box'
            title={`${operation=='create'?'新增':'修改'}数据源配置`}
            visible={visibleBox}
            onOk={() => {okHandler()}}
            onCancel={hideBox}
            maskClosable={false}
            destroyOnClose={true}
        >
            <Form size='small'>
                <FormItem label='数据源名称' {...formItemLayout}>
                    <Input
                        value={dataSource.newOne.name}
                        onChange={(e) => { dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value }) }}>
                    </Input>
                </FormItem>
                <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 });
                                }}
                                addonBefore={
                                    <Dropdown
                                        trigger={['click']}
                                        overlay={dataSourceLinkMenu}
                                    >
                                        <div style={{cursor: 'pointer'}}>导入<Icon type='down' /></div>
                                    </Dropdown>
                                }
                            />
                        </FormItem>
                    </Col>
                    <Col span={5}>
                        <FormItem label='端口' {...{
                            labelCol: { span: 12 },
                            wrapperCol: { span: 12 }
                        }}>
                            <Input
                                value={dataSource.newOne.port}
                                onChange={(e) => {
                                    dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: e.target.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>
                <FormItem className='textarea-target' label='加载对象' {...formItemLayout}>
                    <Input.TextArea
                        placeholder='输入表名或查询SQL'
                        autosize={{ minRows: 3 }}
                    />
                </FormItem>
                <FormItem label='自定义标签' {...formItemLayout}>
                    <Select
                        mode="tags"
                        placeholder='多个标签使用逗号或空格分隔'
                        tokenSeparators={[',', ' ']}
                        value={dataSource.newOne.tags}
                        dropdownStyle={{display: 'none'}}
                        onChange={(value) => {
                            dispatch({ type: 'dataSource/setNewModelField', name: 'tags', value: value });
                        }}
                    >
                    </Select>
                </FormItem>
                <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                    <Input.TextArea
                        autosize={{ minRows: 2, maxRows: 2 }}
                        value={dataSource.newOne.description}
                        onChange={(e) => {
                            dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
                        }}
                    />
                </FormItem>
            </Form>
        </Modal>
    )
}

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

export default connect(mapStateToProps)(DataSourceBox)