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

import React from 'react'
import { Button, Table, Form, Row, Col, Input, InputNumber, Select, Icon, Menu, Dropdown, Divider, Upload, message } 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
const UploadDragger = Upload.Dragger
import { connect } from 'dva'
import DataConnectConfig from './dataConnectConfig'
import '../../models/dataSource'
import '../../models/dataConnect'

const DataSourceBaseConfig = ({ dataSource, dataConnect, dispatch, mode }) => {

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

    const dataConnectColumns = [{
        title: '名称',
        dataIndex: 'name',
        key: 'name',
        width: 100,
        render: (text, record) => {
            return <div className='datasource-name'>
                <div className={`datasource-type type-${record.type}`}></div>
                <div>{text}</div>
            </div>
        }
    }, {
        title: '说明',
        dataIndex: 'description',
        key: 'description',
        width: 100
    }, {
        title: '操作',
        key: 'action',
        width: 300,
        render: (text, record) => (
            <div className='action-col'>
                <div className='operation' onClick={() => {
                    let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
                    dispatch({ type: 'dataConnect/setNewModel', model: selectedModel });
                    this.showDataConnectBox('modify')
                }}><Icon type="info-circle-o"/>属性</div>
                <div className='operation'><Divider type="vertical" /></div>
                <div className='operation' onClick={() => {
                    dispatch({ type: 'dataConnect/remoteDelete', code: record.code });
                }}><Icon type="delete"/>删除</div>
            </div>
        ),
        width: 80
    }];

    return (
        <Form className='form-base' size='small'>
            <Divider orientation="left">基本配置</Divider>
            <FormItem label='数据源名称' {...formItemLayout}>
                <Input
                    value={dataSource.newOne.name}
                    onChange={(e) => { dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value }) }}>
                </Input>
            </FormItem>
            {
                dataSource.newOne.type=='file'?(
                    <div>
                        <Divider orientation="left">文件</Divider>
                        <div>此处显示文件名</div>
                    </div>
                ):(
                    <div>
                        <Divider orientation="left">连接配置</Divider>
                        <FormItem label='数据库类型' {...formItemLayout}>
                            <Select
                                value={dataSource.newOne.dbType}
                                onChange={(value) => {
                                    dispatch({ type: 'dataSource/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={dataSource.newOne.address}
                                        onChange={(e) => {
                                            dispatch({ type: 'dataSource/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={dataSource.newOne.port}
                                        onChange={(value) => {
                                            dispatch({ type: 'dataSource/setNewModelField', name: 'port', value: value });
                                        }}
                                    />
                                </FormItem>
                            </Col>
                        </Row>
                        <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
                                        value={dataSource.newOne.password}
                                        onChange={(e) => {
                                            let value = e.target.value;
                                            dispatch({ type: 'dataSource/setNewModelField', name: 'password', value: value });
                                            e.target.removeAttribute('value')
                                        }}
                                    />
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                )
            }
            <Divider orientation="left">其他配置</Divider>
            <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: 5 }}
                    value={dataSource.newOne.description}
                    onChange={(e) => {
                        dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
                    }}
                />
            </FormItem>
        </Form>
    );
}

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

export default connect(mapStateToProps)(DataSourceBaseConfig);