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

import React from 'react'
import { Button, 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 dataSource from '../../models/dataSource'

const DataSourceBaseConfig = ({ 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: 'dbType', 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 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>
                        <UploadDragger
                            className='upload'
                            name='file' // 上传到后台的文件名
                            fileList={dataSource.newOne.fileList}
                            accept='application/vnd.ms-excel,.csv' // 只支持excel和csv格式文件
                            action='//jsonplaceholder.typicode.com/posts/'
                            headers={{authorization: 'authorization-text'}}
                            beforeUpload={(file, fileList) => {
                                const trueType = file.type === 'application/vnd.ms-excel';
                                if (!trueType) {
                                    message.error('选择文件格式错误!');
                                }
                                const trueSize = file.size / 1024 / 1024 < 30;
                                if (!trueSize) {
                                    message.error('选择文件过大!');
                                }
                                return trueType && trueSize;
                            }}
                            onChange={(info) => {
                                const file = info.file;
                                let fileList = info.fileList;
                                fileList = fileList.slice(-1); // 只保留最后一个
                                if (info.file.status !== 'uploading') {
                                    console.log(file, info.fileList);
                                    const trueType = file.type === 'application/vnd.ms-excel';
                                    const trueSize = file.size / 1024 / 1024 < 30;
                                    if(!trueType || !trueSize) {
                                        fileList = [];
                                    }
                                }
                                if (file.status === 'done') {
                                    message.success(`${file.name} 文件上传成功`);
                                } else if (file.status === 'error') {
                                    fileList = [];
                                    message.error(`${file.name} 文件上传失败.`);
                                }
                                dispatch({ type: 'dataSource/setNewModelField', name: 'fileList', value: fileList })
                            }}
                        >
                            <p className="ant-upload-drag-icon">
                                <Icon type="inbox" />
                            </p>
                            <p className="ant-upload-text">点击选择或拖动文件到该区域</p>
                            <p className="ant-upload-hint">仅支持上传单个30MB以内EXCEL/CSV格式文件</p>
                        </UploadDragger>
                    </div>
                ):(
                    <div>
                        <Divider orientation="left">连接配置</Divider>
                        <div className='links'>
                            <Dropdown trigger={['click']} overlay={dataSourceLinkMenu}>
                                <div>使用已存在的数据连接 <Icon type="down" /></div>
                            </Dropdown>
                        </div>
                        <FormItem label='数据库类型' {...formItemLayout}>
                            <Select
                                value={dataSource.newOne.dbType}
                                labelInValue={true}
                                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 className='buttons'>
                            <Button size='small'>测试连接</Button>
                        </div>
                    </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} }) {
    return { dataSource }
}

export default connect(mapStateToProps)(DataSourceBaseConfig);