platform-bi-web/src/components/dataSourceDetail/baseConfig.jsx

import React from 'react'
import { Form, Row, Col, Input, InputNumber, Select, Divider, Cascader } from 'antd'
import { connect } from 'dva'
const FormItem = Form.Item
const SelectOption = Select.Option

class DataSourceBaseConfig extends React.Component {

    generateOptions () {
        const { dataConnect } = this.props;
        const { list } = dataConnect;

        return list.map((l) => {
            return <SelectOption value={l.code} key={l.code}>
                { l.name }
            </SelectOption>
        });
    }

    componentDidMount() {
        const { dispatch } = this.props;
        dispatch({ type: 'dataSource/remoteGroupList' });
        dispatch({ type: 'dataConnect/fetchList' });
    }

    render() {
        const { dataConnect, dataSource, dataSourceDetail, dispatch } = this.props;

        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
        };
    
        let getGroup = () => {
            const { groupList } = dataSource;
            const { group } = dataSourceDetail;
            let g1 = groupList.filter(g => g.code+'' === group+'')[0];
            if(!g1) {
                return ['-1']
            }
            if(g1.pcode === '-1') {
                return [g1.code]
            }else {
                let g2 = groupList.filter(g => g.code+'' === g1.pcode+'')[0];
                return [g2.code, g1.code]
            }
        }
    
        return (
            <Form className='form-base' size='small'>
                <Divider orientation="left">基本配置</Divider>
                <FormItem label='数据源名称' {...formItemLayout}>
                    <Input
                        value={dataSourceDetail.name}
                        onBlur={(e) => {
                            // dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value });
                            // dispatch({ type: 'dataSource/remoteModify' });
                        }}
                        onChange={(e) => {
                            dispatch({ type: 'dataSourceDetail/setField', name: 'name', value: e.target.value });
                        }}>
                    </Input>
                </FormItem>
                {
                    dataSourceDetail.type==='file'?(
                        <div>
                            <Divider orientation="left">文件</Divider>
                            <div>此处显示文件名</div>
                        </div>
                    ):(
                        <div>
                            <Divider orientation="left">连接配置</Divider>
                            <div style={{ textAlign: 'end', color: '#F5222D' }}>*若只修改数据连接，请确认不同数据库取数逻辑一致</div>
                            <FormItem label='数据连接' {...formItemLayout}>
                                <Select
                                    value={dataSourceDetail.connectCode}
                                    onChange={(value) => {
                                        let selectedDataConnect = dataConnect.list.filter((l) => l.code === value)[0];
                                        dispatch({ type: 'dataSourceDetail/setFields', fields: [
                                            { name: 'connectCode', value: selectedDataConnect.code },
                                            { name: 'dbType', value: selectedDataConnect.dbType },
                                            { name: 'address', value: selectedDataConnect.address },
                                            { name: 'port', value: selectedDataConnect.port },
                                            { name: 'dbName', value: selectedDataConnect.dbName },
                                            { name: 'userName', value: selectedDataConnect.userName },
                                        ] } );
                                    }}
                                >
                                    { this.generateOptions() }
                                </Select>
                            </FormItem>
                            <FormItem label='数据库类型' {...formItemLayout}>
                                <Select
                                    disabled={true}
                                    value={dataSourceDetail.dbType}
                                    onChange={(value) => {
                                        dispatch({ type: 'dataSourceDetail/setField', 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
                                            disabled={true}
                                            value={dataSourceDetail.address}
                                            onChange={(e) => {
                                                dispatch({ type: 'dataSourceDetail/setField', name: 'address', value: e.target.value });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={5}>
                                    <FormItem className='input-port' label='端口' {...{
                                        labelCol: { span: 12 },
                                        wrapperCol: { span: 12 }
                                    }}>
                                        <InputNumber
                                            disabled={true}
                                            value={dataSourceDetail.port}
                                            onChange={(value) => {
                                                dispatch({ type: 'dataSourceDetail/setField', name: 'port', value: value });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                            </Row>
                            <FormItem label='数据库名' {...formItemLayout}>
                                <Input
                                    disabled={true}
                                    value={dataSourceDetail.dbName}
                                    onChange={(e) => {
                                        dispatch({ type: 'dataSourceDetail/setField', name: 'dbName', value: e.target.value });
                                    }}
                                />
                            </FormItem>
                            <Row>
                                <Col span={12}>
                                    <FormItem label='用户名' {...{
                                        labelCol: { span: 8 },
                                        wrapperCol: { span: 16 }
                                    }}>
                                        <Input
                                            disabled={true}
                                            value={dataSourceDetail.userName}
                                            onChange={(e) => {
                                                dispatch({ type: 'dataSourceDetail/setField', name: 'userName', value: e.target.value });
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                                <Col span={12}>
                                    <FormItem label='密码' {...{
                                        labelCol: { span: 8 },
                                        wrapperCol: { span: 16 }
                                    }}>
                                        <Input
                                            disabled={true}
                                            // value={dataSourceDetail.password}
                                            onChange={(e) => {
                                                let value = e.target.value;
                                                dispatch({ type: 'dataSourceDetail/setField', name: 'password', value: value });
                                                e.target.removeAttribute('value')
                                            }}
                                        />
                                    </FormItem>
                                </Col>
                            </Row>
                        </div>
                    )
                }
                <Divider orientation="left">其他配置</Divider>
                <FormItem label='所属分组' {...formItemLayout}>
                    <Cascader
                        value={getGroup()}
                        allowClear={true}
                        changeOnSelect={true}
                        expandTrigger='hover'
                        placeholder='未分组'
                        options={[{pcode: '-1', code: '-1', label: '未分组'}].concat(dataSource.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
                            return {
                                key: p.code,
                                value: p.code,
                                label: p.label,
                                children: dataSource.groupList.filter(g => g.pcode === p.code && p.code !== '-1').map(c => {
                                    return {
                                        key: c.code,
                                        value: c.code,
                                        label: c.label
                                    }
                                })
                            }
                        })}
                        onChange={(value, items) => {
                            let v = value[1] !== undefined ? value[1] : value[0];
                            dispatch({ type: 'dataSourceDetail/setField', name: 'group', value: v });
                        }}
                        
                    >
                    </Cascader>
                </FormItem>
                <FormItem className='textarea-desc' label='说明' {...formItemLayout}>
                    <Input.TextArea
                        autosize={{ minRows: 2, maxRows: 5 }}
                        value={dataSourceDetail.description}
                        onChange={(e) => {
                            dispatch({ type: 'dataSourceDetail/setField', name: 'description', value: e.target.value });
                        }}
                        onBlur={(e) => {
                            // dispatch({ type: 'dataSource/remoteModify' });
                        }}
                    />
                </FormItem>
            </Form>
        );
    }
}

export default connect(({ present: { dataConnect, dataSource, dataSourceDetail } }) => ({ dataConnect, dataSource, dataSourceDetail }))(DataSourceBaseConfig);