修改单元格编辑
This commit is contained in:
梁才军
parent
22ae3b1ff6
commit
ba45d5cd34
|
|
@ -1,307 +1,170 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @parent 编辑 Editor
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
* @title 行编辑
|
||||
* @description 可以对行进行编辑的表格
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import {Animate,Tooltip,FormControl,Button,Form,Icon,Checkbox,Select} from "tinper-bee";
|
||||
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
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue