p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
梁才军 2019-04-26 15:31:30 +08:00
parent 5a808c7d6e 28a5790996
commit 77096c0272
15 changed files with 137 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
demo/demolist/Demo0103.js
View File

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

27
demo/demolist/Demo0501.js
View File

@ -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,9 +27,9 @@ 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", {
@ -58,10 +58,9 @@ function PureStringEditCell(props) {
/>
<span className="error">{getFieldError("value")}</span>
</div>
) : (
<div className="editable-cell-text-wrapper">{value || " "}</div>
)}
</div>
) : (
value || " "
);
}
@ -78,9 +77,8 @@ 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) => (
@ -90,10 +88,9 @@ class SelectEditCell extends PureComponent {
))}
</Select>
</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}
/>

3
demo/demolist/Demo0501.scss
View File

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

4
demo/demolist/Demo0602.js
View File

@ -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>

8
demo/demolist/Demo1103.js
View File

@ -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 = [

13
demo/demolist/Demo1105.js
View File

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

8
demo/demolist/Demo1106.js
View File

@ -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 = [

48
demo/demolist/Demo1107.js
View File

@ -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;

2
demo/demolist/Demo1201.js
View File

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

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

3
dist/demo.css vendored
View File

@ -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;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

165
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
docs/api.md
View File

@ -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