优化数据视图设置数据列的选中状态控制

src/components/chartDesigner/sections/displayColumnBox.jsx

@@ -5,7 +5,8 @@ class DisplayColumnBox extends React.Component {
     constructor(props){
         super(props)
         this.state = {
-            targetColumns: props.defaultSelectedColumns || []
+            targetColumns: props.defaultSelectedColumns || [],
+            selectedColumns: [],
         }
     }
     swapItems = (arr, index1, index2) => {
@@ -36,12 +37,19 @@ class DisplayColumnBox extends React.Component {
     };
 
     renderRow = (item) => {
-        let index = this.state.targetColumns.findIndex(c => c.name === item.name);
+        const { targetColumns, selectedColumns } = this.state;
+        let index = targetColumns.findIndex(c => c.name === item.name);
         return <span data-key={item.name}>
-            {item.label}
+            <span data-key='$name'>{item.label}</span>
             {index !== -1 && <span style={{ float: 'right' }}>
-                <Icon type="arrow-up" onClick={() => {this.upSwap(index)}} /> 
-                <Icon type="arrow-down" onClick={() => {this.downSwap(index)}} />
+                <Icon type="arrow-up" onClick={(e) => {
+                    this.swapTarget = true;
+                    this.upSwap(index);
+                }} /> 
+                <Icon type="arrow-down" onClick={(e) => {
+                    this.swapTarget = true;
+                    this.downSwap(index);
+                }} />
             </span>}
         </span>
     }
@@ -52,6 +60,15 @@ class DisplayColumnBox extends React.Component {
         this.setState({ targetColumns });
     }
 
+    handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
+        if(!this.swapTarget) {
+            this.setState({
+                selectedColumns: sourceSelectedKeys.concat(targetSelectedKeys)
+            });
+        }
+        this.swapTarget = false;
+    }
+
     onOk= () => {
         const { hideBox, okHandler } = this.props;
         const { targetColumns } = this.state;
@@ -66,7 +83,7 @@ class DisplayColumnBox extends React.Component {
 
     render() {
         const { allColumns, visibleDisplayColumnBox } = this.props;
-        const { targetColumns } = this.state;
+        const { targetColumns, selectedColumns } = this.state;
 
         return (
             <Modal
@@ -89,7 +106,9 @@ class DisplayColumnBox extends React.Component {
                     }}
                     operations={['显示', '隐藏']}
                     targetKeys={targetColumns.map(c => c.name)}
+                    selectedKeys={selectedColumns}
                     onChange={this.handleChange}
+                    onSelectChange={this.handleSelectChange}
                     render={this.renderRow}
                 />
             </Modal>