Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
commit
2b0598e6ff
bee-table.rar
build
demo
TableDemo.scss
demolist
Demo0101.jsDemo0102.jsDemo0103.jsDemo0107.jsDemo0404.jsDemo0501.jsDemo0501.scssDemo0502.jsDemo0502.scssDemo0503.jsDemo0503.scssDemo0602.jsDemo0702.jsDemo1103.jsDemo1105.jsDemo1106.jsDemo1107.jsDemo1201.jsDemo1301.jsDemo1304.js
index.jsdist
docs
package.jsonsrc
Binary file not shown.
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
@ -162,9 +162,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
|
|
@ -33,9 +33,12 @@
|
|||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
border-color: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
border-color: #505F79;
|
||||
}
|
||||
}
|
|
@ -11,24 +11,7 @@ import {Button,Tooltip} from "tinper-bee";
|
|||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
|
@ -36,24 +19,12 @@ const columns = [
|
|||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容:' , this.currentRecord);
|
||||
}
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
|
@ -64,4 +35,4 @@ class Demo01 extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
||||
export default Demo0101;
|
||||
|
|
|
@ -9,9 +9,8 @@
|
|||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
|
||||
const columns02 = [
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
|
@ -31,7 +30,7 @@ const columns02 = [
|
|||
}
|
||||
];
|
||||
|
||||
const data02 = [];
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
@ -40,8 +39,8 @@ class Demo02 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns02}
|
||||
data={data02}
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果
|
||||
* @description 设置`scroll.y`指定滚动区域的高度,达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
|
@ -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"
|
||||
},
|
||||
];
|
||||
|
|
|
@ -0,0 +1,39 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
|
@ -77,7 +77,7 @@ class Demo33 extends Component {
|
|||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -0,0 +1,511 @@
|
|||
/**
|
||||
*
|
||||
* @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";
|
||||
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, editable, required } = props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("value")) cls += " verify-cell";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<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 || " "
|
||||
);
|
||||
}
|
||||
|
||||
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 } = this.props;
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<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 || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 } = this.props;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
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 Demo0501 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.editingRowsMap[index] || 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.editingRowsMap[index] || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.originData = {};
|
||||
}
|
||||
|
||||
edit = index => () => {
|
||||
if (index === null) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
editingRowsMap[index] = index.toString();
|
||||
this.originData[index] = { ...this.state.dataSource[index] };
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
abortEdit = index => () => {
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index] = this.originData[index];
|
||||
delete editingRowsMap[index];
|
||||
delete this.originData[index];
|
||||
this.setState({ editingRowsMap, dataSource });
|
||||
};
|
||||
|
||||
commitChange = index => () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.currentRecord = record;
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
renderRowHover = () => {
|
||||
const { currentIndex } = this.state;
|
||||
return this.state.editingRowsMap[currentIndex] ? (
|
||||
<div className={"opt-btns"}>
|
||||
<Button colors="dark" onClick={this.abortEdit(currentIndex)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.commitChange(currentIndex)}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className={"opt-btns"}>
|
||||
<Button colors="dark" onClick={this.edit(currentIndex)}>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0501 u-editable-table">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
height={40}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0501;
|
|
@ -0,0 +1,74 @@
|
|||
.demo0501 .u-table {
|
||||
.u-row-hover {
|
||||
.opt-btns {
|
||||
button {
|
||||
border-radius: 5px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
|
@ -18,6 +18,7 @@ class StringEditCell extends Component {
|
|||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
this.editWarp = React.createRef();
|
||||
}
|
||||
|
||||
commitChange = () => {
|
||||
|
@ -39,6 +40,7 @@ class StringEditCell extends Component {
|
|||
};
|
||||
|
||||
handleChange = e => {
|
||||
if (e.target.value === "") this.editWarp.className += " verify-cell";
|
||||
this.setState({ value: e.target.value });
|
||||
};
|
||||
|
||||
|
@ -47,7 +49,7 @@ class StringEditCell extends Component {
|
|||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
|
||||
<input
|
||||
className={value ? "u-form-control" : "u-form-control error"}
|
||||
autoFocus
|
||||
|
@ -60,10 +62,10 @@ class StringEditCell extends Component {
|
|||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="tp-0502"
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="help-tip">
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
|
@ -490,7 +492,7 @@ class Demo0502 extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo0502">
|
||||
<div className="demo0502 u-editable-table">
|
||||
<Table data={this.state.dataSource} columns={this.columns} />
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -1,21 +1,28 @@
|
|||
.demo0502 {
|
||||
.u-editable-table .u-table {
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input.error {
|
||||
input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
&.error {
|
||||
border-color: #F44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
line-height: 18px;
|
||||
border: 1px solid #c1c7d0;
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
|
@ -26,11 +33,14 @@
|
|||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
line-height: 18px;
|
||||
border: 1px solid #a5adba;
|
||||
}
|
||||
|
||||
.editable-cell-input-wrapper {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.require {
|
||||
|
@ -41,16 +51,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.help-tip {
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.tp-0502 {
|
||||
.tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-color: #F44336 !important;
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -6,10 +6,6 @@
|
|||
* demo0702
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||
|
||||
|
@ -17,8 +13,7 @@ import Table from '../../src';
|
|||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
const { Item } = Menu;
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
|
@ -106,37 +101,33 @@ class Demo27 extends Component {
|
|||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onClick = (item) => {
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
<Menu
|
||||
onSelect={this.onSelect}>
|
||||
<Item key="1">模态弹出</Item>
|
||||
<Item key="2">链接跳转</Item>
|
||||
<Item key="3">打开新页</Item>
|
||||
</Menu>);
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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 = [
|
||||
|
|
|
@ -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,40 +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> </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;
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description 拖拽改变行顺序
|
||||
* Demo1201
|
||||
*/
|
||||
|
@ -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",
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选表格
|
||||
* @title 多选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格单选,且选中行填充颜色
|
||||
* @parent 表格-单选-radio-行选中
|
||||
* @description 表格增加单选、radio 和背景色的示例。
|
||||
* @title 单选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 表格支持单选行操作,可自定义选中行背景色。
|
||||
* Demo1304
|
||||
*/
|
||||
|
||||
|
@ -11,8 +11,6 @@ import {Button,Tooltip,Radio} from "tinper-bee";
|
|||
|
||||
import Table from "../../src";
|
||||
|
||||
|
||||
|
||||
const data = [
|
||||
{ check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -146,7 +146,7 @@
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
@ -165,9 +165,9 @@
|
|||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #f7f7f7; }
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
.u-table-column-hidden {
|
||||
|
@ -622,6 +622,24 @@
|
|||
position: absolute;
|
||||
top: -1000px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper:focus {
|
||||
outline: none; }
|
||||
|
||||
.u-editable-table-tp .tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important; }
|
||||
|
||||
.u-editable-table-tp .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
|
||||
.selected {
|
||||
background: #FFF7E7; }
|
||||
|
||||
|
@ -631,10 +649,13 @@
|
|||
right: 15px; }
|
||||
|
||||
.opt-btns .u-button {
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79; }
|
||||
background: #505F79;
|
||||
border-color: #505F79; }
|
||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||
background: #344563; }
|
||||
background: #344563;
|
||||
border-color: #505F79; }
|
||||
|
||||
.demo04.u-table tr:nth-child(2n) {
|
||||
background: #f7f9fb; }
|
||||
|
@ -649,44 +670,137 @@
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
.demo0502 .u-table-row td {
|
||||
.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 {
|
||||
padding: 5px 8px; }
|
||||
.demo0502 .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
.demo0501 .u-table .u-table-row td input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px; }
|
||||
|
||||
.demo0502 .u-table-row .editable-cell {
|
||||
.demo0501 .u-table .u-table-row .u-form-control,
|
||||
.demo0501 .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0502 .u-table-row-hover .editable-cell-text-wrapper {
|
||||
line-height: 18px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
|
||||
.demo0502 .u-table-row .u-form-control,
|
||||
.demo0502 .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.demo0502 .editable-cell-text-wrapper {
|
||||
.demo0501 .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
.demo0502 .editable-cell-text-wrapper:hover {
|
||||
line-height: 18px;
|
||||
border: 1px solid #a5adba; }
|
||||
|
||||
.demo0502 .require {
|
||||
.demo0501 .u-table .required {
|
||||
margin-left: 10px;
|
||||
position: relative; }
|
||||
.demo0501 .u-table .required::before {
|
||||
content: " ";
|
||||
border: 2px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px; }
|
||||
.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;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.help-tip {
|
||||
.demo0501 .u-table .ref-input-wrap {
|
||||
width: 160px !important; }
|
||||
|
||||
.u-editable-table-tp .tp-content {
|
||||
color: #F44336; }
|
||||
|
||||
.tp-0502 .tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important; }
|
||||
.u-editable-table .u-table .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.u-editable-table .u-table .u-table-row td input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px; }
|
||||
.u-editable-table .u-table .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
|
||||
.tp-0502 .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
.u-editable-table .u-table .u-table-row .editable-cell {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
line-height: 19px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row .u-form-control,
|
||||
.u-editable-table .u-table .u-table-row .u-select-selection {
|
||||
height: 30px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper {
|
||||
padding-right: 0; }
|
||||
|
||||
.u-editable-table .u-table .verify-cell {
|
||||
padding-right: 25px !important; }
|
||||
|
||||
.u-editable-table .u-table .require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.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;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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
|
||||
|
||||
|
|
16
package.json
16
package.json
|
@ -48,19 +48,21 @@
|
|||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"bee-datepicker": "^2.0.28",
|
||||
"bee-dropdown": "^2.0.4",
|
||||
"bee-form-control": "latest",
|
||||
"bee-icon": "latest",
|
||||
"bee-input-number": "^2.0.5",
|
||||
"bee-loading": "^1.0.6",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^2.0.2",
|
||||
"bee-select": "^2.0.9",
|
||||
"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",
|
||||
|
|
|
@ -270,7 +270,7 @@ $icon-color:#505F79;
|
|||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
line-height: 14px;
|
||||
border: 1px solid $table-border-color;
|
||||
user-select: none;
|
||||
background: #fff;
|
||||
|
@ -297,9 +297,9 @@ $icon-color:#505F79;
|
|||
}
|
||||
}
|
||||
tr.u-table-expanded-row {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
background: #DFE1E6;
|
||||
}
|
||||
.u-table {
|
||||
// padding: 0 40px 0 20px;
|
||||
|
@ -532,7 +532,7 @@ $icon-color:#505F79;
|
|||
&-pop-cont{
|
||||
margin: 0px;
|
||||
max-height: 300px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
color:#212121;
|
||||
}
|
||||
&-clear-setting{
|
||||
|
@ -971,3 +971,36 @@ $icon-color:#505F79;
|
|||
position: absolute;
|
||||
top:-1000px;
|
||||
}
|
||||
|
||||
.u-editable-table .u-table {
|
||||
.u-table-row-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
&:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-input-wrapper {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important;
|
||||
}
|
||||
|
||||
.tooltip-inner {
|
||||
border-color: #F44336 !important;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue