图表设置分组为【未分组】报错问题解决/数据源列设置table允许拖动调整列宽

src/components/chartDesigner/sections/filterBox.jsx

@@ -245,7 +245,7 @@ class FilterBox extends React.Component {
             return (
                 <Row key={`filterDiv[${key}]`}>
                     <Col span={22}>
-                        <Col span={6}>
+                        <Col span={7}>
                             <FormItem key={key}>
                                 {getFieldDecorator(`filterName${key}`, {
                                     initialValue: name?{key: name}:undefined
@@ -270,7 +270,7 @@ class FilterBox extends React.Component {
                                     </Select>)}
                             </FormItem>
                         </Col>
-                        <Col span={6}>
+                        <Col span={5}>
                             <FormItem key={key} className='filterOperator'>
                                 {getFieldDecorator(`filterOperator${key}`, {
                                     initialValue: operator?{key: operator}:undefined

src/components/chartDesigner/sections/otherConfigForm.jsx

@@ -11,7 +11,7 @@ const OtherConfigForm = ({ chart, chartDesigner, dispatch, formItemLayout }) =>
         const { groupList } = chart;
         let g1 = groupList.filter(g => g.code+'' === group+'')[0];
         if(!g1) {
-            return ['nogroup']
+            return ['-1']
         }
         if(g1.pcode === '-1') {
             return [g1.code]
@@ -29,7 +29,7 @@ const OtherConfigForm = ({ chart, chartDesigner, dispatch, formItemLayout }) =>
                     changeOnSelect={true}
                     expandTrigger='hover'
 					placeholder='未分组'
-					options={[{pcode: '-1', code: 'nogroup', label: '未分组'}].concat(chart.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
+					options={[{pcode: '-1', code: '-1', label: '未分组'}].concat(chart.groupList).filter(g => g.pcode === '-1').map((p, i)=>{
 						return {
                             key: p.code,
 							value: p.code,

src/components/datasource/columnConfig.jsx

@@ -2,26 +2,57 @@ import React from 'react'
 import { Form, Input, Button, Select, Table, Checkbox, Switch, Divider, Icon, Popconfirm } from 'antd'
 import { connect } from 'dva'
 import COLUMN_TYPE from './columnType.json'
+import { Resizable } from 'react-resizable';
 const FormItem = Form.Item
 const SelectOption = Select.Option
 
+const ResizeableTitle = (props) => {
+    const { onResize, width, ...restProps } = props;
+
+    if (!width) {
+        return <th {...restProps} />;
+    }
+
+    return (
+        <Resizable width={width} height={0} onResize={onResize}>
+            <th {...restProps} />
+        </Resizable>
+    );
+};
+
 class DataSourceColumnConfig extends React.Component {
 
     constructor(props) {
         super(props);
         this.state = {
+            widths: [ 50, 80, 150, 80, 80, 150 ],
             visibleConfirm: false
         }
     }
 
+    components = {
+        header: {
+            cell: ResizeableTitle,
+        },
+    };
+
     handleVisibleChange = (visible) => {
         const { columns } = this.props.dataSource.newOne;
         this.setState({ visibleConfirm: visible && (columns && columns.length > 0) });
     }
 
+    handleResize = index => (e, { size }) => {
+        this.setState(({ widths }) => {
+            const nextWidths = [...widths];
+            nextWidths[index] = size.width;
+            return { widths: nextWidths };
+        });
+    };
+
     render() {
 
         const { dataSource, dispatch, loading } = this.props;
+        const { widths } = this.state;
 
         const columns = [{
             title: <div><Checkbox
@@ -40,7 +71,7 @@ class DataSourceColumnConfig extends React.Component {
             />启用</div>,
             dataIndex: 'using',
             key: 'using',
-            width: 50,
+            width: widths[0],
             render: (v, r) => <Checkbox
                 dataKey={r.key}
                 onChange={(e) => {
@@ -61,12 +92,12 @@ class DataSourceColumnConfig extends React.Component {
             title: '列名',
             dataIndex: 'name',
             key: 'name',
-            width: 80
+            width: widths[1],
         }, {
             title: '备注',
             dataIndex: 'description',
             key: 'description',
-            width: 150,
+            width: widths[2],
             render: (text, record) => {
                 return <Input
                     value={text}
@@ -87,12 +118,12 @@ class DataSourceColumnConfig extends React.Component {
             title: '数据类型',
             dataIndex: 'dataType',
             key: 'dataType',
-            width: 80
+            width: widths[3]
         }, {
             title: '分析类型',
             dataIndex: 'columnType',
             key: 'columnType',
-            width: 80,
+            width: widths[4],
             render: (text, record) => {
                 return (
                     <Select
@@ -124,46 +155,46 @@ class DataSourceColumnConfig extends React.Component {
                     </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: '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,
+            width: widths[5],
             render: (text, record) => {
                 return(
                     <Input
@@ -183,7 +214,13 @@ class DataSourceColumnConfig extends React.Component {
                     </Input>
                 )
             }
-        }];
+        }].map((col, index) => ({
+            ...col,
+            onHeaderCell: column => ({
+                width: column.width,
+                onResize: this.handleResize(index),
+            }),
+        }));
 
         return (
             <div>
@@ -243,6 +280,8 @@ class DataSourceColumnConfig extends React.Component {
                 }
                 <Table
                     className='table-columnconfig'
+                    bordered
+                    components={this.components}
                     dataSource={dataSource.newOne.columns}
                     columns={columns}
                     locale={{

src/components/datasource/columnType.json

@@ -21,5 +21,5 @@
 }, {
     "dataType": ["VARCHAR", "VARCHAR2", "NUMBER", "CLOB"],
     "columnType": "string",
-    "label": "字符串"
+    "label": "文本"
 }]

src/components/datasource/dataSourceDetail.less

@@ -88,12 +88,29 @@
                 }
             }
             .table-columnconfig {
+                table {
+                    overflow: hidden;
+                }
                 .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
                     padding: 4px 8px;
                 }
                 .column-groupable, .column-bucketizable {
                     text-align: center;
                 }
+                .react-resizable {
+                    position: relative;
+                  }
+                  
+                .react-resizable-handle {
+                    position: absolute;
+                    width: 12px;
+                    padding: 0;
+                    height: 100%;
+                    bottom: 0;
+                    right: -5px;
+                    opacity: 0;
+                    cursor: col-resize;
+                  }
             }
         }
         .steps-action {

src/models/chart.js

@@ -295,6 +295,9 @@ export default {
                 }else if(baseConfig.viewType === 'dataView') {
                     body.chartType = 'individual';
                     body.chartConfig = JSON.stringify(dataViewConfig);
+                }else {
+                    body.chartType = '';
+                    body.chartConfig = JSON.stringify({});
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_ADD,

src/models/chartDesigner.js

@@ -284,6 +284,9 @@ export default {
                 }else if(baseConfig.viewType === 'dataView') {
                     body.chartType = 'individual';
                     body.chartConfig = JSON.stringify(dataViewConfig);;
+                }else {
+                    body.chartType = '';
+                    body.chartConfig = JSON.stringify({});
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.CHART_ADD,