platform-bi-web/app/components/datasource/dataSourceBox.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 DataSourceBox = ({operation, dispatch, dataSource, visibleBox, hideBox, form}) => {
    const formItemLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 20 },
    };

    const okHandler = () => {
        if(operation == 'create') {
            dispatch({ type: 'dataSource/add' });
        }else if(operation == 'edit') {
            dispatch({ type: 'dataSource/modify' });
        }
        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}
        >
            <Row>
                <Col span={12}>
                    <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 });
                                        }}
                                        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>
                        <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>
                </Col>
                <Col span={12}>
                </Col>
            </Row>
        </Modal>
    )
}

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

export default connect(mapStateToProps)(DataSourceBox)