新增表格型输入组件TableInput。

package.json

@@ -29,6 +29,7 @@
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-json-view": "^1.11.4",
     "react-sizeme": "^2.3.4",
     "resolve-pathname": "^2.1.0",
     "uuid": "^3.1.0",

src/components/table/input-table/index.js

+import React, { Component } from 'react';
+import _ from 'lodash';
+import { Table, Button, Form } from 'antd';
+
+class TableInput extends Component {
+
+  constructor(props, context) {
+    super(props, context);
+    this.onAdd = this::this.onAdd;
+    this.onOk = this::this.onOk;
+    this.state = {
+      editing: false,
+      operation: 'none',
+    };
+  }
+
+  onAdd() {
+    this.setState({
+      editing: true,
+      operation: 'add',
+    });
+  }
+  onOk() {
+    const { value, items, form, onChange } = this.props;
+    const row = {};
+    _.castArray(items).forEach((item) => {
+      row[item.name] = form.getFieldValue(item.name);
+    });
+    if (this.state.operation === 'add') {
+      (onChange || _.noop)([...(value || []), row]);
+    }
+    this.setState({
+      editing: false,
+      operation: 'none',
+    });
+  }
+  makeColumns() {
+    const { items } = this.props;
+    return _.castArray(items)
+      .map((item) => {
+        return {
+          ...item,
+          title: item.label,
+          key: item.name,
+          dataIndex: item.name,
+        };
+      });
+  }
+  makeDataSource() {
+    const { value } = this.props;
+    return _.castArray(value || [])
+      .map((row, idx) => ({
+        ...row,
+        __key__: idx,
+      }));
+  }
+
+  render() {
+    const { items, form, children } = this.props;
+    if (this.state.editing) {
+      const fields = _.castArray(children)
+        .map((child, i) => {
+          const item = items[i];
+          return (
+            <Form.Item {...item}>
+              {
+                form.getFieldDecorator(item.name, item)(
+                  child,
+                )
+              }
+            </Form.Item>
+          );
+        },
+        this,
+      );
+      return (
+        <div>
+          {[
+            ...fields,
+            <Button onClick={this.onOk}>确定</Button>,
+          ]}
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <Button onClick={this.onAdd}>新增</Button>
+          <Table rowKey="__key__" dataSource={this.makeDataSource()} columns={this.makeColumns()} />
+        </div>
+      );
+    }
+  }
+}
+
+export default Form.create()(TableInput);

stories/index.js

@@ -2,11 +2,13 @@ import React from 'react';
 import { partial } from 'lodash';
 import { storiesOf } from '@storybook/react';
 
-import { DatePicker } from 'antd';
+import ReactJson from 'react-json-view'
+import { DatePicker, Form, Input, Modal } from 'antd';
 
 import dva from 'dva';
 import createLoading from 'dva-loading';
 import DsTable from '../src/components/table/dstable';
+import TableInput from '../src/components/table/input-table';
 
 import { makeCancelable } from '../src/utils/promise';
 import { login } from '../src/services/login';
@@ -14,6 +16,7 @@ import { switchDomain } from '../src/services/domain';
 import { getModuleConfigure } from '../src/services/modules';
 import { setCookie, setLocalStorge } from '../src/utils/helper';
 import { cookie, storage } from '../src/utils/config';
+import Button from "antd/es/button/button";
 
 const loginIt = async (userName, password, domainId) => {
   const result = await login({ userName, password });
@@ -89,3 +92,49 @@ storiesOf('antd', module)
   .add('RangePicker', () => {
     return <RangePicker />;
   });
+
+storiesOf('table-input', module)
+  .add('1', () => {
+    const Temp = ({ form }) => {
+      const props = {
+        items: [
+          {
+            name: 'item0',
+            label: 'test0',
+          },
+          {
+            name: 'item1',
+            label: 'test1',
+          },
+        ],
+      };
+      const handleSubmit = (e) => {
+        e.preventDefault();
+        form.validateFields((err, values) => {
+          if (!err) {
+            Modal.info({
+              title: '提交内容',
+              content: <ReactJson src={values} />,
+            });
+          }
+        });
+      };
+      return (
+        <Form onSubmit={handleSubmit}>
+          {
+            form.getFieldDecorator('table-input')(
+              <TableInput {...props}>
+                <Input />
+                <Input />
+              </TableInput>,
+            )
+          }
+          <Form.Item>
+            <Button htmlType="submit">提交</Button>
+          </Form.Item>
+        </Form>
+      );
+    };
+    const Example = Form.create()(Temp);
+    return <Example />;
+  });