修改单元格编辑
This commit is contained in:
梁才军
parent
22ae3b1ff6
commit
ba45d5cd34
|
|
@ -1,307 +1,170 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @parent 编辑 Editor
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
*
|
||||
* @title 行编辑
|
||||
* @description 可以对行进行编辑的表格
|
||||
*
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
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";
|
||||
import { Button, FormControl } from "tinper-bee";
|
||||
|
||||
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) {
|
||||
class EditableCell extends Component {
|
||||
constructor(props, context) {
|
||||
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
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
this.setState({ value });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(value);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
<div className="editable-cell-input-wrapper">
|
||||
{this.props.editable ? (
|
||||
<FormControl
|
||||
value={this.state.value}
|
||||
onChange={this.handleChange}
|
||||
/>
|
||||
) : (
|
||||
this.state.value || " "
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let dataSource = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
for (let i = 4; i < 10; i++) {
|
||||
dataSource.push({
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: "财务一科",
|
||||
key: i + ""
|
||||
});
|
||||
}
|
||||
|
||||
class Demo0501 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "普通输入",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "150px",
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
<EditableCell
|
||||
editable={this.state.editingRows.indexOf(index) > -1}
|
||||
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>
|
||||
}
|
||||
onChange={this.onCellChange(index, "quality")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="number"
|
||||
placeholder="请输入货币"
|
||||
<EditableCell
|
||||
editable={this.state.editingRows.indexOf(index) > -1}
|
||||
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]+$/}
|
||||
onChange={this.onCellChange(index, "level")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
titile: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render: (text, record, index) => text
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRows: []
|
||||
};
|
||||
|
||||
this.dataBuffer = {};
|
||||
this.currentIndex = null;
|
||||
this.currentRecord = null;
|
||||
this.__OPTS_BTN_GROUP__ = null;
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
|
||||
createBtn = (text, props, event) => {
|
||||
let btn = document.createElement("button");
|
||||
btn.innerText = text;
|
||||
for (let pKey in props) {
|
||||
btn.setAttribute(pKey, props[pKey]);
|
||||
}
|
||||
for (let eKey in event) {
|
||||
btn.addEventListener(eKey, event[eKey]);
|
||||
}
|
||||
return btn;
|
||||
};
|
||||
|
||||
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
|
||||
});
|
||||
edit = index => () => {
|
||||
if (index === null) return;
|
||||
let editingRows = [...this.state.editingRows];
|
||||
editingRows.push(index);
|
||||
this.dataBuffer[index] = Object.assign({}, dataSource[index]);
|
||||
this.setState({ editingRows });
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
abortEdit = () => {
|
||||
let editingRows = [...this.state.editingRows];
|
||||
editingRows.splice(index, 1);
|
||||
delete this.dataBuffer[index];
|
||||
this.setState({ editingRows });
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
|
||||
commitChange = index => () => {
|
||||
let editingRows = [...this.state.editingRows];
|
||||
let dataSource = [...this.state.dataSource];
|
||||
editingRows.splice(editingRows.indexOf(index), 1);
|
||||
dataSource[index] = this.dataBuffer[index];
|
||||
delete this.dataBuffer[index];
|
||||
this.setState({ editingRows, dataSource });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
this.dataBuffer[index][key] = value;
|
||||
};
|
||||
|
||||
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>
|
||||
<div className="demo0501">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo41;
|
||||
export default Demo0501;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
.demo0501 {
|
||||
.u-table-row {
|
||||
height: 58px;
|
||||
}
|
||||
.u-row-hover {
|
||||
.opt-btns {
|
||||
button {
|
||||
border-radius: 5px;
|
||||
&:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格编辑
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）
|
||||
*
|
||||
*/
|
||||
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 +48,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 +59,7 @@ class StringEditCell extends Component {
|
|||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="tp-501"
|
||||
className="tp-0502"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="help-tip">
|
||||
|
|
@ -80,7 +81,7 @@ class StringEditCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
|
|
@ -91,9 +92,9 @@ class SelectEditCell extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
handleSelect = (value) => {
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
}
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
|
|
@ -136,45 +137,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: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
|
||||
{ name: "绝命", quality: "太古传奇", level: 70, key: "2" },
|
||||
{ name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
|
||||
{ name: "虹光", quality: "传奇", level: 70, key: "4" },
|
||||
{ name: "复仇者护腕", quality: "传奇", level: 70, 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 +489,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;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -9880,22 +9880,51 @@ ul {
|
|||
padding-top: 0px;
|
||||
padding-bottom: 0px; }
|
||||
|
||||
.demo501 .editable-cell-text-wrapper:hover {
|
||||
border: 1px dashed #A5ADBA; }
|
||||
.demo0501 .u-table-row {
|
||||
height: 58px; }
|
||||
|
||||
.demo501 .require {
|
||||
.demo0501 .u-row-hover .opt-btns button {
|
||||
border-radius: 5px; }
|
||||
.demo0501 .u-row-hover .opt-btns button:first-child {
|
||||
margin-right: 10px; }
|
||||
|
||||
.demo0502 .u-table-row td {
|
||||
padding: 5px 8px; }
|
||||
.demo0502 .u-table-row td input.error {
|
||||
border-color: #F44336; }
|
||||
|
||||
.demo0502 .u-table-row .editable-cell {
|
||||
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 {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: red;
|
||||
color: #F44336;
|
||||
font-size: 20px; }
|
||||
|
||||
.help-tip {
|
||||
color: #F44336; }
|
||||
|
||||
.tp-501 .tooltip-arrow {
|
||||
.tp-0502 .tooltip-arrow {
|
||||
border-bottom-color: #F44336 !important; }
|
||||
|
||||
.tp-501 .tooltip-inner {
|
||||
.tp-0502 .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
|
||||
th .drop-menu .uf {
|
||||
|
|
|
|||
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
181
package.json
181
package.json
|
|
@ -1,94 +1,95 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "2.0.12",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
"name": "bee-table",
|
||||
"version": "2.0.12",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"bee-table",
|
||||
"iuap-design",
|
||||
"tinper-bee",
|
||||
"Table"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
"engines": {
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
"js",
|
||||
"jsx"
|
||||
],
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"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",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"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"
|
||||
}
|
||||
},
|
||||
"homepage": "https://github.com/tinper-bee/bee-table.git",
|
||||
"author": "Yonyou FED",
|
||||
"repository": "http://github.com/tinper-bee/bee-table",
|
||||
"bugs": "https://github.com/tinper-bee/bee-table.git/issues",
|
||||
"license": "MIT",
|
||||
"main": "./build/index.js",
|
||||
"config": {
|
||||
"port": 3000,
|
||||
"commitizen": {
|
||||
"path": "./node_modules/cz-conventional-changelog"
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "bee-tools run start",
|
||||
"build": "bee-tools run build",
|
||||
"lint": "bee-tools run lint",
|
||||
"test": "jest",
|
||||
"chrome": "bee-tools run chrome",
|
||||
"coveralls": "jest",
|
||||
"browsers": "bee-tools run browsers",
|
||||
"pub": "bee-tools run pub",
|
||||
"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bee-button": "latest",
|
||||
"bee-checkbox": "latest",
|
||||
"bee-datepicker": "^2.0.9",
|
||||
"bee-dropdown": "^2.0.3",
|
||||
"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",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^15.3.0 || ^16.0",
|
||||
"react-dom": "^15.3.0 || ^16.0",
|
||||
"prop-types": "^15.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "^2.0.5",
|
||||
"bee-panel": "latest",
|
||||
"bee-popover": "^2.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3",
|
||||
"reqwest": "^2.0.5",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue