antd 合并列

import React from 'react';
import { connect } from 'react-redux';

import actions from '../../redux/actions';

import moment from 'moment'

import {
  Table,
  Row,
  Col,
  DatePicker,
  Button,
  Select,
  
} from 'antd';


const Option = Select.Option;

const columns = [
  {
    title: '店铺',
    dataIndex: 'dianPu',
    key: 'dianPu',
    width: 80,
  },
  {
    title: '订单数',
    dataIndex: 'dingDanShu',
    key: 'dingDanShu',
    width: 80,
  },
  {
    title: '客流',
    dataIndex: 'keLiu',
    key: 'keLiu',
    width: 80,
  },
  {
    title: '流水',
    dataIndex: 'liuShui',
    key: 'liuShui',
    width: 80,
  },
  {
    title: '待结金额',
    dataIndex: 'daiJieJinE',
    key: 'daiJieJinE',
    width: 80,
  },
  {
    title: '优惠',
    dataIndex: 'youHui',
    key: 'youHui',
    width: 80,
  },
  {
    title: '实收',
    dataIndex: 'shiShou',
    key: 'shiShou',
    width: 80,
  },
  {
    title: '人均',
    dataIndex: 'renJun',
    key: 'renJun',
    width: 80,
  },
  {
    title: '单均',
    dataIndex: 'danJun',
    key: 'danJun',
    width: 80,
  },
  {
    title: '客人构成',
    children: [{
      title: '会员',
      dataIndex: 'huiYuan',
      key: 'huiYuan',
      width: 80,
    }, {
      title: '非会员',
      dataIndex: 'feiHuiYuan',
      key: 'feiHuiYuan',
      width: 80,
    }],
  },
  {
    title: '订单构成',
    children: [{
      title: '食堂',
      dataIndex: 'shiTang',
      key: 'shiTang',
      width: 80,
    }, {
      title: '非食堂',
      dataIndex: 'feiShiTang',
      key: 'feiShiTang',
      width: 80,
    }],
  },
  {
    title: '收款构成',
    children: [{
      title: '人民币',
      dataIndex: 'renMinBi',
      key: 'renMinBi',
      width: 80,
    }]
  },

]
const data = [];
const YcGdDianPuOneData = [];
for (let i = 0; i < 5; i++) {
  YcGdDianPuOneData.push({
    key: i,
    dianPu: '广东店铺1粤',
    dingDanShu: 88,
    keLiu: 108,
    liuShui: 1000.00,
    daiJieJinE: 10.00,
    youHui: 8.00,
    shiShou: 900.00,
    renJun: 100.00,
    danJun: 80.00,
    huiYuan: 20,
    feiHuiYuan: 20,
    shiTang: 5,
    feiShiTang: 6,
    renMinBi: "￥20"
  });
}
for (let i = 0; i < 5; i++) {
  data.push({
    key: i,
    dianPu: '麻辣香锅',
    dingDanShu: 88,
    keLiu: 108,
    liuShui: 1000.00,
    daiJieJinE: 10.00,
    youHui: 8.00,
    shiShou: 900.00,
    renJun: 100.00,
    danJun: 80.00,
    huiYuan: 20,
    feiHuiYuan: 20,
    shiTang: 5,
    feiShiTang: 6,
    renMinBi: "￥20"
  });
}

/*何亮测试数据dataTest*/
const dataTest = [
  {
    "id": "麻辣集团",
    "name": "麻辣集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1辣",
          "广东店铺2辣",
          "广东店铺3辣",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1辣",
          "广西店铺2辣",
          "广西店铺3辣",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1辣",
          "湖南店铺2辣",
          "湖南店铺3辣",
        ]
      },
    ]
  },
  {
    "id": "粤菜集团",
    "name": "粤菜集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1粤",
          "广东店铺2粤",
          "广东店铺3粤",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1粤",
          "广西店铺2粤",
          "广西店铺3粤",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1粤",
          "湖南店铺2粤",
          "湖南店铺3粤",
        ]
      },
    ]
  },
  {
    "id": "湘菜集团",
    "name": "湘菜集团",
    "data": [
      {
        "id": "广东",
        "name": "广东",
        "data": [
          "广东店铺1湘",
          "广东店铺2湘",
          "广东店铺3湘",
        ]
      },
      {
        "id": "广西",
        "name": "广西",
        "data": [
          "广西店铺1湘",
          "广西店铺2湘",
          "广西店铺3湘",
        ]
      },
      {
        "id": "湖南",
        "name": "湖南",
        "data": [
          "湖南店铺1湘",
          "湖南店铺2湘",
          "湖南店铺3湘",
        ]
      },
    ]
  }
];

// @connect((state) => state)
export default class YingYeMingXi extends React.Component {
  // static fetchData(store) {
  //   return store.dispatch(actions.getGreeting('Hello, World!'));
  // }
   constructor(props) {
       super(props)
       this.state = {
         data,
         searchText: '',
         dataTest1Value: '全部',
         dataTest2: [],
         dataTest2Value: '全部',
         dataTest3: [],
         dataTest3Value: '全部',
       };
     }
  /*品牌改变*/
  handlePinPaiChange = (value) => {
    this.setState({
      dataTest2Value: '全部',
      dataTest3Value: '全部',
      dataTest3: []
    });
    if(this.state.dataTest1Value == '全部'){
      this.setState({
        dataTest2: []
      })
    };
    for(let i=0; i<dataTest.length; i++){
      if( dataTest[i].name === value ){
        let data = dataTest[i].data;
        this.setState({
          dataTest2: data
        })
      }
    };
  }
  /*分组改变*/
  handleFenZuChange = (value) => {
    this.setState({
      dataTest2Value: value,
      dataTest3Value: '全部',
    },() => {});
    if(this.state.dataTest2Value === '全部'){
      this.setState({
        dataTest3: []
      })
    };
    let data2 = this.state.dataTest2;
    for(let i=0; i<data2.length; i++){
      if( data2[i].name === value ){
        let data = data2[i].data;
        this.setState({
          dataTest3: data
        })
      }
    };

  };
  /*店铺改变*/
  handleDianPuChange = (value)=>{
    this.setState({
      dataTest3Value: value
    });
  };
  
  onSelectChange = (value) => {
    this.setState({ searchText: value });
  };
  
  render() {
    const scrollX = 14*70;
    const dianPuFengZuOptions =  this.state.dataTest2.map( (item) => {
      return(   <Option key={item.id} value={item.name} >{item.name}</Option> )
    });
    // const oPtions = this.state.dataTest2Value? '': dianPuFengZuOptions  ;
    const dianPuOptions =  this.state.dataTest3.map( (item) => {
      return(   <Option key={item} value={item} >{item}</Option> )
    });

    return (
      <div>
        <div style={{ height: 80,margin: 10, borderRadius: 5 , backgroundColor: '#F5F5F5',
          border:'1px solid #e3e3e3', padding: 9}}>
          <Row>
            <Col span={6}>
              <span>日期</span>
              <DatePicker
                style={{ marginLeft: 10 }}
              showTime
                disabled
                defaultValue={moment().locale('en').utcOffset(0)}
              />
            </Col>
            <Col span={6}>
              <span>品牌</span>
              <Select
                showSearch
                style={{ width: 160, marginLeft: 10 }}
                placeholder="全部"
                allowClear
                onChange={this.handlePinPaiChange}
                filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                <Option key="全部" value="全部" >全部</Option>
                {
                  dataTest.map( (item) => {
                    return(<Option key={item.id} value={item.name} >{item.name}</Option> )
                  })
                }
              </Select>
            </Col>
            <Col span={6}>
              <span>店铺分组</span>
              <Select
                showSearch
                style={{ width: 160, marginLeft: 10 }}
                placeholder="全部"
                optionFilterProp="children"
                allowClear
                value={ this.state.dataTest2Value}
                onChange={this.handleFenZuChange}
                filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                <Option key="全部" value="全部" >全部</Option>
                {
                  dianPuFengZuOptions
                }
              </Select></Col>
            <Col span={6}>
              <span>店铺</span>
              <Select
                showSearch
                style={{ width: 160, marginLeft: 10 }}
                placeholder="全部"
                optionFilterProp="children"
                allowClear
                value={this.state.dataTest3Value}
                onChange={this.handleDianPuChange}
                filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                <Option key="全部" value="全部" >全部</Option>
                {dianPuOptions}
              </Select>
            </Col>
          </Row>
          <Row>
            <Col span={19}></Col>
            <Col span={5}>
              <Button  style={{ width: 120, backgroundColor: '#F0AD4E', color: '#fff', fontSize:14 }}>查询</Button>
            </Col>
          </Row>
        </div>
        <Table style={{ margin: 10, borderRadius: 5}}
          columns={columns}
          dataSource={data}
          pagination={{ pageSize:8 }}
          bordered
          size="middle"
          scroll={{ x: scrollX, }}
        />
      </div>
    );
  }
}

YingYeMingXi.propTypes = {
  greetings: React.PropTypes.object
};