|
|
@@ -2,29 +2,26 @@ 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: []
|
|
|
+ targetColumns: props.targetColumns || []
|
|
|
}
|
|
|
}
|
|
|
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)
|
|
|
+ let arrClone = JSON.parse(JSON.stringify(arr)); //这里要使用一个深拷贝才能真正地改变state
|
|
|
+ let temp = arrClone[index1];
|
|
|
+ arrClone[index1] = arrClone[index2];
|
|
|
+ arrClone[index2] = temp;
|
|
|
this.setState({
|
|
|
- targetKeys: arrClone
|
|
|
- }, () => { console.log(`${this.state.targetKeys}`) }
|
|
|
- );
|
|
|
+ targetColumns: arrClone
|
|
|
+ });
|
|
|
}
|
|
|
|
|
|
|
|
|
upSwap = (index) => {
|
|
|
- let arr = this.state.targetKeys
|
|
|
+ let arr = this.state.targetColumns
|
|
|
if (index === 0) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -32,7 +29,7 @@ class DisplayColumnBox extends React.Component {
|
|
|
}
|
|
|
|
|
|
downSwap = (index) => {
|
|
|
- let arr = this.state.targetKeys
|
|
|
+ let arr = this.state.targetColumns
|
|
|
if (index === arr.length - 1) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -40,61 +37,45 @@ class DisplayColumnBox extends React.Component {
|
|
|
};
|
|
|
|
|
|
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>
|
|
|
- );
|
|
|
- }
|
|
|
+ let index = this.state.targetColumns.indexOf(item.key);
|
|
|
+ return <span data-key={item.name}>
|
|
|
+ {item.label}
|
|
|
+ {index !== -1 && <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>
|
|
|
- );
|
|
|
+ handleChange = (targetKeys, direction, moveKeys) => {
|
|
|
+ this.setState({ targetColumns: targetKeys });
|
|
|
}
|
|
|
|
|
|
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 });
|
|
|
+ const { dispatch, chartDesigner, autoRefresh, hideBox } = this.props;
|
|
|
+ const { targetColumns } = this.state;
|
|
|
+ let viewColumns = chartDesigner.columns.filter(column => targetColumns.indexOf(column.name) !== -1).map((c) => ({key:c.name, label:c.label}));
|
|
|
+ dispatch(
|
|
|
+ {
|
|
|
+ type: 'chartDesigner/changeField',
|
|
|
+ name: 'dataViewConfig',
|
|
|
+ value: { ...chartDesigner.dataViewConfig, viewColumns },
|
|
|
+ autoRefresh
|
|
|
+ }
|
|
|
+ );
|
|
|
hideBox()
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
onCancel = () => {
|
|
|
const { chartDesigner, hideBox } = this.props
|
|
|
this.setState({
|
|
|
- targetKeys: chartDesigner.dataViewConfig.viewColumns})
|
|
|
+ targetColumns: chartDesigner.dataViewConfig.viewColumns})
|
|
|
hideBox()
|
|
|
}
|
|
|
|
|
|
render() {
|
|
|
const { visibleDisplayColumnBox } = this.props
|
|
|
- const { targetKeys } = this.state
|
|
|
+ const { targetColumns } = this.state
|
|
|
|
|
|
return (
|
|
|
<Modal
|
|
|
@@ -105,7 +86,7 @@ class DisplayColumnBox extends React.Component {
|
|
|
onOk={this.onOk}
|
|
|
>
|
|
|
<Transfer
|
|
|
- dataSource={this.props.chartDesigner.columns}
|
|
|
+ dataSource={this.props.chartDesigner.columns.map(c => ({ ...c, key: c.name }))}
|
|
|
showSearch
|
|
|
listStyle={{
|
|
|
width: 250,
|
|
|
@@ -113,7 +94,7 @@ class DisplayColumnBox extends React.Component {
|
|
|
textAlign:'left'
|
|
|
}}
|
|
|
operations={['显示', '隐藏']}
|
|
|
- targetKeys={targetKeys}
|
|
|
+ targetKeys={targetColumns}
|
|
|
onChange={this.handleChange}
|
|
|
render={this.renderRow}
|
|
|
/>
|