85 lines
156 KiB
JavaScript
85 lines
156 KiB
JavaScript
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 Demo0402 = require("./demolist/Demo0402");var Demo0404 = require("./demolist/Demo0404");var Demo0405 = require("./demolist/Demo0405");var Demo0501 = require("./demolist/Demo0501");var Demo0502 = require("./demolist/Demo0502");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 Demo1304 = require("./demolist/Demo1304");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 单元格数据过长时，可结合Tooltip组件使用。\r\n* demo0101\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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 />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 单元格数据过长时，可结合Tooltip组件使用。"},{"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';\r\nimport { Table } from 'tinper-bee';\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\n","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';\r\nimport { Table } from 'tinper-bee';\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 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 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 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 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 approvalState_name:\"已审批\",\r\n confirmState_name:\"终止\",\r\n closeState_name:\"已关闭\",\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 approvalState_name:\"已审批\",\r\n confirmState_name:\"执行中\",\r\n closeState_name:\"未关闭\",\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 approvalState_name:\"未审批\",\r\n confirmState_name:\"待确认\",\r\n closeState_name:\"未关闭\",\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\n","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';\r\nimport { Table } from 'tinper-bee';\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\n","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\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button,Tooltip} from \"tinper-bee\";\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\n\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\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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\n\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\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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\n\r\n","desc":" 设置 `bordered` 属性可添加表格边框线。"},{"example":<Demo0201 />,"title":" 横向滚动条","code":"/**\r\n*\r\n* @title 横向滚动条\r\n* @parent 滚动 Scroll View\r\n* @description 设置`scroll`属性支持横向或纵向滚动，x的取值可以是：正整数(自动转为相应的像素值)、百分比（相对于表格真实宽度的百分比，大于100%时会出现滚动条）、布尔值。y的取值是正整数。\r\n* demo0201\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\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:true }} />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 设置`scroll`属性支持横向或纵向滚动，x的取值可以是：正整数(自动转为相应的像素值)、百分比（相对于表格真实宽度的百分比，大于100%时会出现滚动条）、布尔值。y的取值是正整数。"},{"example":<Demo0202 />,"title":" 纵向滚动条","code":"/**\r\n*\r\n* @title 纵向滚动条\r\n* @parent 滚动 Scroll View\r\n* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值\r\n* demo0202\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\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\n\r\n","desc":" 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值"},{"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\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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\n\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\";\r\nimport {Button} from \"tinper-bee\";\r\nimport reqwest from 'reqwest';\r\nimport { Table } from 'tinper-bee';\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\n\r\n","desc":" 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。","scss_code":".demo22{\r\n .opt-btns{\r\n margin-bottom: 8px;\r\n }\r\n}"},{"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 * demo0402\r\n */\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport {Button} from \"tinper-bee\";\r\n\r\nconst { ColumnGroup, Column } = Table;\r\n\r\nconst columns = [\r\n {\r\n title: \"Name\",\r\n dataIndex: \"name\",\r\n key: \"name\",\r\n width: 100,\r\n fixed: \"left\"\r\n },\r\n {\r\n title: \"Other\",\r\n width:600,\r\n children: [\r\n {\r\n title: \"Age\",\r\n dataIndex: \"age\",\r\n key: \"age\",\r\n width: 200\r\n },\r\n {\r\n title: \"Address\",\r\n children: [\r\n {\r\n title: \"Street\",\r\n dataIndex: \"street\",\r\n key: \"street\",\r\n width: 200\r\n },\r\n {\r\n title: \"Block\",\r\n children: [\r\n {\r\n title: \"Building\",\r\n dataIndex: \"building\",\r\n key: \"building\",\r\n width: 100\r\n },\r\n {\r\n title: \"Door No.\",\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: \"Company\",\r\n width:400,\r\n children: [\r\n {\r\n title: \"Company Address\",\r\n dataIndex: \"companyAddress\",\r\n key: \"companyAddress\",\r\n width:200,\r\n },\r\n {\r\n title: \"Company Name\",\r\n dataIndex: \"companyName\",\r\n key: \"companyName\",\r\n width:200,\r\n }\r\n ]\r\n },\r\n {\r\n title: \"Gender\",\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: \"Lake Street 42\",\r\n companyName: \"SoftLake Co\",\r\n gender: \"M\"\r\n });\r\n}\r\n\r\nclass Demo32 extends Component {\r\n render() {\r\n return (\r\n <Table\r\n className={'demo32'}\r\n columns={columns}\r\n data={data}\r\n headerHeight={40} //自定义表头高度\r\n bordered\r\n scroll={{ y: 240 }}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\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';\r\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\r\nimport sort from \"tinper-bee/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 Demo33 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 />\r\n }\r\n}\r\n\r\n","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\";\r\nimport {Checkbox} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee'; \r\nimport sum from \"tinper-bee/lib/sum.js\";;\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\n \r\nlet ComplexTable = multiSelect(sum(Table), Checkbox);\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 },\r\n {\r\n title: \"金额\",\r\n dataIndex: \"money\",\r\n key: \"money\",\r\n width: 100,\r\n sumCol: 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: 20 * 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\n\r\n","desc":" 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。"},{"example":<Demo0501 />,"title":" 行编辑 - 行内编辑","code":"/**\r\n *\r\n * @title 行编辑 - 行内编辑\r\n * @parent 编辑 Editor\r\n * @description 可以对行进行编辑的表格\r\n *\r\n */\r\nimport React, { Component, PureComponent } from \"react\";\r\nimport { Table } from 'tinper-bee';\r\nimport { Select,Form,FormControl,Button,Icon,Tooltip } 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, editable, required } = props;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\r\n return (\r\n <div className=\"editable-cell\">\r\n {editable ? (\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 <div className=\"editable-cell-text-wrapper\">{value || \" \"}</div>\r\n )}\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 const { value, editable } = this.props;\r\n return (\r\n <div className=\"editable-cell\">\r\n {editable ? (\r\n <div className=\"editable-cell-input-wrapper\">\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 <div className=\"editable-cell-text-wrapper\">{value || \" \"}</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 PureComponent {\r\n constructor(props, context) {\r\n super(props);\r\n }\r\n\r\n handleSelect = values => {\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 { value, editable, required } = this.props;\r\n let cls = \"editable-cell-input-wrapper\";\r\n if (required) cls += \" required\";\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 <div className=\"editable-cell-text-wrapper\">{value.name || \" \"}</div>\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.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.originData = {};\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 this.originData[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 let dataSource = [...this.state.dataSource];\r\n dataSource[index] = this.originData[index];\r\n delete editingRowsMap[index];\r\n delete this.originData[index];\r\n this.setState({ editingRowsMap, dataSource });\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 this.setState({ editingRowsMap });\r\n };\r\n\r\n onCellChange = (index, key) => value => {\r\n let dataSource = [...this.state.dataSource];\r\n dataSource[index][key] = value;\r\n this.setState({ dataSource });\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={\"opt-btns\"}>\r\n <Button colors=\"dark\" onClick={this.abortEdit(currentIndex)}>\r\n 取消\r\n </Button>\r\n <Button 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 colors=\"dark\" onClick={this.edit(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\">\r\n <Table\r\n data={dataSource}\r\n columns={columns}\r\n onRowHover={this.handleRowHover}\r\n hoverContent={this.renderRowHover}\r\n />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 可以对行进行编辑的表格","scss_code":".demo0501 .u-table {\r\n .u-row-hover {\r\n .opt-btns {\r\n button {\r\n border-radius: 5px;\r\n\r\n &:first-child {\r\n margin-right: 10px;\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 padding-left: 0\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: 2px 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 .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\";\r\nimport { Table } from 'tinper-bee';\r\nimport { Icon, Select, Tooltip, Form } from \"tinper-bee\";\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} />\r\n </div>\r\n );\r\n }\r\n}\r\n\r\n\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 }\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":<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';\r\nimport { Table } from 'tinper-bee';\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\n","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';\r\nimport {Popconfirm} from 'tinper-bee';\r\nimport { Table } from 'tinper-bee';\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){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 + '行，内容为:' + text}>\r\n <a href=\"javascript:;\" tooltip={text} >\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\r\nclass Demo52 extends Component {\r\n render() {\r\n return <Table columns={columns} data={data} scroll={{ x:'110%', y: 200 }} />;\r\n }\r\n}\r\n\r\n","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';\r\nimport {Icon,Menu,Dropdown} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\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: 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: 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\n","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';\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns26 = [\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 data26 = [\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 Demo26 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={columns26}\r\n data={data26} />;\r\n }\r\n}\r\n\r\n","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';\r\nimport {Icon,Checkbox,Dropdown,Menu} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\r\nimport sort from \"tinper-bee/lib/sort\";;\r\n\r\nconst { Item } = Menu;\r\n\r\nconst data27 = [\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 Demo27 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 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 multiObj = {\r\n type: \"checkbox\"\r\n };\r\n let columns27 = [\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 {\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={columns27}\r\n data={data27} />;\r\n }\r\n}\r\n\r\n","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';\r\nimport {Icon,Popover} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport filterColumn from \"tinper-bee/lib/filterColumn\";;\r\nimport sum from \"tinper-bee/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 },\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 }\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\n","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';\r\nimport {Icon} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport sort from \"tinper-bee/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\n","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';\r\nimport {Icon} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport sort from \"tinper-bee/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\n","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\";\r\nimport {Checkbox,Button,Icon} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\r\nimport sort from \"tinper-bee/lib/sort.js\";;\r\nimport sum from \"tinper-bee/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 },\r\n {\r\n title: \"金额\",\r\n dataIndex: \"b\",\r\n key: \"b\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.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: \"c\",\r\n key: \"c\",\r\n width: 200,\r\n sumCol: true,\r\n sorter: (a, b) => a.c - b.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: (a, b) => a.c - b.c,\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 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\n","desc":" 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。"},{"example":<Demo1001 />,"title":" 拖拽改变列顺序","code":"/**\r\n*\r\n* @title 拖拽改变列顺序\r\n* @parent 列操作-拖拽 Drag\r\n* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。\r\n* demo1001\r\n*/\r\nimport React, { Component } from 'react';\r\nimport {Icon} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee'; \r\nimport dragColumn from \"tinper-bee/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: 200,\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\nconst defaultProps22 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo22 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 onDrop ={(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\nDemo22.defaultProps = defaultProps22;\r\n","desc":" 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。"},{"example":<Demo1002 />,"title":" 拖拽改变列宽度","code":"/**\r\n*\r\n* @title 拖拽改变列宽度\r\n* @parent 列操作-拖拽 Drag\r\n* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。\r\n* demo1002\r\n*/\r\nimport React, { Component } from 'react';\r\nimport {Icon} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee'; \r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\n\r\nconst columns23 = [\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 data23 = [\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\nconst defaultProps23 = {\r\n prefixCls: \"bee-table\"\r\n};\r\n\r\nclass Demo23 extends Component {\r\n constructor(props) {\r\n super(props); \r\n }\r\n\r\n render() {\r\n return <DragColumnTable \r\n columns={columns23} \r\n data={data23} \r\n bordered\r\n dragborder={true} \r\n draggable={true} \r\n scroll={{y:200}}\r\n onDropBorder ={(e,width)=>{\r\n console.log(width+\"--调整列宽后触发事件\",e.target);\r\n }}\r\n />;\r\n }\r\n}\r\nDemo23.defaultProps = defaultProps23;\r\n\r\n\r\n","desc":" onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。"},{"example":<Demo1101 />,"title":" 嵌套子表格","code":"/**\r\n*\r\n* @title 嵌套子表格\r\n* @parent 扩展行 Expanded Row\r\n* @description 通过expandedRowRender参数来实现子表格\r\n* demo1101\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport { Popconfirm } from 'tinper-bee';\r\nimport { Table } from 'tinper-bee';\r\nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\r\nconst DragColumnTable = dragColumn(Table);\r\nconst columns16 = [\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:;\" 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 },\r\n \r\n];\r\nconst columns17 = [\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:;\" tooltip={text} >\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 = [\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\n\r\n\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 let height = 42 * (this.state.data_obj[record.key].length+ 2);\r\n \r\n return (\r\n <Table\r\n columns={columns17}\r\n style={{height:height}}\r\n data={this.state.data_obj[record.key]} \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: \"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 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 <DragColumnTable\r\n columns={columns16}\r\n data={data16}\r\n onExpand={this.getData}\r\n expandedRowRender={this.expandedRowRender}\r\n scroll={{x:true}}\r\n dragborder={true} \r\n draggable={true} \r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 通过expandedRowRender参数来实现子表格"},{"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';\r\nimport { Table } from 'tinper-bee';\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 \r\n columns={columns4} data={data4} />;\r\n }\r\n}\r\n\r\n\r\n","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\";\r\nimport {Button,Tooltip,} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\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\" },\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\n\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\";\r\nimport {Button,Tooltip,Tag} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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 { 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: '错误', \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: '正常', \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: '异常', \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\n\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\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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\" },\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\n\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\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\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: \"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 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\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 Demo105 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\">\r\n <Button size=\"sm\" onClick={this.handleClick}>编辑</Button> \r\n <Button size=\"sm\" onClick={this.handleClick}>删除</Button> \r\n </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 hoverContent={this.getHoverContent}\r\n onRowHover={this.onRowHover}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\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\";\r\nimport { Table } from 'tinper-bee';\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: 'Name',\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: 'Age',\r\n key: \"Age\",\r\n dataIndex: 'age',\r\n render: renderContent,\r\n}, {\r\n title: 'Home phone',\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: 'Phone',\r\n colSpan: 0,\r\n key: \"phone\",\r\n dataIndex: 'phone',\r\n render: renderContent,\r\n}, {\r\n title: 'Address',\r\n key: \"address\",\r\n dataIndex: 'address',\r\n render: renderContent,\r\n}];\r\n\r\nconst data = [{\r\n key: '1',\r\n name: 'John Brown',\r\n age: 32,\r\n tel: '0571-22098909',\r\n phone: 18889898989,\r\n address: 'New York No. 1 Lake Park',\r\n}, {\r\n key: '2',\r\n name: 'Jim Green',\r\n tel: '0571-22098333',\r\n phone: 18889898888,\r\n age: 42,\r\n address: 'London No. 1 Lake Park',\r\n}, {\r\n key: '3',\r\n name: 'Joe Black',\r\n age: 32,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'Sidney No. 1 Lake Park',\r\n}, {\r\n key: '4',\r\n name: 'Jim Red',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'London No. 2 Lake Park',\r\n}, {\r\n key: '5',\r\n name: 'Jake White',\r\n age: 18,\r\n tel: '0575-22098909',\r\n phone: 18900010002,\r\n address: 'Dublin No. 2 Lake Park',\r\n}];\r\n\r\nclass Demo15 extends Component {\r\n render() {\r\n return (\r\n <Table columns={columns} data={data} bordered/>\r\n );\r\n }\r\n}\r\n\r\n\r\n\r\n","desc":" 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。"},{"example":<Demo1201 />,"title":" 拖拽改变行顺序","code":"/**\r\n*\r\n* @title 拖拽改变行顺序\r\n* @parent 行操作-拖拽\r\n* @description 拖拽改变行顺序\r\n* Demo1201\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst columns = [\r\n {\r\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, 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: \"inline-block\",\r\n width: \"80px\",\r\n textOverflow: \"ellipsis\",\r\n overflow: \"hidden\",\r\n whiteSpace: \"nowrap\",\r\n verticalAlign: \"middle\",\r\n }}>{text}</span>\r\n </Tooltip>\r\n );\r\n }\r\n },\r\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:200 },\r\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\r\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\r\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,fixed:'right'}\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_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"1003\" }\r\n];\r\n\r\nclass Demo1201 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 rowDraggAble={true}\r\n />\r\n );\r\n }\r\n}\r\n\r\n\r\n","desc":" 拖拽改变行顺序"},{"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';\r\nimport {Checkbox} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport multiSelect from \"tinper-bee/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 * @memberof Demo12\r\n */\r\n getSelectedDataFunc = (selectedList,record,index) => {\r\n console.log(\"selectedList\", selectedList,\"index\",index);\r\n // 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码\r\n // const allChecked = selectedList.length == 0?false:true;\r\n // record为undefind则为全选或者全不选\r\n // if(!record){\r\n // data12.forEach(item=>{\r\n // item._checked = allChecked;\r\n // })\r\n // }else{\r\n // data12[index]['_checked'] = record._checked;\r\n // } \r\n\r\n \r\n };\r\n \r\n render() {\r\n let multiObj = {\r\n type: \"checkbox\"\r\n };\r\n return (\r\n <MultiSelectTable \r\n columns={columns} \r\n data={data} \r\n multiSelect={multiObj}\r\n rowClassName={(record,index,indent)=>{\r\n if (record._checked) {\r\n return 'selected';\r\n } else {\r\n return '';\r\n }\r\n }}\r\n getSelectedDataFunc={this.getSelectedDataFunc}/>\r\n );\r\n }\r\n}\r\n\r\n","desc":" 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。"},{"example":<Demo1304 />,"title":" 单选功能","code":"/**\r\n*\r\n* @title 单选功能\r\n* @parent 行操作-选择\r\n* @description 表格支持单选行操作，可自定义选中行背景色。\r\n* Demo1304\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Button,Tooltip,Radio} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\n\r\nconst data = [\r\n { check: \"ASVAL_201903280005\",a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\r\n { check: \"ASVAL_201903200004\",a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\r\n { check: \"ASVAL_201903120002\",a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\r\n];\r\n\r\nclass Demo1304 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 selectedValue:\"ASVAL_201903200004\"\r\n }\r\n }\r\n\r\n render() {\r\n let {selectedValue} = this.state;\r\n let columns = [\r\n { title: \"单选\", dataIndex: \"check\", key: \"check\", width: 80,render(text, record, index){\r\n return(\r\n <Radio.RadioGroup name=\"fruits\" selectedValue={selectedValue}>\r\n <Radio value={record.check} />\r\n </Radio.RadioGroup>)\r\n }}, \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 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 selectedValue:record.check\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\n\r\n","desc":" 表格支持单选行操作，可自定义选中行背景色。"},{"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\";\r\nimport {Tooltip} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/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: \"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 { 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 render() {\r\n return (\r\n <BigDataTable\r\n columns={columns}\r\n data={data}\r\n scroll={{y:300}}\r\n onRowClick={(record, index, indent) => {\r\n console.log('currentIndex--'+index);\r\n }}\r\n />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n","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参数来实现子表格\r\n* demo1402\r\n*/\r\n\r\nimport React, { Component } from \"react\";\r\nimport {Popconfirm} from 'tinper-bee';\r\nimport { Table } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/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\n\r\n","desc":" 通过expandedRowRender参数来实现子表格"},{"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\";\r\nimport {Tooltip,Checkbox,Icon,Popover} from \"tinper-bee\";\r\nimport { Table } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/lib/bigData\";;\r\nimport multiSelect from \"tinper-bee/lib/multiSelect\";;\r\nimport filterColumn from \"tinper-bee/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: \"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 { 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 Demo32 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\n\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\";\r\nimport {Tooltip} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\r\nimport BigData from \"tinper-bee/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 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: \"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 { 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(1000) ].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 }\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\n\r\nclass Demo34 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 onExpandedRowsChange = (params)=>{\r\n console.log(params);\r\n }\r\n onExpand = (expandKeys)=>{\r\n console.log('expand---'+expandKeys);\r\n }\r\n render() {\r\n return (\r\n <BigDataTable\r\n columns={columns}\r\n data={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 />\r\n\r\n \r\n );\r\n }\r\n}\r\n\r\n","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\";\r\nimport {Pagination} from \"tinper-bee\";\r\n\r\nimport { Table } from 'tinper-bee';\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\n\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'));
|