This commit is contained in:
izbz wh 2019-04-25 11:09:19 +08:00
commit e0eeb9a327
23 changed files with 1148 additions and 10894 deletions

View File

@ -239,11 +239,7 @@ function filterColumn(Table, Popover) {
_react2["default"].createElement( _react2["default"].createElement(
_beeCheckbox2["default"], _beeCheckbox2["default"],
paramObj, paramObj,
_react2["default"].createElement( da.title
"span",
null,
da.title
)
) )
); );
}); });

View File

@ -106,9 +106,9 @@ function sum(Table) {
return _this; return _this;
} }
/** /**
* 获取当前的表格类型 * 获取当前的表格类型
* *
*/ */

View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
Object.defineProperty(exports, "__esModule", { Object.defineProperty(exports, "__esModule", {
value: true value: true
}); });
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@ -9,71 +9,71 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
exports.sortBy = sortBy; exports.sortBy = sortBy;
exports.compare = compare; exports.compare = compare;
exports.ObjectAssign = ObjectAssign; exports.ObjectAssign = ObjectAssign;
/* /*
* 快速排序按某个属性或按获取排序依据的函数来排序. * 快速排序按某个属性或按获取排序依据的函数来排序.
* @method soryBy * @method soryBy
* @static * @static
* @param {array} arr 待处理数组 * @param {array} arr 待处理数组
* @param {string|function} prop 排序依据属性获取 * @param {string|function} prop 排序依据属性获取
* @param {boolean} desc 降序 * @param {boolean} desc 降序
* @return {array} 返回排序后的新数组 * @return {array} 返回排序后的新数组
*/ */
function sortBy(arr, prop, desc) { function sortBy(arr, prop, desc) {
var props = [], var props = [],
ret = [], ret = [],
i = 0, i = 0,
len = arr.length; len = arr.length;
if (typeof prop == 'string') { if (typeof prop == 'string') {
for (; i < len; i++) { for (; i < len; i++) {
var oI = arr[i]; var oI = arr[i];
(props[i] = new String(oI && oI[prop] || ''))._obj = oI; (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
}
} else if (typeof prop == 'function') {
for (; i < len; i++) {
var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
}
} else {
throw '参数类型错误';
} }
props.sort(); } else if (typeof prop == 'function') {
for (i = 0; i < len; i++) { for (; i < len; i++) {
ret[i] = props[i]._obj; var _oI = arr[i];
(props[i] = new String(_oI && prop(_oI) || ''))._obj = _oI;
} }
if (desc) ret.reverse(); } else {
return ret; throw '参数类型错误';
}
props.sort();
for (i = 0; i < len; i++) {
ret[i] = props[i]._obj;
}
if (desc) ret.reverse();
return ret;
}; };
/** /**
* 数组对象排序 * 数组对象排序
* console.log(arr.sort(compare('age'))) * console.log(arr.sort(compare('age')))
* @param {} property * @param {} property
*/ */
function compare(property) { function compare(property) {
return function (a, b) { return function (a, b) {
var value1 = a[property]; var value1 = a[property];
var value2 = b[property]; var value2 = b[property];
return value1 - value2; return value1 - value2;
}; };
} }
/** /**
* 简单数组数据对象拷贝 * 简单数组数据对象拷贝
* @param {*} obj 要拷贝的对象 * @param {*} obj 要拷贝的对象
*/ */
function ObjectAssign(obj) { function ObjectAssign(obj) {
var b = obj instanceof Array; var b = obj instanceof Array;
var tagObj = b ? [] : {}; var tagObj = b ? [] : {};
if (b) { if (b) {
//数组 //数组
obj.forEach(function (da) { obj.forEach(function (da) {
var _da = {}; var _da = {};
_extends(_da, da); _extends(_da, da);
tagObj.push(_da); tagObj.push(_da);
}); });
} else { } else {
_extends(tagObj, obj); _extends(tagObj, obj);
} }
return tagObj; return tagObj;
} }

View File

@ -19,11 +19,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染checkbox * 渲染checkbox
* @param Checkbox * @param Checkbox
* @param Icon * @param Icon
* @returns {CheckboxRender} * @returns {CheckboxRender}
*/ */
function renderCheckbox(Checkbox, Icon) { function renderCheckbox(Checkbox, Icon) {
return function (_Component) { return function (_Component) {

View File

@ -28,12 +28,12 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染输入框 * 渲染输入框
* @param Form * @param Form
* @param Input * @param Input
* @param Icon * @param Icon
* @returns {InputRender} * @returns {InputRender}
*/ */
function renderInput(Form, Input, Icon) { function renderInput(Form, Input, Icon) {
var _class, _temp2; var _class, _temp2;

View File

@ -26,11 +26,11 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
/** /**
* 渲染下拉框 * 渲染下拉框
* @param Select * @param Select
* @param Icon * @param Icon
* @returns {SelectRender} * @returns {SelectRender}
*/ */
function renderSelect(Select, Icon) { function renderSelect(Select, Icon) {
var _class, _temp2; var _class, _temp2;

View File

@ -2,7 +2,7 @@
* *
* @title 横向滚动条 * @title 横向滚动条
* @parent 滚动 Scroll View * @parent 滚动 Scroll View
* @description 设置`scroll`属性支持横向或纵向滚动x/y的取值可以是正整数百分比布尔值 * @description 设置`scroll`属性支持横向或纵向滚动x的取值可以是正整数(自动转为相应的像素值)百分比相对于表格真实宽度的百分比大于100%时会出现滚动条布尔值y的取值是正整数
* demo0201 * demo0201
*/ */

View File

@ -7,13 +7,13 @@
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import {Button,Checkbox} from "tinper-bee"; import {Checkbox} from "tinper-bee";
import Table from "../../src"; import Table from "../../src";
import sum from "../../src/lib/sum.js"; import sum from "../../src/lib/sum.js";
import multiSelect from "../../src/lib/multiSelect.js"; import multiSelect from "../../src/lib/multiSelect.js";
let ComplexTable = multiSelect(sum(Table), Checkbox); let ComplexTable = multiSelect(sum(Table), Checkbox);
let _sum = 0;
const columns = [ const columns = [
{ {
title: "单据编号", title: "单据编号",
@ -81,6 +81,8 @@ function getData(){
total: i + Math.floor(Math.random()*10), total: i + Math.floor(Math.random()*10),
money: 20 * Math.floor(Math.random()*10) money: 20 * Math.floor(Math.random()*10)
}); });
_sum += data[i].total;
_sum += data[i].money;
} }
return data; return data;
} }
@ -90,32 +92,20 @@ class Demo35 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: getData() data: getData(),
sum:_sum
}; };
} }
changeData = ()=>{
this.setState({
data: getData()
});
}
render() { render() {
const {data} = this.state; const {data} = this.state;
return ( return (
<div> <div>
<Button
className="editable-add-btn"
onClick={this.changeData}
>
动态设置数据源
</Button>
<ComplexTable <ComplexTable
columns={columns} columns={columns}
data={data} data={data}
bordered bordered
// scroll={{ x: "130%", y: 140 }} footer={currentData => <div>总计: {_sum}</div>}
/> />
</div> </div>
); );

View File

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

View File

@ -1,13 +1,15 @@
/** /**
* *
* @title 单元格编辑 * @title 单元格编辑
* @description 可以对单元格进行编辑的表格示例中给出输入框+必填校验下拉框编辑模式以及输入模式的必填校验 * @parent 编辑 Editor
* @description 可以对单元格进行编辑的表格示例中给出输入框下拉框参照的编辑模式以及两类校验通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格
* demo0502 * demo0502
*/ */
import React, { Component } from "react"; import React, { Component } from "react";
import Table from "../../src"; import Table from "../../src";
import { Icon, Select, Tooltip } from "tinper-bee"; import { Icon, Select, Tooltip, Form } from "tinper-bee";
const Option = Select.Option; const Option = Select.Option;
import { RefTreeWithInput } from "ref-tree";
class StringEditCell extends Component { class StringEditCell extends Component {
constructor(props, context) { constructor(props, context) {
@ -47,7 +49,7 @@ class StringEditCell extends Component {
{editable ? ( {editable ? (
<div className="editable-cell-input-wrapper"> <div className="editable-cell-input-wrapper">
<input <input
className="u-form-control" className={value ? "u-form-control" : "u-form-control error"}
autoFocus autoFocus
defaultValue={this.props.value} defaultValue={this.props.value}
value={value} value={value}
@ -58,7 +60,7 @@ class StringEditCell extends Component {
{value === "" ? ( {value === "" ? (
<Tooltip <Tooltip
inverse inverse
className="tp-501" className="tp-0502"
placement="bottom" placement="bottom"
overlay={ overlay={
<div className="help-tip"> <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 { class SelectEditCell extends Component {
constructor(props, context) { constructor(props, context) {
@ -91,9 +93,9 @@ class SelectEditCell extends Component {
}; };
} }
handleSelect = (value) => { handleSelect = value => {
this.setState({ value }); this.setState({ value });
} };
commitChange = () => { commitChange = () => {
this.setState({ editable: false }); 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 = [ const dataSource = [
{ name: "NU03910001", quality: "xx供应商", level: 70, key: "1" }, {
{ name: "NU03910002", quality: "yy供应商", level: 75, key: "2" }, a: "ASVAL_201903280005",
{ name: "NU03910003", quality: "zz供应商", level: 50, key: "3" }, b: "小张",
{ name: "NU03910004", quality: "aa供应商", level: 70, key: "4" }, c: "男",
{ name: "NU03910005", quality: "bb供应商", level: 60, key: "5" } 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) { constructor(props, context) {
super(props); super(props);
this.columns = [ this.columns = [
{ {
title: "订单编号", title: "员工编号",
dataIndex: "name", dataIndex: "a",
key: "name", key: "a"
},
{
title: "名字",
dataIndex: "b",
key: "b",
render: (text, record, index) => ( render: (text, record, index) => (
<StringEditCell <StringEditCell
colName="名字"
value={text} value={text}
colName={"订单编号"} onChange={this.onCellChange(index, "b")}
onChange={this.onCellChange(index, "name")}
/> />
) )
}, },
{ {
title: "供应商名称", title: "性别",
dataIndex: "quality", dataIndex: "c",
key: "quality", key: "c",
width: 100,
render: (text, record, index) => ( render: (text, record, index) => (
<SelectEditCell <SelectEditCell
value={text} value={text}
onChange={this.onCellChange(index, "quality")} onChange={this.onCellChange(index, "c")}
/> />
) )
}, },
{ {
title: "采购数量", title: "部门",
dataIndex: "level", dataIndex: "d",
key: "level" 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() { render() {
return ( return (
<div className="demo501"> <div className="demo0502">
<Table data={this.state.dataSource} columns={this.columns} /> <Table data={this.state.dataSource} columns={this.columns} />
</div> </div>
); );
} }
} }
export default Demo501; export default Demo0502;

View File

@ -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 { .editable-cell-text-wrapper {
box-sizing: border-box;
line-height: 20px;
border-radius: 3px;
&:hover { &:hover {
border: 1px dashed #A5ADBA; line-height: 18px;
border: 1px solid #a5adba;
} }
} }
.require { .require {
position: absolute; position: absolute;
top: 2px; top: 2px;
color: red; color: #F44336;
font-size: 20px; font-size: 20px;
} }
} }
@ -17,7 +45,7 @@
color: #F44336; color: #F44336;
} }
.tp-501 { .tp-0502 {
.tooltip-arrow { .tooltip-arrow {
border-bottom-color: #F44336 !important; border-bottom-color: #F44336 !important;
} }

View File

@ -13,28 +13,26 @@ import dragColumn from '../../src/lib/dragColumn';
const columns23 = [ const columns23 = [
{ {
title: "名字", title: "订单编号",
dataIndex: "a", dataIndex: "a",
key: "a", key: "a",
width: '200', width: '200',
fixed:'left' fixed:'left'
}, },
{ {
title: "性别", title: "单据日期",
dataIndex: "b", dataIndex: "b",
key: "b", key: "b",
width: '600' width: '600'
}, },
{ {
title: "年龄", title: "供应商",
dataIndex: "c", dataIndex: "c",
key: "c", key: "c",
width: '200', width: '200',
sumCol: true,
sorter: (a, b) => a.c - b.c
}, },
{ {
title: "武功级别", title: "联系人",
dataIndex: "d", dataIndex: "d",
key: "d", key: "d",
width: 500, width: 500,
@ -42,13 +40,9 @@ const columns23 = [
]; ];
const data23 = [ const data23 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" }, { a: "NU0391001", b: "2019-03-01", c: "xx供应商",d:'Tom', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" }, { a: "NU0391002", b: "2018-11-02", c: "yy供应商",d:'Jack', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" }, { a: "NU0391003", b: "2019-05-03", c: "zz供应商",d:'Jane', key: "3" }
{ 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" }
]; ];
const DragColumnTable = dragColumn(Table); const DragColumnTable = dragColumn(Table);

View File

@ -27,9 +27,9 @@ const columns16 = [
); );
} }
}, },
{ title: "用户名", dataIndex: "a", key: "a", width: 250 }, { title: "订单编号", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 }, { id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }, { title: "供应商", dataIndex: "c", key: "c", width: 200 },
]; ];
const columns17 = [ const columns17 = [
@ -48,16 +48,16 @@ const columns17 = [
); );
} }
}, },
{ title: "用户名", dataIndex: "a", key: "a", width: 100 }, { title: "订单编号", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 }, { id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }, { title: "供应商", dataIndex: "c", key: "c", width: 200 },
]; ];
const data16 = [ const data16 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }, { a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }, { a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" } { a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
]; ];
@ -86,15 +86,15 @@ class Demo16 extends Component {
if(expanded){ if(expanded){
if(record.key==='1'){ if(record.key==='1'){
new_obj[record.key] = [ new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }, { a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" } { a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
] ]
this.setState({ this.setState({
data_obj:new_obj data_obj:new_obj
}) })
}else{ }else{
new_obj[record.key] = [ new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" } { a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
] ]
this.setState({ this.setState({
data_obj:new_obj data_obj:new_obj

View File

@ -13,19 +13,19 @@ import Table from '../../src';
const columns4 = [ const columns4 = [
{ {
title: "Name", title: "订单编号",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
width: "40%" width: "40%"
}, },
{ {
title: "Age", title: "单据日期",
dataIndex: "age", dataIndex: "age",
key: "age", key: "age",
width: "30%" width: "30%"
}, },
{ {
title: "Address", title: "供应商",
dataIndex: "address", dataIndex: "address",
key: "address" key: "address"
} }
@ -34,53 +34,53 @@ const columns4 = [
const data4 = [ const data4 = [
{ {
key: 1, key: 1,
name: "John Brown sr.", name: "NU0391001",
age: 60, age: "2019-03-01",
address: "New York No. 1 Lake Park", address: "供应商1",
children: [ children: [
{ {
key: 11, key: 11,
name: "John Brown", name: "NU0391002",
age: 42, age: "2019-03-02",
address: "New York No. 2 Lake Park" address: "供应商2"
}, },
{ {
key: 12, key: 12,
name: "John Brown jr.", name: "NU0391003",
age: 30, age: "2019-03-03",
address: "New York No. 3 Lake Park", address: "供应商3",
children: [ children: [
{ {
key: 121, key: 121,
name: "Jimmy Brown", name: "NU0391004",
age: 16, age: "2019-03-04",
address: "New York No. 3 Lake Park" address: "供应商4"
} }
] ]
}, },
{ {
key: 13, key: 13,
name: "Jim Green sr.", name: "NU0391005",
age: 72, age: "2019-03-05",
address: "London No. 1 Lake Park", address: "供应商5",
children: [ children: [
{ {
key: 131, key: 131,
name: "Jim Green", name: "NU0391006",
age: 42, age: "2019-03-06",
address: "London No. 2 Lake Park", address: "供应商6",
children: [ children: [
{ {
key: 1311, key: 1311,
name: "Jim Green jr.", name: "NU0391007",
age: 25, age: "2019-03-07",
address: "London No. 3 Lake Park" address: "供应商7"
}, },
{ {
key: 1312, key: 1312,
name: "Jimmy Green sr.", name: "NU0391008",
age: 18, age: "2019-03-08",
address: "London No. 4 Lake Park" address: "供应商8"
} }
] ]
} }
@ -90,9 +90,9 @@ const data4 = [
}, },
{ {
key: 2, key: 2,
name: "Joe Black", name: "NU0391009",
age: 32, age: "2019-03-09",
address: "Sidney No. 1 Lake Park" address: "供应商9"
} }
]; ];
class Demo4 extends Component { class Demo4 extends Component {

View File

@ -60,6 +60,7 @@ class Demo8 extends Component {
onSelect={this.handleSelect.bind(this)} onSelect={this.handleSelect.bind(this)}
onDataNumSelect={this.dataNumSelect} onDataNumSelect={this.dataNumSelect}
showJump={true} showJump={true}
noBorder={true}
total={100} total={100}
dataNum={2} dataNum={2}
/> />

View File

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

8914
dist/demo.css vendored

File diff suppressed because it is too large Load Diff

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

1817
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,94 +1,95 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "2.0.13", "version": "2.0.13",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",
"react-component", "react-component",
"bee-table", "bee-table",
"iuap-design", "iuap-design",
"tinper-bee", "tinper-bee",
"Table" "Table"
],
"engines": {
"node": ">=6.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"
], ],
"transform": { "engines": {
"^.+\\.js$": "babel-jest" "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"
}
}

View File

@ -110,7 +110,7 @@ export default function filterColumn(Table, Popover) {
> >
<Checkbox {...paramObj}> <Checkbox {...paramObj}>
<span>{da.title}</span> {da.title}
</Checkbox> </Checkbox>
</div> </div>
); );