bee-table
Version:
Table ui component for react
105 lines (82 loc) • 18.5 MB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
'use strict';
var _react = __webpack_require__(1);
var _react2 = _interopRequireDefault(_react);
var _reactDom = __webpack_require__(2);
var _reactDom2 = _interopRequireDefault(_reactDom);
var _beeLayout = __webpack_require__(3);
var _beePanel = __webpack_require__(9);
<<<<<<< HEAD
<<<<<<< HEAD
var _beeDrawer = __webpack_require__(82);
=======
var _beeDrawer = __webpack_require__(72);
>>>>>>> 9fe7fbd1df2d2c12319e053c30d384e266b7cd3f
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
var _beeClipboard = __webpack_require__(86);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
<<<<<<< HEAD
var _src = __webpack_require__(264);
=======
var _beeDrawer = __webpack_require__(72);
var _beeDrawer2 = _interopRequireDefault(_beeDrawer);
var _beeClipboard = __webpack_require__(86);
var _beeClipboard2 = _interopRequireDefault(_beeClipboard);
var _src = __webpack_require__(272);
>>>>>>> dev4iuap5.0
=======
var _src = __webpack_require__(268);
>>>>>>> 9fe7fbd1df2d2c12319e053c30d384e266b7cd3f
var _src2 = _interopRequireDefault(_src);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
<<<<<<< HEAD
<<<<<<< HEAD
var Demo0101 = __webpack_require__(591);var Demo0102 = __webpack_require__(592);var Demo0103 = __webpack_require__(593);var Demo0104 = __webpack_require__(594);var Demo0105 = __webpack_require__(595);var Demo0106 = __webpack_require__(598);var Demo0107 = __webpack_require__(599);var Demo0201 = __webpack_require__(600);var Demo0202 = __webpack_require__(601);var Demo0301 = __webpack_require__(602);var Demo0302 = __webpack_require__(603);var Demo0402 = __webpack_require__(606);var Demo0404 = __webpack_require__(607);var Demo0405 = __webpack_require__(612);var Demo0501 = __webpack_require__(614);var Demo0502 = __webpack_require__(616);var Demo0503 = __webpack_require__(617);var Demo0505 = __webpack_require__(618);var Demo0601 = __webpack_require__(619);var Demo0602 = __webpack_require__(620);var Demo0603 = __webpack_require__(621);var Demo0701 = __webpack_require__(622);var Demo0702 = __webpack_require__(623);var Demo0802 = __webpack_require__(624);var Demo0901 = __webpack_require__(629);var Demo0902 = __webpack_require__(630);var Demo0903 = __webpack_require__(631);var Demo1001 = __webpack_require__(632);var Demo1002 = __webpack_require__(634);var Demo1101 = __webpack_require__(635);var Demo1102 = __webpack_require__(636);var Demo1103 = __webpack_require__(637);var Demo1105 = __webpack_require__(638);var Demo1106 = __webpack_require__(639);var Demo1107 = __webpack_require__(640);var Demo1108 = __webpack_require__(641);var Demo1201 = __webpack_require__(642);var Demo1301 = __webpack_require__(645);var Demo1302 = __webpack_require__(646);var Demo1401 = __webpack_require__(652);var Demo1402 = __webpack_require__(654);var Demo1403 = __webpack_require__(655);var Demo1404 = __webpack_require__(656);var Demo1601 = __webpack_require__(657);var DemoArray = [{ "example": _react2['default'].createElement(Demo0101, null), "title": " 基本表格", "code": "/**\n*\n* @title 基本表格\n* @parent 基础 Basic\n* @description 单元格数据过长时，可结合Tooltip组件使用。\n* demo0101\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo0101 extends Component {\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n />\n );\n }\n}\n\n\n", "desc": " 单元格数据过长时，可结合Tooltip组件使用。" }, { "example": _react2['default'].createElement(Demo0102, null), "title": " 默认无数据展示", "code": "/**\r\n*\r\n* @title 默认无数据展示\r\n* @parent 基础 Basic\r\n* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。\r\n* demo0102\r\n*/\r\n\r\n\r\nimport React, { Component } from 'react';\nimport { } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\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": _react2['default'].createElement(Demo0103, null), "title": " 固定表头", "code": "/**\r\n*\r\n* @title 固定表头\r\n* @parent 基础 Basic\r\n* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。\r\n* demo0103\r\n*/\r\n\r\nimport React, { Component } from 'react';\nimport { } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\r\n\r\nconst columns03 = [\r\n {\r\n title: \"序号\",\r\n dataIndex: \"index\",\r\n key: \"index\",\r\n width: 80, \r\n render(text, record, index) {\r\n return index + 1;\r\n }\r\n },\r\n {\r\n title: \"订单编号\",\r\n dataIndex: \"orderCode\",\r\n key: \"orderCode\",\r\n width: 200, \r\n },\r\n {\r\n title: \"供应商名称\",\r\n dataIndex: \"supplierName\",\r\n key: \"supplierName\",\r\n width: 200\r\n },\r\n {\r\n title: \"类型\",\r\n dataIndex: \"type_name\",\r\n key: \"type_name\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组织\",\r\n dataIndex: \"purchasing\",\r\n key: \"purchasing\",\r\n width: 200\r\n },\r\n {\r\n title: \"采购组\",\r\n dataIndex: \"purchasingGroup\",\r\n key: \"purchasingGroup\",\r\n width: 200\r\n },\r\n {\r\n title: \"凭证日期\",\r\n dataIndex: \"voucherDate\",\r\n key: \"voucherDate\",\r\n width: 200,\r\n }\r\n];\r\n\r\nconst data03 = [\r\n { \r\n orderCode:\"NU0391025\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年03月18日\",\r\n key: \"1\"\r\n }, \r\n { \r\n orderCode:\"NU0391026\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织a', \r\n purchasingGroup:\"bb\",\r\n voucherDate:\"2018年02月05日\",\r\n key: \"2\"\r\n },\r\n { \r\n orderCode:\"NU0391027\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织b', \r\n purchasingGroup:\"aa\",\r\n voucherDate:\"2018年07月01日\",\r\n key: \"3\"\r\n },\r\n { \r\n orderCode:\"NU0391028\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"4\",\r\n purchasing:'组织c', \r\n purchasingGroup:\"cc\",\r\n voucherDate:\"2019年03月01日\",\r\n key: \"4\"\r\n },\r\n { \r\n orderCode:\"NU0391029\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"5\",\r\n purchasing:'组织d', \r\n purchasingGroup:\"ss\",\r\n voucherDate:\"2019年02月14日\",\r\n key: \"5\"\r\n },\r\n { \r\n orderCode:\"NU0391030\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"1\",\r\n purchasing:'组织e', \r\n purchasingGroup:\"zz\",\r\n voucherDate:\"2019年02月18日\",\r\n key: \"6\"\r\n },\r\n { \r\n orderCode:\"NU0391031\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"2\",\r\n purchasing:'组织f', \r\n purchasingGroup:\"qq\",\r\n voucherDate:\"2019年01月01日\",\r\n key: \"7\"\r\n },\r\n { \r\n orderCode:\"NU0391032\", \r\n supplierName: \"xx供应商\",\r\n type_name: \"3\",\r\n purchasing:'组织g', \r\n purchasingGroup:\"pp\",\r\n voucherDate:\"2019年01月31日\",\r\n key: \"8\"\r\n },\r\n];\r\n\r\nclass Demo03 extends Component {\r\n render() {\r\n return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;\r\n }\r\n}\r\n\r\n", "desc": " 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。" }, { "example": _react2['default'].createElement(Demo0104, null), "title": " 隔行换色", "code": "/**\n*\n* @title 隔行换色\n* @parent 基础 Basic\n* @description 可自定义斑马线颜色\n* demo0104\n*/\n\n\nimport React, { Component } from 'react';\nimport { } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns04 = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n\nconst data04 = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\n\nclass Demo04 extends Component {\n render() {\n return <Table \n className=\"demo04\" \n columns={columns04} \n data={data04} />\n }\n}\n\n", "desc": " 可自定义斑马线颜色", "scss_code": ".demo04 {\n &.u-table tr:nth-child(2n){\n background: #f7f9fb;\n }\n &.u-table tr.u-table-row-hover, .u-table tr:hover{\n background: #ebecf0;\n }\n}" }, { "example": _react2['default'].createElement(Demo0105, null), "title": " 表格 Loading 加载", "code": "/**\r\n*\r\n* @title 表格 Loading 加载\r\n* @parent 基础 Basic\r\n* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型\r\n* demo0105\r\n*/\r\n\r\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\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": _react2['default'].createElement(Demo0106, null), "title": " 单元格内容居中", "code": "/**\n*\n* @title 单元格内容居中\n* @parent 基础 Basic\n* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。\n* demo0106\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n {\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 120, className: \"rowClassName\",\n fixed:'left',\n textAlign:'center',\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"bottom\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100,textAlign:'center'},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100,textAlign:'center'},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100,textAlign:'center' },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100,textAlign:'center' }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n handleClick = () => {\n console.log('这是第' , this.currentIndex , '行');\n console.log('内容：' , this.currentRecord);\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n bordered\n />\n );\n }\n}\n\n\n", "desc": " 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。" }, { "example": _react2['default'].createElement(Demo0107, null), "title": " 带边框", "code": "/**\n*\n* @title 带边框\n* @parent 基础 Basic\n* @description 设置 `bordered` 属性可添加表格边框线。\n* demo0107\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n { title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 150 },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width:100},\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 100},\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 100 },\n { title: \"职级\", dataIndex: \"e\", key: \"e\", width: 100 }\n];\n\nconst data = [\n { a: \"ASVAL_20190328\", b: \"小张\", c: \"男\", d: \"财务二科\", e: \"M1\", key: \"1\" },\n { a: \"ASVAL_20190320\", b: \"小明\", c: \"男\", d: \"财务一科\", e: \"T1\", key: \"2\" },\n { a: \"ASVAL_20190312\", b: \"小红\", c: \"女\", d: \"财务一科\", e: \"T2\", key: \"3\" }\n];\n\nclass Demo06 extends Component {\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n bordered\n />\n );\n }\n}\n\n\n", "desc": " 设置 `bordered` 属性可添加表格边框线。" }, { "example": _react2['default'].createElement(Demo0201, null), "title": " 横向滚动条", "code": "/**\n*\n* @title 横向滚动条\n* @parent 滚动 Scroll View\n* @description `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。\n* demo0201\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n {\n title: \"序号\",\n dataIndex: \"index\",\n key: \"index\",\n width: 100, \n render(text, record, index) {\n return index + 1;\n }\n },\n {\n title: \"订单编号\",\n dataIndex: \"orderCode\",\n key: \"orderCode\",\n width: 300, \n },\n {\n title: \"供应商名称\",\n dataIndex: \"supplierName\",\n key: \"supplierName\",\n width: 200\n },\n {\n title: \"类型\",\n dataIndex: \"type_name\",\n key: \"type_name\",\n width: 200\n },\n {\n title: \"采购组织\",\n dataIndex: \"purchasing\",\n key: \"purchasing\",\n width: 200\n },\n {\n title: \"采购组\",\n dataIndex: \"purchasingGroup\",\n key: \"purchasingGroup\",\n width: 200\n },\n {\n title: \"凭证日期\",\n dataIndex: \"voucherDate\",\n key: \"voucherDate\",\n width: 300,\n },\n {\n title: \"审批状态\",\n dataIndex: \"approvalState_name\",\n key: \"approvalState_name\",\n width: 200\n },\n {\n title: \"确认状态\",\n dataIndex: \"confirmState_name\",\n key: \"confirmState_name\",\n width: 200\n }, \n {\n title: \"关闭状态\",\n dataIndex: \"closeState_name\",\n key: \"closeState_name\",\n width: 100\n }\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"执行中\",\n closeState_name:\"未关闭\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n approvalState_name:\"已审批\",\n confirmState_name:\"终止\",\n closeState_name:\"已关闭\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n approvalState_name:\"未审批\",\n confirmState_name:\"待确认\",\n closeState_name:\"未关闭\",\n key: \"5\"\n }\n];\n\nclass Demo11 extends Component {\n render() {\n return (\n <Table columns={columns} data={data} scroll={{ x: \"110%\" }} />\n );\n }\n}\n\n\n", "desc": " `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:\"110%\" }}`。" }, { "example": _react2['default'].createElement(Demo0202, null), "title": " 纵向滚动条", "code": "/**\n*\n* @title 纵向滚动条\n* @parent 滚动 Scroll View\n* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。\n* demo0202\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n {title: \"序号\",dataIndex: \"index\",key: \"index\",width: 80, \n render(text, record, index) {\n return index + 1;\n }\n },\n {title: \"订单编号\",dataIndex: \"orderCode\",key: \"orderCode\",width: 200},\n {title: \"供应商名称\",dataIndex: \"supplierName\",key: \"supplierName\",width: 200},\n {title: \"类型\",dataIndex: \"type_name\",key: \"type_name\",width: 200},\n {title: \"采购组织\",dataIndex: \"purchasing\",key: \"purchasing\",width: 200},\n {title: \"采购组\",dataIndex: \"purchasingGroup\",key: \"purchasingGroup\",width: 200},\n {title: \"凭证日期\",dataIndex: \"voucherDate\",key: \"voucherDate\",width: 200}\n];\n \nconst data = [\n { \n orderCode:\"NU0391025\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织c', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年03月18日\",\n key: \"1\"\n }, \n { \n orderCode:\"NU0391026\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织a', \n purchasingGroup:\"bb\",\n voucherDate:\"2018年02月05日\",\n key: \"2\"\n },\n { \n orderCode:\"NU0391027\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织b', \n purchasingGroup:\"aa\",\n voucherDate:\"2018年07月01日\",\n key: \"3\"\n },\n { \n orderCode:\"NU0391028\", \n supplierName: \"xx供应商\",\n type_name: \"4\",\n purchasing:'组织c', \n purchasingGroup:\"cc\",\n voucherDate:\"2019年03月01日\",\n key: \"4\"\n },\n { \n orderCode:\"NU0391029\", \n supplierName: \"xx供应商\",\n type_name: \"5\",\n purchasing:'组织d', \n purchasingGroup:\"ss\",\n voucherDate:\"2019年02月14日\",\n key: \"5\"\n },\n { \n orderCode:\"NU0391030\", \n supplierName: \"xx供应商\",\n type_name: \"1\",\n purchasing:'组织e', \n purchasingGroup:\"zz\",\n voucherDate:\"2019年02月18日\",\n key: \"6\"\n },\n { \n orderCode:\"NU0391031\", \n supplierName: \"xx供应商\",\n type_name: \"2\",\n purchasing:'组织f', \n purchasingGroup:\"qq\",\n voucherDate:\"2019年01月01日\",\n key: \"7\"\n },\n { \n orderCode:\"NU0391032\", \n supplierName: \"xx供应商\",\n type_name: \"3\",\n purchasing:'组织g', \n purchasingGroup:\"pp\",\n voucherDate:\"2019年01月31日\",\n key: \"8\"\n },\n];\nclass Demo12 extends Component {\n render() {\n return (\n <Table columns={columns} data={data} scroll={{ y:150 }} />\n );\n }\n}\n\n\n", "desc": " 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。" }, { "example": _react2['default'].createElement(Demo0301, null), "title": " 渲染本地数据", "code": "/**\n*\n* @title 渲染本地数据\n* @parent 数据操作 Data Opetation\n* @description 可自定义页头和页脚。\n* demo0301\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport {Button,Tooltip} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [\n {\n title: \"员工编号\", dataIndex: \"a\", key: \"a\", width: 300, className: \"rowClassName\",\n fixed:'left',\n render: (text, record, index) => {\n return (\n <Tooltip inverse overlay={text}>\n <span tootip={text} style={{\n display: \"block\",\n width: \"80px\",\n textOverflow: \"ellipsis\",\n overflow: \"hidden\",\n whiteSpace: \"nowrap\",\n verticalAlign: \"bottom\",\n }}>{text}</span>\n </Tooltip>\n );\n }\n },\n { title: \"员工姓名\", dataIndex: \"b\", key: \"b\", width: 500 },\n { title: \"性别\", dataIndex: \"c\", key: \"c\", width: 500 },\n { title: \"部门\", dataIndex: \"d\", key: \"d\", width: 200 }\n];\n\nconst data = [\n { a: \"ASVAL_201903280005\", b: \"小张\", c: \"男\", d: \"财务二科\", key: \"1\" },\n { a: \"ASVAL_201903200004\", b: \"小明\", c: \"男\", d: \"财务一科\", key: \"2\" },\n { a: \"ASVAL_201903120002\", b: \"小红\", c: \"女\", d: \"财务一科\", key: \"3\" }\n];\nclass Demo21 extends Component {\n\n constructor(props) {\n super(props);\n this.state = {\n data: data\n }\n }\n\n render() {\n return (\n <Table\n columns={columns}\n data={data}\n title={currentData => <div>员工信息统计表</div>}\n footer={currentData => <div>合计: 共{data.length}条数据</div>}\n />\n );\n }\n}\n\n\n", "desc": " 可自定义页头和页脚。" }, { "example": _react2['default'].createElement(Demo0302, null), "title": " 渲染远程数据", "code": "/**\n*\n* @title 渲染远程数据\n* @parent 数据操作 Data Opetation\n* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。\n* demo0302\n*/\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport {Button} from \"tinper-bee\";\nimport reqwest from 'reqwest';\nimport Table from \"tinper-bee/lib/src\";;\n\nconst columns = [{\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n render: name => `${name.first} ${name.last}`,\n width: '20%',\n}, {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n}, {\n title: 'Email',\n dataIndex: 'email',\n}];\n\nclass Demo22 extends Component {\n constructor(props) {\n super(props);\n this.state = {\n data: [],\n loading: false,\n }\n }\n\n fetch = (params = {}) => {\n console.log('params:', params);\n this.setState({ loading: true });\n reqwest({\n url: 'https://randomuser.me/api',\n method: 'get',\n data: {\n results: 10,\n ...params,\n },\n type: 'json',\n }).then((data) => {\n this.setState({\n loading: false,\n data: data.results,\n });\n });\n }\n\n render() {\n return (\n <div className=\"demo22\">\n <Button className=\"opt-btns\" colors=\"secondary\" onClick={() => this.fetch()}>点击加载远程数据</Button>\n <Table\n columns={columns}\n data={this.state.data}\n loading={this.state.loading}\n scroll={{y:200}}\n />\n </div>\n );\n }\n}\n\n\n", "desc": " 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。", "scss_code": ".demo22{\n .opt-btns{\n margin-bottom: 8px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0402, null), "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\";\nimport { } from 'tinper-bee';\r\nimport Table from \"tinper-bee/lib/src\";;\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{\n .u-table-thead th {\n padding-top: 0px;\n padding-bottom: 0px;\n }\n}" }, { "example": _react2['default'].createElement(Demo0404, null), "title": " 数据关联", "code": "/**\n*\n* @title 数据关联\n* @parent 列渲染 Custom Render\n* @description 数据行关联自定义菜单显示\n* demo0404\n*/\n\nimport React, { Component } from 'react';\nimport { } from 'tinper-bee';\nimport {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\nimport multiSelect from \"tinper-bee/lib/newMultiSelect\";;\nimport sort from \"tinper-bee/lib/sort\";;\n\nconst { Item } = Menu;\n\nconst data = [\n { \n num:\"NU0391025\", \n name: \"aa\",\n sex: \"男\",\n dept:'财务二科', \n rank:\"T1\",\n year:\"1\",\n seniority:\"1\",\n key: \"1\"\n }, \n { \n num:\"NU0391026\", \n name: \"bb\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"M1\",\n year:\"1\",\n seniority:\"1\",\n key: \"2\"\n },\n { \n num:\"NU0391027\", \n name: \"dd\",\n sex: \"女\",\n dept:'财务一科', \n rank:\"T2\",\n year:\"2\",\n seniority:\"2\",\n key: \"3\"\n }\n];\n\nconst MultiSelectTable = multiSelect(Table, Checkbox);\nconst ComplexTable = sort(MultiSelectTable, Icon);\n\nclass Demo33 extends Component {\n constructor(props) {\n super(props);\n }\n getSelectedDataFunc = data => {\n console.log(data);\n }\n onSelect = (item) => {\n console.log(item);\n }\n render() {\n const menu1 = (\n <Menu\n onSelect={this.onSelect}>\n <Item key=\"1\">模态弹出</Item>\n <Item key=\"2\">链接跳转</Item>\n <Item key=\"3\">打开新页</Item>\n </Menu>);\n let columns = [\n { title: \"关联\",dataIndex: \"link\",key: \"link\",width: 80, \n render: (text, record, index) => {\n return (\n <Dropdown\n trigger={['click']}\n overlay={menu1}\n animation=\"slide-up\"\n >\n <Icon type=\"uf-link\" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>\n </Dropdown>\n )\n }\n },\n { title: \"员工编号\",dataIndex: \"num\",key: \"num\",width: 200 },\n { title: \"员工姓名\",dataIndex: \"name\",key: \"name\", width: 200},\n { title: \"员工性别\",dataIndex: \"sex\",key: \"sex\",width: 200 },\n { title: \"部门\",dataIndex: \"dept\",key: \"dept\",width: 200},\n { title: \"职级\",dataIndex: \"rank\",key: \"rank\",width: 200},\n { title: \"工龄\",dataIndex: \"year\",key: \"year\",width: 200},\n { title: \"司龄\",dataIndex: \"seniority\",key: \"seniority\",width: 200}\n ];\n return <ComplexTable \n bordered\n columns={columns} \n data={data} \n multiSelect={{type: \"checkbox\"}}\n getSelectedDataFunc={this.getSelectedDataFunc}\n />\n }\n}\n\n", "desc": " 数据行关联自定义菜单显示" }, { "example": _react2['default'].createElement(Demo0405, null), "title": " 列合计（总计）", "code": "/**\n *\n * @title 列合计（总计）\n * @parent 列渲染 Custom Render\n * @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。\n * demo0405\n */\n\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport {Checkbox} from \"tinper-bee\";\nimport Table from \"tinper-bee/lib/src\";; \nimport sum from \"tinper-bee/lib/sum.js\";;\nimport multiSelect from \"tinper-bee/lib/multiSelect.js\";;\n \nlet ComplexTable = multiSelect(sum(Table), Checkbox);\nlet _sum = 0;\nconst columns = [\n {\n title: \"单据编号\",\n dataIndex: \"num\",\n key: \"num\",\n width: 120,\n fixed: \"left\"\n },\n {\n title: \"单据日期\",\n dataIndex: \"date\",\n key: \"date\",\n width: 200,\n },\n {\n title: \"业务类型\",\n dataIndex: \"type\",\n key: \"type\",\n width: 200\n },\n {\n title: \"供应商\",\n dataIndex: \"supplier\",\n key: \"supplier\",\n width: 100\n },\n {\n title: \"联系人\",\n dataIndex: \"contact\",\n key: \"contact\",\n },\n {\n title: \"仓库\",\n dataIndex: \"warehouse\",\n key: \"warehouse\",\n width: 80,\n },\n {\n title: \"整单数量\",\n dataIndex: \"total\",\n key: \"total\",\n width: 100,\n sumCol: true\n },\n {\n title: \"金额\",\n dataIndex: \"money\",\n key: \"money\",\n width: 100,\n sumCol: true\n }\n];\n\nfunction getData(){\n const data = [];\n for (let i = 0; i < 5; i++) {\n data.push({\n key: i,\n num: \"NU039100\"+i,\n date: \"2019-03-01\",\n type: \"普通采购\",\n supplier: \"gys\"+i,\n contact: \"Tom\",\n warehouse: \"普通仓\",\n total: i + Math.floor(Math.random()*10),\n money: 20 * Math.floor(Math.random()*10)\n });\n _sum += data[i].total;\n _sum += data[i].money;\n }\n return data;\n}\n\nclass Demo35 extends Component {\n \n constructor(props) {\n super(props);\n this.state = {\n data: getData(),\n sum:_sum\n };\n }\n\n render() {\n const {data} = this.state;\n return (\n <div>\n <ComplexTable \n columns={columns}\n data={data}\n bordered\n footer={currentData => <div>总计: {_sum}</div>}\n />\n </div>\n );\n }\n}\n\n", "desc": " 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。" }, { "example": _react2['default'].createElement(Demo0501, null), "title": " 行内编辑", "code": "/**\n *\n * @title 行内编辑\n * @parent 编辑 Editor\n * @description 可以对行进行编辑的表格\n * demo0501\n */\nimport React, { Component } from \"react\";\nimport { } from 'tinper-bee';\nimport Table from \"tinper-bee/lib/src\";;\nimport { Select, Form, FormControl, Button, Icon, Tooltip } from \"tinper-bee\";\nconst Option = Select.Option;\nimport { RefTreeWithInput } from \"ref-tree\";\n\nclass StringEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleChange = value => {\n const { onChange, throwError } = this.props;\n if (value === \"\") {\n throwError && throwError(true);\n } else {\n throwError && throwError(false);\n }\n this.setState({ value });\n onChange && onChange(value);\n };\n\n render() {\n const { editable, required, colName } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (value === \"\") cls += \" verify-cell\";\n return editable ? (\n <div className=\"editable-cell\">\n <div className={cls}>\n <FormControl value={value} onChange={this.handleChange} />\n <span className=\"error\">\n {value === \"\" ? (\n <Tooltip\n inverse\n className=\"u-editable-table-tp\"\n placement=\"bottom\"\n overlay={<div className=\"tp-content\">{\"请输入\" + colName}</div>}\n >\n <Icon className=\"uf-exc-t required-icon\" />\n </Tooltip>\n ) : null}\n </span>\n </div>\n </div>\n ) : (\n value || \" \"\n );\n }\n}\n\nconst SELECT_SOURCE = [\"男\", \"女\"];\n\nclass SelectEditCell extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = value => {\n this.setState({ value });\n this.props.onChange && this.props.onChange(value);\n };\n\n render() {\n const { editable } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n return editable ? (\n <div className=\"editable-cell\">\n <div className={cls}>\n <Select value={value} onSelect={this.handleSelect}>\n {SELECT_SOURCE.map((item, index) => (\n <Option key={index} value={item}>\n {item}\n </Option>\n ))}\n </Select>\n </div>\n </div>\n ) : (\n value || \" \"\n );\n }\n}\n\nconst option = {\n title: \"树\",\n searchable: true,\n multiple: false,\n param: {\n refCode: \"neworganizition_tree\"\n },\n checkStrictly: true,\n disabled: false,\n nodeDisplay: record => {\n return record.refname;\n },\n displayField: record => {\n return record.refname;\n }, //显示内容的键\n valueField: \"refpk\", //真实 value 的键\n refModelUrl: {\n treeUrl: \"https://mock.yonyoucloud.com/mock/358/blobRefTree\",\n treeUrl: \"/pap_basedoc/common-ref/blobRefTree\"\n },\n matchUrl: \"/pap_basedoc/common-ref/matchPKRefJSON\",\n filterUrl: \"/pap_basedoc/common-ref/filterRefJSON\",\n lazyModal: false,\n strictMode: true,\n lang: \"zh_CN\",\n treeData: [\n {\n code: \"org1\",\n children: [\n {\n code: \"bj\",\n entityType: \"mainEntity\",\n name: \"北京总部-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"bj\",\n refpk: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n id: \"5305416e-e7b4-4051-90bd-12d12942295b\",\n isLeaf: \"true\",\n refname: \"北京总部-简\"\n },\n {\n code: \"xd\",\n entityType: \"mainEntity\",\n name: \"新道-简\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"xd\",\n refpk: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n id: \"b691afff-ea83-4a3f-affa-beb2be9cba52\",\n isLeaf: \"true\",\n refname: \"新道-简\"\n },\n {\n code: \"yy3\",\n entityType: \"mainEntity\",\n name: \"test3\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy3\",\n refpk: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n id: \"e75694d9-7c00-4e9e-9573-d29465ae79a9\",\n isLeaf: \"true\",\n refname: \"test3\"\n },\n {\n code: \"yy1\",\n entityType: \"mainEntity\",\n name: \"test1\",\n pid: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refcode: \"yy1\",\n refpk: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n id: \"fd32ceeb-57a8-4f44-816e-fa660f5715ab\",\n isLeaf: \"true\",\n refname: \"test1\"\n },\n {\n code: \"dept2\",\n children: [\n {\n code: \"cs\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"测试部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"cs\",\n refpk: \"cc43a66a-438d-4106-937f-bec44406f771\",\n id: \"cc43a66a-438d-4106-937f-bec44406f771\",\n isLeaf: \"true\",\n refname: \"测试部-简\"\n },\n {\n code: \"qd\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"前端部-简\",\n pid: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refcode: \"qd\",\n refpk: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n id: \"73a10edd-aae8-4f31-af25-1f48f0a3b344\",\n isLeaf: \"true\",\n refname: \"前端部-简\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"生产处\",\n refcode: \"dept2\",\n refpk: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n id: \"0ebbb6d8-250a-4d1d-a019-7ae951629a2c\",\n refname: \"生产处\"\n },\n {\n code: \"dept1\",\n children: [\n {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: \"财务一科\"\n }\n ],\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务处\",\n refcode: \"dept1\",\n refpk: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n id: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refname: \"财务处\"\n }\n ],\n entityType: \"mainEntity\",\n name: \"用友集团\",\n refcode: \"org1\",\n refpk: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n refname: \"用友集团\"\n }\n ]\n};\n\nconst RefEditCell = Form.createForm()(\n class RefComponentWarpper extends Component {\n constructor(props, context) {\n super(props);\n this.state = {\n value: props.value\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (!nextProps.editable) {\n this.setState({ value: nextProps.value });\n }\n }\n\n handleSelect = values => {\n this.setState({ value: values[0] });\n this.props.onChange && this.props.onChange(values[0]);\n };\n\n render() {\n const { getFieldProps, getFieldError } = this.props.form;\n const { editable, required } = this.props;\n const { value } = this.state;\n let cls = \"editable-cell-input-wrapper\";\n if (required) cls += \" required\";\n if (getFieldError(\"refValue\")) cls += \" verify-cell\";\n return editable ? (\n <div className={cls}>\n <RefTreeWithInput\n {...option}\n onSave={this.handleSelect}\n getRefTreeData={this.getRefTreeData}\n {...getFieldProps(\"refValue\", {\n initialValue: JSON.stringify(value),\n rules: [\n {\n message: (\n <Tooltip\n inverse\n className=\"u-editable-table-tp\"\n placement=\"bottom\"\n overlay={\n <div className=\"tp-content\">\n {\"请输入\" + this.props.colName}\n </div>\n }\n >\n <Icon className=\"uf-exc-t required-icon\" />\n </Tooltip>\n ),\n pattern: /[^{\"refname\":\"\",\"refpk\":\"\"}|{\"refpk\":\"\",\"refname\":\"\"}]/\n }\n ]\n })}\n />\n <span className=\"error\">{getFieldError(\"refValue\")}</span>\n </div>\n ) : (\n value.name || \" \"\n );\n }\n }\n);\n\nlet dataSource = [\n {\n a: \"ASVAL_201903280005\",\n b: \"小张\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"1\"\n },\n {\n a: \"ASVAL_201903200004\",\n b: \"小明\",\n c: \"男\",\n d: {\n code: \"dept1_2\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务二科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_2\",\n refpk: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n id: \"55b7fff1-6579-4ca9-92b7-3271d288b9f3\",\n isLeaf: \"true\",\n refname: \"财务二科\"\n },\n key: \"2\"\n },\n {\n a: \"ASVAL_201903120002\",\n b: \"小红\",\n c: \"女\",\n d: {\n code: \"dept1_1\",\n entityType: \"subEntity\",\n organization_id: \"a4cf0601-51e6-4012-9967-b7a64a4b2d47\",\n name: \"财务一科\",\n pid: \"95b60f35-ed0b-454e-b948-fb45ae30b911\",\n refcode: \"dept1_1\",\n refpk: \"9711d912-3184-4063-90c5-1facc727813c\",\n id: \"9711d912-3184-4063-90c5-1facc727813c\",\n isLeaf: \"true\",\n refname: