innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity
bee-table/demo/index.js

85 lines
202 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Con, Row, Col } from 'bee-layout';
import { Panel } from 'bee-panel';
import Drawer from 'bee-drawer';
import Clipboard from 'bee-clipboard';
import Button from '../src';
var Demo0101 = require("./demolist/Demo0101");var Demo0102 = require("./demolist/Demo0102");var Demo0103 = require("./demolist/Demo0103");var Demo0104 = require("./demolist/Demo0104");var Demo0105 = require("./demolist/Demo0105");var Demo0106 = require("./demolist/Demo0106");var Demo0107 = require("./demolist/Demo0107");var Demo0201 = require("./demolist/Demo0201");var Demo0202 = require("./demolist/Demo0202");var Demo0301 = require("./demolist/Demo0301");var Demo0302 = require("./demolist/Demo0302");var Demo0401 = require("./demolist/Demo0401");var Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0406 = require("./demolist/Demo0406");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");var Demo0503 = require("./demolist/Demo0503");var Demo0505 = require("./demolist/Demo0505");var Demo0601 = require("./demolist/Demo0601");var Demo0602 = require("./demolist/Demo0602");var Demo0603 = require("./demolist/Demo0603");var Demo0701 = require("./demolist/Demo0701");var Demo0702 = require("./demolist/Demo0702");var Demo0802 = require("./demolist/Demo0802");var Demo0901 = require("./demolist/Demo0901");var Demo0902 = require("./demolist/Demo0902");var Demo0903 = require("./demolist/Demo0903");var Demo1001 = require("./demolist/Demo1001");var Demo1002 = require("./demolist/Demo1002");var Demo1101 = require("./demolist/Demo1101");var Demo1102 = require("./demolist/Demo1102");var Demo1103 = require("./demolist/Demo1103");var Demo1105 = require("./demolist/Demo1105");var Demo1106 = require("./demolist/Demo1106");var Demo1107 = require("./demolist/Demo1107");var Demo1108 = require("./demolist/Demo1108");var Demo1201 = require("./demolist/Demo1201");var Demo1301 = require("./demolist/Demo1301");var Demo1302 = require("./demolist/Demo1302");var Demo1401 = require("./demolist/Demo1401");var Demo1402 = require("./demolist/Demo1402");var Demo1403 = require("./demolist/Demo1403");var Demo1404 = require("./demolist/Demo1404");var Demo1601 = require("./demolist/Demo1601");var DemoArray = [{"example":<Demo0101 />,"title":" 基本表格","code":"/**\r\n*\r\n* @title 基本表格\r\n* @parent 基础 Basic\r\n* @description 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。\r\n* demo0101\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\r\n];\r\n\r\nclass Demo0101 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n showRowNum={true}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0101;\r\n","desc":" 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。"},{"example":<Demo0102 />,"title":" 默认无数据展示","code":"/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"员工姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"department\",\r\n key: \"department\"\r\n }\r\n];\r\n \r\nconst data = [];\r\n\r\n// 在此自定义无数据时的展示内容\r\nconst emptyFunc = () => 'No Data';\r\n \r\nclass Demo02 extends Component {\r\n render() {\r\n return (\r\n <Table \r\n columns={columns} \r\n data={data} \r\n // emptyText={emptyFunc} \r\n />\r\n )\r\n }\r\n}\r\n\r\nexport default Demo02;","desc":" 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。"},{"example":<Demo0103 />,"title":" 固定表头","code":"/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;\r\n }\r\n}\r\n\r\nexport default Demo03; ","desc":" 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。"},{"example":<Demo0104 />,"title":" 隔行换色","code":"/**\r\n*\r\n* @title 隔行换色\r\n* @parent 基础 Basic\r\n* @description 可自定义斑马线颜色\r\n* demo0104\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns04 = [\r\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\r\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\r\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\r\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\r\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\r\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\r\n];\r\n\r\nconst data04 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo04 extends Component {\r\n render() {\r\n return <Table \r\n className=\"demo04\" \r\n columns={columns04} \r\n data={data04} />\r\n }\r\n}\r\n\r\nexport default Demo04; ","desc":" 可自定义斑马线颜色","scss_code":".demo04 {\r\n &.u-table tr:nth-child(2n){\r\n background: #f7f9fb;\r\n }\r\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\r\n background: #ebecf0;\r\n }\r\n}"},{"example":<Demo0105 />,"title":" 表格 Loading 加载","code":"/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns05 = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",fixed:'left'},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data05 = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo05 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n loading : true\r\n }\r\n }\r\n changeLoading = () => {\r\n this.setState({\r\n loading : !this.state.loading\r\n })\r\n }\r\n render() {\r\n return (\r\n <div>\r\n <Button\r\n className=\"editable-add-btn\"\r\n onClick={this.changeLoading}\r\n >\r\n 切换loading\r\n </Button>\r\n <Table\r\n columns={columns05}\r\n data={data05}\r\n // loading={this.state.loading}或者是boolean\r\n loading={{show:this.state.loading}}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo05;\r\n","desc":" loading可以传boolean或者object对象，object为bee-loading组件的参数类型"},{"example":<Demo0106 />,"title":" 单元格内容居中","code":"/**\r\n*\r\n* @title 单元格内容居中\r\n* @parent 基础 Basic\r\n* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。\r\n* demo0106\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, className: \"rowClassName\",\r\n fixed:'left',\r\n textAlign:'center',\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"bottom\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\r\n];\r\n\r\nclass Demo06 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n }\r\n }\r\n handleClick = () => {\r\n console.log('这是第' , this.currentIndex , '行');\r\n console.log('内容：' , this.currentRecord);\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n bordered\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo06;\r\n","desc":" 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。"},{"example":<Demo0107 />,"title":" 带边框","code":"/**\r\n*\r\n* @title 带边框\r\n* @parent 基础 Basic\r\n* @description 设置 `bordered` 属性可添加表格边框线。\r\n* demo0107\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\r\n];\r\n\r\nclass Demo06 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n bordered\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo06;\r\n","desc":" 设置 `bordered` 属性可添加表格边框线。"},{"example":<Demo0201 />,"title":" 横向滚动条","code":"/**\r\n*\r\n* @title 横向滚动条\r\n* @parent 滚动 Scroll View\r\n* @description `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。\r\n* demo0201\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 100, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 300, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 300,\r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 200\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\r\n }\r\n];\r\n \r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"5\"\r\n }\r\n];\r\n\r\nclass Demo11 extends Component {\r\n render() {\r\n return (\r\n <Table columns={columns} data={data} scroll={{ x: \"110%\" }} />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo11;\r\n","desc":" `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。"},{"example":<Demo0202 />,"title":" 纵向滚动条","code":"/**\r\n*\r\n* @title 纵向滚动条\r\n* @parent 滚动 Scroll View\r\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\r\n* demo0202\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\r\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\r\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\r\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\r\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\r\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\r\n];\r\n \r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\nclass Demo12 extends Component {\r\n render() {\r\n return (\r\n <Table columns={columns} data={data} scroll={{ y:150 }} />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;\r\n","desc":" 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。"},{"example":<Demo0301 />,"title":" 渲染本地数据","code":"/**\r\n*\r\n* @title 渲染本地数据\r\n* @parent 数据操作 Data Opetation\r\n* @description 可自定义页头和页脚。\r\n* demo0301\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\r\n fixed:'left',\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"bottom\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\nclass Demo21 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n title={currentData => <div>员工信息统计表</div>}\r\n footer={currentData => <div>合计: 共{data.length}条数据</div>}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo21;\r\n","desc":" 可自定义页头和页脚。"},{"example":<Demo0302 />,"title":" 渲染远程数据","code":"/**\r\n*\r\n* @title 渲染远程数据\r\n* @parent 数据操作 Data Opetation\r\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\r\n* demo0302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\r\n\r\nimport reqwest from 'reqwest';\r\n\r\n\r\nconst columns = [{\r\n title: 'Name',\r\n dataIndex: 'name',\r\n sorter: true,\r\n render: name => `${name.first} ${name.last}`,\r\n width: '20%',\r\n}, {\r\n title: 'Gender',\r\n dataIndex: 'gender',\r\n filters: [\r\n { text: 'Male', value: 'male' },\r\n { text: 'Female', value: 'female' },\r\n ],\r\n width: '20%',\r\n}, {\r\n title: 'Email',\r\n dataIndex: 'email',\r\n}];\r\n\r\nclass Demo22 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: [],\r\n loading: false,\r\n }\r\n }\r\n\r\n fetch = (params = {}) => {\r\n console.log('params:', params);\r\n this.setState({ loading: true });\r\n reqwest({\r\n url: 'https://randomuser.me/api',\r\n method: 'get',\r\n data: {\r\n results: 10,\r\n ...params,\r\n },\r\n type: 'json',\r\n }).then((data) => {\r\n this.setState({\r\n loading: false,\r\n data: data.results,\r\n });\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"demo22\">\r\n <Button className=\"opt-btns\" colors=\"secondary\" onClick={() => this.fetch()}>点击加载远程数据</Button>\r\n <Table\r\n columns={columns}\r\n data={this.state.data}\r\n loading={this.state.loading}\r\n scroll={{y:200}}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo22;\r\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\r\n .opt-btns{\r\n margin-bottom: 8px;\r\n }\r\n}"},{"example":<Demo0401 />,"title":" 悬浮列","code":"/**\r\n*\r\n* @title 悬浮列\r\n* @parent 列渲染 Custom Render\r\n* @description 鼠标hover行时呼出操作按钮。\r\n* demo0401\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Popconfirm } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo11 extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n\r\n deleteRow=()=>{\r\n console.log('删除第' , this.currentIndex , '行');\r\n }\r\n\r\n onRowHover=(index,record)=>{\r\n this.currentIndex = index;\r\n this.currentRecord = record;\r\n }\r\n\r\n getHoverContent=(record, index)=>{\r\n return (\r\n <div className=\"opt-btns\">\r\n <Popconfirm key={index} trigger=\"click\" placement=\"left\" content=\"是否删除当前行？\" onClose={this.deleteRow}>\r\n <Button size=\"sm\">删除</Button> \r\n </Popconfirm>\r\n </div>\r\n )\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n onRowHover={this.onRowHover}\r\n hoverContent={this.getHoverContent}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo11;\r\n","desc":" 鼠标hover行时呼出操作按钮。"},{"example":<Demo0402 />,"title":" 多列表头","code":"/**\r\n *\r\n * @title 多列表头\r\n * @parent 列渲染 Custom Render\r\n * @description columns[n] 可以内嵌 children，以渲染分组表头。\r\n * 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响\r\n * 多列表头拖拽的时候,原则只拖拽叶子节点的表头。\r\n * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"姓名\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"个人信息\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"年龄\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"地址\",\r\n children: [\r\n {\r\n title: \"街道\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"单元\",\r\n children: [\r\n {\r\n title: \"楼号\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"门户\",\r\n dataIndex: \"number\",\r\n key: \"number\",\r\n width: 100\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n title: \"公司信息\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"公司地址\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"公司名称\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"gender\",\r\n key: \"gender\",\r\n width: 60,\r\n fixed: \"right\"\r\n }\r\n];\r\n\r\nconst data = [];\r\nfor (let i = 0; i < 20; i++) {\r\n data.push({\r\n key: i,\r\n name: \"John Brown\",\r\n age: i + 1,\r\n street: \"Lake Park\",\r\n building: \"C\",\r\n number: 2035,\r\n companyAddress: \"北清路 68 号\",\r\n companyName: \"用友\",\r\n gender: \"男\"\r\n });\r\n}\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nclass Demo12 extends Component {\r\n render() {\r\n return (\r\n <DragColumnTable\r\n className={'demo32'}\r\n columns={columns}\r\n data={data}\r\n headerHeight={40} //自定义表头高度\r\n bordered\r\n dragborder={true} \r\n onDropBorder ={(e,width)=>{\r\n console.log(width+\"--调整列宽后触发事件\",e.target);\r\n }}\r\n scroll={{ y: 240 }}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;\r\n","desc":" columns[n] 可以内嵌 children，以渲染分组表头。","scss_code":".demo32{\r\n .u-table-thead th {\r\n padding-top: 0px;\r\n padding-bottom: 0px;\r\n }\r\n}"},{"example":<Demo0404 />,"title":" 数据关联","code":"/**\r\n*\r\n* @title 数据关联\r\n* @parent 列渲染 Custom Render\r\n* @description 数据行关联自定义菜单显示\r\n* demo0404\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Icon,Checkbox,Dropdown,Menu } from 'tinper-bee';\r\n\r\n\r\nimport multiSelect from \"bee-table/build/lib/newMultiSelect\";\r\nimport sort from \"bee-table/build/lib/sort\";\r\n\r\nconst { Item } = Menu;\r\n\r\nconst data = [\r\n { \r\n num:\"NU0391025\", \r\n name: \"aa\",\r\n sex: \"男\",\r\n dept:'财务二科', \r\n rank:\"T1\",\r\n year:\"1\",\r\n seniority:\"1\",\r\n key: \"1\"\r\n }, \r\n { \r\n num:\"NU0391026\", \r\n name: \"bb\",\r\n sex: \"女\",\r\n dept:'财务一科', \r\n rank:\"M1\",\r\n year:\"1\",\r\n seniority:\"1\",\r\n key: \"2\"\r\n },\r\n { \r\n num:\"NU0391027\", \r\n name: \"dd\",\r\n sex: \"女\",\r\n dept:'财务一科', \r\n rank:\"T2\",\r\n year:\"2\",\r\n seniority:\"2\",\r\n key: \"3\"\r\n }\r\n];\r\n\r\nconst MultiSelectTable = multiSelect(Table, Checkbox);\r\nconst ComplexTable = sort(MultiSelectTable, Icon);\r\n\r\nclass Demo13 extends Component {\r\n constructor(props) {\r\n super(props);\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n }\r\n onSelect = (item) => {\r\n console.log(item);\r\n }\r\n render() {\r\n const menu1 = (\r\n <Menu\r\n onSelect={this.onSelect}>\r\n <Item key=\"1\">模态弹出</Item>\r\n <Item key=\"2\">链接跳转</Item>\r\n <Item key=\"3\">打开新页</Item>\r\n </Menu>);\r\n let columns = [\r\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \r\n render: (text, record, index) => {\r\n return (\r\n <Dropdown\r\n trigger={['click']}\r\n overlay={menu1}\r\n animation=\"slide-up\"\r\n >\r\n <Icon type=\"uf-link\" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>\r\n </Dropdown>\r\n )\r\n }\r\n },\r\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\r\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\r\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\r\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\r\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\r\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\r\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\r\n ];\r\n return <ComplexTable \r\n bordered\r\n columns={columns} \r\n data={data} \r\n multiSelect={{type: \"checkbox\"}}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n autoCheckedByClickRows={false} //行点击是否触发勾选动作\r\n />\r\n }\r\n}\r\n\r\nexport default Demo13; ","desc":" 数据行关联自定义菜单显示"},{"example":<Demo0405 />,"title":" 列合计（总计）","code":"/**\r\n *\r\n * @title 列合计（总计）\r\n * @parent 列渲染 Custom Render\r\n * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。\r\n * demo0405\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Checkbox } from 'tinper-bee';\r\n\r\n\r\nimport sum from \"bee-table/build/lib/sum.js\";\r\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\r\n\r\nlet ComplexTable = multiSelect(sum(Table), Checkbox);\r\n//sum第二个参数可以设置精度，例如 sum(Table,4); 设计精度为4\r\nlet _sum = 0;\r\nconst columns = [\r\n {\r\n title: \"单据编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: 120,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n width: 200,\r\n },\r\n {\r\n title: \"业务类型\",\r\n dataIndex: \"type\",\r\n key: \"type\",\r\n width: 200\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"supplier\",\r\n key: \"supplier\",\r\n width: 100\r\n },\r\n {\r\n title: \"联系人\",\r\n dataIndex: \"contact\",\r\n key: \"contact\",\r\n },\r\n {\r\n title: \"仓库\",\r\n dataIndex: \"warehouse\",\r\n key: \"warehouse\",\r\n width: 80,\r\n },\r\n {\r\n title: \"整单数量\",\r\n dataIndex: \"total\",\r\n key: \"total\",\r\n width: 100,\r\n sumCol: true,\r\n\t sumThousandth: true\r\n },\r\n {\r\n title: \"金额\",\r\n dataIndex: \"money\",\r\n key: \"money\",\r\n width: 100,\r\n sumCol: true,\r\n\t sumThousandth: true\r\n }\r\n];\r\n\r\nfunction getData(){\r\n const data = [];\r\n for (let i = 0; i < 5; i++) {\r\n data.push({\r\n key: i,\r\n num: \"NU039100\"+i,\r\n date: \"2019-03-01\",\r\n type: \"普通采购\",\r\n supplier: \"gys\"+i,\r\n contact: \"Tom\",\r\n warehouse: \"普通仓\",\r\n total: i + Math.floor(Math.random()*10),\r\n money: 2000 * Math.floor(Math.random()*10)\r\n });\r\n _sum += data[i].total;\r\n _sum += data[i].money;\r\n }\r\n return data;\r\n}\r\n\r\nclass Demo35 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: getData(),\r\n sum:_sum\r\n };\r\n }\r\n\r\n render() {\r\n const {data} = this.state;\r\n return (\r\n <div>\r\n <ComplexTable\r\n columns={columns}\r\n data={data}\r\n bordered\r\n footer={currentData => <div>总计: {_sum}</div>}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\nexport default Demo35;\r\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":<Demo0406 />,"title":" 自定义整行和整列样式表格","code":"/**\r\n *\r\n * @title 自定义整行和整列样式表格\r\n * @parent 列渲染 Custom Render\r\n * @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。\r\n * demo0406\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,style: {backgroundColor:'#e3f2fd',color:'#505F79'}},\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" ,style:{backgroundColor:'#ffebee',color:'#000'}},\r\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\r\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\r\n];\r\n\r\nclass Demo0406 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n showRowNum={true}\r\n />\r\n );\r\n }\r\n}\r\nexport default Demo0406\r\n","desc":" 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。"},{"example":<Demo0501 />,"title":" 行内编辑","code":"/**\r\n *\r\n * @title 行内编辑\r\n * @parent 编辑 Editor\r\n * @description 可以对行进行编辑的表格\r\n * demo0501\r\n */\r\nimport React, { Component } from \"react\";\nimport { Table, Select, Form, FormControl, Button, Icon, Tooltip } from 'tinper-bee';\r\n\r\n\r\nconst Option = Select.Option;\r\nimport { RefTreeWithInput } from \"ref-tree\";\r\n\r\nclass StringEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleChange = value => {\r\n const { onChange, throwError } = this.props;\r\n if (value === \"\") {\r\n throwError && throwError(true);\r\n } else {\r\n throwError && throwError(false);\r\n }\r\n this.setState({ value });\r\n onChange && onChange(value);\r\n };\r\n\r\n render() {\r\n const { editable, required, colName } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n if (value === \"\") cls += \" verify-cell\";\r\n return editable ? (\r\n <div className=\"editable-cell\">\r\n <div className={cls}>\r\n <FormControl value={value} onChange={this.handleChange} />\r\n <span className=\"error\">\r\n {value === \"\" ? (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={<div className=\"tp-content\">{\"请输入\" + colName}</div>}\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n ) : null}\r\n </span>\r\n </div>\r\n </div>\r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = value => {\r\n this.setState({ value });\r\n this.props.onChange && this.props.onChange(value);\r\n };\r\n\r\n render() {\r\n const { editable } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n return editable ? (\r\n <div className=\"editable-cell\">\r\n <div className={cls}>\r\n <Select value={value} onSelect={this.handleSelect}>\r\n {SELECT_SOURCE.map((item, index) => (\r\n <Option key={index} value={item}>\r\n {item}\r\n </Option>\r\n ))}\r\n </Select>\r\n </div>\r\n </div>\r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = values => {\r\n this.setState({ value: values[0] });\r\n this.props.onChange && this.props.onChange(values[0]);\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { editable, required } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\r\n return editable ? (\r\n <div className={cls}>\r\n <RefTreeWithInput\r\n {...option}\r\n onSave={this.handleSelect}\r\n getRefTreeData={this.getRefTreeData}\r\n {...getFieldProps(\"refValue\", {\r\n initialValue: JSON.stringify(value),\r\n rules: [\r\n {\r\n message: (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={\r\n <div className=\"tp-content\">\r\n {\"请输入\" + this.props.colName}\r\n </div>\r\n }\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n ),\r\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\r\n }\r\n ]\r\n })}\r\n />\r\n <span className=\"error\">{getFieldError(\"refValue\")}</span>\r\n </div>\r\n ) : (\r\n value.name || \" \"\r\n );\r\n }\r\n }\r\n);\r\n\r\nlet dataSource = [\r\n {\r\n a: \"ASVAL_201903280005\",\r\n b: \"小张\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"1\"\r\n },\r\n {\r\n a: \"ASVAL_201903200004\",\r\n b: \"小明\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"2\"\r\n },\r\n {\r\n a: \"ASVAL_201903120002\",\r\n b: \"小红\",\r\n c: \"女\",\r\n d: {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n },\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo0501 extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n dataSource: dataSource,\r\n editingRowsMap: {},\r\n currentIndex: null,\r\n errorEditFlag: false\r\n };\r\n\r\n this.columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"a\",\r\n key: \"a\"\r\n },\r\n {\r\n title: \"名字\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n render: (text, record, index) => (\r\n <StringEditCell\r\n colName={\"名字\"}\r\n editable={this.state.editingRowsMap[index] || false}\r\n required\r\n value={text}\r\n onChange={this.onCellChange(index, \"b\")}\r\n throwError={this.throwError}\r\n />\r\n )\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 100,\r\n render: (text, record, index) => (\r\n <SelectEditCell\r\n editable={this.state.editingRowsMap[index] || false}\r\n value={text}\r\n onChange={this.onCellChange(index, \"c\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 215,\r\n render: (text, record, index) => (\r\n <RefEditCell\r\n colName={\"部门\"}\r\n editable={this.state.editingRowsMap[index] || false}\r\n required\r\n value={record.d}\r\n onChange={this.onCellChange(index, \"d\")}\r\n throwError={this.throwError}\r\n />\r\n )\r\n },\r\n // 只是用来占位占宽度的\r\n {\r\n key: \"placeholder\"\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: dataSource,\r\n editingRowsMap: {},\r\n currentIndex: null,\r\n errorEditFlag: false\r\n };\r\n\r\n this.dataBuffer = {};\r\n }\r\n\r\n edit = index => () => {\r\n if (index === null) return;\r\n let editingRowsMap = { ...this.state.editingRowsMap };\r\n editingRowsMap[index] = index.toString();\r\n // 最好使用深复制\r\n this.dataBuffer[index] = { ...this.state.dataSource[index] };\r\n this.setState({ editingRowsMap });\r\n };\r\n\r\n abortEdit = index => () => {\r\n let editingRowsMap = { ...this.state.editingRowsMap };\r\n delete editingRowsMap[index];\r\n delete this.dataBuffer[index];\r\n this.setState({ editingRowsMap });\r\n };\r\n\r\n delete = index => () => {\r\n if (index === null) return;\r\n let { dataSource } = this.state;\r\n dataSource.splice(index,1);\r\n this.setState({\r\n dataSource:dataSource\r\n });\r\n }\r\n\r\n commitChange = index => () => {\r\n if (this.state.errorEditFlag) return;\r\n let editingRowsMap = { ...this.state.editingRowsMap };\r\n delete editingRowsMap[index];\r\n let dataSource = [...this.state.dataSource];\r\n dataSource[index] = { ...this.dataBuffer[index] };\r\n this.setState({ editingRowsMap, dataSource });\r\n };\r\n\r\n onCellChange = (index, key) => value => {\r\n this.dataBuffer[index][key] = value;\r\n };\r\n\r\n throwError = isError => {\r\n if (isError !== this.state.errorEditFlag)\r\n this.setState({ errorEditFlag: isError });\r\n };\r\n\r\n handleRowHover = (index, record) => {\r\n this.currentRecord = record;\r\n this.setState({ currentIndex: index });\r\n };\r\n\r\n renderRowHover = () => {\r\n const { currentIndex } = this.state;\r\n return this.state.editingRowsMap[currentIndex] ? (\r\n <div className=\"cancel-btns\">\r\n <Button\r\n size=\"sm\"\r\n bordered\r\n onClick={this.abortEdit(currentIndex)}\r\n >\r\n 取消\r\n </Button>\r\n <Button size=\"sm\" colors=\"primary\" onClick={this.commitChange(currentIndex)}>\r\n 确认\r\n </Button>\r\n </div>\r\n ) : (\r\n <div className=\"opt-btns\">\r\n <Button size=\"sm\" onClick={this.edit(currentIndex)}>\r\n 编辑\r\n </Button>\r\n <Button size=\"sm\" onClick={this.delete(currentIndex)}>\r\n 删除\r\n </Button>\r\n </div>\r\n );\r\n };\r\n\r\n render() {\r\n const { dataSource } = this.state;\r\n const columns = this.columns;\r\n return (\r\n <div className=\"demo0501 u-editable-table\">\r\n <Table\r\n data={dataSource}\r\n columns={columns}\r\n height={40}\r\n onRowHover={this.handleRowHover}\r\n hoverContent={this.renderRowHover}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0501;\r\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\r\n .u-row-hover {\r\n .opt-btns,.cancel-btns {\r\n button {\r\n margin: 0;\r\n &:first-child {\r\n margin-right: 8px;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .u-table-row {\r\n td {\r\n padding: 5px 8px;\r\n\r\n input {\r\n font-size: 12px;\r\n padding-left: 5px;\r\n }\r\n }\r\n\r\n .u-form-control,\r\n .u-select-selection {\r\n height: 30px;\r\n }\r\n }\r\n\r\n .editable-cell-text-wrapper {\r\n box-sizing: border-box;\r\n line-height: 20px;\r\n border-radius: 3px;\r\n }\r\n\r\n .required {\r\n margin-left: 10px;\r\n position: relative;\r\n\r\n &::before {\r\n content: \" \";\r\n border: 1px solid #F44336;\r\n width: 0;\r\n height: 12px;\r\n position: absolute;\r\n top: 9px;\r\n left: -8px;\r\n }\r\n\r\n span.u-input-group {\r\n display: block\r\n }\r\n }\r\n .verify-cell {\r\n padding-right: 25px !important;\r\n }\r\n\r\n .required-icon {\r\n position: absolute;\r\n top: 2px;\r\n color: #F44336;\r\n font-size: 20px;\r\n }\r\n\r\n .ref-input-wrap {\r\n width: 160px !important;\r\n }\r\n}\r\n\r\n.u-editable-table-tp {\r\n .tp-content {\r\n color: #F44336;\r\n }\r\n}"},{"example":<Demo0502 />,"title":" 单元格编辑","code":"/**\r\n *\r\n * @title 单元格编辑\r\n * @parent 编辑 Editor\r\n * @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）\r\n * demo0502\r\n */\r\nimport React, { Component } from \"react\";\nimport { Table, Icon, Select, Tooltip, Form } from 'tinper-bee';\r\n\r\n\r\nconst Option = Select.Option;\r\nimport { RefTreeWithInput } from \"ref-tree\";\r\n\r\nclass StringEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n this.editWarp = React.createRef();\r\n }\r\n\r\n commitChange = () => {\r\n if (this.state.value === \"\") return;\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n\r\n handleKeydown = event => {\r\n if (event.keyCode == 13) {\r\n this.commitChange();\r\n }\r\n };\r\n\r\n handleChange = e => {\r\n if (e.target.value === \"\") this.editWarp.className += \" verify-cell\";\r\n this.setState({ value: e.target.value });\r\n };\r\n\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n <div className=\"editable-cell\">\r\n {editable ? (\r\n <div ref={el => this.editWarp = el} className=\"editable-cell-input-wrapper\">\r\n <input\r\n className={value ? \"u-form-control\" : \"u-form-control error\"}\r\n autoFocus\r\n defaultValue={this.props.value}\r\n value={value}\r\n onKeyDown={this.handleKeydown}\r\n onChange={this.handleChange}\r\n onBlur={this.commitChange}\r\n />\r\n {value === \"\" ? (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={\r\n <div className=\"tp-content\">\r\n {\"请输入\" + this.props.colName}\r\n </div>\r\n }\r\n >\r\n <Icon className=\"uf-exc-t require\" />\r\n </Tooltip>\r\n ) : null}\r\n </div>\r\n ) : (\r\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\r\n {value || \" \"}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: this.props.value,\r\n editable: false\r\n };\r\n }\r\n\r\n handleSelect = value => {\r\n this.setState({ value });\r\n };\r\n\r\n commitChange = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n\r\n edit = () => {\r\n this.setState({ editable: true });\r\n };\r\n\r\n render() {\r\n const { value, editable } = this.state;\r\n return (\r\n <div className=\"editable-cell\">\r\n {editable ? (\r\n <div className=\"editable-cell-input-wrapper\">\r\n <Select\r\n defaultValue={this.props.value}\r\n value={value}\r\n onSelect={this.handleSelect}\r\n onBlur={this.commitChange}\r\n autoFocus\r\n >\r\n {SELECT_SOURCE.map((item, index) => (\r\n <Option key={index} value={item}>\r\n {item}\r\n </Option>\r\n ))}\r\n </Select>\r\n </div>\r\n ) : (\r\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\r\n {value || \" \"}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends Component {\r\n constructor(props, context) {\r\n super(props, context);\r\n this.state = {\r\n value: this.props.value.d,\r\n editable: false\r\n };\r\n this.refWarp = React.createRef();\r\n }\r\n\r\n edit = () => {\r\n this.setState({ editable: true }, () => this.refWarp.focus());\r\n };\r\n\r\n handleSelect = values => {\r\n this.setState({ value: values[0] });\r\n };\r\n\r\n commitChange = () => {\r\n this.setState({ editable: false });\r\n if (this.props.onChange) {\r\n this.props.onChange(this.state.value);\r\n }\r\n };\r\n\r\n onRefBlur = e => {\r\n // 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用\r\n const __REF_CONTENT__ = document.querySelector(\"div.ref-core-modal\");\r\n if (!__REF_CONTENT__ && e.target === this.refWarp) {\r\n this.commitChange();\r\n }\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { value, editable } = this.state;\r\n return editable ? (\r\n <div\r\n ref={el => (this.refWarp = el)}\r\n className=\"editable-cell-input-wrapper\"\r\n tabIndex={-1}\r\n onBlur={this.onRefBlur}\r\n >\r\n <RefTreeWithInput\r\n {...option}\r\n onSave={this.handleSelect}\r\n getRefTreeData={this.getRefTreeData}\r\n {...getFieldProps(\"code1\", {\r\n initialValue: JSON.stringify(value),\r\n rules: [\r\n {\r\n message: \"请输入请选择\",\r\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\r\n }\r\n ]\r\n })}\r\n />\r\n <span\r\n className=\"error\"\r\n style={{ display: \"block\", color: \"#f53c32\" }}\r\n >\r\n {getFieldError(\"code1\")}\r\n </span>\r\n </div>\r\n ) : (\r\n <div className=\"editable-cell-text-wrapper\" onClick={this.edit}>\r\n {value.name || \" \"}\r\n </div>\r\n );\r\n }\r\n }\r\n);\r\n\r\nconst dataSource = [\r\n {\r\n a: \"ASVAL_201903280005\",\r\n b: \"小张\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"1\"\r\n },\r\n {\r\n a: \"ASVAL_201903200004\",\r\n b: \"小明\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"2\"\r\n },\r\n {\r\n a: \"ASVAL_201903120002\",\r\n b: \"小红\",\r\n c: \"女\",\r\n d: {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n },\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo0502 extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"a\",\r\n key: \"a\"\r\n },\r\n {\r\n title: \"名字\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n render: (text, record, index) => (\r\n <StringEditCell\r\n colName=\"名字\"\r\n value={text}\r\n onChange={this.onCellChange(index, \"b\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 100,\r\n render: (text, record, index) => (\r\n <SelectEditCell\r\n value={text}\r\n onChange={this.onCellChange(index, \"c\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 215,\r\n render: (text, record, index) => (\r\n <RefEditCell\r\n value={record}\r\n onChange={this.onCellChange(index, \"d\")}\r\n />\r\n )\r\n },\r\n {\r\n key: \"placeholder\"\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: dataSource\r\n };\r\n }\r\n\r\n onCellChange = (index, key) => {\r\n return value => {\r\n const { dataSource } = this.state;\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource }, () => console.dir(this.state.dataSource));\r\n };\r\n };\r\n\r\n render() {\r\n return (\r\n <div className=\"demo0502 u-editable-table\">\r\n <Table data={this.state.dataSource} columns={this.columns} height={40}/>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0502;\r\n","desc":" 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）","scss_code":".u-editable-table .u-table {\r\n .u-table-row {\r\n td {\r\n padding: 5px 8px;\r\n\r\n input {\r\n padding-left: 5px;\r\n font-size: 12px;\r\n\r\n &.error {\r\n border-color: #F44336;\r\n }\r\n }\r\n }\r\n\r\n .editable-cell {\r\n height: 30px;\r\n }\r\n\r\n &-hover {\r\n .editable-cell-text-wrapper {\r\n line-height: 19px;\r\n }\r\n }\r\n\r\n .u-form-control,\r\n .u-select-selection {\r\n height: 30px;\r\n }\r\n }\r\n\r\n .editable-cell-text-wrapper {\r\n box-sizing: border-box;\r\n line-height: 20px;\r\n border-radius: 3px;\r\n }\r\n\r\n .editable-cell-input-wrapper {\r\n padding-right: 0;\r\n .ref-input-wrap {\r\n width: auto !important;\r\n height: 30px;\r\n .u-input-group{\r\n display: inline-block;\r\n }\r\n }\r\n }\r\n\r\n .verify-cell {\r\n padding-right: 25px !important;\r\n }\r\n\r\n .require {\r\n position: absolute;\r\n top: 2px;\r\n color: #F44336;\r\n font-size: 20px;\r\n }\r\n}\r\n\r\n.u-editable-table-tp {\r\n .tp-content {\r\n color: #F44336;\r\n }\r\n}"},{"example":<Demo0503 />,"title":" 弹框（表单）编辑","code":"/**\r\n *\r\n * @title 弹框（表单）编辑\r\n * @parent 编辑 Editor\r\n * @description 以弹框形式以对行进行编辑的表格\r\n * demo0503\r\n */\r\n\r\nimport React, { Component, PureComponent } from \"react\";\nimport { Table } from 'tinper-bee';\r\n\r\nimport {\r\n Select, Form, FormControl, Button, Icon,\r\n Tooltip, Modal, FormGroup, Label, Row, Col\r\n} from \"tinper-bee\";\r\nconst Option = Select.Option;\r\nimport { RefTreeWithInput } from \"ref-tree\";\r\n\r\nfunction handleFormValueChange(WarpCompProps, field, allFields) {\r\n const { onChange, throwError } = WarpCompProps;\r\n if (field.value === \"\") return throwError && throwError(true);\r\n throwError && throwError(false);\r\n onChange && onChange(field.value);\r\n}\r\n\r\nconst StringEditCell = Form.createForm({\r\n onValuesChange: handleFormValueChange\r\n})(PureStringEditCell);\r\n\r\nfunction PureStringEditCell(props) {\r\n const { getFieldProps, getFieldError } = props.form;\r\n const { value, required } = props;\r\n let cls = \"editable-cell\";\r\n if (required) cls += \" required\";\r\n return (\r\n <div className={cls}>\r\n <FormControl\r\n {...getFieldProps(\"value\", {\r\n initialValue: value,\r\n validateTrigger: \"onBlur\",\r\n rules: [\r\n {\r\n required: true,\r\n message: (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={\r\n <div className=\"tp-content\">\r\n {\"请输入\" + props.colName}\r\n </div>\r\n }\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n )\r\n }\r\n ]\r\n })}\r\n />\r\n <span className=\"error\">{getFieldError(\"value\")}</span>\r\n </div>\r\n );\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends PureComponent {\r\n constructor(props, context) {\r\n super(props);\r\n }\r\n\r\n handleSelect = value => {\r\n this.props.onChange && this.props.onChange(value);\r\n };\r\n\r\n render() {\r\n return (\r\n <div className=\"editable-cell\">\r\n <Select value={this.props.value} onSelect={this.handleSelect}>\r\n {SELECT_SOURCE.map((item, index) => (\r\n <Option key={index} value={item}>\r\n {item}\r\n </Option>\r\n ))}\r\n </Select>\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends PureComponent {\r\n constructor(props, context) {\r\n super(props);\r\n }\r\n\r\n handleSelect = values => {\r\n const { form, throwError, onChange } = this.props\r\n if (form.getFieldError(\"refValue\")) return throwError && throwError(true);\r\n throwError && throwError(false);\r\n onChange && onChange(values[0]);\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { value, required } = this.props;\r\n let cls = \"editable-cell\";\r\n if (required) cls += \" required\";\r\n return (\r\n <div className={cls}>\r\n <RefTreeWithInput\r\n {...option}\r\n onSave={this.handleSelect}\r\n getRefTreeData={this.getRefTreeData}\r\n {...getFieldProps(\"refValue\", {\r\n initialValue: JSON.stringify(value),\r\n rules: [\r\n {\r\n message: (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={\r\n <div className=\"tp-content\">\r\n {\"请输入\" + this.props.colName}\r\n </div>\r\n }\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n ),\r\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\r\n }\r\n ]\r\n })}\r\n />\r\n <span className=\"error\">{getFieldError(\"refValue\")}</span>\r\n </div>\r\n );\r\n }\r\n }\r\n);\r\n\r\nclass EditModal extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n data: this.props.data,\r\n errorEditFlag: false\r\n };\r\n\r\n // 属性名对应 columns 属性中的 key 值\r\n this.renderElm = {\r\n b: (record, index) => (\r\n <StringEditCell\r\n colName={\"名字\"}\r\n required={true}\r\n value={record.b}\r\n onChange={this.onFieldChange(\"b\")}\r\n throwError={this.throwError}\r\n />\r\n ),\r\n\r\n c: (record, index) => (\r\n <SelectEditCell\r\n value={record.c}\r\n onChange={this.onFieldChange(\"c\")}\r\n />\r\n ),\r\n d: (record, index) => (\r\n <RefEditCell\r\n colName={\"部门\"}\r\n required={true}\r\n value={record.d}\r\n onChange={this.onFieldChange(\"d\")}\r\n throwError={this.throwError}\r\n />\r\n )\r\n }\r\n }\r\n\r\n onFieldChange = field => value => {\r\n let data = { ...this.state.data };\r\n data[field] = value;\r\n this.setState({ data });\r\n }\r\n\r\n submitChange = () => {\r\n if (this.state.errorEditFlag) return;\r\n const { onSubmit, onHide, currentIndex } = this.props;\r\n onSubmit && onSubmit(this.state.data, currentIndex);\r\n onHide && onHide();\r\n }\r\n\r\n throwError = isError => {\r\n if (isError !== this.state.errorEditFlag)\r\n this.setState({ errorEditFlag: isError });\r\n };\r\n\r\n render() {\r\n const { show, onHide, columns, currentIndex } = this.props;\r\n const { data } = this.state;\r\n return (\r\n <Modal\r\n show={show}\r\n onHide={onHide}\r\n style={{ width: 800 }}\r\n className=\"demo0503-m-b\"\r\n >\r\n <Modal.Header closeButton>\r\n <Modal.Title>编辑行</Modal.Title>\r\n </Modal.Header>\r\n <Modal.Body>\r\n <Form>\r\n <Row style={{ width: 770, margin: \"0 auto\" }}>\r\n {\r\n columns.map((item, index) => {\r\n return (\r\n <Col sm={6} md={6} lg={6} style={{ padding: \"0 0 0 10px\" }} key={index}>\r\n <FormGroup>\r\n <Label><Icon type=\"uf-mi\" className='mast'></Icon>{item.title}</Label>\r\n {this.renderElm[item.key] &&\r\n this.renderElm[item.key](\r\n data,\r\n currentIndex\r\n )}\r\n {!this.renderElm[item.key] && (\r\n <div className=\"editable-cell\">\r\n <FormControl\r\n defaultValue={data[item.dataIndex]}\r\n disabled={true}\r\n />\r\n </div>\r\n )}\r\n </FormGroup>\r\n </Col>\r\n );\r\n })\r\n }\r\n </Row>\r\n </Form>\r\n </Modal.Body>\r\n <Modal.Footer style={{textAlign: \"right\"}}>\r\n <Button\r\n style={{ marginRight: 8 }}\r\n bordered\r\n onClick={onHide}\r\n >\r\n 取消\r\n </Button>\r\n <Button colors=\"primary\" onClick={this.submitChange}>\r\n 确认\r\n </Button>\r\n </Modal.Footer>\r\n </Modal>\r\n );\r\n }\r\n}\r\n\r\nlet dataSource = [\r\n {\r\n a: \"ASVAL_201903280005\",\r\n b: \"小张\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"1\"\r\n },\r\n {\r\n a: \"ASVAL_201903200004\",\r\n b: \"小明\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"2\"\r\n },\r\n {\r\n a: \"ASVAL_201903120002\",\r\n b: \"小红\",\r\n c: \"女\",\r\n d: {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n },\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo0503 extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n // 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应\r\n this.columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"a\",\r\n key: \"a\"\r\n },\r\n {\r\n title: \"名字\",\r\n dataIndex: \"b\",\r\n key: \"b\"\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 100\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 215,\r\n render: (text, record, index) => record.d.name\r\n }\r\n ];\r\n\r\n this.state = {\r\n dataSource: dataSource,\r\n isEditing: false,\r\n currentIndex: null\r\n };\r\n }\r\n\r\n edit = () => {\r\n if (this.state.currentIndex === null) return;\r\n this.setState({ isEditing: true });\r\n };\r\n\r\n abortEdit = () => {\r\n this.setState({ isEditing: false });\r\n };\r\n\r\n commitChange = (editedRowData, rowIndex) => {\r\n console.log(editedRowData)\r\n console.log(rowIndex)\r\n let dataSource = [...this.state.dataSource];\r\n dataSource[rowIndex] = editedRowData;\r\n this.setState({ dataSource });\r\n };\r\n\r\n handleRowHover = (index, record) => {\r\n this.setState({ currentIndex: index });\r\n };\r\n\r\n hideEditModal = () => {\r\n this.setState({ isEditing: false });\r\n }\r\n\r\n renderRowHover = () => {\r\n return (\r\n <div className=\"opt-btns\">\r\n <Button size=\"sm\" onClick={this.edit}>\r\n 编辑\r\n </Button>\r\n </div>\r\n );\r\n };\r\n\r\n\r\n render() {\r\n const { dataSource, isEditing, currentIndex } = this.state;\r\n const columns = this.columns;\r\n return (\r\n <div className=\"demo0503 u-editable-table\">\r\n <Table\r\n data={dataSource}\r\n columns={columns}\r\n height={40}\r\n onRowHover={this.handleRowHover}\r\n hoverContent={this.renderRowHover}\r\n />\r\n {\r\n isEditing ? (\r\n <EditModal\r\n show={isEditing}\r\n onHide={this.hideEditModal}\r\n columns={columns}\r\n data={dataSource[currentIndex]}\r\n onSubmit={this.commitChange}\r\n currentIndex={currentIndex}\r\n />\r\n ) : null\r\n }\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0503;\r\n","desc":" 以弹框形式以对行进行编辑的表格","scss_code":".demo0503-m-b {\r\n\r\n &.u-modal .u-modal-body {\r\n padding: 16px 0;\r\n background: #f7f9fb;\r\n }\r\n\r\n .u-form-group {\r\n overflow: hidden;\r\n }\r\n\r\n .u-form-control {\r\n font-size: 12px;\r\n }\r\n\r\n .editable-cell {\r\n display: block;\r\n float: left;\r\n width: 265px;\r\n padding-right: 25px;\r\n }\r\n\r\n .ref-input-wrap {\r\n width: 240px !important;\r\n }\r\n\r\n .u-label {\r\n display: block;\r\n float: left;\r\n text-align: right;\r\n width: 110px;\r\n box-sizing: border-box;\r\n padding-right: 10px;\r\n font-size: 12px;\r\n height: 32px;\r\n line-height: 32px;\r\n .mast {\r\n padding: 0;\r\n color: red;\r\n }\r\n }\r\n\r\n .required-icon {\r\n position: absolute;\r\n top: 2px;\r\n color: #F44336;\r\n font-size: 20px;\r\n }\r\n}\r\n\r\n.u-editable-table-tp {\r\n z-index: 9999 !important;\r\n\r\n .tp-content {\r\n color: #F44336;\r\n }\r\n}\r\n.ref-core-button .u-button:first-child{\r\n margin-right: 8px;\r\n}"},{"example":<Demo0505 />,"title":" 全表格编辑","code":"/**\r\n *\r\n * @title 全表格编辑\r\n * @parent 编辑 Editor\r\n * @description 以行内编辑形式对全表数据进行编辑\r\n * demo0505\r\n */\r\nimport React, { Component } from \"react\";\nimport { Table, Select, Form, FormControl, Button, Icon, Tooltip } from 'tinper-bee';\r\n\r\n\r\nconst Option = Select.Option;\r\nimport { RefTreeWithInput } from \"ref-tree\";\r\n\r\nclass StringEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleChange = value => {\r\n const { onChange, throwError } = this.props;\r\n if (value === \"\") {\r\n throwError && throwError(true);\r\n } else {\r\n throwError && throwError(false);\r\n }\r\n this.setState({ value });\r\n onChange && onChange(value);\r\n };\r\n\r\n render() {\r\n const { editable, required, colName, isEdited } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n if (value === \"\") cls += \" verify-cell\";\r\n if (isEdited) cls += \" edited\";\r\n return editable ? (\r\n <div className=\"editable-cell\">\r\n <div className={cls}>\r\n <FormControl className={!value && \"error\"} value={value} onChange={this.handleChange} />\r\n <span className=\"error\">\r\n {value === \"\" ? (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={<div className=\"tp-content\">{\"请输入\" + colName}</div>}\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n ) : null}\r\n </span>\r\n </div>\r\n </div>\r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst SELECT_SOURCE = [\"男\", \"女\"];\r\n\r\nclass SelectEditCell extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = value => {\r\n this.setState({ value });\r\n this.props.onChange && this.props.onChange(value);\r\n };\r\n\r\n render() {\r\n const { editable, isEdited } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (isEdited) cls += \" edited\";\r\n return editable ? (\r\n <div className=\"editable-cell\">\r\n <div className={cls}>\r\n <Select value={value} onSelect={this.handleSelect}>\r\n {SELECT_SOURCE.map((item, index) => (\r\n <Option key={index} value={item}>\r\n {item}\r\n </Option>\r\n ))}\r\n </Select>\r\n </div>\r\n </div>\r\n ) : (\r\n value || \" \"\r\n );\r\n }\r\n}\r\n\r\nconst option = {\r\n title: \"树\",\r\n searchable: true,\r\n multiple: false,\r\n param: {\r\n refCode: \"neworganizition_tree\"\r\n },\r\n checkStrictly: true,\r\n disabled: false,\r\n nodeDisplay: record => {\r\n return record.refname;\r\n },\r\n displayField: record => {\r\n return record.refname;\r\n }, //显示内容的键\r\n valueField: \"refpk\", //真实 value 的键\r\n refModelUrl: {\r\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\r\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\r\n },\r\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\r\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\r\n lazyModal: false,\r\n strictMode: true,\r\n lang: \"zh_CN\",\r\n treeData: [\r\n {\r\n code: \"org1\",\r\n children: [\r\n {\r\n code: \"bj\",\r\n entityType: \"mainEntity\",\r\n name: \"北京总部-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"bj\",\r\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\r\n isLeaf: \"true\",\r\n refname: \"北京总部-简\"\r\n },\r\n {\r\n code: \"xd\",\r\n entityType: \"mainEntity\",\r\n name: \"新道-简\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"xd\",\r\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\r\n isLeaf: \"true\",\r\n refname: \"新道-简\"\r\n },\r\n {\r\n code: \"yy3\",\r\n entityType: \"mainEntity\",\r\n name: \"test3\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy3\",\r\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\r\n isLeaf: \"true\",\r\n refname: \"test3\"\r\n },\r\n {\r\n code: \"yy1\",\r\n entityType: \"mainEntity\",\r\n name: \"test1\",\r\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refcode: \"yy1\",\r\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\r\n isLeaf: \"true\",\r\n refname: \"test1\"\r\n },\r\n {\r\n code: \"dept2\",\r\n children: [\r\n {\r\n code: \"cs\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"测试部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"cs\",\r\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\r\n isLeaf: \"true\",\r\n refname: \"测试部-简\"\r\n },\r\n {\r\n code: \"qd\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"前端部-简\",\r\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refcode: \"qd\",\r\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\r\n isLeaf: \"true\",\r\n refname: \"前端部-简\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"生产处\",\r\n refcode: \"dept2\",\r\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\r\n refname: \"生产处\"\r\n },\r\n {\r\n code: \"dept1\",\r\n children: [\r\n {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n }\r\n ],\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务处\",\r\n refcode: \"dept1\",\r\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refname: \"财务处\"\r\n }\r\n ],\r\n entityType: \"mainEntity\",\r\n name: \"用友集团\",\r\n refcode: \"org1\",\r\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n refname: \"用友集团\"\r\n }\r\n ]\r\n};\r\n\r\nconst RefEditCell = Form.createForm()(\r\n class RefComponentWarpper extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.state = {\r\n value: props.value\r\n };\r\n }\r\n\r\n componentWillReceiveProps(nextProps) {\r\n if (!nextProps.editable) {\r\n this.setState({ value: nextProps.value });\r\n }\r\n }\r\n\r\n handleSelect = values => {\r\n this.setState({ value: values[0] });\r\n this.props.onChange && this.props.onChange(values[0]);\r\n };\r\n\r\n render() {\r\n const { getFieldProps, getFieldError } = this.props.form;\r\n const { editable, required, isEdited } = this.props;\r\n const { value } = this.state;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\r\n if (isEdited) cls += \" edited\";\r\n return editable ? (\r\n <div className={cls}>\r\n <RefTreeWithInput\r\n {...option}\r\n onSave={this.handleSelect}\r\n getRefTreeData={this.getRefTreeData}\r\n {...getFieldProps(\"refValue\", {\r\n initialValue: JSON.stringify(value),\r\n rules: [\r\n {\r\n message: (\r\n <Tooltip\r\n inverse\r\n className=\"u-editable-table-tp\"\r\n placement=\"bottom\"\r\n overlay={\r\n <div className=\"tp-content\">\r\n {\"请输入\" + this.props.colName}\r\n </div>\r\n }\r\n >\r\n <Icon className=\"uf-exc-t required-icon\" />\r\n </Tooltip>\r\n ),\r\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\r\n }\r\n ]\r\n })}\r\n />\r\n <span className=\"error\">{getFieldError(\"refValue\")}</span>\r\n </div>\r\n ) : (\r\n value.name || \" \"\r\n );\r\n }\r\n }\r\n);\r\n\r\nlet dataSource = [\r\n {\r\n a: \"ASVAL_201903280005\",\r\n b: \"小张\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"1\"\r\n },\r\n {\r\n a: \"ASVAL_201903200004\",\r\n b: \"小明\",\r\n c: \"男\",\r\n d: {\r\n code: \"dept1_2\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务二科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_2\",\r\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\r\n isLeaf: \"true\",\r\n refname: \"财务二科\"\r\n },\r\n key: \"2\"\r\n },\r\n {\r\n a: \"ASVAL_201903120002\",\r\n b: \"小红\",\r\n c: \"女\",\r\n d: {\r\n code: \"dept1_1\",\r\n entityType: \"subEntity\",\r\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\r\n name: \"财务一科\",\r\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\r\n refcode: \"dept1_1\",\r\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\r\n isLeaf: \"true\",\r\n refname: \"财务一科\"\r\n },\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo0505 extends Component {\r\n constructor(props, context) {\r\n super(props);\r\n this.columns = [\r\n {\r\n title: \"员工编号\",\r\n dataIndex: \"a\",\r\n key: \"a\"\r\n },\r\n {\r\n title: \"名字\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n render: (text, record, index) => (\r\n <StringEditCell\r\n colName={\"名字\"}\r\n editable={this.state.isEditingAll}\r\n isEdited={record.isEdited.b || false}\r\n required\r\n value={text}\r\n onChange={this.onCellChange(index, \"b\")}\r\n throwError={this.throwError}\r\n />\r\n )\r\n },\r\n {\r\n title: \"性别\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 100,\r\n render: (text, record, index) => (\r\n <SelectEditCell\r\n editable={this.state.isEditingAll}\r\n isEdited={record.isEdited.c || false}\r\n value={text}\r\n onChange={this.onCellChange(index, \"c\")}\r\n />\r\n )\r\n },\r\n {\r\n title: \"部门\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 215,\r\n render: (text, record, index) => (\r\n <RefEditCell\r\n colName={\"部门\"}\r\n editable={this.state.isEditingAll}\r\n isEdited={record.isEdited.d || false}\r\n required\r\n value={record.d}\r\n onChange={this.onCellChange(index, \"d\")}\r\n throwError={this.throwError}\r\n />\r\n )\r\n },\r\n // 只是用来占位占宽度的\r\n {\r\n key: \"placeholder\"\r\n }\r\n ];\r\n\r\n // 用于记录数据是否被修改\r\n dataSource.forEach(item => (item.isEdited = {}));\r\n this.state = {\r\n dataSource: dataSource,\r\n isEditingAll: false,\r\n currentIndex: null,\r\n errorEditFlag: false\r\n };\r\n\r\n // 用于记录编辑前数据\r\n this.dataBuffer = [];\r\n }\r\n\r\n edit = () => {\r\n this.dataBuffer = [];\r\n // 最好使用深复制\r\n this.state.dataSource.forEach((item, index) => {\r\n this.dataBuffer.push({ ...item });\r\n });\r\n this.setState({ isEditingAll: true });\r\n };\r\n\r\n abortEdit = () => {\r\n let originData = [...this.state.dataSource];\r\n originData.forEach(item => (item.isEdited = {}));\r\n this.setState({\r\n isEditingAll: false,\r\n dataSource: originData\r\n });\r\n };\r\n\r\n commitChange = () => {\r\n if (this.state.errorEditFlag) return;\r\n const newData = this.dataBuffer.map(item => {\r\n return Object.assign({}, item, { isEdited: {} });\r\n });\r\n this.setState({ isEditingAll: false, dataSource: newData });\r\n };\r\n\r\n onCellChange = (index, key) => value => {\r\n this.dataBuffer[index][key] = value;\r\n this.dataBuffer[index].isEdited[key] = true;\r\n };\r\n\r\n throwError = isError => {\r\n if (isError !== this.state.errorEditFlag)\r\n this.setState({ errorEditFlag: isError });\r\n };\r\n\r\n render() {\r\n const { dataSource, isEditingAll } = this.state;\r\n const columns = this.columns;\r\n return (\r\n <div className=\"demo0505 u-editable-table\">\r\n <div className=\"toolbar-btns\">\r\n {isEditingAll ? (\r\n <React.Fragment>\r\n <Button colors=\"primary\" onClick={this.commitChange}>\r\n 确认\r\n </Button>\r\n <Button\r\n bordered\r\n onClick={this.abortEdit}\r\n >\r\n 取消\r\n </Button>\r\n </React.Fragment>\r\n ) : (\r\n <Button colors=\"secondary\" onClick={this.edit}>\r\n 编辑全表\r\n </Button>\r\n )}\r\n </div>\r\n <Table data={dataSource} columns={columns} height={40} />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo0505;\r\n","desc":" 以行内编辑形式对全表数据进行编辑","scss_code":".demo0505 {\r\n\r\n .toolbar-btns {\r\n margin-bottom: 8px;\r\n\r\n .u-button {\r\n &:first-child {\r\n margin-right: 8px;\r\n }\r\n }\r\n }\r\n\r\n .u-table {\r\n .u-row-select {\r\n background-color: #FFF7E7;\r\n }\r\n .u-table-row {\r\n td {\r\n padding: 5px 8px;\r\n\r\n input {\r\n font-size: 12px;\r\n padding-left: 5px;\r\n }\r\n }\r\n\r\n .u-form-control,\r\n .u-select-selection {\r\n height: 30px;\r\n }\r\n }\r\n\r\n .editable-cell-text-wrapper {\r\n box-sizing: border-box;\r\n line-height: 20px;\r\n border-radius: 3px;\r\n }\r\n\r\n .required {\r\n margin-left: 10px;\r\n position: relative;\r\n\r\n &::before {\r\n content: \" \";\r\n border: 1px solid #F44336;\r\n width: 0;\r\n height: 12px;\r\n position: absolute;\r\n top: 9px;\r\n left: -8px;\r\n }\r\n\r\n span.u-input-group {\r\n display: block\r\n }\r\n }\r\n\r\n .verify-cell {\r\n padding-right: 25px !important;\r\n }\r\n\r\n .edited::after {\r\n content: \" \";\r\n position: absolute;\r\n z-index: 999;\r\n top: 0;\r\n left: 0;\r\n border-width: 5px;\r\n border-style: solid;\r\n border-color: #f44336 transparent transparent #f44336;\r\n }\r\n\r\n .required-icon {\r\n position: absolute;\r\n top: 2px;\r\n color: #F44336;\r\n font-size: 20px;\r\n }\r\n\r\n .ref-input-wrap {\r\n width: 160px !important;\r\n }\r\n }\r\n}\r\n\r\n.u-editable-table-tp {\r\n .tp-content {\r\n color: #F44336;\r\n }\r\n}"},{"example":<Demo0601 />,"title":" 左侧固定列","code":"/**\r\n*\r\n* @title 左侧固定列\r\n* @parent 列操作-锁定 Fixed\r\n* @description 固定列到表格的左侧\r\n* demo0601\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n fixed: 'left',\r\n render(text, record, index){return index + 1}\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 100, \r\n fixed: 'left',\r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 100\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 100\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n \r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 100\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\r\n }\r\n];\r\n\r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"3\"\r\n }\r\n];\r\n\r\nclass Demo51 extends Component {\r\n render() {\r\n return <Table columns={columns} data={data} scroll={{ x: \"110%\", y: 240 }} />;\r\n }\r\n}\r\n\r\nexport default Demo51;","desc":" 固定列到表格的左侧"},{"example":<Demo0602 />,"title":" 右侧固定列","code":"/**\r\n*\r\n* @title 右侧固定列\r\n* @parent 列操作-锁定 Fixed\r\n* @description 固定列到表格的右侧\r\n* demo0602\r\n*/\r\n\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Popconfirm } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n fixed: 'left',\r\n render(text, record, index){return index + 1}\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 100, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 100\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 100\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n \r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 100\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width:100,\r\n fixed: \"right\",\r\n render(text, record, index) {\r\n return (\r\n <div className='operation-btn'>\r\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>\r\n <a href=\"javascript:;\" >\r\n 一些操作\r\n </a>\r\n </Popconfirm>\r\n </div>\r\n )\r\n }\r\n }\r\n];\r\n\r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"4\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"6\"\r\n }\r\n];\r\n\r\nclass Demo52 extends Component {\r\n render() {\r\n return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }} />;\r\n }\r\n}\r\n\r\nexport default Demo52;","desc":" 固定列到表格的右侧"},{"example":<Demo0603 />,"title":" 动态设置列锁定、解除锁定","code":"/**\r\n*\r\n* @title 动态设置列锁定、解除锁定\r\n* @parent 列操作-锁定 Fixed\r\n* @description 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。\r\n* demo0603\r\n*/\r\nimport React, { Component } from 'react';\nimport { Table, Icon,Menu,Dropdown } from 'tinper-bee';\r\n\r\n\r\n\r\n\r\nconst { Item } = Menu;\r\n\r\nconst columns = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 85, \r\n fixed: 'left',\r\n render(text, record, index){return index + 1}\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 120, \r\n fixed: 'left',\r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 150\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 100\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n \r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"确认状态\",\r\n dataIndex: \"confirmState_name\",\r\n key: \"confirmState_name\",\r\n width: 100\r\n }, \r\n {\r\n title: \"关闭状态\",\r\n dataIndex: \"closeState_name\",\r\n key: \"closeState_name\",\r\n width: 100\r\n }\r\n];\r\n\r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"3\"\r\n }\r\n];\r\n \r\nclass Demo24 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n columns:columns\r\n }\r\n }\r\n \r\n onSelect = ({key,item})=>{ \r\n console.log(`${key} selected`); //获取key\r\n let currentObject = item.props.data; //获取选中对象的数据\r\n let {columns} = this.state;\r\n let fixedCols = [];\r\n let nonColums = [];\r\n columns.find(da=>{\r\n if(da.key == key){\r\n da.fixed?delete da.fixed:da.fixed = 'left';\r\n }\r\n da.fixed?fixedCols.push(da):nonColums.push(da);\r\n });\r\n \r\n columns = [...fixedCols,...nonColums]\r\n\r\n this.setState({\r\n columns\r\n });\r\n }\r\n //表头增加下拉菜单\r\n renderColumnsDropdown(columns) {\r\n const icon ='uf-arrow-down';\r\n \r\n return columns.map((originColumn,index) => {\r\n let column = Object.assign({}, originColumn);\r\n let menuInfo = [], title='锁定';\r\n if(originColumn.fixed){\r\n title = '解锁'\r\n }\r\n menuInfo.push({\r\n info:title,\r\n key:originColumn.key,\r\n index:index\r\n });\r\n const menu = (\r\n <Menu onSelect={this.onSelect} >{\r\n menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })\r\n }\r\n </Menu>)\r\n column.title = (\r\n <span className='title-con drop-menu'>\r\n {column.title}\r\n <Dropdown\r\n trigger={['click']} \r\n overlay={menu}\r\n animation=\"slide-up\"\r\n >\r\n <Icon type={icon}/>\r\n </Dropdown> \r\n \r\n </span>\r\n );\r\n return column;\r\n });\r\n \r\n }\r\n\r\n render() {\r\n let {columns} = this.state;\r\n columns = this.renderColumnsDropdown(columns);\r\n return(\r\n <div className=\"demo24\">\r\n <Table columns={columns} data={data} scroll={{ x: \"110%\", y: 240 }}/>\r\n </div>\r\n )\r\n }\r\n}\r\n\r\nexport default Demo24;","desc":" 动态设置columns中数据的fixed属性值【fixed: \"left\"，fixed: \"right\"】。","scss_code":"th{\r\n .drop-menu{\r\n .uf{\r\n font-size: 12px;\r\n visibility: hidden;\r\n margin-left: 15px;\r\n }\r\n \r\n \r\n }\r\n &:hover{\r\n .uf{\r\n visibility: visible;\r\n }\r\n }\r\n\r\n}\r\n\r\n"},{"example":<Demo0701 />,"title":" 按条件、值过滤","code":"/**\r\n*\r\n* @title 按条件、值过滤\r\n* @parent 列操作-过滤 Filter\r\n* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。\r\n* demo0701\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\nconst columns = [\r\n { title: \"姓名\", width: 180, dataIndex: \"name\", key: \"name\", filterType: \"text\", filterDropdown: \"show\" },\r\n { title: \"年龄\", width: 150, dataIndex: \"age\", key: \"age\", filterType: \"dropdown\", filterDropdown: \"show\" },\r\n { title: \"日期\", width: 200, dataIndex: \"date\", key: \"date\", filterType: \"date\", filterDropdown: \"show\", format: \"YYYY-MM-DD\" },\r\n { title: \"居住地址\", width: 150, dataIndex: \"address\", key: \"address\", filterType: \"dropdown\", filterDropdown: \"show\" },\r\n { title: \"备注\", dataIndex: \"mark\", key: \"mark\" }\r\n];\r\n\r\nconst data = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-19\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n }, {\r\n key: \"5\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"6\",\r\n name: \"Jim Green\",\r\n age: 48,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"7\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"8\",\r\n name: \"Jim Green\",\r\n age: 38,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n }\r\n];\r\n\r\nclass Demo23 extends Component {\r\n handlerFilterChange = (key, val, condition) => {\r\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\r\n }\r\n\r\n handlerFilterClear = (key) => {\r\n console.log('清除条件', key);\r\n }\r\n render() {\r\n return <Table\r\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\r\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\r\n filterDelay={500}//输入文本多少ms触发回调函数，默认300ms\r\n filterable={true}//是否开启过滤数据功能\r\n bordered\r\n columns={columns}\r\n data={data} />;\r\n }\r\n}\r\n\r\nexport default Demo23;","desc":" 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。"},{"example":<Demo0702 />,"title":" 复杂表格中行过滤","code":"/**\r\n*\r\n* @title 复杂表格中行过滤\r\n* @parent 列操作-过滤 Filter\r\n* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等\r\n* demo0702\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Icon,Checkbox } from 'tinper-bee';\r\n\r\n\r\n\r\nimport multiSelect from 'bee-table/build/lib/multiSelect';\r\nimport sort from 'bee-table/build/lib/sort';\r\n\r\nconst data = [\r\n {\r\n key: \"1\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-19\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"2\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"朝阳区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"3\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"4\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"东城区\",\r\n mark: \"无\"\r\n }, {\r\n key: \"5\",\r\n name: \"John Brown\",\r\n age: 32,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"6\",\r\n name: \"Jim Green\",\r\n age: 48,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"7\",\r\n name: \"Jim Green\",\r\n age: 40,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n },\r\n {\r\n key: \"8\",\r\n name: \"Jim Green\",\r\n age: 38,\r\n date: \"2018-09-18\",\r\n address: \"海淀区\",\r\n mark: \"无\"\r\n }\r\n];\r\n\r\n\r\nconst MultiSelectTable = multiSelect(Table, Checkbox);\r\nconst ComplexTable = sort(MultiSelectTable, Icon);\r\nclass Demo24 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n dropdownvalue: []\r\n }\r\n }\r\n handlerFilterChange = (key, val, condition) => {\r\n console.log('参数：key=', key, ' value=', val, 'condition=', condition);\r\n }\r\n\r\n handlerFilterClear = (key) => {\r\n console.log('清除条件', key);\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n }\r\n onSelect = (item) => {\r\n console.log(item);\r\n }\r\n\r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n let columns = [\r\n {\r\n title: \"姓名\",\r\n width: 180,\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n filterType: \"text\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"string\"//字符条件\r\n },\r\n {\r\n title: \"年龄\",\r\n width: 180,\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n filterType: \"number\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n },\r\n {\r\n title: \"日期\",\r\n width: 190,\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n filterType: \"date\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"string\"//字符条件\r\n },\r\n {\r\n title: \"时间范围\",\r\n width: 290,\r\n dataIndex: \"mark\",\r\n key: \"mark\",\r\n filterType: \"daterange\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n },\r\n {\r\n title: \"地址\",\r\n width: 100,\r\n dataIndex: \"address\",\r\n key: \"address\",\r\n filterType: \"dropdown\",//输入框类型\r\n filterDropdown: \"show\",//显示条件\r\n filterDropdownType: \"number\"//字符条件\r\n }\r\n ];\r\n return <ComplexTable\r\n onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()\r\n onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()\r\n filterDelay={500}//输入文本多少ms触发回调函数，默认500ms\r\n filterable={true}//是否开启过滤数据功能\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n bordered\r\n multiSelect={multiObj}\r\n columns={columns}\r\n data={data} />;\r\n }\r\n}\r\n\r\nexport default Demo24;","desc":" 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等"},{"example":<Demo0802 />,"title":" 列过滤面板","code":"/**\r\n*\r\n* @title 列过滤面板\r\n* @parent 列操作-隐藏 Hide\r\n* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。\r\n* demo0802\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Icon,Popover } from 'tinper-bee';\r\n\r\n\r\nimport filterColumn from 'bee-table/build/lib/filterColumn';\r\nimport sum from 'bee-table/build/lib/sum';\r\n\r\nconst data = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\r\n key: \"3\"\r\n }\r\n];\r\n\r\nconst FilterColumnTable = filterColumn(Table, Popover, Icon);\r\n\r\nconst defaultProps21 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo21 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state ={\r\n columns: [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n fixed: 'left',\r\n render(text, record, index){return index + 1}\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 100, \r\n fixed: 'left',\r\n required: true\r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 150,\r\n required: true\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 100\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 100\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 150\r\n },\r\n {\r\n title: \"审批状态\",\r\n dataIndex: \"approvalState_name\",\r\n key: \"approvalState_name\",\r\n width: 150\r\n }\r\n ]};\r\n }\r\n afterFilter = (optData,columns)=>{\r\n if(optData.key == 'b'){\r\n if(optData.ifshow){\r\n columns[2].ifshow = false;\r\n }else{\r\n columns[2].ifshow = true;\r\n }\r\n this.setState({\r\n columns21 :columns,\r\n showFilterPopover:true\r\n });\r\n }\r\n \r\n }\r\n \r\n render() {\r\n return <FilterColumnTable \r\n columns={this.state.columns} \r\n data={data} \r\n afterFilter={this.afterFilter} \r\n showFilterPopover={this.state.showFilterPopover}\r\n />;\r\n }\r\n}\r\n\r\nDemo21.defaultProps = defaultProps21;\r\nexport default Demo21;","desc":" 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。"},{"example":<Demo0901 />,"title":" 列排序","code":"/**\r\n* @title 列排序\r\n* @parent 列操作-排序 Sort\r\n* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称\r\n* demo0901\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\r\n\r\n\r\nimport sort from \"bee-table/build/lib/sort.js\";\r\n\r\nlet ComplexTable = sort(Table, Icon);\r\nconst columns11 = [\r\n {\r\n title: \"单据编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: 120,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n width: 200,\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"supplier\",\r\n key: \"supplier\",\r\n width: 100\r\n },\r\n {\r\n title: \"联系人\",\r\n dataIndex: \"contact\",\r\n key: \"contact\",\r\n },\r\n {\r\n title: \"整单数量\",\r\n dataIndex: \"total\",\r\n key: \"total\",\r\n width: 150,\r\n sorter: (a, b) => a.total - b.total\r\n }\r\n];\r\n\r\nconst data11 = [\r\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,key: \"1\" },\r\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,key: \"2\" },\r\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,key: \"3\" }\r\n];\r\n\r\nconst defaultProps11 = {\r\n prefixCls: \"bee-table\"\r\n};\r\nclass Demo11 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sortOrder: \"\",\r\n data: data11\r\n };\r\n }\r\n render() {\r\n\r\n return <ComplexTable columns={columns11} data={this.state.data} />;\r\n }\r\n}\r\nDemo11.defaultProps = defaultProps11;\r\n\r\n\r\nexport default Demo11;","desc":" column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称"},{"example":<Demo0902 />,"title":" 后端列排序","code":"/**\r\n* @title 后端列排序\r\n* @parent 列操作-排序 Sort\r\n* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序\r\n* demo0902\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Icon } from 'tinper-bee';\r\n\r\n\r\nimport sort from \"bee-table/build/lib/sort.js\";\r\nlet ComplexTable = sort(Table, Icon);\r\n\r\n// const columns11 = [\r\n// {\r\n// title: \"名字\",\r\n// dataIndex: \"a\",\r\n// key: \"a\",\r\n// width: 100\r\n// },\r\n// {\r\n// title: \"性别\",\r\n// dataIndex: \"b\",\r\n// key: \"b\",\r\n// width: 100\r\n// },\r\n// {\r\n// title: \"年龄\",\r\n// dataIndex: \"c\",\r\n// key: \"c\",\r\n// width: 200,\r\n// sorter: (a, b) => a.c - b.c\r\n// },\r\n// {\r\n// title: \"武功级别\",\r\n// dataIndex: \"d\",\r\n// key: \"d\"\r\n// },\r\n// {\r\n// title: \"分数\",\r\n// dataIndex: \"e\",\r\n// key: \"e\",\r\n// sorter: (a, b) => a.c - b.c\r\n// },\r\n// ];\r\n\r\n// const data11 = [\r\n// { a: \"杨过\", b: \"男\", c: 30,d:'内行', e:139,key: \"2\" },\r\n// { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', e:109, key: \"1\" },\r\n// { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', e:159, key: \"3\" }\r\n// ];\r\nconst columns11 = [\r\n {\r\n title: \"单据编号\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: 120,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"date\",\r\n key: \"date\",\r\n width: 200,\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"supplier\",\r\n key: \"supplier\",\r\n width: 100\r\n },\r\n {\r\n title: \"联系人\",\r\n dataIndex: \"contact\",\r\n key: \"contact\",\r\n },\r\n {\r\n title: \"整单数量\",\r\n dataIndex: \"total\",\r\n key: \"total\",\r\n width: 150,\r\n sorter: (a, b) => a.total - b.total\r\n },\r\n {\r\n title: \"金额\",\r\n dataIndex: \"money\",\r\n key: \"money\",\r\n width: 100,\r\n sorter: (a, b) => a.money - b.money\r\n }\r\n];\r\n\r\nconst data11 = [\r\n { num: \"NU0391001\", date: \"2019-03-01\", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: \"1\" },\r\n { num: \"NU0391002\", date: \"2018-11-02\", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: \"2\" },\r\n { num: \"NU0391003\", date: \"2019-05-03\", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: \"3\" }\r\n];\r\n\r\nconst defaultProps = {\r\n prefixCls: \"bee-table\"\r\n};\r\nclass Demo28 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n sortOrder: \"\",\r\n data: data11\r\n };\r\n }\r\n /**\r\n * 后端获取数据\r\n */\r\n sortFun = (sortParam)=>{\r\n console.info(sortParam);\r\n //将参数传递给后端排序\r\n }\r\n render() {\r\n let sortObj = {\r\n mode:'multiple',\r\n backSource:true,\r\n sortFun:this.sortFun\r\n }\r\n return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;\r\n }\r\n}\r\nDemo28.defaultProps = defaultProps;\r\n\r\n\r\nexport default Demo28;","desc":" 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序"},{"example":<Demo0903 />,"title":" 多列排序","code":"/**\r\n *\r\n * @title 多列排序\r\n * @parent 列操作-排序 Sort\r\n * @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。\r\n * demo0903\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Checkbox,Button,Icon } from 'tinper-bee';\r\n\r\n\r\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\r\nimport sort from \"bee-table/build/lib/sort.js\";\r\nimport sum from \"bee-table/build/lib/sum.js\";\r\n\r\nconst columns13 = [\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n className:'dfasd',\r\n width: 200,\r\n sorter: (pre, after) => {return pre.a.localeCompare(after.a)},\r\n sorterClick:(data,type)=>{//排序的回调函数\r\n //type value is up or down\r\n console.log(\"data\",data);\r\n }\r\n },\r\n {\r\n title: \"金额\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (pre, after) => pre.b - after.b,\r\n sorterClick:(data,type)=>{//排序的回调函数\r\n //type value is up or down\r\n console.log(\"data\",data);\r\n }\r\n },\r\n {\r\n title: \"整单数量\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (pre, after) => pre.c - after.c,\r\n sorterClick:(data,type)=>{//排序的回调函数\r\n //type value is up or down\r\n console.log(\"data\",data);\r\n }\r\n },\r\n {\r\n title: \"日销售量\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (pre, after) => pre.e - after.e,\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 200\r\n }\r\n];\r\n\r\nconst data13 = [\r\n { a: \"NU0391001\", b: 675, c: 30, d: \"xx供应商\",e:100, key: \"2\" },\r\n { a: \"NU0391002\", b: 43, c: 41, d: \"yy供应商\",e:90, key: \"1\" },\r\n { a: \"NU0391003\", b: 43, c: 81, d: \"zz供应商\", e:120,key: \"4\" },\r\n { a: \"NU0391004\", b: 43, c: 81, d: \"aa供应商\", e:130,key: \"5\" },\r\n { a: \"NU0391005\", b: 153, c: 25, d: \"bb供应商\",e:90, key: \"3\" }\r\n];\r\n\r\n\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);\r\n\r\nclass Demo13 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data13: data13,\r\n selectedRow: this.selectedRow,\r\n selectDisabled: this.selectDisabled\r\n };\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n };\r\n selectDisabled = (record, index) => {\r\n // console.log(record);\r\n if (index === 1) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n selectedRow = (record, index) => {\r\n // console.log(record);\r\n if (index === 0) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n onClick = () => {\r\n this.setState({\r\n selectedRow: function() {}\r\n });\r\n };\r\n\r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n let sortObj = {\r\n mode:'multiple'\r\n }\r\n \r\n return (\r\n <div>\r\n <Button className=\"editable-add-btn\" onClick={this.onClick}>\r\n 清空已选\r\n </Button>\r\n <ComplexTable\r\n bordered\r\n selectDisabled={this.state.selectDisabled}\r\n selectedRow={this.state.selectedRow}\r\n columns={columns13}\r\n data={this.state.data13}\r\n multiSelect={multiObj}\r\n sort={sortObj}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\nexport default Demo13;","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":<Demo1001 />,"title":" 拖拽改变列顺序","code":"/**\r\n*\r\n* @title 拖拽改变列顺序\r\n* @parent 列操作-拖拽 Drag\r\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\r\n* demo1001\r\n*/\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n \r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: 100\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 200\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.c\r\n },\r\n {\r\n title: \"联系人\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 500,\r\n },\r\n {\r\n title: \"操作\",\r\n dataIndex: \"e\",\r\n key: \"e\",\r\n width: 200,\r\n fixed: 'right',\r\n }\r\n];\r\n\r\nconst data = [\r\n { a: \"NU0391001\", b: \"2019-03-01\", c: 'xx供应商',d:'Tom',e:'...', key: \"2\" },\r\n { a: \"NU0391002\", b: \"2018-11-02\", c: 'yy供应商',d:'Jack',e:'...', key: \"1\" },\r\n { a: \"NU0391003\", b: \"2019-05-03\", c: 'zz供应商',d:'Jane',e:'...', key: \"3\" }\r\n];\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nconst defaultProps29 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo29 extends Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n \r\n render() {\r\n return <DragColumnTable \r\n columns={columns} \r\n data={data} \r\n bordered\r\n draggable={true}\r\n\r\n onDrop ={(event,data,columns)=>{\r\n console.log(\"--拖拽交换列onDrop触发事件\");\r\n console.log(\"event.target:\",event.target);\r\n console.log(\"data:\",data);\r\n console.log(\"拖拽完成后的columns:\",columns);\r\n }}\r\n\r\n onDragEnd ={(event,data,columns)=>{\r\n console.log(\"--拖拽交换列后触发事件\");\r\n console.log(\"event.target:\",event.target);\r\n console.log(\"data:\",data);\r\n console.log(\"拖拽完成后的columns:\",columns);\r\n }}\r\n />;\r\n }\r\n}\r\n\r\nDemo29.defaultProps = defaultProps29;\r\nexport default Demo29;","desc":" 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。"},{"example":<Demo1002 />,"title":" 拖拽改变列宽度","code":"/**\r\n*\r\n* @title 拖拽改变列宽度\r\n* @parent 列操作-拖拽 Drag\r\n* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头。\r\n* demo1002\r\n*/\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n \r\nimport dragColumn from 'bee-table/build/lib/dragColumn';\r\n\r\nconst columns = [\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"a\",\r\n key: \"a\",\r\n width: '200',\r\n fixed:'left'\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: '600'\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"c\",\r\n key: \"c\",\r\n width: '200',\r\n }, \r\n {\r\n title: \"联系人\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width: 500,\r\n }\r\n];\r\n\r\nconst data = [\r\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\",d:'Tom', key: \"2\" },\r\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\",d:'Jack', key: \"1\" },\r\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\",d:'Jane', key: \"3\" }\r\n];\r\n\r\nconst DragColumnTable = dragColumn(Table);\r\n\r\nclass Demo30 extends Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n\r\n render() {\r\n return <DragColumnTable \r\n columns={columns} \r\n data={data} \r\n bordered\r\n scroll={{y:200}}\r\n dragborder={true} \r\n onDropBorder ={(e,width)=>{\r\n console.log(width+\"--调整列宽后触发事件\",e.target);\r\n }}\r\n />;\r\n }\r\n}\r\n\r\nexport default Demo30;","desc":" onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头。"},{"example":<Demo1101 />,"title":" 嵌套子表格","code":"/**\r\n*\r\n* @title 嵌套子表格\r\n* @parent 扩展行 Expanded Row\r\n* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。\r\n* demo1101\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm,Icon,Checkbox } from 'tinper-bee';\r\n\r\n\r\nimport multiSelect from \"bee-table/build/lib/multiSelect\";\r\n\r\nconst columns16 = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\", \r\n width:100,\r\n render(text, record, index) {\r\n return (\r\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\r\n <a href=\"javascript:;\" tooltip={text} >\r\n 一些操作\r\n </a>\r\n </Popconfirm>\r\n );\r\n }\r\n },\r\n { title: \"订单编号\", dataIndex: \"a\", key: \"a\", width: 250 },\r\n { id: \"123\", title: \"单据日期\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"供应商\", dataIndex: \"c\", key: \"c\", width: 200, fixed:'right' },\r\n \r\n];\r\nconst columns17 = [\r\n { title: \"订单编号\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"单据日期\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"供应商\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n];\r\n\r\nconst data16 = [\r\n { a: \"NU0391001\", b: \"2019-03-01\", c: \"xx供应商\", d: \"操作\", key: \"1\" },\r\n { a: \"NU0391002\", b: \"2018-11-02\", c: \"yy供应商\", d: \"操作\", key: \"2\" },\r\n { a: \"NU0391003\", b: \"2019-05-03\", c: \"zz供应商\", d: \"操作\", key: \"3\" }\r\n];\r\nconst MultiSelectTable = multiSelect(Table,Checkbox);\r\nclass Demo16 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n data_obj:{}\r\n }\r\n }\r\n expandedRowRender = (record, index, indent) => {\r\n return (\r\n <Table\r\n columns={columns17}\r\n data={this.state.data_obj[record.key]}\r\n />\r\n );\r\n };\r\n getData=(expanded, record)=>{\r\n //当点击展开的时候才去请求数据\r\n let new_obj = Object.assign({},this.state.data_obj);\r\n if(expanded){\r\n if(record.key==='1'){\r\n new_obj[record.key] = [\r\n { a: \"NU0391056\", b: \"2019-03-01\", c: \"gys1\", d: \"操作\", key: \"1\" },\r\n { a: \"NU0391057\", b: \"2018-11-02\", c: \"gys2\", d: \"操作\", key: \"2\" },\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }else{\r\n new_obj[record.key] = [\r\n { a: \"NU0391079\", b: \"2019-04-17\", c: \"gys5\", d: \"操作\", key: \"3\" },\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }\r\n }\r\n }\r\n\r\n haveExpandIcon=(record, index)=>{\r\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\r\n if(index == 0){\r\n return true;\r\n }\r\n return false;\r\n }\r\n\r\n render() {\r\n return (\r\n <MultiSelectTable\r\n className=\"expanded-table\"\r\n columns={columns16}\r\n data={data16}\r\n onExpand={this.getData}\r\n expandedRowRender={this.expandedRowRender}\r\n expandIconAsCell={true}\r\n collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}\r\n expandedIcon={<Icon type='uf-treearrow-down'/>}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo16;\r\n","desc":" 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。","scss_code":".expanded-table{\r\n .expand-icon-con .uf{\r\n font-size: 12px;\r\n }\r\n}"},{"example":<Demo1102 />,"title":" 树型表格数据展示","code":"/**\r\n*\r\n* @title 树型表格数据展示\r\n* @parent 扩展行 Expanded Row\r\n* @description 通过在data中配置children数据，来自动生成树形表格\r\n* demo1102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns4 = [\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: \"40%\"\r\n },\r\n {\r\n title: \"单据日期\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: \"30%\"\r\n },\r\n {\r\n title: \"供应商\",\r\n dataIndex: \"address\",\r\n key: \"address\"\r\n }\r\n];\r\n\r\nconst data4 = [\r\n {\r\n key: 1,\r\n name: \"NU0391001\",\r\n age: \"2019-03-01\",\r\n address: \"供应商1\",\r\n children: [\r\n {\r\n key: 11,\r\n name: \"NU0391002\",\r\n age: \"2019-03-02\",\r\n address: \"供应商2\"\r\n },\r\n {\r\n key: 12,\r\n name: \"NU0391003\",\r\n age: \"2019-03-03\",\r\n address: \"供应商3\",\r\n children: [\r\n {\r\n key: 121,\r\n name: \"NU0391004\",\r\n age: \"2019-03-04\",\r\n address: \"供应商4\"\r\n }\r\n ]\r\n },\r\n {\r\n key: 13,\r\n name: \"NU0391005\",\r\n age: \"2019-03-05\",\r\n address: \"供应商5\",\r\n children: [\r\n {\r\n key: 131,\r\n name: \"NU0391006\",\r\n age: \"2019-03-06\",\r\n address: \"供应商6\",\r\n children: [\r\n {\r\n key: 1311,\r\n name: \"NU0391007\",\r\n age: \"2019-03-07\",\r\n address: \"供应商7\"\r\n },\r\n {\r\n key: 1312,\r\n name: \"NU0391008\",\r\n age: \"2019-03-08\",\r\n address: \"供应商8\"\r\n }\r\n ]\r\n }\r\n ]\r\n }\r\n ]\r\n },\r\n {\r\n key: 2,\r\n name: \"NU0391009\",\r\n age: \"2019-03-09\",\r\n address: \"供应商9\"\r\n }\r\n];\r\nclass Demo4 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data4,\r\n factoryValue: 0,\r\n selectedRow: new Array(data4.length)//状态同步\r\n }\r\n }\r\n\r\n render() {\r\n return <Table \r\n rowClassName={(record,index,indent)=>{\r\n if (this.state.selectedRow[index]) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n let selectedRow = new Array(this.state.data.length);\r\n selectedRow[index] = true;\r\n this.setState({\r\n factoryValue: record,\r\n selectedRow: selectedRow\r\n });\r\n }}\r\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\r\n columns={columns4} data={data4} />;\r\n }\r\n}\r\n\r\n\r\nexport default Demo4;","desc":" 通过在data中配置children数据，来自动生成树形表格"},{"example":<Demo1103 />,"title":" 自定义表格标题、表尾、选中行颜色","code":"/**\r\n*\r\n* @title 自定义表格标题、表尾、选中行颜色\r\n* @parent 扩展行 Expanded Row\r\n* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。\r\n* demo1103\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip, } from 'tinper-bee';\r\n\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo26 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n rowClassName={(record,index,indent)=>{\r\n if (this.state.selectedRowIndex == index) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n onRowClick={(record,index,indent)=>{\r\n this.setState({ \r\n selectedRowIndex: index\r\n });\r\n }}\r\n title={currentData => <div>员工信息统计表</div>}\r\n footer={currentData => <div>合计: 共{data.length}条数据</div>}\r\n /> \r\n );\r\n }\r\n}\r\n\r\nexport default Demo26;\r\n","desc":" 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。"},{"example":<Demo1105 />,"title":" 紧凑型、宽松型","code":"/**\r\n*\r\n* @title 紧凑型、宽松型\r\n* @parent 扩展行 Expanded Row\r\n* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。\r\n* demo1105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip,Tag } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"订单编号\", dataIndex: \"orderNum\", key: \"orderNum\", width: 100 },\r\n { title: \"采购组织\", dataIndex: \"org\", key: \"org\", width: 200 },\r\n { title: \"供应商\", dataIndex: \"supplier\", key: \"supplier\", width: 100 },\r\n { title: \"订单日期\", dataIndex: \"orderDate\", key: \"orderDate\", width: 150 },\r\n { title: \"总数量\", dataIndex: \"quantity\", key: \"quantity\", width: 100 },\r\n { title: \"单据状态\", dataIndex: \"status\", key: \"status\", width: 100, \r\n render: (text, record, index) => {\r\n return (\r\n <Tag colors={text.type}>{text.desc}</Tag>\r\n );\r\n }},\r\n { title: \"提交人\", dataIndex: \"submitter\", key: \"submitter\", width: 100 },\r\n { title: \"单位\", dataIndex: \"unit\", key: \"unit\", width: 100 },\r\n { title: \"总税价合计\", dataIndex: \"sum\", key: \"sum\", width: 100 },\r\n];\r\n\r\nconst data = [\r\n { \r\n orderNum: \"NU0391025\", \r\n org: \"用友网络科技股份有限公司\", \r\n supplier: \"xx供应商\", \r\n orderDate: '2018年03月18日', \r\n quantity: '100.00', \r\n status: {type:'success' ,desc:'正常'}, \r\n submitter: '小张', \r\n unit: 'pc', \r\n sum:'8,487.00', \r\n key: \"1\" \r\n },\r\n { \r\n orderNum: \"NU0391026\", \r\n org: \"用友网络科技股份有限公司\", \r\n supplier: \"xx供应商\", \r\n orderDate: '2018年02月05日', \r\n quantity: '91.00', \r\n status: {type:'danger' ,desc:'异常'}, \r\n submitter: '小红', \r\n unit: 'pc', \r\n sum:'675.00', \r\n key: \"2\" \r\n },\r\n { \r\n orderNum: \"NU0391027\", \r\n org: \"用友网络科技股份有限公司\", \r\n supplier: \"xx供应商\", \r\n orderDate: '2018年07月01日', \r\n quantity: '98.00', \r\n status: {type:'success' ,desc:'正常'}, \r\n submitter: '小李', \r\n unit: 'pc', \r\n sum:'1,531.00', \r\n key: \"3\" \r\n }\r\n];\r\n\r\nclass Demo1 extends Component {\r\n render() {\r\n return (\r\n <div>\r\n <h5>紧凑型表格</h5>\r\n <Table columns={columns} data={data} size=\"sm\" />\r\n <h5>宽松型表格</h5>\r\n <Table columns={columns} data={data} size=\"lg\" />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo1;\r\n","desc":" 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。"},{"example":<Demo1106 />,"title":" 自定义行高","code":"/**\r\n*\r\n* @title 自定义行高\r\n* @parent 扩展行 Expanded Row\r\n* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。\r\n* demo1106\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo1 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n handleClick = () => {\r\n console.log('这是第' , this.currentIndex , '行');\r\n console.log('内容：' , this.currentRecord);\r\n }\r\n\r\n onRowHover=(index,record)=>{\r\n this.currentIndex = index;\r\n this.currentRecord = record;\r\n }\r\n\r\n getHoverContent=()=>{\r\n return <div className=\"opt-btns\"><Button size=\"sm\" onClick={this.handleClick}>一些操作</Button> </div>\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n height={40}\r\n headerHeight={40}\r\n hoverContent={this.getHoverContent}\r\n onRowHover={this.onRowHover}\r\n onRowClick={(record, index, indent) => {\r\n this.setState({\r\n selectedRowIndex: index\r\n });\r\n }}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\nexport default Demo1;\r\n","desc":" 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。"},{"example":<Demo1107 />,"title":" 图片在表格中的展示","code":"/**\r\n*\r\n* @title 图片在表格中的展示\r\n* @parent 扩展行 Expanded Row\r\n* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题\r\n* demo1107\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Button,Tooltip } from 'tinper-bee';\r\n\r\n\r\n\r\nconst columns = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80,\r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"图样\",\r\n dataIndex: \"picture\",\r\n key: \"picture\",\r\n render(text, record, index) {\r\n return <img style={{height:'50px'}} src={text} alt=\"Picture\"/>\r\n }\r\n },\r\n {\r\n title: \"组织部门\",\r\n dataIndex: \"orgDept\",\r\n key: \"orgDept\",\r\n width: 100,\r\n },\r\n {\r\n title: \"设施管理部门\",\r\n dataIndex: \"facilityManageUnit\",\r\n key: \"facilityManageUnit\",\r\n width: 150,\r\n },\r\n {\r\n title: \"案卷编号\",\r\n dataIndex: \"docketnum\",\r\n key: \"docketnum\",\r\n width: 100,\r\n },\r\n {\r\n title: \"数量\",\r\n dataIndex: \"num\",\r\n key: \"num\",\r\n width: 100,\r\n },\r\n {\r\n title: \"首次发现时间\",\r\n dataIndex: \"discoveryTime\",\r\n key: \"discoveryTime\",\r\n width: 150,\r\n },\r\n {\r\n title: \"实际修复时间\",\r\n dataIndex: \"repairTime\",\r\n key: \"repairTime\",\r\n width: 150,\r\n }\r\n];\r\n\r\nconst data = [\r\n { key: \"1\", orgDept: \"组织1\", facilityManageUnit: \"部门1\", docketnum: 41, num: \"1\", discoveryTime: \"2018-10-17\", repairTime: \"2018-10-30\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg\"},\r\n { key: \"2\", orgDept: \"组织2\", facilityManageUnit: \"部门2\", docketnum: 30, num: \"2\", discoveryTime: \"2019-01-15\", repairTime: \"2019-01-20\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg\"},\r\n { key: \"3\", orgDept: \"组织3\", facilityManageUnit: \"部门3\", docketnum: 35, num: \"3\", discoveryTime: \"2019-04-10\", repairTime: \"2019-04-17\", picture: \"http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg\"}\r\n];\r\n\r\nclass Demo1107 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo1107;\r\n","desc":" 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题"},{"example":<Demo1108 />,"title":" 自定义行、列合并","code":"/**\r\n*\r\n* @title 自定义行、列合并\r\n* @parent 扩展行 Expanded Row\r\n* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。\r\n* demo1108\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Button, Table } from 'tinper-bee';\r\n\n\r\n\r\nconst renderContent = (value, row, index) => {\r\n const obj = {\r\n children: value,\r\n props: {},\r\n };\r\n if (index === 4) {\r\n obj.props.colSpan = 0;\r\n }\r\n return obj;\r\n};\r\n\r\nconst columns = [{\r\n title: '姓名',\r\n key: \"name\",\r\n dataIndex: 'name',\r\n render: (text, row, index) => {\r\n if (index < 4) {\r\n return <a href=\"#\">{text}</a>;\r\n }\r\n return {\r\n children: <a href=\"#\">{text}</a>,\r\n props: {\r\n colSpan: 5,\r\n },\r\n };\r\n },\r\n}, {\r\n title: '年龄',\r\n key: \"age\",\r\n dataIndex: 'age',\r\n render: renderContent,\r\n}, {\r\n title: '联系方式',\r\n colSpan: 2,\r\n key: \"tel\",\r\n dataIndex: 'tel',\r\n render: (value, row, index) => {\r\n const obj = {\r\n children: value,\r\n props: {},\r\n };\r\n if (index === 2) {\r\n obj.props.rowSpan = 2;\r\n }\r\n if (index === 3) {\r\n obj.props.rowSpan = 0;\r\n }\r\n if (index === 4) {\r\n obj.props.colSpan = 0;\r\n }\r\n return obj;\r\n },\r\n}, {\r\n title: '手机号',\r\n colSpan: 0,\r\n key: \"phone\",\r\n dataIndex: 'phone',\r\n render: renderContent,\r\n}, {\r\n title: '家庭住址',\r\n key: \"address\",\r\n dataIndex: 'address',\r\n render: renderContent,\r\n}];\r\n\r\n\r\nconst columns1 = [{\r\n title: '姓名',\r\n key: \"name\",\r\n dataIndex: 'name',\r\n render: (text, row, index) => {\r\n if (index < 4) {\r\n return <a href=\"#\">{text}</a>;\r\n }\r\n return {\r\n children: <a href=\"#\">{text}</a>,\r\n props: {\r\n colSpan: 5,\r\n },\r\n };\r\n },\r\n}, {\r\n title: '年龄',\r\n key: \"age\",\r\n dataIndex: 'age',\r\n render: renderContent,\r\n}, {\r\n title: '联系方式',\r\n colSpan: 2,\r\n key: \"tel\",\r\n dataIndex: 'tel',\r\n render: renderContent\r\n}, {\r\n title: '手机号',\r\n colSpan: 0,\r\n key: \"phone\",\r\n dataIndex: 'phone',\r\n render: renderContent,\r\n}, {\r\n title: '家庭住址',\r\n key: \"address\",\r\n dataIndex: 'address',\r\n render: renderContent,\r\n}];\r\nconst data = [{\r\n key: '1',\r\n name: '小红',\r\n age: 32,\r\n tel: '0571-22098909',\r\n phone: 18889898989,\r\n address: '北京海淀',\r\n}, {\r\n key: '2',\r\n name: '小明',\r\n tel: '0571-22098333',\r\n phone: 18889898888,\r\n age: 42,\r\n address: '河北张家口',\r\n}, {\r\n key: '3',\r\n name: '张三',\r\n age: 32,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: '浙江杭州',\r\n}, {\r\n key: '4',\r\n name: '李四',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: '广州深圳',\r\n}, {\r\n key: '5',\r\n name: '王五',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: '北京昌平',\r\n}];\r\n\r\nclass Demo15 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n colFlag:false\r\n }\r\n }\r\n onChange=()=>{\r\n const colFlag = this.state.colFlag;\r\n this.setState({\r\n colFlag:!colFlag\r\n })\r\n }\r\n render() {\r\n let cols = this.state.colFlag?columns:columns1;\r\n return (\r\n <div>\r\n <Button onClick={this.onChange} colors=\"secondary\" style={{marginBottom:'8px'}}>change列</Button>\r\n <Table columns={cols} data={data} bordered/>\r\n </div>\r\n \r\n );\r\n }\r\n}\r\n\r\n\r\nexport default Demo15;\r\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo1201 />,"title":" 拖拽改变行顺序","code":"/**\r\n*\r\n* @title 拖拽改变行顺序\r\n* @parent 行操作-拖拽\r\n* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\r\n* Demo1201\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Switch, Table } from 'tinper-bee';\r\n\r\n\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\r\n { title: \"系统权限\", dataIndex: \"c\", key: \"c\", width: 200,render:()=>{return(<Switch size=\"sm\" />)}},\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1001\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"1002\" },\r\n { a: \"ASVAL_201903120001\", b: \"小红\", c: \"女\", d: \"财务四科\", e: \"T3\", key: \"1003\" },\r\n { a: \"ASVAL_201903120002\", b: \"小姚\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1004\" },\r\n { a: \"ASVAL_201903120003\", b: \"小岳\", c: \"男\", d: \"财务五科\", e: \"T2\", key: \"1005\" },\r\n { a: \"ASVAL_201903120004\", b: \"小王\", c: \"男\", d: \"财务一科\", e: \"T5\", key: \"1006\" },\r\n { a: \"ASVAL_201903120005\", b: \"小绍\", c: \"男\", d: \"财务七科\", e: \"T2\", key: \"1007\" },\r\n { a: \"ASVAL_201903120006\", b: \"小郭\", c: \"男\", d: \"财务一科\", e: \"T3\", key: \"1008\" },\r\n { a: \"ASVAL_201903120007\", b: \"小杨\", c: \"女\", d: \"财务四科\", e: \"T2\", key: \"1009\" }\r\n];\r\n\r\nclass Demo38 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n }\r\n }\r\n handleClick = () => {\r\n console.log('这是第' , this.currentIndex , '行');\r\n console.log('内容：' , this.currentRecord);\r\n }\r\n\r\n /**\r\n * 行拖拽开始时触发\r\n * @param record 拖拽行的数据\r\n * @param index 拖拽行的下标序号\r\n */\r\n onDragRowStart = (record,index) => {\r\n console.log('拖拽的行数据：', record);\r\n console.log('拖拽的行序号：', index);\r\n }\r\n\r\n /**\r\n * 行拖拽结束时触发\r\n * @param data 拖拽改变顺序后的新data数组\r\n * @param record 拖拽行的数据\r\n */\r\n onDropRow = (data, record) => {\r\n console.log('重排序后的data： ', data);\r\n console.log('拖拽的行数据： ', record);\r\n }\r\n\r\n render() {\r\n return (\r\n <Table\r\n columns={columns}\r\n data={data}\r\n rowDraggAble={true}\r\n // useDragHandle={true}\r\n onDragRowStart={this.onDragRowStart}\r\n onDropRow={this.onDropRow}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo38;\r\n","desc":" `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":<Demo1301 />,"title":" 多选功能","code":"/**\r\n*\r\n* @title 多选功能\r\n* @parent 行操作-选择\r\n* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。\r\n* demo1301\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { Table, Checkbox } from 'tinper-bee';\r\n\r\n\r\n\r\nimport multiSelect from \"bee-table/build/lib/multiSelect.js\";\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\",_checked:true },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\",_checked:false },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\",_checked:false },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\",_disabled:true },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\",_checked:false}\r\n];\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet MultiSelectTable = multiSelect(Table, Checkbox);\r\n\r\nclass Demo12 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n };\r\n }\r\n /**\r\n *@param selectedList:当前选中的行数据\r\n *@param record 当前操作行数据\r\n *@param index 当前操作行索引\r\n *@param newData 进行多选操作之后的新数据 data\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index,newData) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 注意：需要用回调中提供的参数 newData，去更新 state 或 store 中的 data 属性值，否则当表格重新render的时候，已选数据会被冲刷掉。\r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n inverse: true, //设置选中为红色填充\r\n };\r\n return (\r\n <MultiSelectTable \r\n bordered\r\n columns={columns} \r\n data={data} \r\n // multiSelectConfig={multiObj} //可以自定义 Checkbox 属性\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo12;","desc":" 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。"},{"example":<Demo1302 />,"title":" 单选功能","code":"/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。\r\n* Demo1302\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Radio, Table } from 'tinper-bee';\r\n\n\r\n\r\nimport singleSelect from \"bee-table/build/lib/singleSelect.js\";\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300 },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n ];\r\n \r\n const data = [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" },\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" }\r\n ];\r\n\r\n//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常\r\nlet SingleSelectTable = singleSelect(Table, Radio);\r\n\r\nclass Demo1302 extends Component {\r\n\r\n constructor(props){\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0,\r\n }\r\n }\r\n\r\n /**\r\n *@param selected 当前选中的行数据(当前操作行数据)\r\n *@param index 当前操作行索引\r\n * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (record,index) => {\r\n console.log(\"record\", record, \"index\",index);\r\n\r\n this.setState({\r\n selectedRowIndex:index\r\n })\r\n };\r\n\r\n render() {\r\n let {selectedRowIndex} = this.state;\r\n\r\n return (\r\n <SingleSelectTable\r\n className=\"demo1302\"\r\n bordered\r\n columns={columns}\r\n data={data}\r\n selectedRowIndex={selectedRowIndex}\r\n getSelectedDataFunc={this.getSelectedDataFunc}\r\n /> \r\n );\r\n }\r\n}\r\n\r\nexport default Demo1302;\r\n","desc":" 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。"},{"example":<Demo1401 />,"title":" 万行以上数据渲染","code":"/**\r\n*\r\n* @title 万行以上数据渲染\r\n* @parent 无限滚动 Infinite-scroll\r\n* @description 万行数据渲染\r\n* demo1401\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Tooltip } from 'tinper-bee';\r\n\r\n\r\nimport BigData from \"bee-table/build/lib/bigData\";\r\nconst BigDataTable = BigData(Table);\r\nconst columns = [\r\n {\r\n title:'序号',\r\n dataIndex:'index',\r\n width:'60',\r\n key:'index',\r\n render:(text,record,index)=>{\r\n return index\r\n }\r\n },\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"block\",\r\n width: \"40px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"bottom\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n\r\n];\r\n\r\nconst data = [ ...new Array(10000) ].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if(i%3==0){\r\n rs.b = '女';\r\n }\r\n return rs;\r\n })\r\n\r\n\r\nclass Demo30 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n\r\n /**\r\n * 表体滚动加载时触发的回调函数\r\n * @param endIndex 可视区最后一条数据的 index 序号\r\n */\r\n handleBodyScroll = endIndex => {\r\n console.log('endIndex：', endIndex);\r\n }\r\n\r\n render() {\r\n return (\r\n <div>\r\n <BigDataTable\r\n columns={columns}\r\n data={this.state.data}\r\n scroll={{y:300}}\r\n onRowClick={(record, index, indent) => {\r\n console.log('currentIndex--'+index);\r\n }}\r\n onBodyScroll={this.handleBodyScroll}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\nexport default Demo30;","desc":" 万行数据渲染","scss_code":".big-data tr td {\r\n // height: 48px;\r\n}"},{"example":<Demo1402 />,"title":" 嵌套子表格滚动加载","code":"/**\r\n*\r\n* @title 嵌套子表格滚动加载\r\n* @parent 无限滚动 Infinite-scroll\r\n* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。\r\n* demo1402\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Popconfirm } from 'tinper-bee';\r\n\r\n\r\nimport BigData from \"bee-table/build/lib/bigData\";\r\nconst BigDataTable = BigData(Table);\r\nconst outColumns = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\", \r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\r\n <a href=\"javascript:;\">\r\n 一些操作\r\n </a>\r\n </Popconfirm>\r\n );\r\n }\r\n },\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 250 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n \r\n];\r\nconst innerColumns = [\r\n {\r\n title: \"操作\",\r\n dataIndex: \"d\",\r\n key: \"d\",\r\n width:200,\r\n render(text, record, index) {\r\n return (\r\n <Popconfirm trigger=\"click\" placement=\"right\" content={'这是第' + index + '行，内容为:' + text}>\r\n <a href=\"javascript:;\">\r\n 一些操作\r\n </a>\r\n </Popconfirm>\r\n );\r\n }\r\n },\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 100 },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 100 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 },\r\n \r\n];\r\n\r\nconst data16 = [ ...new Array(10000) ].map((e, i) => {\r\n return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n })\r\n\r\n\r\n\r\n\r\n\r\nclass Demo31 extends Component {\r\n constructor(props){\r\n super(props);\r\n this.state={\r\n data_obj:{\r\n 0:[\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\r\n ],\r\n 1: [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\r\n ],\r\n }\r\n }\r\n }\r\n expandedRowRender = (record, index, indent) => {\r\n let height = 200;\r\n let innderData = [ ...new Array(100) ].map((e, i) => {\r\n return { a: index+\"-\"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+\"-\"+ i };\r\n })\r\n return (\r\n <Table\r\n \r\n columns={innerColumns}\r\n scroll={{y:height}}\r\n data={innderData} \r\n\r\n />\r\n );\r\n };\r\n getData=(expanded, record)=>{\r\n //当点击展开的时候才去请求数据\r\n let new_obj = Object.assign({},this.state.data_obj);\r\n if(expanded){\r\n if(record.key==='1'){\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"杨过\", b: \"男\", c: 67, d: \"操作\", key: \"2\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }else{\r\n new_obj[record.key] = [\r\n { a: \"令狐冲\", b: \"男\", c: 41, d: \"操作\", key: \"1\" },\r\n { a: \"菲菲\", b: \"nv\", c: 67, d: \"操作\", key: \"2\" }\r\n ]\r\n this.setState({\r\n data_obj:new_obj\r\n })\r\n }\r\n }\r\n }\r\n haveExpandIcon=(record, index)=>{\r\n //控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效\r\n if(index == 0){\r\n return true;\r\n }\r\n return false;\r\n }\r\n render() {\r\n return (\r\n <BigDataTable\r\n columns={outColumns}\r\n data={data16}\r\n onExpand={this.getData}\r\n expandedRowRender={this.expandedRowRender}\r\n scroll={{y:350}}\r\n // defaultExpandedRowKeys={[0,1]}\r\n />\r\n );\r\n }\r\n}\r\n\r\nexport default Demo31;\r\n","desc":" 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。"},{"example":<Demo1403 />,"title":" 多功能表格滚动加载","code":"/**\r\n*\r\n* @title 多功能表格滚动加载\r\n* @parent 无限滚动 Infinite-scroll\r\n* @description\r\n* demo1403\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Tooltip,Checkbox,Icon,Popover } from 'tinper-bee';\r\n\r\n\r\nimport BigData from \"bee-table/build/lib/bigData\";\r\nimport multiSelect from 'bee-table/build/lib/multiSelect';\r\nimport filterColumn from 'bee-table/build/lib/filterColumn';\r\n\r\nlet ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);\r\n\r\nconst columns = [\r\n {\r\n title:'序号',\r\n dataIndex:'index',\r\n width:'80',\r\n key:'index',\r\n render:(text,record,index)=>{\r\n return index\r\n }\r\n },\r\n {\r\n title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\",\r\n render: (text, record, index) => {\r\n return (\r\n <Tooltip inverse overlay={text}>\r\n <span tootip={text} style={{\r\n display: \"block\",\r\n width: \"40px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"bottom\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80},\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n];\r\n\r\nconst data = [ ...new Array(10000) ].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if(i%3==0){\r\n rs.b = '女';\r\n }\r\n return rs;\r\n })\r\n\r\n\r\nclass Demo43 extends Component {\r\n\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data,\r\n selectedRowIndex: 0\r\n }\r\n }\r\n getSelectedDataFunc = data => {\r\n console.log(data);\r\n };\r\n\r\n render() {\r\n return (\r\n <ComplexTable\r\n columns={columns}\r\n data={data}\r\n parentNodeId='parent'\r\n scroll={{y:300}}\r\n bordered\r\n onRowClick={(record, index, indent) => {\r\n this.setState({\r\n selectedRowIndex: index\r\n });\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default Demo43;\r\n","desc":""},{"example":<Demo1404 />,"title":" 层级树大数据场景","code":"/**\r\n* @title 层级树大数据场景\r\n* @parent 无限滚动 Infinite-scroll\r\n* @description\r\n* demo1404\r\n*/\r\nimport React, { Component } from \"react\";\nimport { Table, Button } from 'tinper-bee';\r\n\r\n\r\n\r\nimport BigData from \"bee-table/build/lib/bigData\";\r\nconst BigDataTable = BigData(Table);\r\nconst columns = [\r\n {\r\n title: '序号',\r\n dataIndex: 'index',\r\n width: '150',\r\n key: 'index',\r\n render: (text, record, index) => {\r\n return record.index ? record.index : index\r\n }\r\n },\r\n { title: \"用户名\", dataIndex: \"a\", key: \"a\", width: 580, className: \"rowClassName\" },\r\n { id: \"123\", title: \"性别\", dataIndex: \"b\", key: \"b\", width: 80 },\r\n { title: \"年龄\", dataIndex: \"c\", key: \"c\", width: 200 }\r\n];\r\n\r\nconst data = [...new Array(10)].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if (i % 3 == 0) {\r\n rs.b = '女';\r\n rs.children = [];\r\n for (let subi = 0; subi < 3; subi++) {\r\n rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });\r\n rs.children[subi].children = []\r\n for (let subj = 0; subj < 100; subj++) {\r\n rs.children[subi].children.push({ a: 333 + ' ' + subj, b: 333 + ' ' + subj, c: 333 + ' ' + subj, d: 333 + ' ' + subj, key: i + `${subj} sub1` });\r\n }\r\n }\r\n } else {\r\n rs.children = [];\r\n for (let subi = 0; subi < 3; subi++) {\r\n rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });\r\n }\r\n }\r\n return rs;\r\n})\r\n\r\nconst data2 = [...new Array(10000)].map((e, i) => {\r\n const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };\r\n if (i % 3 == 0) {\r\n rs.b = '女';\r\n }\r\n return rs;\r\n})\r\n\r\nclass Demo34 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: data\r\n }\r\n }\r\n\r\n /**\r\n * expanded : 当前的状态\r\n * record : 当前行的数据\r\n */\r\n onExpand = (expanded, record) => {\r\n console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);\r\n }\r\n handleClick = () => {\r\n this.setState({\r\n data: data2\r\n })\r\n }\r\n render () {\r\n return (\r\n <div>\r\n <Button onClick={this.handleClick} colors=\"secondary\" style={{ marginBottom: '8px' }}>改变数据源</Button>\r\n <BigDataTable\r\n columns={columns}\r\n data={this.state.data}\r\n parentNodeId='parent'\r\n scroll={{ y: 300 }}\r\n onExpand={this.onExpand}\r\n onRowClick={(record, index, indent) => {\r\n console.log('currentIndex--' + index);\r\n }}\r\n rowKey=\"key\"//每条数据的唯一标示，默认为key，如果不是key，必须传\r\n />\r\n </div>\r\n\r\n );\r\n }\r\n}\r\n\r\nexport default Demo34;","desc":""},{"example":<Demo1601 />,"title":" 表格+分页","code":"/**\r\n * @title 表格+分页\r\n * @parent 分页 Pagination\r\n * @description 点击分页联动表格\r\n * demo1601\r\n */\r\n\r\nimport React, { Component } from \"react\";\nimport { Table, Pagination } from 'tinper-bee';\r\n\r\n\r\n\r\n\r\nconst columns = [\r\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\"},\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\r\n];\r\n\r\nconst pageData = {\r\n 1: [\r\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n ],\r\n 2: [\r\n { a: \"ASVAL_201903280010\", b: \"小王\", c: \"女\", d: \"财务二科\", key: \"4\" },\r\n { a: \"ASVAL_201903200021\", b: \"小李\", c: \"男\", d: \"财务一科\", key: \"5\" },\r\n ]\r\n};\r\n\r\nclass Demo8 extends Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n data: pageData[1],\r\n activePage: 1\r\n };\r\n }\r\n\r\n handleSelect(eventKey) {\r\n this.setState({\r\n data: pageData[eventKey],\r\n activePage: eventKey\r\n });\r\n }\r\n\r\n render() {\r\n return (\r\n <div className=\"demo8\">\r\n <Table columns={columns} data={this.state.data} />\r\n <Pagination\r\n first\r\n last\r\n prev\r\n next\r\n maxButtons={5}\r\n boundaryLinks\r\n activePage={this.state.activePage}\r\n onSelect={this.handleSelect.bind(this)}\r\n onDataNumSelect={this.dataNumSelect}\r\n showJump={true}\r\n noBorder={true}\r\n total={100}\r\n dataNum={2}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\nexport default Demo8;\r\n","desc":" 点击分页联动表格","scss_code":".demo8{\r\n .u-table {\r\n margin-bottom: 11px;\r\n }\r\n .u-pagination{\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}"}]
class Demo extends Component {
constructor(props){
super(props);
this.state = {
open: false
}
}
handleClick=()=> {
this.setState({ open: !this.state.open })
}
fCloseDrawer=()=>{
this.setState({
open: false
})
}
render () {
const { title, example, code, desc, scss_code } = this.props;
const header = (
<div>
<p className='component-title'>{ title }</p>
<p>{ desc }</p>
<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
</div>
);
return (
<Col md={12} id={title.trim()} className='component-demo'>
<Panel header={header}>
{example}
</Panel>
<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
<div className='component-code-copy'> JS代码
<Clipboard action="copy" text={code}/>
</div>
<pre className="pre-js">
<code className="hljs javascript">{ code }</code>
</pre >
{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
<Clipboard action="copy" text={scss_code}/>
</div>:null }
{ !!scss_code ? <pre className="pre-css">
<code className="hljs css">{ scss_code }</code>
</pre> : null }
</Drawer>
</Col>
)
}
}
class DemoGroup extends Component {
constructor(props){
super(props)
}
render () {
return (
<Row>
{DemoArray.map((child,index) => {
return (
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
)
})}
</Row>
)
}
}
ReactDOM.render(<DemoGroup/>, document.getElementById('tinperBeeDemo'));
Reference in New Issue View Git Blame Copy Permalink