merge
This commit is contained in:
izbz wh
commit
e0eeb9a327
|
|
@ -239,12 +239,8 @@ function filterColumn(Table, Popover) {
|
|||
_react2["default"].createElement(
|
||||
_beeCheckbox2["default"],
|
||||
paramObj,
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
null,
|
||||
da.title
|
||||
)
|
||||
)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 横向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x的取值可以是：正整数(自动转为相应的像素值)、百分比（相对于表格真实宽度的百分比，大于100%时会出现滚动条）、布尔值。y的取值是正整数。
|
||||
* demo0201
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Checkbox} from "tinper-bee";
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
let ComplexTable = multiSelect(sum(Table), Checkbox);
|
||||
|
||||
let _sum = 0;
|
||||
const columns = [
|
||||
{
|
||||
title: "单据编号",
|
||||
|
|
@ -81,6 +81,8 @@ function getData(){
|
|||
total: i + Math.floor(Math.random()*10),
|
||||
money: 20 * Math.floor(Math.random()*10)
|
||||
});
|
||||
_sum += data[i].total;
|
||||
_sum += data[i].money;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
|
@ -90,32 +92,20 @@ class Demo35 extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData()
|
||||
data: getData(),
|
||||
sum:_sum
|
||||
};
|
||||
}
|
||||
|
||||
changeData = ()=>{
|
||||
this.setState({
|
||||
data: getData()
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
footer={currentData => <div>总计: {_sum}</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,307 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @parent 编辑 Editor
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
* demo0501
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
const InputRender = renderInput(Form, FormControl, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo41 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "普通输入",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="number"
|
||||
placeholder="请输入货币"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "number")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "复选",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
size="sm"
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo41;
|
||||
|
|
@ -1,13 +1,15 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格编辑
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）
|
||||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Icon, Select, Tooltip } from "tinper-bee";
|
||||
import { Icon, Select, Tooltip, Form } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
|
|
@ -47,7 +49,7 @@ class StringEditCell extends Component {
|
|||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<input
|
||||
className="u-form-control"
|
||||
className={value ? "u-form-control" : "u-form-control error"}
|
||||
autoFocus
|
||||
defaultValue={this.props.value}
|
||||
value={value}
|
||||
|
|
@ -58,7 +60,7 @@ class StringEditCell extends Component {
|
|||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="tp-501"
|
||||
className="tp-0502"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="help-tip">
|
||||
|
|
@ -80,7 +82,7 @@ class StringEditCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["xx供应商", "yy供应商", "zz供应商", "aa供应商", "bb供应商"];
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
|
|
@ -91,9 +93,9 @@ class SelectEditCell extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
handleSelect = (value) => {
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
}
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
|
|
@ -136,45 +138,340 @@ class SelectEditCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
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 Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
value: this.props.value.d,
|
||||
editable: false
|
||||
};
|
||||
this.refWarp = React.createRef();
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true }, () => this.refWarp.focus());
|
||||
};
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
onRefBlur = e => {
|
||||
// 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用
|
||||
const __REF_CONTENT__ = document.querySelector("div.ref-core-modal");
|
||||
if (!__REF_CONTENT__ && e.target === this.refWarp) {
|
||||
this.commitChange();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, editable } = this.state;
|
||||
return editable ? (
|
||||
<div
|
||||
ref={el => (this.refWarp = el)}
|
||||
className="editable-cell-input-wrapper"
|
||||
tabIndex={-1}
|
||||
onBlur={this.onRefBlur}
|
||||
>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("code1", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: "请输入请选择",
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className="error"
|
||||
style={{ display: "block", color: "#f53c32" }}
|
||||
>
|
||||
{getFieldError("code1")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value.name || " "}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const dataSource = [
|
||||
{ name: "NU03910001", quality: "xx供应商", level: 70, key: "1" },
|
||||
{ name: "NU03910002", quality: "yy供应商", level: 75, key: "2" },
|
||||
{ name: "NU03910003", quality: "zz供应商", level: 50, key: "3" },
|
||||
{ name: "NU03910004", quality: "aa供应商", level: 70, key: "4" },
|
||||
{ name: "NU03910005", quality: "bb供应商", level: 60, key: "5" }
|
||||
{
|
||||
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 Demo501 extends Component {
|
||||
class Demo0502 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName="名字"
|
||||
value={text}
|
||||
colName={"订单编号"}
|
||||
onChange={this.onCellChange(index, "name")}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "quality",
|
||||
key: "quality",
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "quality")}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "采购数量",
|
||||
dataIndex: "level",
|
||||
key: "level"
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
value={record}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -193,11 +490,11 @@ class Demo501 extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo501">
|
||||
<div className="demo0502">
|
||||
<Table data={this.state.dataSource} columns={this.columns} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo501;
|
||||
export default Demo0502;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,42 @@
|
|||
.demo501 {
|
||||
.demo0502 {
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input.error {
|
||||
border-color: #F44336;
|
||||
}
|
||||
}
|
||||
.editable-cell {
|
||||
height: 30px;
|
||||
}
|
||||
&-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
line-height: 18px;
|
||||
border: 1px solid #c1c7d0;
|
||||
}
|
||||
}
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
|
||||
&:hover {
|
||||
border: 1px dashed #A5ADBA;
|
||||
line-height: 18px;
|
||||
border: 1px solid #a5adba;
|
||||
}
|
||||
}
|
||||
|
||||
.require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: red;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +45,7 @@
|
|||
color: #F44336;
|
||||
}
|
||||
|
||||
.tp-501 {
|
||||
.tp-0502 {
|
||||
.tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,28 +13,26 @@ import dragColumn from '../../src/lib/dragColumn';
|
|||
|
||||
const columns23 = [
|
||||
{
|
||||
title: "名字",
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
|
|
@ -42,13 +40,9 @@ const columns23 = [
|
|||
];
|
||||
|
||||
const data23 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商",d:'Tom', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商",d:'Jack', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商",d:'Jane', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
|
|
|||
|
|
@ -27,9 +27,9 @@ const columns16 = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const columns17 = [
|
||||
|
|
@ -48,16 +48,16 @@ const columns17 = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
|
||||
|
|
@ -86,15 +86,15 @@ class Demo16 extends Component {
|
|||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
{ a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
|
||||
{ a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
|
||||
{ a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
|
|
|
|||
|
|
@ -13,19 +13,19 @@ import Table from '../../src';
|
|||
|
||||
const columns4 = [
|
||||
{
|
||||
title: "Name",
|
||||
title: "订单编号",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
title: "单据日期",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
title: "供应商",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
|
|
@ -34,53 +34,53 @@ const columns4 = [
|
|||
const data4 = [
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
name: "NU0391001",
|
||||
age: "2019-03-01",
|
||||
address: "供应商1",
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: "John Brown",
|
||||
age: 42,
|
||||
address: "New York No. 2 Lake Park"
|
||||
name: "NU0391002",
|
||||
age: "2019-03-02",
|
||||
address: "供应商2"
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: "John Brown jr.",
|
||||
age: 30,
|
||||
address: "New York No. 3 Lake Park",
|
||||
name: "NU0391003",
|
||||
age: "2019-03-03",
|
||||
address: "供应商3",
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: "Jimmy Brown",
|
||||
age: 16,
|
||||
address: "New York No. 3 Lake Park"
|
||||
name: "NU0391004",
|
||||
age: "2019-03-04",
|
||||
address: "供应商4"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
name: "Jim Green sr.",
|
||||
age: 72,
|
||||
address: "London No. 1 Lake Park",
|
||||
name: "NU0391005",
|
||||
age: "2019-03-05",
|
||||
address: "供应商5",
|
||||
children: [
|
||||
{
|
||||
key: 131,
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 2 Lake Park",
|
||||
name: "NU0391006",
|
||||
age: "2019-03-06",
|
||||
address: "供应商6",
|
||||
children: [
|
||||
{
|
||||
key: 1311,
|
||||
name: "Jim Green jr.",
|
||||
age: 25,
|
||||
address: "London No. 3 Lake Park"
|
||||
name: "NU0391007",
|
||||
age: "2019-03-07",
|
||||
address: "供应商7"
|
||||
},
|
||||
{
|
||||
key: 1312,
|
||||
name: "Jimmy Green sr.",
|
||||
age: 18,
|
||||
address: "London No. 4 Lake Park"
|
||||
name: "NU0391008",
|
||||
age: "2019-03-08",
|
||||
address: "供应商8"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -90,9 +90,9 @@ const data4 = [
|
|||
},
|
||||
{
|
||||
key: 2,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park"
|
||||
name: "NU0391009",
|
||||
age: "2019-03-09",
|
||||
address: "供应商9"
|
||||
}
|
||||
];
|
||||
class Demo4 extends Component {
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ class Demo8 extends Component {
|
|||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
noBorder={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @parent 搜索 search
|
||||
* @description 搜索刷新表格数据
|
||||
* demo1602
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Icon,FormControl,InputGroup} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
class Search extends Component {
|
||||
state = {
|
||||
searchValue: "",
|
||||
empty: false
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch = () => {
|
||||
let { onSearch } = this.props;
|
||||
this.setState({
|
||||
empty: true
|
||||
});
|
||||
onSearch && onSearch(this.state.searchValue);
|
||||
};
|
||||
|
||||
/**
|
||||
* 捕获回车
|
||||
* @param e
|
||||
*/
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
{this.state.empty ? (
|
||||
<Icon
|
||||
type="uf-close-c"
|
||||
onClick={this.emptySearch}
|
||||
className="empty-search"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<InputGroup.Button onClick={this.handleSearch} shape="border">
|
||||
<Icon type="uf-search" />
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 }
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: userData
|
||||
};
|
||||
}
|
||||
|
||||
handleSearch = value => {
|
||||
if (value === "") {
|
||||
return this.setState({
|
||||
data: userData
|
||||
});
|
||||
}
|
||||
let regExp = new RegExp(value, "ig");
|
||||
let data = userData.filter(item => regExp.test(item.a));
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
handleEmpty = () => {
|
||||
this.setState({
|
||||
data: userData
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="clearfix">
|
||||
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
|
||||
</div>
|
||||
<Table columns={columns} data={this.state.data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo9;
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
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
|
|
@ -88,6 +88,7 @@
|
|||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"ref-tree": "^2.0.1-beta.1",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -110,7 +110,7 @@ export default function filterColumn(Table, Popover) {
|
|||
>
|
||||
<Checkbox {...paramObj}>
|
||||
|
||||
<span>{da.title}</span>
|
||||
{da.title}
|
||||
</Checkbox>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue