全表编辑

demo/demolist/Demo0501.js

@@ -435,6 +435,7 @@ class Demo0501 extends Component {
     if (index === null) return;
     let editingRowsMap = { ...this.state.editingRowsMap };
     editingRowsMap[index] = index.toString();
+    // 最好使用深复制
     this.originData[index] = { ...this.state.dataSource[index] };
     this.setState({ editingRowsMap });
   };
@@ -475,7 +476,11 @@ class Demo0501 extends Component {
     const { currentIndex } = this.state;
     return this.state.editingRowsMap[currentIndex] ? (
       <div className={"opt-btns"}>
-        <Button colors="dark" onClick={this.abortEdit(currentIndex)}>
+        <Button
+          colors="dark"
+          className="btn-abort"
+          onClick={this.abortEdit(currentIndex)}
+        >
           取消
         </Button>
         <Button colors="primary" onClick={this.commitChange(currentIndex)}>

demo/demolist/Demo0501.scss

@@ -7,6 +7,14 @@
         &:first-child {
           margin-right: 10px;
         }
+
+        &.btn-abort {
+          background-color: #fff;
+          color: rgb(70, 83, 105);
+          &:hover {
+            background-color: #eff0f3;
+          }
+        }
       }
     }
   }

demo/demolist/Demo0503.js

@@ -398,7 +398,8 @@ class EditModal extends Component {
         </Modal.Body>
         <Modal.Footer style={{textAlign: "center"}}>
           <Button
-            colors="secondary"
+            colors="dark"
+            className="btn-abort"
             style={{ marginRight: 15 }}
             onClick={onHide}
           >

demo/demolist/Demo0503.scss

@@ -1,7 +1,18 @@
 .demo0503-m-b {
+  button {
+    &.btn-abort {
+      background-color: #fff;
+      color: rgb(70, 83, 105);
+      &:hover {
+        background-color: #eff0f3 !important;
+      }
+    }
+  }
+
   .u-form-group {
     overflow: hidden;
   }
+
   .u-form-control {
     font-size: 12px;
   }
@@ -28,6 +39,7 @@
     height: 32px;
     line-height: 32px;
   }
+
   .required {
     &::before {
       content: "*";
@@ -38,6 +50,7 @@
       font-size: 18px;
     }
   }
+
   .required-icon {
     position: absolute;
     top: 2px;
@@ -48,6 +61,7 @@
 
 .u-editable-table-tp {
   z-index: 9999 !important;
+
   .tp-content {
     color: #F44336;
   }

demo/demolist/Demo0505.js

@@ -0,0 +1,505 @@
+/**
+ *
+ * @title 行编辑 - 行内编辑
+ * @parent 编辑 Editor
+ * @description 可以对行进行编辑的表格
+ * demo0505
+ */
+import React, { Component, PureComponent } from "react";
+import Table from "../../src";
+import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
+const Option = Select.Option;
+import { RefTreeWithInput } from "ref-tree";
+
+class StringEditCell extends PureComponent {
+  constructor(props, context) {
+    super(props);
+  }
+
+  handleChange = value => {
+    const { onChange, throwError } = this.props;
+    if (value === "") {
+      throwError && throwError(true);
+    } else {
+      throwError && throwError(false);
+    }
+    onChange && onChange(value);
+  };
+
+  render() {
+    const { value, editable, required, colName, isEdited } = this.props;
+    let cls = "editable-cell-input-wrapper";
+    if (required) cls += " required";
+    if (value === "") cls += " verify-cell";
+    if (isEdited) cls += " edited";
+    return editable ? (
+      <div className="editable-cell">
+        <div className={cls}>
+          <FormControl value={value} onChange={this.handleChange} />
+          <span className="error">
+            {value === "" ? (
+              <Tooltip
+                inverse
+                className="u-editable-table-tp"
+                placement="bottom"
+                overlay={<div className="tp-content">{"请输入" + colName}</div>}
+              >
+                <Icon className="uf-exc-t required-icon" />
+              </Tooltip>
+            ) : null}
+          </span>
+        </div>
+      </div>
+    ) : (
+      value || " "
+    );
+  }
+}
+
+const SELECT_SOURCE = ["男", "女"];
+
+class SelectEditCell extends PureComponent {
+  constructor(props, context) {
+    super(props);
+  }
+
+  handleSelect = value => {
+    this.props.onChange && this.props.onChange(value);
+  };
+
+  render() {
+    const { value, editable, isEdited } = this.props;
+    let cls = "editable-cell-input-wrapper";
+    if (isEdited) cls += " edited";
+    return editable ? (
+      <div className="editable-cell">
+        <div className={cls}>
+          <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
+                {item}
+              </Option>
+            ))}
+          </Select>
+        </div>
+      </div>
+    ) : (
+      value || " "
+    );
+  }
+}
+
+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 => {
+      this.props.onChange && this.props.onChange(values[0]);
+    };
+
+    render() {
+      const { getFieldProps, getFieldError } = this.props.form;
+      const { value, editable, required, isEdited } = this.props;
+      let cls = "editable-cell-input-wrapper";
+      if (required) cls += " required";
+      if (getFieldError("refValue")) cls += " verify-cell";
+      if (isEdited) cls += " edited";
+      return editable ? (
+        <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>
+      ) : (
+        value.name || " "
+      );
+    }
+  }
+);
+
+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 Demo0505 extends Component {
+  constructor(props, context) {
+    super(props);
+    this.columns = [
+      {
+        title: "员工编号",
+        dataIndex: "a",
+        key: "a"
+      },
+      {
+        title: "名字",
+        dataIndex: "b",
+        key: "b",
+        render: (text, record, index) => (
+          <StringEditCell
+            colName={"名字"}
+            editable={this.state.isEditingAll}
+            isEdited={record.isEdited.b || false}
+            required
+            value={text}
+            onChange={this.onCellChange(index, "b")}
+            throwError={this.throwError}
+          />
+        )
+      },
+      {
+        title: "性别",
+        dataIndex: "c",
+        key: "c",
+        width: 100,
+        render: (text, record, index) => (
+          <SelectEditCell
+            editable={this.state.isEditingAll}
+            isEdited={record.isEdited.c || false}
+            value={text}
+            onChange={this.onCellChange(index, "c")}
+          />
+        )
+      },
+      {
+        title: "部门",
+        dataIndex: "d",
+        key: "d",
+        width: 215,
+        render: (text, record, index) => (
+          <RefEditCell
+            colName={"部门"}
+            editable={this.state.isEditingAll}
+            isEdited={record.isEdited.d || false}
+            required
+            value={record.d}
+            onChange={this.onCellChange(index, "d")}
+            throwError={this.throwError}
+          />
+        )
+      },
+      // 只是用来占位占宽度的
+      {
+        key: "placeholder"
+      }
+    ];
+
+    // 用于记录数据是否被修改
+    dataSource.forEach(item => item.isEdited = {});
+    this.state = {
+      dataSource: dataSource,
+      isEditingAll: false,
+      currentIndex: null,
+      errorEditFlag: false
+    };
+
+    // 用于记录编辑前数据
+    this.originData = [];
+  }
+
+  edit = () => {
+    this.originData = [];
+    // 最好使用深复制
+    this.state.dataSource.forEach(item => this.originData.push({ ...item }));
+    this.setState({ isEditingAll: true });
+  };
+
+  abortEdit = () => {
+    this.originData.forEach(item => item.isEdited = {});
+    this.setState({
+      isEditingAll: false,
+      dataSource: [...this.originData]
+    });
+  };
+
+  commitChange = () => {
+    if (this.state.errorEditFlag) return;
+    let dataSource = [...this.state.dataSource];
+    dataSource.forEach(item => item.isEdited = {});
+    this.setState({ isEditingAll: false });
+  };
+
+  onCellChange = (index, key) => value => {
+    let dataSource = [...this.state.dataSource];
+    dataSource[index][key] = value;
+    dataSource[index].isEdited[key] = true;
+    this.setState({ dataSource }, () => console.table(this.originData));
+  };
+
+  throwError = isError => {
+    if (isError !== this.state.errorEditFlag)
+      this.setState({ errorEditFlag: isError });
+  };
+
+  setEditedRowClass = (record, index, indent) => {
+    if (Object.keys(record.isEdited).length > 0) return "u-row-select";
+    return "";
+  }
+
+  render() {
+    const { dataSource, isEditingAll } = this.state;
+    const columns = this.columns;
+    return (
+      <div className="demo0505 u-editable-table">
+        <div className="opt-btns">
+          {isEditingAll ? (
+            <React.Fragment>
+              <Button
+                colors="dark"
+                className="btn-abort"
+                onClick={this.abortEdit}
+              >
+                取消
+              </Button>
+              <Button colors="primary" onClick={this.commitChange}>
+                确认
+              </Button>
+            </React.Fragment>
+          ) : (
+            <Button colors="dark" onClick={this.edit}>
+              编辑全表
+            </Button>
+          )}
+        </div>
+        <Table data={dataSource} columns={columns} height={40} rowClassName={this.setEditedRowClass} />
+      </div>
+    );
+  }
+}
+
+export default Demo0505;

demo/demolist/Demo0505.scss

@@ -0,0 +1,100 @@
+.demo0505 {
+
+  .opt-btns {
+    margin-bottom: 15px;
+
+    button {
+      border-radius: 5px;
+
+      &:first-child {
+        margin-right: 10px;
+      }
+
+      &.btn-abort {
+        background-color: #fff;
+        color: rgb(70, 83, 105);
+        &:hover {
+          background-color: #eff0f3;
+        }
+      }
+    }
+  }
+
+  .u-table {
+    .u-row-select {
+      background-color: #FFF7E7;
+    }
+    .u-table-row {
+      td {
+        padding: 5px 8px;
+
+        input {
+          font-size: 12px;
+          padding-left: 5px;
+        }
+      }
+
+      .u-form-control,
+      .u-select-selection {
+        height: 30px;
+      }
+    }
+
+    .editable-cell-text-wrapper {
+      box-sizing: border-box;
+      line-height: 20px;
+      border-radius: 3px;
+    }
+
+    .required {
+      margin-left: 10px;
+      position: relative;
+
+      &::before {
+        content: " ";
+        border: 2px solid #F44336;
+        width: 0;
+        height: 12px;
+        position: absolute;
+        top: 9px;
+        left: -8px;
+      }
+
+      span.u-input-group {
+        display: block
+      }
+    }
+
+    .verify-cell {
+      padding-right: 25px !important;
+    }
+
+    .edited::after {
+      content: " ";
+      position: absolute;
+      z-index: 999;
+      top: 0;
+      left: 0;
+      border-width: 5px;
+      border-style: solid;
+      border-color: #f44336 transparent transparent #f44336;
+    }
+
+    .required-icon {
+      position: absolute;
+      top: 2px;
+      color: #F44336;
+      font-size: 20px;
+    }
+
+    .ref-input-wrap {
+      width: 160px !important;
+    }
+  }
+}
+
+.u-editable-table-tp {
+  .tp-content {
+    color: #F44336;
+  }
+}

dist/demo.css

@@ -674,6 +674,11 @@
   border-radius: 5px; }
   .demo0501 .u-table .u-row-hover .opt-btns button:first-child {
     margin-right: 10px; }
+  .demo0501 .u-table .u-row-hover .opt-btns button.btn-abort {
+    background-color: #fff;
+    color: #465369; }
+    .demo0501 .u-table .u-row-hover .opt-btns button.btn-abort:hover {
+      background-color: #eff0f3; }
 
 .demo0501 .u-table .u-table-row td {
   padding: 5px 8px; }
@@ -757,6 +762,12 @@
 .u-editable-table-tp .tp-content {
   color: #F44336; }
 
+.demo0503-m-b button.btn-abort {
+  background-color: #fff;
+  color: #465369; }
+  .demo0503-m-b button.btn-abort:hover {
+    background-color: #eff0f3 !important; }
+
 .demo0503-m-b .u-form-group {
   overflow: hidden; }
 
@@ -802,6 +813,75 @@
   .u-editable-table-tp .tp-content {
     color: #F44336; }
 
+.demo0505 .opt-btns {
+  margin-bottom: 15px; }
+  .demo0505 .opt-btns button {
+    border-radius: 5px; }
+    .demo0505 .opt-btns button:first-child {
+      margin-right: 10px; }
+    .demo0505 .opt-btns button.btn-abort {
+      background-color: #fff;
+      color: #465369; }
+      .demo0505 .opt-btns button.btn-abort:hover {
+        background-color: #eff0f3; }
+
+.demo0505 .u-table .u-row-select {
+  background-color: #FFF7E7; }
+
+.demo0505 .u-table .u-table-row td {
+  padding: 5px 8px; }
+  .demo0505 .u-table .u-table-row td input {
+    font-size: 12px;
+    padding-left: 5px; }
+
+.demo0505 .u-table .u-table-row .u-form-control,
+.demo0505 .u-table .u-table-row .u-select-selection {
+  height: 30px; }
+
+.demo0505 .u-table .editable-cell-text-wrapper {
+  box-sizing: border-box;
+  line-height: 20px;
+  border-radius: 3px; }
+
+.demo0505 .u-table .required {
+  margin-left: 10px;
+  position: relative; }
+  .demo0505 .u-table .required::before {
+    content: " ";
+    border: 2px solid #F44336;
+    width: 0;
+    height: 12px;
+    position: absolute;
+    top: 9px;
+    left: -8px; }
+  .demo0505 .u-table .required span.u-input-group {
+    display: block; }
+
+.demo0505 .u-table .verify-cell {
+  padding-right: 25px !important; }
+
+.demo0505 .u-table .edited::after {
+  content: " ";
+  position: absolute;
+  z-index: 999;
+  top: 0;
+  left: 0;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #f44336 transparent transparent #f44336; }
+
+.demo0505 .u-table .required-icon {
+  position: absolute;
+  top: 2px;
+  color: #F44336;
+  font-size: 20px; }
+
+.demo0505 .u-table .ref-input-wrap {
+  width: 160px !important; }
+
+.u-editable-table-tp .tp-content {
+  color: #F44336; }
+
 th .drop-menu .uf {
   font-size: 12px;
   visibility: hidden;