数据视图中选择显示列的组件基于穿梭框重做，但样式还需要调整

src/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Form, Select, InputNumber } from 'antd'
+import { Form, Select, InputNumber, Button } from 'antd'
 import { connect } from 'dva'
+import DisplayColumnBox from './displayColumnBox'
 const FormItem = Form.Item
 const { Option } = Select
 
@@ -8,9 +9,11 @@ class DataViewConfigForm extends React.Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			showBox: false
+			showBox: false,
+			visibleDisplayColumnBox: false
 		}
 	}
+	
 	render() {
 		const { autoRefresh, dispatch, chartDesigner, formItemLayout } = this.props;
 		const columns = chartDesigner.columns;
@@ -18,9 +21,9 @@ class DataViewConfigForm extends React.Component {
 		return (
             <Form layout='horizontal'>
 				<FormItem label="展示列" {...formItemLayout}>
-					<Select
+					{/* <Select
 						mode='multiple'
-						allowClear
+						allowClear 
 						showArrow={true}
 						value={chartDesigner.dataViewConfig.viewColumns}
 						showSearch
@@ -32,7 +35,8 @@ class DataViewConfigForm extends React.Component {
 						{columns.map((c, i)=>{
 							return <Option key={i} value={c.name}>{c.label}</Option>
 						})}
-					</Select>
+					</Select> */}
+					<Button onClick={() => {this.setState({visibleDisplayColumnBox:true})}}>设置展示列</Button>
 				</FormItem>
 				<FormItem label='排序列' {...formItemLayout}>
 					<Select
@@ -45,7 +49,7 @@ class DataViewConfigForm extends React.Component {
 							dispatch({ type: 'chartDesigner/changeField', name: 'dataViewConfig', value: { ...chartDesigner.dataViewConfig, sortColumn: value }, autoRefresh });
 						}}
 					>
-						{columns.filter(c => chartDesigner.dataViewConfig.viewColumns.map(c => c.key).indexOf(c.name) !== -1 ).map((c, i)=>{
+						{chartDesigner.dataViewConfig.viewColumns.map((c, i)=>{
 							return <Option key={i} value={c.name}>{c.label}</Option>
 						})}
 					</Select>
@@ -72,6 +76,11 @@ class DataViewConfigForm extends React.Component {
 					>
 					</InputNumber>
 				</FormItem>
+				<DisplayColumnBox 
+					autoRefresh={autoRefresh} 
+					visibleDisplayColumnBox={this.state.visibleDisplayColumnBox}
+					hideBox={() => this.setState({visibleDisplayColumnBox:false})}
+				/>	
 			</Form>
         );
 	}

src/components/chartDesigner/sections/displayColumnBox.jsx

@@ -0,0 +1,125 @@
+import React from 'react'
+import { Modal, Transfer, Icon, Button, Row, Col } from 'antd'
+import { connect } from 'dva'
+
+
+class DisplayColumnBox extends React.Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            targetKeys: []
+        }
+    }
+    swapItems = (arr, index1, index2) => {
+        let arrClone = JSON.parse(JSON.stringify(arr))    //这里要使用一个深拷贝才能真正地改变state
+        let temp = arrClone[index1]
+        arrClone[index1] = arrClone[index2]
+        arrClone[index2] = temp
+        console.log("changedArrClone", arrClone)
+        this.setState({
+            targetKeys: arrClone
+        }, () => { console.log(`${this.state.targetKeys}`) }
+        );
+    }
+
+
+    upSwap = (index) => {
+        let arr = this.state.targetKeys
+        if (index === 0) {
+            return;
+        }
+        this.swapItems(arr, index, index - 1)
+    }
+
+    downSwap = (index) => {
+        let arr = this.state.targetKeys
+        if (index === arr.length - 1) {
+            return;
+        }
+        this.swapItems(arr, index, index + 1);
+    };
+
+    renderRow = (item) => {
+        let index = this.state.targetKeys.indexOf(item.key);
+        if (index === -1) {
+            return <span>{item.label}</span>
+        }
+        else {
+            // TODO: 这里样式调整比较麻烦
+            return (
+                <span> 
+                    {item.label} 
+                    <span>
+                        <Icon type="arrow-up" onClick={() => {this.upSwap(index)}} /> 
+                        <Icon type="arrow-down" onClick={() => {this.downSwap(index)}} />
+                    </span>
+                </span>
+            );
+        }
+    }
+
+    handleChange = (targetKeys) => {
+        this.setState({ targetKeys });
+    }
+
+
+    renderFooter = () => {
+        return (
+            <Button
+                size="small"
+                style={{ float: 'right', margin: 5 }}
+                onClick={this.getMock}
+            >
+                reload
+            </Button>
+        );
+    }
+
+    onOk= () => {
+        const { dispatch, chartDesigner, autoRefresh, hideBox } = this.props
+        let viewColumns = chartDesigner.columns.filter(column => this.state.targetKeys.indexOf(column.key) !== -1).map((c) => ({key:c.name, label:c.label}))
+        dispatch({
+            type: 'chartDesigner/changeField', 
+            name: 'dataViewConfig', 
+            value: { ...chartDesigner.dataViewConfig, viewColumns: viewColumns }, autoRefresh });
+        hideBox()
+        }
+    
+    onCancel = () => {
+        const { chartDesigner, hideBox } = this.props
+        this.setState({
+            targetKeys: chartDesigner.dataViewConfig.viewColumns})
+        hideBox()
+    }
+
+    render() {
+        const { visibleDisplayColumnBox } = this.props
+        const { targetKeys } = this.state
+
+        return (
+            <Modal
+                visible={visibleDisplayColumnBox}
+                onCancel={this.onCancel}
+                width={700}
+                style={{textAlign:'center'}}
+                onOk={this.onOk}
+            >
+                <Transfer
+                    dataSource={this.props.chartDesigner.columns}
+                    showSearch
+                    listStyle={{
+                        width: 250,
+                        height: 300,
+                        textAlign:'left'
+                    }}
+                    operations={['显示', '隐藏']}
+                    targetKeys={targetKeys}
+                    onChange={this.handleChange}
+                    render={this.renderRow}
+                />
+            </Modal>
+        )
+    };
+}
+
+export default connect(({ present: {chartDesigner}}) => ({ chartDesigner}))(DisplayColumnBox);