platform-bi-web/src/components/datasource/columnConfig.jsx

import React from 'react'
import { Form, Input, Button, Select, Table, Checkbox, Switch, Divider } from 'antd'
import { connect } from 'dva'
import COLUMN_TYPE from './columnType.json'
const FormItem = Form.Item
const SelectOption = Select.Option

class DataSourceColumnConfig extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            
        }
    }

    onCheckAllChange() {

    }

    render() {

        const { dataSource, dispatch } = this.props;

        const columns = [{
            title: <div><Checkbox
                style={{ margin: '0 8px 0 0', display: dataSource.newOne.columns ? (dataSource.newOne.columns.length > 0 ? 'inline-block' : 'none') : 'none'}}
                indeterminate={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.using).length > 0 && dataSource.newOne.columns.filter(c => c.using).length < dataSource.newOne.columns.length) : false}
                checked={dataSource.newOne.columns ? (dataSource.newOne.columns.filter(c => c.using).length === dataSource.newOne.columns.length) : false}
                onChange={(e) => {
                    let target = e.target;
                    let columns = dataSource.newOne.columns ? dataSource.newOne.columns.map(c => {
                        c.using = target.checked;
                        return c;
                    }) : [];

                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                }}
            />启用</div>,
            dataIndex: 'using',
            key: 'using',
            width: 50,
            render: (v, r) => <Checkbox
                dataKey={r.key}
                onChange={(e) => {
                    let target = e.target;
                    let key = target.dataKey;
                    let columns = dataSource.newOne.columns.map(c => {
                        if(c.key === key) {
                            c.using = target.checked;
                        }
                        return c;
                    });

                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                }}
                checked={v}
            />
        }, {
            title: '列名',
            dataIndex: 'name',
            key: 'name',
            width: 80
        }, {
            title: '备注',
            dataIndex: 'description',
            key: 'description',
            width: 150,
            render: (text, record) => {
                return <Input
                    value={text}
                    onChange={(e) => {
                        let columns = dataSource.newOne.columns.map(c => {
                            if(c.key === record.key) {
                                c['description'] = e.target.value;
                            }
                            return c;
                        });
                        
                        dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                    }}
                >
                </Input>
            }
        }, {
            title: '数据类型',
            dataIndex: 'dataType',
            key: 'dataType',
            width: 80
        }, {
            title: '分析类型',
            dataIndex: 'columnType',
            key: 'columnType',
            width: 80,
            render: (text, record) => {
                return (
                    <Select
                        style={{ width: '100%' }}
                        value={text}
                        onChange={(value) => {
                            let columns = dataSource.newOne.columns.map(c => {
                                if(c.key === record.key) {
                                    c.columnType = value;
                                    c.groupable = c.columnType === 'categorical';
                                    c.bucketizable = ['time', 'scale', 'ordinal'].indexOf(record.columnType) !== -1;
                                }
                                return c;
                            });
                            dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                        }}
                    >
                    {
                        COLUMN_TYPE.map( c => {
                            let dataType = record.dataType;
                            if(c.dataType.indexOf(dataType) !== -1) {
                                return <SelectOption value={c.columnType} key={c.columnType}>{c.label}</SelectOption>
                            }else {
                                return null
                            }
                            
                        }).filter((s)=>s!==null)
                    }
                    </Select>
                )
            }
        }, {
            title: '允许分组',
            dataIndex: 'groupable',
            key: 'groupable',
            width: 50,
            className: 'column-groupable',
            render: (value, record) => <Switch disabled={record.columnType!=='categorical'} checked={value} onChange={(checked) => {
                let columns = dataSource.newOne.columns.map(c => {
                    if(c.key === record.key) {
                        c.groupable = checked;
                    }
                    return c;
                });
                dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
            }}/>
        }, {
            title: '允许分段',
            dataIndex: 'bucketizable',
            key: 'bucketizable',
            width: 50,
            className: 'column-bucketizable',
            render: (value, record) => <Switch
                disabled={['time', 'scale', 'ordinal'].indexOf(record.columnType)===-1}
                checked={value}
                defaultChecked={true}
                onChange={(checked) => {
                    let columns = dataSource.newOne.columns.map(c => {
                        if(c.key === record.key) {
                            c.bucketizable = checked;
                        }
                        return c;
                    });
                    dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                }}
            />
        }, {
            title: '别名',
            dataIndex: 'alias',
            key: 'alias',
            width: 150,
            render: (text, record) => {
                return(
                    <Input
                        value={text}
                        onChange={(e) => {
                            const value = e.target.value;
                            let columns = dataSource.newOne.columns.map(c => {
                                if(c.key === record.key) {
                                    c['alias'] = value;
                                }
                                return c;
                            });
                            
                            dispatch({ type: 'dataSource/setNewModelField', name: 'columns', value: columns });
                        }}
                    >
                    </Input>
                )
            }
        }];

        return (
            <div>
                {
                    dataSource.newOne.type==='database'?(
                        <div>
                            <Form size='small'>
                                <Divider orientation="left">数据对象</Divider>
                                <FormItem className='textarea-target'>
                                    <Input.TextArea
                                        disabled={!dataSource.newOne.address}
                                        placeholder={dataSource.newOne.address ? '输入表名或查询SQL，注意不能以分号结尾' : '请返回上一步选择数据库连接'}
                                        autosize={{ minRows: 3 }}
                                        value={dataSource.newOne.target}
                                        onChange={(e) => {
                                            dispatch({ type: 'dataSource/setNewModelInvalidSQL', value: false });
                                            dispatch({ type: 'dataSource/setNewModelField', name: 'target', value: e.target.value });
                                        }}
                                    />
                                </FormItem>
                                <div className='buttons'>
                                    <div className='errormessage' style={{ cursor: dataSource.newOne.invalidSQL ? 'text' : 'default', opacity: dataSource.newOne.invalidSQL ? '1' : '0' }}>未查询到列数据，请检查SQL是否正确</div>
                                    <Button disabled={!dataSource.newOne.address} onClick={() => {
                                        dispatch({ type: 'dataSource/importNewModelColumns' })
                                    }}>获取列数据</Button>
                                </div>
                            </Form>
                            <Divider orientation="left">数据列</Divider>
                        </div>
                    ):null
                }
                <Table
                    className='table-columnconfig'
                    dataSource={dataSource.newOne.columns}
                    columns={columns}
                    locale={{
                        emptyText: '未连接到数据对象'
                    }}
                />
            </div>
        );
    }
}

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

export default connect(mapStateToProps)(DataSourceColumnConfig);