Merge branch 'master' of github.com:tinper-bee/bee-table

2019-04-26 15:43:14 +08:00 · 2019-04-26 15:43:14 +08:00 · 06a26d1170
parent 497606ced7 b46ed21a4f
commit 06a26d1170
18 changed files with 5360 additions and 3178 deletions
--- a/demo/demolist/Demo0103.js
+++ b/demo/demolist/Demo0103.js
@ -54,24 +54,6 @@ const columns03 = [
      dataIndex: "voucherDate",
      key: "voucherDate",
      width: 200,
-  },
-  {
-      title: "审批状态",
-      dataIndex: "approvalState_name",
-      key: "approvalState_name",
-      width: 200
-  },
-  {
-      title: "确认状态",
-      dataIndex: "confirmState_name",
-      key: "confirmState_name",
-       width: 200
-  }, 
-  {
-      title: "关闭状态",
-      dataIndex: "closeState_name",
-      key: "closeState_name",
-      width: 100
  }
 ];

@ -83,9 +65,6 @@ const data03 = [
    purchasing:'组织c', 
    purchasingGroup:"aa",
    voucherDate:"2018年03月18日",
-    approvalState_name:"已审批",
-    confirmState_name:"执行中",
-    closeState_name:"未关闭",
    key: "1"
  }, 
  { 
@ -95,9 +74,6 @@ const data03 = [
    purchasing:'组织a', 
    purchasingGroup:"bb",
    voucherDate:"2018年02月05日",
-    approvalState_name:"已审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "2"
  },
  { 
@ -107,9 +83,6 @@ const data03 = [
    purchasing:'组织b', 
    purchasingGroup:"aa",
    voucherDate:"2018年07月01日",
-    approvalState_name:"已审批",
-    confirmState_name:"终止",
-    closeState_name:"已关闭",
    key: "3"
  },
  { 
@ -119,9 +92,6 @@ const data03 = [
    purchasing:'组织c', 
    purchasingGroup:"cc",
    voucherDate:"2019年03月01日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "4"
  },
  { 
@ -131,9 +101,6 @@ const data03 = [
    purchasing:'组织d', 
    purchasingGroup:"ss",
    voucherDate:"2019年02月14日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "5"
  },
  { 
@ -143,9 +110,6 @@ const data03 = [
    purchasing:'组织e', 
    purchasingGroup:"zz",
    voucherDate:"2019年02月18日",
-    approvalState_name:"已审批",
-    confirmState_name:"终止",
-    closeState_name:"已关闭",
    key: "6"
  },
  { 
@ -155,9 +119,6 @@ const data03 = [
    purchasing:'组织f', 
    purchasingGroup:"qq",
    voucherDate:"2019年01月01日",
-    approvalState_name:"已审批",
-    confirmState_name:"执行中",
-    closeState_name:"未关闭",
    key: "7"
  },
  { 
@ -167,9 +128,6 @@ const data03 = [
    purchasing:'组织g', 
    purchasingGroup:"pp",
    voucherDate:"2019年01月31日",
-    approvalState_name:"未审批",
-    confirmState_name:"待确认",
-    closeState_name:"未关闭",
    key: "8"
  },
 ];
--- a/demo/demolist/Demo0501.js
+++ b/demo/demolist/Demo0501.js
@ -3,11 +3,11 @@
 * @title 行编辑 - 行内编辑
 * @parent 编辑 Editor
 * @description 可以对行进行编辑的表格
- *
+ * demo0501
 */
 import React, { Component, PureComponent } from "react";
 import Table from "../../src";
-import { Select,Form,FormControl,Button,Icon,Tooltip } from "tinper-bee";
+import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
 const Option = Select.Option;
 import { RefTreeWithInput } from "ref-tree";

@ -27,41 +27,40 @@ function PureStringEditCell(props) {
  const { value, editable, required } = props;
  let cls = "editable-cell-input-wrapper";
  if (required) cls += " required";
-  return (
+  if (getFieldError("value")) cls += " verify-cell";
+  return editable ? (
    <div className="editable-cell">
-      {editable ? (
-        <div className={cls}>
-          <FormControl
-            {...getFieldProps("value", {
-              initialValue: value,
-              validateTrigger: "onBlur",
-              rules: [
-                {
-                  required: true,
-                  message: (
-                    <Tooltip
-                      inverse
-                      className="u-editable-table-tp"
-                      placement="bottom"
-                      overlay={
-                        <div className="tp-content">
-                          {"请输入" + props.colName}
-                        </div>
-                      }
-                    >
-                      <Icon className="uf-exc-t required-icon" />
-                    </Tooltip>
-                  )
-                }
-              ]
-            })}
-          />
-          <span className="error">{getFieldError("value")}</span>
-        </div>
-      ) : (
-        <div className="editable-cell-text-wrapper">{value || " "}</div>
-      )}
+      <div className={cls}>
+        <FormControl
+          {...getFieldProps("value", {
+            initialValue: value,
+            validateTrigger: "onBlur",
+            rules: [
+              {
+                required: true,
+                message: (
+                  <Tooltip
+                    inverse
+                    className="u-editable-table-tp"
+                    placement="bottom"
+                    overlay={
+                      <div className="tp-content">
+                        {"请输入" + props.colName}
+                      </div>
+                    }
+                  >
+                    <Icon className="uf-exc-t required-icon" />
+                  </Tooltip>
+                )
+              }
+            ]
+          })}
+        />
+        <span className="error">{getFieldError("value")}</span>
+      </div>
    </div>
+  ) : (
+    value || " "
  );
 }

@ -78,22 +77,20 @@ class SelectEditCell extends PureComponent {

  render() {
    const { value, editable } = this.props;
-    return (
+    return editable ? (
      <div className="editable-cell">
-        {editable ? (
-          <div className="editable-cell-input-wrapper">
-            <Select value={this.props.value} onSelect={this.handleSelect}>
-              {SELECT_SOURCE.map((item, index) => (
-                <Option key={index} value={item}>
-                  {item}
-                </Option>
-              ))}
-            </Select>
-          </div>
-        ) : (
-          <div className="editable-cell-text-wrapper">{value || " "}</div>
-        )}
+        <div className="editable-cell-input-wrapper">
+          <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
+        </div>
      </div>
+    ) : (
+      value || " "
    );
  }
 }
@ -269,6 +266,7 @@ const RefEditCell = Form.createForm()(
      const { value, editable, required } = this.props;
      let cls = "editable-cell-input-wrapper";
      if (required) cls += " required";
+      if (getFieldError("refValue")) cls += " verify-cell";
      return editable ? (
        <div className={cls}>
          <RefTreeWithInput
@ -301,7 +299,7 @@ const RefEditCell = Form.createForm()(
          <span className="error">{getFieldError("refValue")}</span>
        </div>
      ) : (
-        <div className="editable-cell-text-wrapper">{value.name || " "}</div>
+        value.name || " "
      );
    }
  }
@ -371,7 +369,7 @@ class Demo0501 extends Component {
      {
        title: "员工编号",
        dataIndex: "a",
-        key: "a",
+        key: "a"
      },
      {
        title: "名字",
@ -497,10 +495,11 @@ class Demo0501 extends Component {
    const { dataSource } = this.state;
    const columns = this.columns;
    return (
-      <div className="demo0501">
+      <div className="demo0501 u-editable-table">
        <Table
          data={dataSource}
          columns={columns}
+          height={40}
          onRowHover={this.handleRowHover}
          hoverContent={this.renderRowHover}
        />
--- a/demo/demolist/Demo0501.scss
+++ b/demo/demolist/Demo0501.scss
@ -31,7 +31,6 @@
    box-sizing: border-box;
    line-height: 20px;
    border-radius: 3px;
-    padding-left: 0
  }

  .required {
@ -52,6 +51,9 @@
      display: block
    }
  }
+  .verify-cell {
+    padding-right: 25px !important;
+  }

  .required-icon {
    position: absolute;
--- a/demo/demolist/Demo0503.js
+++ b/demo/demolist/Demo0503.js
@ -0,0 +1,575 @@
+/**
+ *
+ * @title 行编辑 - 弹框编辑
+ * @parent 编辑 Editor
+ * @description 以弹框形式以对行进行编辑的表格
+ * demo0503
+ */
+
+import React, { Component, PureComponent } from "react";
+import Table from "../../src";
+import {
+  Select, Form, FormControl, Button, Icon,
+  Tooltip, Modal, FormGroup, Label, Row, Col
+} from "tinper-bee";
+const Option = Select.Option;
+import { RefTreeWithInput } from "ref-tree";
+
+function handleFormValueChange(WarpCompProps, field, allFields) {
+  const { onChange, throwError } = WarpCompProps;
+  if (field.value === "") return throwError && throwError(true);
+  throwError && throwError(false);
+  onChange && onChange(field.value);
+}
+
+const StringEditCell = Form.createForm({
+  onValuesChange: handleFormValueChange
+})(PureStringEditCell);
+
+function PureStringEditCell(props) {
+  const { getFieldProps, getFieldError } = props.form;
+  const { value, required } = props;
+  let cls = "editable-cell";
+  if (required) cls += " required";
+  return (
+    <div className={cls}>
+      <FormControl
+        {...getFieldProps("value", {
+          initialValue: value,
+          validateTrigger: "onBlur",
+          rules: [
+            {
+              required: true,
+              message: (
+                <Tooltip
+                  inverse
+                  className="u-editable-table-tp"
+                  placement="bottom"
+                  overlay={
+                    <div className="tp-content">
+                      {"请输入" + props.colName}
+                    </div>
+                  }
+                >
+                  <Icon className="uf-exc-t required-icon" />
+                </Tooltip>
+              )
+            }
+          ]
+        })}
+      />
+      <span className="error">{getFieldError("value")}</span>
+    </div>
+  );
+}
+
+const SELECT_SOURCE = ["男", "女"];
+
+class SelectEditCell extends PureComponent {
+  constructor(props, context) {
+    super(props);
+  }
+
+  handleSelect = value => {
+    this.props.onChange && this.props.onChange(value);
+  };
+
+  render() {
+    return (
+      <div className="editable-cell">
+          <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
+      </div>
+    );
+  }
+}
+
+const option = {
+  title: "树",
+  searchable: true,
+  multiple: false,
+  param: {
+    refCode: "neworganizition_tree"
+  },
+  checkStrictly: true,
+  disabled: false,
+  nodeDisplay: record => {
+    return record.refname;
+  },
+  displayField: record => {
+    return record.refname;
+  }, //显示内容的键
+  valueField: "refpk", //真实 value 的键
+  refModelUrl: {
+    treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
+    treeUrl: "/pap_basedoc/common-ref/blobRefTree"
+  },
+  matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
+  filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
+  lazyModal: false,
+  strictMode: true,
+  lang: "zh_CN",
+  treeData: [
+    {
+      code: "org1",
+      children: [
+        {
+          code: "bj",
+          entityType: "mainEntity",
+          name: "北京总部-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "bj",
+          refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
+          id: "5305416e-e7b4-4051-90bd-12d12942295b",
+          isLeaf: "true",
+          refname: "北京总部-简"
+        },
+        {
+          code: "xd",
+          entityType: "mainEntity",
+          name: "新道-简",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "xd",
+          refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
+          isLeaf: "true",
+          refname: "新道-简"
+        },
+        {
+          code: "yy3",
+          entityType: "mainEntity",
+          name: "test3",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy3",
+          refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
+          isLeaf: "true",
+          refname: "test3"
+        },
+        {
+          code: "yy1",
+          entityType: "mainEntity",
+          name: "test1",
+          pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          refcode: "yy1",
+          refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
+          isLeaf: "true",
+          refname: "test1"
+        },
+        {
+          code: "dept2",
+          children: [
+            {
+              code: "cs",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "测试部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "cs",
+              refpk: "cc43a66a-438d-4106-937f-bec44406f771",
+              id: "cc43a66a-438d-4106-937f-bec44406f771",
+              isLeaf: "true",
+              refname: "测试部-简"
+            },
+            {
+              code: "qd",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "前端部-简",
+              pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+              refcode: "qd",
+              refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
+              isLeaf: "true",
+              refname: "前端部-简"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "生产处",
+          refcode: "dept2",
+          refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
+          refname: "生产处"
+        },
+        {
+          code: "dept1",
+          children: [
+            {
+              code: "dept1_2",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务二科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_2",
+              refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+              isLeaf: "true",
+              refname: "财务二科"
+            },
+            {
+              code: "dept1_1",
+              entityType: "subEntity",
+              organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+              name: "财务一科",
+              pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+              refcode: "dept1_1",
+              refpk: "9711d912-3184-4063-90c5-1facc727813c",
+              id: "9711d912-3184-4063-90c5-1facc727813c",
+              isLeaf: "true",
+              refname: "财务一科"
+            }
+          ],
+          entityType: "subEntity",
+          organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+          name: "财务处",
+          refcode: "dept1",
+          refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+          refname: "财务处"
+        }
+      ],
+      entityType: "mainEntity",
+      name: "用友集团",
+      refcode: "org1",
+      refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      refname: "用友集团"
+    }
+  ]
+};
+
+const RefEditCell = Form.createForm()(
+  class RefComponentWarpper extends PureComponent {
+    constructor(props, context) {
+      super(props);
+    }
+
+    handleSelect = values => {
+      const { form, throwError, onChange } = this.props
+      if (form.getFieldError("refValue")) return throwError && throwError(true);
+      throwError && throwError(false);
+      onChange && onChange(values[0]);
+    };
+
+    render() {
+      const { getFieldProps, getFieldError } = this.props.form;
+      const { value, required } = this.props;
+      let cls = "editable-cell";
+      if (required) cls += " required";
+      return (
+        <div className={cls}>
+          <RefTreeWithInput
+            {...option}
+            onSave={this.handleSelect}
+            getRefTreeData={this.getRefTreeData}
+            {...getFieldProps("refValue", {
+              initialValue: JSON.stringify(value),
+              rules: [
+                {
+                  message: (
+                    <Tooltip
+                      inverse
+                      className="u-editable-table-tp"
+                      placement="bottom"
+                      overlay={
+                        <div className="tp-content">
+                          {"请输入" + this.props.colName}
+                        </div>
+                      }
+                    >
+                      <Icon className="uf-exc-t required-icon" />
+                    </Tooltip>
+                  ),
+                  pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
+                }
+              ]
+            })}
+          />
+          <span className="error">{getFieldError("refValue")}</span>
+        </div>
+      );
+    }
+  }
+);
+
+class EditModal extends Component {
+  constructor(props, context) {
+    super(props);
+    this.state = {
+      data: this.props.data,
+      errorEditFlag: false
+    };
+
+    // 属性名对应 columns 属性中的 key 值
+    this.renderElm = {
+      b: (record, index) => (
+        <StringEditCell
+          colName={"名字"}
+          required={true}
+          value={record.b}
+          onChange={this.onFieldChange("b")}
+          throwError={this.throwError}
+        />
+      ),
+
+      c: (record, index) => (
+        <SelectEditCell
+          value={record.c}
+          onChange={this.onFieldChange("c")}
+        />
+      ),
+      d: (record, index) => (
+        <RefEditCell
+          colName={"部门"}
+          required={true}
+          value={record.d}
+          onChange={this.onFieldChange("d")}
+          throwError={this.throwError}
+        />
+      )
+    }
+  }
+
+  onFieldChange = field => value => {
+    let data = { ...this.state.data };
+    data[field] = value;
+    this.setState({ data });
+  }
+
+  submitChange = () => {
+    if (this.state.errorEditFlag) return;
+    const { onSubmit, onHide, currentIndex } = this.props;
+    onSubmit && onSubmit(this.state.data, currentIndex);
+    onHide && onHide();
+  }
+
+  throwError = isError => {
+    if (isError !== this.state.errorEditFlag)
+      this.setState({ errorEditFlag: isError });
+  };
+
+  render() {
+    const { show, onHide, columns, currentIndex } = this.props;
+    const { data } = this.state;
+    return (
+      <Modal
+        show={show}
+        onHide={onHide}
+        style={{ width: 700 }}
+        className="demo0503-m-b"
+      >
+        <Modal.Header closeButton>
+          <Modal.Title>编辑行</Modal.Title>
+        </Modal.Header>
+        <Modal.Body >
+          <Row style={{ width: 660, margin: "0 auto" }}>
+            {
+              columns.map((item, index) => {
+                return (
+                  <Col sm={6} md={6} lg={6} style={{ padding: 0 }} key={index}>
+                    <FormGroup>
+                      <Label>{item.title}</Label>
+                      {this.renderElm[item.key] &&
+                        this.renderElm[item.key](
+                          data,
+                          currentIndex
+                        )}
+                      {!this.renderElm[item.key] && (
+                        <div className="editable-cell">
+                          <FormControl
+                            defaultValue={data[item.dataIndex]}
+                            disabled={true}
+                          />
+                        </div>
+                      )}
+                    </FormGroup>
+                  </Col>
+                );
+              })
+            }
+          </Row>
+        </Modal.Body>
+        <Modal.Footer style={{textAlign: "center"}}>
+          <Button
+            colors="secondary"
+            style={{ marginRight: 15 }}
+            onClick={onHide}
+          >
+            取消
+          </Button>
+          <Button colors="primary" onClick={this.submitChange}>
+            确认
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    );
+  }
+}
+
+let dataSource = [
+  {
+    a: "ASVAL_201903280005",
+    b: "小张",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "1"
+  },
+  {
+    a: "ASVAL_201903200004",
+    b: "小明",
+    c: "男",
+    d: {
+      code: "dept1_2",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务二科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_2",
+      refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
+      isLeaf: "true",
+      refname: "财务二科"
+    },
+    key: "2"
+  },
+  {
+    a: "ASVAL_201903120002",
+    b: "小红",
+    c: "女",
+    d: {
+      code: "dept1_1",
+      entityType: "subEntity",
+      organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
+      name: "财务一科",
+      pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
+      refcode: "dept1_1",
+      refpk: "9711d912-3184-4063-90c5-1facc727813c",
+      id: "9711d912-3184-4063-90c5-1facc727813c",
+      isLeaf: "true",
+      refname: "财务一科"
+    },
+    key: "3"
+  }
+];
+
+class Demo0503 extends Component {
+  constructor(props, context) {
+    super(props);
+    // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应
+    this.columns = [
+      {
+        title: "员工编号",
+        dataIndex: "a",
+        key: "a"
+      },
+      {
+        title: "名字",
+        dataIndex: "b",
+        key: "b"
+      },
+      {
+        title: "性别",
+        dataIndex: "c",
+        key: "c",
+        width: 100
+      },
+      {
+        title: "部门",
+        dataIndex: "d",
+        key: "d",
+        width: 215,
+        render: (text, record, index) => record.d.name
+      }
+    ];
+
+    this.state = {
+      dataSource: dataSource,
+      isEditing: false,
+      currentIndex: null
+    };
+  }
+
+  edit = () => {
+    if (this.state.currentIndex === null) return;
+    this.setState({ isEditing: true });
+  };
+
+  abortEdit = () => {
+    this.setState({ isEditing: false });
+  };
+
+  commitChange = (editedRowData, rowIndex) => {
+    console.log(editedRowData)
+    console.log(rowIndex)
+    let dataSource = [...this.state.dataSource];
+    dataSource[rowIndex] = editedRowData;
+    this.setState({ dataSource });
+  };
+
+  handleRowHover = (index, record) => {
+    this.setState({ currentIndex: index });
+  };
+
+  hideEditModal = () => {
+    this.setState({ isEditing: false });
+  }
+
+  renderRowHover = () => {
+    return (
+      <div className={"opt-btns"}>
+        <Button colors="dark" onClick={this.edit}>
+          编辑
+        </Button>
+      </div>
+    );
+  };
+
+
+  render() {
+    const { dataSource, isEditing, currentIndex } = this.state;
+    const columns = this.columns;
+    return (
+      <div className="demo0503 u-editable-table">
+        <Table
+          data={dataSource}
+          columns={columns}
+          height={40}
+          onRowHover={this.handleRowHover}
+          hoverContent={this.renderRowHover}
+        />
+        {
+          isEditing ? (
+            <EditModal
+              show={isEditing}
+              onHide={this.hideEditModal}
+              columns={columns}
+              data={dataSource[currentIndex]}
+              onSubmit={this.commitChange}
+              currentIndex={currentIndex}
+            />
+          ) : null
+        }
+      </div>
+    );
+  }
+}
+
+export default Demo0503;
--- a/demo/demolist/Demo0503.scss
+++ b/demo/demolist/Demo0503.scss
@ -0,0 +1,54 @@
+.demo0503-m-b {
+  .u-form-group {
+    overflow: hidden;
+  }
+  .u-form-control {
+    font-size: 12px;
+  }
+
+  .u-modal-title {
+    text-align: center;
+  }
+
+  .editable-cell {
+    display: block;
+    float: left;
+    width: 220px;
+    padding-right: 25px;
+  }
+
+  .u-label {
+    display: block;
+    float: left;
+    text-align: right;
+    width: 110px;
+    box-sizing: border-box;
+    padding-right: 10px;
+    font-size: 12px;
+    height: 32px;
+    line-height: 32px;
+  }
+  .required {
+    &::before {
+      content: "*";
+      position: absolute;
+      top: 9px;
+      left: -9px;
+      color: red;
+      font-size: 18px;
+    }
+  }
+  .required-icon {
+    position: absolute;
+    top: 2px;
+    color: #F44336;
+    font-size: 20px;
+  }
+}
+
+.u-editable-table-tp {
+  z-index: 9999 !important;
+  .tp-content {
+    color: #F44336;
+  }
+}
--- a/demo/demolist/Demo0602.js
+++ b/demo/demolist/Demo0602.js
@ -84,8 +84,8 @@ const columns = [
        render(text, record, index) {
            return (
                <div className='operation-btn'>
-                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
-                      <a href="javascript:;" tooltip={text} >
+                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>
+                      <a href="javascript:;" >
                      一些操作
                      </a>
                  </Popconfirm>
--- a/demo/demolist/Demo1103.js
+++ b/demo/demolist/Demo1103.js
@ -12,10 +12,10 @@ import {Button,Tooltip,} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];

 const data = [
--- a/demo/demolist/Demo1105.js
+++ b/demo/demolist/Demo1105.js
@ -16,7 +16,12 @@ const columns = [
    { title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
    { title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
    { title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
-    { title: "单据状态", dataIndex: "status", key: "status", width: 100 },
+    { title: "单据状态", dataIndex: "status", key: "status", width: 100, 
+      render: (text, record, index) => {
+        return (
+          <Tag colors={text.type}>{text.desc}</Tag>
+        );
+    }},
    { title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
    { title: "单位", dataIndex: "unit", key: "unit", width: 100 },
    { title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
@ -29,7 +34,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年03月18日', 
        quantity: '100.00', 
-        status: '错误', 
+        status: {type:'success' ,desc:'正常'}, 
        submitter: '小张', 
        unit: 'pc', 
        sum:'8,487.00', 
@ -41,7 +46,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年02月05日', 
        quantity: '91.00', 
-        status: '正常', 
+        status: {type:'danger' ,desc:'异常'}, 
        submitter: '小红', 
        unit: 'pc', 
        sum:'675.00', 
@ -53,7 +58,7 @@ const data = [
        supplier: "xx供应商", 
        orderDate: '2018年07月01日', 
        quantity: '98.00', 
-        status: '异常', 
+        status: {type:'success' ,desc:'正常'}, 
        submitter: '小李', 
        unit: 'pc', 
        sum:'1,531.00', 
--- a/demo/demolist/Demo1106.js
+++ b/demo/demolist/Demo1106.js
@ -11,10 +11,10 @@ import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";

 const columns = [
-  { title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];

 const data = [
--- a/demo/demolist/Demo1107.js
+++ b/demo/demolist/Demo1107.js
@ -20,6 +20,14 @@ const columns = [
            return index + 1;
        }
    },
+    {
+        title: "图样",
+        dataIndex: "picture",
+        key: "picture",
+        render(text, record, index) {
+            return <img style={{height:'50px'}} src={text} alt="Picture"/>
+        }
+    },
    {
        title: "组织部门",
        dataIndex: "orgDept",
@ -55,14 +63,6 @@ const columns = [
        dataIndex: "repairTime",
        key: "repairTime",
        width: 150,
-    },
-    {
-        title: "图样",
-        dataIndex: "picture",
-        key: "picture",
-        render(text, record, index) {
-            return <img style={{height:'50px'}} src={text} alt="Picture"/>
-        }
    }
 ];

@ -72,43 +72,15 @@ const data = [
  { key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
 ];

-class Demo105 extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      data: data,
-      selectedRowIndex: 0
-    }
-  }
-  handleClick = () => {
-    console.log('这是第' , this.currentIndex , '行');
-    console.log('内容：' , this.currentRecord);
-  }
-
-  onRowHover=(index,record)=>{
-    this.currentIndex = index;
-    this.currentRecord = record;
-  }
-
-  getHoverContent=()=>{
-    return <div className="opt-btns">
-            <Button size="sm" onClick={this.handleClick}>编辑</Button> 
-            <Button size="sm" onClick={this.handleClick}>删除</Button> 
-           </div>
-  }
-
+class Demo1107 extends Component {
  render() {
    return (
        <Table
          columns={columns}
          data={data}
-          parentNodeId='parent'
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
        />
    );
  }
 }

-export default Demo105;
+export default Demo1107;
--- a/demo/demolist/Demo1201.js
+++ b/demo/demolist/Demo1201.js
@ -18,7 +18,7 @@ const columns = [
      return (
        <Tooltip inverse overlay={text}>
          <span tootip={text} style={{
-            display: "inline-block",
+            display: "block",
            width: "80px",
            textOverflow: "ellipsis",
            overflow: "hidden",
--- a/demo/index.js
+++ b/demo/index.js
--- a/dist/demo.css
+++ b/dist/demo.css
@ -670,16 +670,12 @@
  padding-top: 0px;
  padding-bottom: 0px; }

-<<<<<<< HEAD
 .demo0501 .u-table .u-row-hover .opt-btns button {
  border-radius: 5px; }
  .demo0501 .u-table .u-row-hover .opt-btns button:first-child {
    margin-right: 10px; }

 .demo0501 .u-table .u-table-row td {
-=======
-.demo0502 .u-table-row td {
->>>>>>> master
  padding: 5px 8px; }
  .demo0501 .u-table .u-table-row td input {
    font-size: 12px;
@ -692,8 +688,7 @@
 .demo0501 .u-table .editable-cell-text-wrapper {
  box-sizing: border-box;
  line-height: 20px;
-  border-radius: 3px;
-  padding-left: 0; }
+  border-radius: 3px; }

 .demo0501 .u-table .required {
  margin-left: 10px;
@ -709,6 +704,9 @@
  .demo0501 .u-table .required span.u-input-group {
    display: block; }

+.demo0501 .u-table .verify-cell {
+  padding-right: 25px !important; }
+
 .demo0501 .u-table .required-icon {
  position: absolute;
  top: 2px;
@ -759,6 +757,51 @@
 .u-editable-table-tp .tp-content {
  color: #F44336; }

+.demo0503-m-b .u-form-group {
+  overflow: hidden; }
+
+.demo0503-m-b .u-form-control {
+  font-size: 12px; }
+
+.demo0503-m-b .u-modal-title {
+  text-align: center; }
+
+.demo0503-m-b .editable-cell {
+  display: block;
+  float: left;
+  width: 220px;
+  padding-right: 25px; }
+
+.demo0503-m-b .u-label {
+  display: block;
+  float: left;
+  text-align: right;
+  width: 110px;
+  box-sizing: border-box;
+  padding-right: 10px;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px; }
+
+.demo0503-m-b .required::before {
+  content: "*";
+  position: absolute;
+  top: 9px;
+  left: -9px;
+  color: red;
+  font-size: 18px; }
+
+.demo0503-m-b .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.u-editable-table-tp {
+  z-index: 9999 !important; }
+  .u-editable-table-tp .tp-content {
+    color: #F44336; }
+
 th .drop-menu .uf {
  font-size: 12px;
  visibility: hidden;
--- a/dist/demo.css.map
+++ b/dist/demo.css.map
--- a/dist/demo.js
+++ b/dist/demo.js
--- a/dist/demo.js.map
+++ b/dist/demo.js.map
--- a/docs/api.md
+++ b/docs/api.md
@ -3,7 +3,7 @@
 ## 何时使用
 - 当有大量结构化的数据需要展现时；
 - Table组件拥有多种可自由组合使用的功能，包括：大数据渲染、拖拽列、过滤列、排序、多选、分页、自定义操作、合计、搜索等复杂行为；
- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](http://design.yonyoucloud.com/tinper-bee/bee-complex-grid)。
+- 当需要复杂表格展示数据的时候，推荐使用开箱即用的[Grid组件](https://design.yonyoucloud.com/tinper-acs/ac-complex-grid)。

 ## 如何使用
 ```
--- a/package.json
+++ b/package.json
@ -1,96 +1,97 @@
 {
- "name": "bee-table",
- "version": "2.0.15",
- "description": "Table ui component for react",
- "keywords": [
-  "react",
-  "react-component",
-  "bee-table",
-  "iuap-design",
-  "tinper-bee",
-  "Table"
- ],
- "engines": {
-  "node": ">=6.0.0"
- },
- "jest": {
-  "moduleFileExtensions": [
-   "js",
-   "jsx"
+  "name": "bee-table",
+  "version": "2.0.15",
+  "description": "Table ui component for react",
+  "keywords": [
+    "react",
+    "react-component",
+    "bee-table",
+    "iuap-design",
+    "tinper-bee",
+    "Table"
  ],
-  "transform": {
-   "^.+\\.js$": "babel-jest"
+  "engines": {
+    "node": ">=6.0.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "jsx"
+    ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    }
+  },
+  "homepage": "https://github.com/tinper-bee/bee-table.git",
+  "author": "Yonyou FED",
+  "repository": "http://github.com/tinper-bee/bee-table",
+  "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
+  "license": "MIT",
+  "main": "./build/index.js",
+  "config": {
+    "port": 3000,
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
+  "scripts": {
+    "dev": "bee-tools run start",
+    "build": "bee-tools run build",
+    "lint": "bee-tools run lint",
+    "test": "jest",
+    "chrome": "bee-tools run chrome",
+    "coveralls": "jest",
+    "browsers": "bee-tools run browsers",
+    "pub": "bee-tools run pub",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
+  },
+  "dependencies": {
+    "bee-button": "latest",
+    "bee-checkbox": "latest",
+    "bee-datepicker": "^2.0.28",
+    "bee-dropdown": "^2.0.4",
+    "bee-form-control": "latest",
+    "bee-icon": "latest",
+    "bee-input-number": "^2.0.7",
+    "bee-loading": "^1.0.9",
+    "bee-locale": "0.0.13",
+    "bee-menus": "^2.0.6",
+    "bee-radio": "^2.0.8",
+    "bee-select": "^2.0.11",
+    "classnames": "^2.2.5",
+    "component-classes": "^1.2.6",
+    "lodash.clonedeep": "^4.5.0",
+    "object-path": "^0.11.3",
+    "ref-tree": "^2.0.1-beta.1",
+    "shallowequal": "^1.0.2",
+    "throttle-debounce": "^2.0.1",
+    "tinper-bee-core": "latest",
+    "warning": "^3.0.0"
+  },
+  "peerDependencies": {
+    "react": "^15.3.0 || ^16.0",
+    "react-dom": "^15.3.0 || ^16.0",
+    "prop-types": "^15.6.0"
+  },
+  "devDependencies": {
+    "babel-jest": "^22.0.4",
+    "bee-clipboard": "^2.0.0",
+    "bee-drawer": "0.0.2",
+    "bee-layout": "latest",
+    "bee-pagination": "^2.0.5",
+    "bee-panel": "latest",
+    "bee-popover": "^2.0.0",
+    "chai": "^3.5.0",
+    "console-polyfill": "~0.2.1",
+    "cz-conventional-changelog": "^2.1.0",
+    "enzyme": "^2.9.1",
+    "es5-shim": "~4.1.10",
+    "jest": "^22.0.4",
+    "react": "^16.6.3",
+    "react-addons-test-utils": "^15.5.0",
+    "react-dom": "^16.6.3",
+    "ref-tree": "^2.0.1-beta.1",
+    "reqwest": "^2.0.5",
+    "tinper-bee": "latest"
  }
- },
- "homepage": "https://github.com/tinper-bee/bee-table.git",
- "author": "Yonyou FED",
- "repository": "http://github.com/tinper-bee/bee-table",
- "bugs": "https://github.com/tinper-bee/bee-table.git/issues",
- "license": "MIT",
- "main": "./build/index.js",
- "config": {
-  "port": 3000,
-  "commitizen": {
-   "path": "./node_modules/cz-conventional-changelog"
-  }
- },
- "scripts": {
-  "dev": "bee-tools run start",
-  "build": "bee-tools run build",
-  "lint": "bee-tools run lint",
-  "test": "jest",
-  "chrome": "bee-tools run chrome",
-  "coveralls": "jest",
-  "browsers": "bee-tools run browsers",
-  "pub": "bee-tools run pub",
-  "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
- },
- "dependencies": {
-  "bee-button": "latest",
-  "bee-checkbox": "latest",
-  "bee-datepicker": "^2.0.28",
-  "bee-dropdown": "^2.0.4",
-  "bee-form-control": "latest",
-  "bee-icon": "latest",
-  "bee-input-number": "^2.0.7",
-  "bee-loading": "^1.0.9",
-  "bee-locale": "0.0.13",
-  "bee-menus": "^2.0.6",
-  "bee-radio": "^2.0.8",
-  "bee-select": "^2.0.11",
-  "classnames": "^2.2.5",
-  "component-classes": "^1.2.6",
-  "lodash.clonedeep": "^4.5.0",
-  "object-path": "^0.11.3",
-  "shallowequal": "^1.0.2",
-  "throttle-debounce": "^2.0.1",
-  "tinper-bee-core": "latest",
-  "warning": "^3.0.0"
- },
- "peerDependencies": {
-  "react": "^15.3.0 || ^16.0",
-  "react-dom": "^15.3.0 || ^16.0",
-  "prop-types": "^15.6.0"
- },
- "devDependencies": {
-  "babel-jest": "^22.0.4",
-  "bee-clipboard": "^2.0.0",
-  "bee-drawer": "0.0.2",
-  "bee-layout": "latest",
-  "bee-pagination": "^2.0.5",
-  "bee-panel": "latest",
-  "bee-popover": "^2.0.0",
-  "chai": "^3.5.0",
-  "console-polyfill": "~0.2.1",
-  "cz-conventional-changelog": "^2.1.0",
-  "enzyme": "^2.9.1",
-  "es5-shim": "~4.1.10",
-  "jest": "^22.0.4",
-  "react": "^16.6.3",
-  "react-addons-test-utils": "^15.5.0",
-  "react-dom": "^16.6.3",
-  "ref-tree": "^2.0.1-beta.1",
-  "reqwest": "^2.0.5",
-  "tinper-bee": "latest"
- }
 }