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

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"
   },
 ];

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}>
-        <div className={cls}>
+        <FormControl
-          <FormControl
+          {...getFieldProps("value", {
-            {...getFieldProps("value", {
+            initialValue: value,
-              initialValue: value,
+            validateTrigger: "onBlur",
-              validateTrigger: "onBlur",
+            rules: [
-              rules: [
+              {
-                {
+                required: true,
-                  required: true,
+                message: (
-                  message: (
+                  <Tooltip
-                    <Tooltip
+                    inverse
-                      inverse
+                    className="u-editable-table-tp"
-                      className="u-editable-table-tp"
+                    placement="bottom"
-                      placement="bottom"
+                    overlay={
-                      overlay={
+                      <div className="tp-content">
-                        <div className="tp-content">
+                        {"请输入" + props.colName}
-                          {"请输入" + props.colName}
+                      </div>
-                        </div>
+                    }
-                      }
+                  >
-                    >
+                    <Icon className="uf-exc-t required-icon" />
-                      <Icon className="uf-exc-t required-icon" />
+                  </Tooltip>
-                    </Tooltip>
+                )
-                  )
+              }
-                }
+            ]
-              ]
+          })}
-            })}
+        />
-          />
+        <span className="error">{getFieldError("value")}</span>
-          <span className="error">{getFieldError("value")}</span>
+      </div>
-        </div>
-      ) : (
-        <div className="editable-cell-text-wrapper">{value || " "}</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">
-          <div className="editable-cell-input-wrapper">
+          <Select value={this.props.value} onSelect={this.handleSelect}>
-            <Select value={this.props.value} onSelect={this.handleSelect}>
+            {SELECT_SOURCE.map((item, index) => (
-              {SELECT_SOURCE.map((item, index) => (
+              <Option key={index} value={item}>
-                <Option key={index} value={item}>
+                {item}
-                  {item}
+              </Option>
-                </Option>
+            ))}
-              ))}
+          </Select>
-            </Select>
+        </div>
-          </div>
-        ) : (
-          <div className="editable-cell-text-wrapper">{value || " "}</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}
         />

demo/demolist/Demo0501.scss

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

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}>
+                  <Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>
-                      <a href="javascript:;" tooltip={text} >
+                      <a href="javascript:;" >
                       一些操作
                       </a>
                   </Popconfirm>

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: "a", key: "a", width: 150, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];
 
 const data = [

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', 

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: "a", key: "a", width: 150, className: "rowClassName"},
-  { title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
+  { title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
-  { title: "性别", dataIndex: "c", key: "c", width: 500 },
+  { title: "性别", dataIndex: "c", key: "c", width: 100 },
-  { title: "部门", dataIndex: "d", key: "d", width: 200 }
+  { title: "部门", dataIndex: "d", key: "d", width: 100 }
 ];
 
 const data = [

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 {
+class Demo1107 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>
-  }
-
   render() {
     return (
         <Table
           columns={columns}
           data={data}
-          parentNodeId='parent'
-          hoverContent={this.getHoverContent}
-          onRowHover={this.onRowHover}
         />
     );
   }
 }
 
-export default Demo105;
+export default Demo1107;

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",

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;

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