content: import React from 'react';
  import {View} from 'react-native';
  import {
    Form,
    Row,
    Col,
    Input,
    Menu,
    Button,
    Dropdown,
    Table,
    Popconfirm,
    message
  } from 'antd';
  import Icon from '../Icon';
  
  class EditableCell extends React.Component {
    state = {
      value: this.props.value,
      editable: false
    }
    handleChange = (e) => {
      const value = e.target.value;
      this.setState({value});
    }
    check = () => {
      this.setState({editable: false});
      if (this.props.onChange) {
        this.props.onChange(this.state.value);
      }
    }
    edit = () => {
      this.setState({editable: true});
    }
    render() {
      const {value, editable} = this.state;
      return (
        <View className="editable-cell">
          {editable
            ? <View className="editable-cell-input-wrapper">
                <Input
                  value={value}
                  onChange={this.handleChange}
                  onPressEnter={this.check}
                  onBlur={this.check}/>
              </View>
            : <View className="editable-cell-text-wrapper" onClick={this.edit}>
              {value || ' '}
            </View>
  }
        </View>
      );
    }
  }
  
  class EditableTable extends React.Component {
    constructor(props) {
      super(props);
      this.columns = [
        {
          title: 'name',
          dataIndex: 'name',
          width: '30%',
          render: (text, record, index) => (<EditableCell value={text} onChange={this.onCellChange(index, 'name')}/>)
        }, {
          title: 'age',
          dataIndex: 'age'
        }, {
          title: 'address',
          dataIndex: 'address'
        }, {
          title: 'operation',
          dataIndex: 'operation',
          fixed: 'right',
          width: 180,
          render: this.renderOperation
        }
      ];
  
      this.state = {
        dataSource: [
          {
            key: '0',
            name: 'Edward King 0',
            age: '32',
            address: 'London, Park Lane no. 0'
          }, {
            key: '1',
            name: 'Edward King 1',
            age: '32',
            address: 'London, Park Lane no. 1'
          }
        ],
        count: 2
      };
    }
    onCellChange = (index, key) => {
      return (value) => {
        const dataSource = [...this.state.dataSource];
        dataSource[index][key] = value;
        this.setState({dataSource});
      };
    }
    onDelete = (index) => {
      const dataSource = [...this.state.dataSource];
      dataSource.splice(index, 1);
      this.setState({dataSource});
    }
    handleAdd = () => {
      const {count, dataSource} = this.state;
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`
      };
      this.setState({
        dataSource: [
          ...dataSource,
          newData
        ],
        count: count + 1
      });
    }
    renderOperation = (text, record, index) => {
      return (this.state.dataSource.length > 1
        ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(index)}>
            <a href="#">Delete</a>
          </Popconfirm>
        )
        : null);
    }
    render() {
      const {dataSource} = this.state;
      const columns = this.columns;
      return (
        <View>
          <Table
            bordered
            pagination={false}
            dataSource={dataSource}
            columns={columns}
            size="small"/>
          <Button className="editable-add-btn" onClick={this.handleAdd}>Add</Button>
        </View>
      );
    }
  }
  
  const FormItem = Form.Item;
  
  @Form.create()
  export class AdvForm extends React.Component {
    state = {
      expand: false
    };
  
    handleSave = (e) => {
      e.preventDefault();
      this.props.form.validateFields((err, values) => {
        console.log('Received values of form: ', values);
      });
    }
  
    handleReset = () => {
      this.props.form.resetFields();
    }
  
    toggle = () => {
      const {expand} = this.state;
      this.setState({
        expand: !expand
      });
    }
  
    // To generate mock Form.Item
    getHeaderFields() {
      const count = this.state.expand
        ? 10
        : 6;
      const {getFieldDecorator} = this.props.form;
      const formItemLayout = {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 19
        }
      };
      const children = [];
      for (let i = 0; i < 10; i++) {
        children.push(
          <Col
            span={8}
            key={i}
            style={{
            display: i < count
              ? 'block'
              : 'none'
          }}>
            <FormItem {...formItemLayout} label={`Field ${i}`}>
              {getFieldDecorator(`field-${i}`)(<Input placeholder="placeholder"/>)}
            </FormItem>
          </Col>
        );
      }
      return children;
    }
  
    getFooterFields() {
      const count = this.state.expand
        ? 10
        : 6;
      const {getFieldDecorator} = this.props.form;
      const formItemLayout = {
        labelCol: {
          span: 5
        },
        wrapperCol: {
          span: 19
        }
      };
      const children = [];
      for (let i = 0; i < 3; i++) {
        children.push(
          <Col
            span={8}
            key={i}
            style={{
            display: i < count
              ? 'block'
              : 'none'
          }}>
            <FormItem {...formItemLayout} label={`Field ${i}`}>
              {getFieldDecorator(`field-${i}`)(<Input placeholder="placeholder"/>)}
            </FormItem>
          </Col>
        );
      }
      return children;
    }
  
    handleButtonClick(e) {
      //this.handleSave();
      message.info('Click on left button.');
      console.log('click left button', e);
    }
  
    handleMenuClick(e) {
      message.info('Click on menu item.');
      console.log('click', e);
    }
  
    renderTotal() {
      return (
        <Col span={24} style={{
          textAlign: 'right'
        }}>总计：xxxx</Col>
      );
    }
  
    renderTitle() {
      return (
        <Row style={{
          textAlign: 'center'
        }}>{this.props.title}</Row>
      );
    }
  
    render() {
      return (
        <Form className="ant-advanced-search-form" onSubmit={this.handleSearch}>
          {this.renderTitle()}
          <Row >{this.getHeaderFields()}</Row>
          <Row>
            <EditableTable/>
          </Row>
          <Row >{this.getFooterFields()}</Row>
          <Row >{this.renderTotal()}</Row>
          <Row>
            <Col span={24} style={{
              textAlign: 'right'
            }}>
              <Button style={{
                marginLeft: 8
              }}>
                变更
              </Button>
              <Dropdown.Button
                style={{
                marginLeft: 8
              }}
                onClick={this.handleButtonClick}
                overlay={(
                <Menu onClick={this.handleMenuClick}>
                  <Menu.Item key="1">审核</Menu.Item>
                  <Menu.Item key="2">弃审</Menu.Item>
                </Menu>
              )}
                type="primary">
                审核
              </Dropdown.Button>
              <Dropdown.Button
                style={{
                marginLeft: 8
              }}
                onClick={this.handleButtonClick}
                overlay={(
                <Menu onClick={this.handleMenuClick}>
                  <Menu.Item key="1">保存</Menu.Item>
                  <Menu.Item key="2">保存新增</Menu.Item>
                  <Menu.Item key="3">保存为草稿</Menu.Item>
                </Menu>
              )}
                type="primary">
                保存
              </Dropdown.Button>
              <Button
                style={{
                marginLeft: 8
              }}
                onClick={this.handleReset}>
                放弃
              </Button>
  
            </Col>
          </Row>
        </Form>
      );
    }
  }
  