Merge branch 'master' into lcj-demo-50x

2019-04-26 15:31:30 +08:00 · 2019-04-26 15:31:30 +08:00 · 77096c0272
parent 5a808c7d6e 28a5790996
commit 77096c0272
15 changed files with 137 additions and 274 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: "名字",
@ -501,6 +499,7 @@ class Demo0501 extends Component {
        <Table
          data={dataSource}
          columns={columns}
+          height={40}
          onRowHover={this.handleRowHover}
          hoverContent={this.renderRowHover}
        />
--- a/demo/demolist/Demo0501.scss
+++ b/demo/demolist/Demo0501.scss
@ -51,6 +51,9 @@
      display: block
    }
  }
+  .verify-cell {
+    padding-right: 25px !important;
+  }

  .required-icon {
    position: absolute;
--- 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
@ -704,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;
--- 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)。

 ## 如何使用
 ```
@ -70,9 +70,10 @@ import 'bee-table/build/Table.css';
 | height | 自定义表格行高 | number | - |
 | headerHeight | 自定义表头行高 | number | - |
 | size | 表格大小 | `sm | md | lg` | 'md' |
+| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
+| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
 | rowDraggAble  | 是否增加行交换顺序功能 | boolean| false

-
 > 快捷键部分参考示例 (快捷键在table中的简单使用应用)

 *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -105,8 +106,7 @@ import 'bee-table/build/Table.css';
 | filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
 | filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
 | textAlign | 内容对齐方式，默认是左对齐（'left、right、center'） | string |
-| headerDisplayInRow | 设置表头的内容显示一行，超出显示省略号 | bool |
-| bodyDisplayInRow |  设置表体的内容显示一行，超出显示省略号 | bool | 
+

 ## mixin