dlt-for-react 1.0.1

package/lib/components/NHSelector/table/index.js

@@ -0,0 +1,687 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _table = require('antd/lib/table');
+
+var _table2 = _interopRequireDefault(_table);
+
+var _button = require('antd/lib/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _input = require('antd/lib/input');
+
+var _input2 = _interopRequireDefault(_input);
+
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+require('antd/lib/table/style');
+
+require('antd/lib/button/style');
+
+require('antd/lib/input/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _NHCore = require('../utils/NHCore');
+
+var _reactCustomScrollbars = require('react-custom-scrollbars');
+
+var _NHFetch = require('../utils/NHFetch');
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+require('../../../../assets/selector/table/index.less');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var loadCount = 0;
+
+var SelectorTable = function (_React$Component) {
+    (0, _inherits3.default)(SelectorTable, _React$Component);
+
+    function SelectorTable(props) {
+        (0, _classCallCheck3.default)(this, SelectorTable);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (SelectorTable.__proto__ || (0, _getPrototypeOf2.default)(SelectorTable)).call(this, props));
+
+        _initialiseProps.call(_this);
+
+        _this.state = {
+            columns: _this.props.columns,
+            searchParams: {}, //自定义的搜索条件
+            sorter: {}, //排序字段
+            selectedRows: [], //选中的数据
+            selectedRowKeys: [], //选中的数据的主键loading
+            loading: false,
+            data: [], //数据
+            pageData: { //分页设置的是三个参数
+                total: 0,
+                pageSize: _this.props.footerFlag === false ? 10000000 : 20, //当前页默认多少条数据
+                page: 1
+            },
+            height: _this.props.height, //列表的高度
+            width: undefined, //列表的宽度
+            className: (0, _NHCore.createUuid)(),
+            searchField: '' //通用查询的字段
+        };
+        return _this;
+    }
+
+    //在组件挂载之后调用一次。
+
+    //设置可以传递参数的默认值
+
+
+    (0, _createClass3.default)(SelectorTable, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.refreshHeight();
+        }
+    }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate() {
+            this.refreshHeight();
+        }
+
+        //固定通用方法
+        //搜索操作
+
+        //重置操作
+
+
+        //重新加载数据数据的方法（从第一页开始）
+
+        //在当前页刷新数据
+
+
+        //当Table有变动的时候会触发此方法
+
+
+        /**
+         * 绑定查询条件值改变事件
+         */
+
+
+        /**
+         * 对选中的值进行操作
+         */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            function deepCopy(obj) {
+                if ((typeof obj === 'undefined' ? 'undefined' : (0, _typeof3.default)(obj)) !== 'object') {
+                    return obj;
+                }
+                var newobj = {};
+                for (var attr in obj) {
+                    newobj[attr] = deepCopy(obj[attr]);
+                }
+                return newobj;
+            }
+            /****************************以下操作是初始化列的数据*********************************/
+            var columns = [];
+            var minWidthCount = 0; //最小宽度列（只有最小宽度这个参数）
+            var minAllWidth = 0; //最小宽度列宽度之和
+            var fieldAllWidth = 0; //除开序号列和参数列的宽度之和
+            this.state.columns.map(function (item1) {
+                var item = deepCopy(item1);
+                if (item.hidden !== true) {
+                    if (!item.dataIndex && item.key) {
+                        item.dataIndex = item.key;
+                    }
+                    if (!item.dataIndex) {
+                        alert("dataIndex不能为空");
+                    }
+                    //dataIndex必须大写
+                    item.dataIndex = item.dataIndex;
+                    //列width或者minWidth必须至少设置一个
+                    if (!item.width && !item.minWidth) {
+                        alert("参数设置有误，width和minWidth必须设置一个！");
+                        return item1;
+                    }
+                    //如果列的最小宽度不存在，则设置width为最小宽度
+                    if (!item.minWidth) {
+                        item.minWidth = item.width;
+                    }
+                    //项缓存冻结列的数据，因为当列的宽度总和小于列表宽度的时候不需要是使用冻结列的
+                    if (item.fixed && item.fixed === 'left') {
+                        item.cacheFixed = 'left';
+                    } else if (item.fixed && item.fixed === 'right') {
+                        item.cacheFixed = 'right';
+                    }
+                    delete item.fixed;
+                    //获取一些数据给下面使用
+                    if (item.dataIndex.toUpperCase() !== 'ROW_ID') {
+                        fieldAllWidth += parseInt(item.minWidth, 10);
+                    }
+                    if (!item.width) {
+                        minWidthCount++;
+                        minAllWidth += parseInt(item.minWidth, 10);
+                    }
+                    if (item.render !== undefined && item.render !== '' && typeof item.render === 'string') {
+                        if (item.render.indexOf("function") != -1) {
+                            if (item.render) {
+                                item.render = eval("(true&&" + item.render.replace(/[\r\n]/g, "") + ")");
+                            } else {
+                                delete item.render;
+                            }
+                        } else {
+                            if (_this2.props.funcParams && _this2.props.funcParams[item.render] !== undefined) {
+                                item.render = _this2.props.funcParams[item.render];
+                            } else {
+                                delete item.render;
+                            }
+                        }
+                    }
+                    columns.push(item);
+                }
+                return item1;
+            });
+
+            /****************************以下操作是列的宽度，并做处理*********************************/
+            var width = 0;
+            if (document.getElementsByClassName(this.state.className)[0]) {
+                //存在二级列表时候的+号列50
+                var expandWidth = 0;
+                //滚动条宽度20
+                var scollWidth = 20;
+                //选择框列63
+                var selectFieldWidth = 40; //原来是63，现被强制设置成40
+                //列表的宽度
+                var tableWidth = document.getElementsByClassName(this.state.className)[0].offsetWidth;
+                // tableWidth = getWidth(tableWidth, document.getElementsByClassName(this.state.className)[0]);
+                tableWidth = parseInt(this.props.width, 10);
+                //列的实际宽度
+                var trueWidth = scollWidth + selectFieldWidth + expandWidth;
+                columns.map(function (item) {
+                    trueWidth += parseInt(item.minWidth, 10);
+                    return item;
+                });
+                //如果列的宽度大于列表的宽度的时候，需要冻结列，减少10px是为了减少误差
+                if (trueWidth > tableWidth - 10) {
+                    columns.map(function (item, index) {
+                        item.width = parseInt(item.minWidth, 10);
+                        if (item.cacheFixed) {
+                            item.fixed = item.cacheFixed;
+                        }
+                        return item;
+                    });
+                    width = trueWidth + 10;
+                } else if (trueWidth === tableWidth - 10) {
+                    //如果列的宽度等于列表的宽度的时候，不需要做任何的处理
+                    columns.map(function (item, index) {
+                        item.width = parseInt(item.minWidth, 10);
+                        return item;
+                    });
+                } else {
+                    //如果列的宽度小于列表的宽度的时候，存在最小宽度列，则把剩余宽度平分到最小宽度列，如果没有，则平分到除了序号和操作列的其他列
+                    var elseWidth = tableWidth - 10 - trueWidth;
+                    if (minWidthCount === 0) {
+                        //没有扩展列
+                        columns.map(function (item, index) {
+                            if (item.dataIndex && item.dataIndex !== 'ROW_ID') {
+                                item.width = parseInt(item.minWidth, 10) + parseInt(elseWidth * parseInt(item.minWidth, 10) / fieldAllWidth, 10);
+                            }
+                            return item;
+                        });
+                    } else {
+                        columns.map(function (item, index) {
+                            if (!item.width) {
+                                //最小宽度列
+                                item.width = parseInt(item.minWidth, 10) + parseInt(elseWidth * parseInt(item.minWidth, 10) / minAllWidth, 10);
+                            }
+                            return item;
+                        });
+                    }
+                }
+            }
+
+            /****************************以下部分页的参数,如果不需要尾部则这些信息不需要进行设置*********************************/
+            var Pagination = undefined;
+            if (this.props.footerFlag !== false) {
+                Pagination = {
+                    total: this.state.pageData.total, //数据总数
+                    pageSize: this.state.pageData.pageSize, //每页的条数
+                    current: this.state.pageData.page, //当前页数
+                    showTotal: function showTotal(total, range) {
+                        return '\u5F53\u524D' + range[0] + '-' + range[1] + '\u6761 \u603B\u6570' + total + '\u6761';
+                    },
+                    // showQuickJumper: true,
+                    showSizeChanger: true,
+                    pageSizeOptions: ['10', '20', '50', '100', '200', '500']
+                };
+            } else {
+                Pagination = false;
+            }
+
+            /****************************以下是设置是否需要选择框*********************************/
+
+            var rowSelection = {
+                type: this.props.type === 'checkbox' ? 'checkbox' : 'radio',
+                columnWidth: 40,
+                selectedRowKeys: this.state.selectedRowKeys,
+                onSelect: function onSelect(record, selected, selectedRows, nativeEvent) {
+                    _this2.setSelectRows([record], selected);
+                },
+                onSelectAll: function onSelectAll(selected, selectedRows, changeRows) {
+                    _this2.setSelectRows(changeRows, selected);
+                }
+            };
+            var onRow = function onRow(record) {
+                return {
+                    onClick: function onClick() {
+                        _this2.setSelectRows([record]);
+                    }
+                };
+            };
+
+            /****************************以下是循环判断是否需要排序、搜索条件*********************************/
+            columns.map(function (item, index) {
+                if (!item.key) {
+                    item.key = item.dataIndex;
+                }
+                //是否需要排序
+                if (item.sorted !== false && item.title !== '序号' && item.title !== '操作') {
+                    item.sorter = true;
+                } else {
+                    item.sorter = false;
+                }
+                return item;
+            });
+
+            var searchWidth = parseInt(this.props.searchWidth, 10);
+            return _react2.default.createElement(
+                'div',
+                { style: { height: '100%', width: '100%' } },
+                _react2.default.createElement(
+                    'div',
+                    { className: "xgui-selector-table-searchDiv", style: { padding: '5px' } },
+                    this.props.searchRender ? this.props.searchRender() : _react2.default.createElement(
+                        'div',
+                        null,
+                        _react2.default.createElement(_input2.default, {
+                            placeholder: this.props.placeholder,
+                            value: this.state.searchParams[this.props.searchField],
+                            onChange: function onChange(value) {
+                                _this2.handlerSearchTextChange(_this2.props.searchField, value);
+                            },
+                            style: { width: searchWidth },
+                            onPressEnter: this.onSearch
+                        }),
+                        _react2.default.createElement(
+                            _button2.default,
+                            { type: 'primary', style: { marginLeft: '20px' }, onClick: this.onSearch },
+                            '\u67E5\u8BE2'
+                        ),
+                        _react2.default.createElement(
+                            _button2.default,
+                            { type: 'Default', style: { paddingLeft: 5, marginLeft: '10px' }, icon: 'reload', onClick: this.onRest },
+                            '\u91CD\u7F6E'
+                        )
+                    )
+                ),
+                _react2.default.createElement(_table2.default, {
+                    className: this.state.className,
+                    size: 'small',
+                    rowKey: this.props.rowKey,
+                    rowSelection: rowSelection,
+                    onRow: onRow,
+                    dataSource: this.state.data,
+                    columns: columns,
+                    showHeader: this.props.showHeader,
+                    pagination: Pagination,
+                    loading: this.state.loading,
+                    onChange: this.handleTableChange,
+                    bordered: false,
+                    components: this.components,
+                    scroll: { x: width, y: this.state.height }
+                })
+            );
+        }
+    }]);
+    return SelectorTable;
+}(_react2.default.Component);
+
+SelectorTable.defaultProps = {
+    sign: undefined,
+    rowKey: undefined, //【推荐存在】设置的rowKey,在selectedRowKeys中存放的数据就是这个字段的值
+    keyField: undefined, //主键字段
+    initParams: {}, //初始化过滤的参数，这个不会根据重置而改变
+    treeParams: {}, //树选中的时候的查询条件
+    type: 'checkbox', //【根据需求判断】是否需要checkbox
+    footerFlag: true, //【根据需求判断】是否需要尾部，不需要尾部的时候，不会进行分页,
+    onSelect: undefined,
+    url: undefined, //后台访问地址，传了此路径就表示后台查询使用此路径而不是使用通用路径
+    columns: [],
+    searchField: '', //列表可以进行模糊查询的字段
+    searchWidth: '230', //查询框的宽度
+    placeholder: '请输入查询条件', //查询框的默认提示
+    width: 500, //列表的宽度
+    showHeader: true, //是否显示头部
+    searchRender: undefined, //自定义搜索框
+    rangeFilter: undefined, //是否开启职务范围过滤
+    rangeFilterList: undefined, // 自定义职务过滤列表
+    funcParams: {} //如果在columns内部写代码操作时，用键值对的形式存起来
+};
+
+var _initialiseProps = function _initialiseProps() {
+    var _this3 = this;
+
+    this.refreshHeight = function () {
+        //如果需要自适应高度
+        if (document.getElementsByClassName(_this3.state.className)) {
+            var lastHeight = _this3.state.height;
+            var height = (0, _NHCore.getSuitHeight)(document.getElementsByClassName(_this3.state.className)[0]);
+            var titleHeight = 40;
+            if (_this3.props.showHeader !== true) {
+                titleHeight = 0;
+            }
+            var reduceHeight = 40 + titleHeight;
+            if (_this3.props.footerFlag === false) {
+                reduceHeight = 5 + titleHeight;
+            }
+            height = height - reduceHeight;
+            if (!lastHeight || lastHeight !== height) {
+                _this3.setState({
+                    height: height
+                });
+            }
+        }
+    };
+
+    this.onSearch = function () {
+        _this3.filterTableData();
+    };
+
+    this.onRest = function () {
+        _this3.setState(function (prevState, props) {
+            return {
+                searchParams: {}, //自定义的搜索条件
+                sorter: {}, //排序字段
+                pageData: {
+                    total: _this3.state.pageData.total,
+                    pageSize: _this3.state.pageData.pageSize,
+                    page: 1
+                }
+            };
+        }, function () {
+            this.filterTableData();
+        });
+    };
+
+    this.filterTableData = function () {
+        _this3.setState(function (prevState, props) {
+            return {
+                pageData: {
+                    total: _this3.state.pageData.total,
+                    pageSize: _this3.state.pageData.pageSize,
+                    page: 1
+                }
+            };
+        }, function () {
+            _this3.readTableData();
+        });
+        // 将此方法放进 setState的回调里，让设置pageData及时生效
+        // this.readTableData();
+    };
+
+    this.readTableData = function () {
+        var params = _this3.getFilterParams();
+        _this3.setState({ loading: true });
+        var url = _this3.props.url;
+        (0, _NHFetch2.default)(url, "POST", params).then(function (res) {
+            if (res) {
+                _this3.setState({
+                    data: res.data.list,
+                    pageData: {
+                        total: res.data.total,
+                        pageSize: _this3.state.pageData.pageSize,
+                        page: _this3.state.pageData.page
+                    }
+                });
+            }
+            _this3.setState({ loading: false });
+        }).catch(function (res) {
+            _this3.setState({ loading: false });
+            return res;
+        });
+    };
+
+    this.getFilterParams = function () {
+        var pagination = _this3.state.pageData; //分页的参数
+        var sorter = _this3.state.sorter; //过滤的数据
+        var searchParams = _this3.state.searchParams; //内部定义的搜搜框的查询参数
+        var initParams = _this3.props.initParams; //初始化参数
+        var treeParams = _this3.props.treeParams; //树过滤条件
+        var rangeFilter = _this3.props.rangeFilter; //是否开启职务范围过滤
+        var rangeFilterList = _this3.props.rangeFilterList; // 自定义职务过滤列表
+        var params = _this3.mergeParams(searchParams, initParams, treeParams);
+
+        var res = {
+            pagination: pagination,
+            sorter: sorter,
+            params: params,
+            sign: _this3.props.sign,
+            sqlParams: _this3.props.sqlParams,
+            keyField: _this3.props.keyField
+        };
+        //如果启用职位范围过滤
+        if (rangeFilter) {
+            var userId = (0, _NHCore.getLoginUser)() ? (0, _NHCore.getLoginUser)().userId : '';
+            res.rangeFilter = { id: userId };
+        }
+        if (rangeFilterList) {
+            res.rangeFilterList = rangeFilterList;
+        }
+        return res;
+    };
+
+    this.mergeParams = function (searchParams, initParams, treeParams) {
+        var params = {};
+        if (searchParams) {
+            for (var key in searchParams) {
+                params[key] = searchParams[key];
+            }
+        }
+        if (initParams) {
+            for (var _key in initParams) {
+                params[_key] = initParams[_key];
+            }
+        }
+        if (treeParams) {
+            for (var _key2 in treeParams) {
+                params[_key2] = treeParams[_key2];
+            }
+        }
+        return params;
+    };
+
+    this.handleTableChange = function (pagination, filters, sorter) {
+        _this3.setState(function (prevState, props) {
+            return {
+                sorter: {
+                    columnKey: sorter.columnKey,
+                    order: sorter.order
+                },
+                pageData: {
+                    total: _this3.state.pageData.total,
+                    pageSize: pagination.pageSize,
+                    page: pagination.current
+                }
+            };
+        }, function () {
+            this.readTableData();
+        });
+    };
+
+    this.handlerSearchTextChange = function (key, e) {
+        var searchParams = _this3.state.searchParams ? _this3.state.searchParams : {};
+        searchParams[key] = e.target.value;
+        _this3.setState({
+            searchParams: searchParams
+        });
+    };
+
+    this.setSelectRows = function (changeRows, isSelect) {
+        var selectedRowKeys = [].concat((0, _toConsumableArray3.default)(_this3.state.selectedRowKeys));
+        var selectedRows = [].concat((0, _toConsumableArray3.default)(_this3.state.selectedRows));
+        var rowKey = _this3.props.rowKey;
+
+        //如果是多选
+        if (_this3.props.type === 'checkbox') {
+            var rowsMap = {};
+            for (var i = 0; i < changeRows.length; i++) {
+                rowsMap[changeRows[i][rowKey]] = changeRows[i];
+            }
+            if (isSelect === true) {
+                //表示是选中
+                for (var _i = 0; _i < selectedRowKeys.length; _i++) {
+                    if (rowsMap[selectedRowKeys[_i]]) {
+                        rowsMap[selectedRowKeys[_i]] = undefined;
+                    }
+                }
+                for (var key in rowsMap) {
+                    if (rowsMap[key]) {
+                        selectedRowKeys.push(key);
+                        selectedRows.push(rowsMap[key]);
+                    }
+                }
+            } else if (isSelect === false) {
+                //表示没有选中
+                for (var _i2 = 0; _i2 < selectedRowKeys.length; _i2++) {
+                    if (rowsMap[selectedRowKeys[_i2]]) {
+                        //表示这个值不能不能存在，需要删除
+                        selectedRowKeys.splice(_i2, 1);
+                        selectedRows.splice(_i2, 1);
+                        _i2--;
+                    }
+                }
+            } else {
+                //表示不知道是选中还是没有选中，这个时候只会有一个值
+                var _key3 = changeRows[0][rowKey];
+                var isAdd = true;
+                for (var _i3 = 0; _i3 < selectedRowKeys.length; _i3++) {
+                    if (selectedRowKeys[_i3] === _key3) {
+                        //存在说明是删除
+                        selectedRowKeys.splice(_i3, 1);
+                        selectedRows.splice(_i3, 1);
+                        isAdd = false;
+                        break;
+                    }
+                }
+                if (isAdd) {
+                    selectedRowKeys.push(_key3);
+                    selectedRows.push(changeRows[0]);
+                }
+            }
+        } else {
+            //单选
+            selectedRows = [];
+            selectedRowKeys = [];
+            selectedRowKeys.push(changeRows[0][rowKey]);
+            selectedRows.push(changeRows[0]);
+        }
+        _this3.setState({
+            selectedRows: selectedRows,
+            selectedRowKeys: selectedRowKeys
+        });
+        if (_this3.props.onSelect) {
+            _this3.props.onSelect(selectedRowKeys, selectedRows);
+        }
+    };
+
+    this.setSelectedRowKeys = function (selectedRowKeys, selectedRows) {
+        _this3.setState({
+            selectedRows: selectedRows,
+            selectedRowKeys: selectedRowKeys
+        });
+    };
+
+    this.components = {
+        table: function table(props) {
+            return _react2.default.createElement(
+                _reactCustomScrollbars.Scrollbars,
+                { onScroll: _this3.onScroll, autoHide: true, style: { width: '100%', height: _this3.state.height } },
+                _react2.default.createElement('table', props)
+            );
+        }
+    };
+
+    this.onScroll = function (e1) {
+        if (loadCount === 0) {
+            var scrollLeft = e1.target.scrollLeft;
+            var scrollTop = e1.target.scrollTop;
+            var $parentObj = e1.target.parentNode.parentNode;
+            var obj = $parentObj.classList.contains('ant-table-body') ? 'content' : 'none';
+            if (obj === 'none') {
+                obj = $parentObj.parentNode.parentNode.classList.contains('ant-table-fixed-left') ? 'left' : 'right';
+            }
+
+            //头部对象
+            var $table = document.getElementsByClassName(_this3.state.className)[0];
+            var $header = $table.getElementsByClassName("ant-table-scroll")[0].getElementsByClassName("ant-table-header")[0];
+            $header.scrollLeft = scrollLeft;
+            //中间内容区
+            var $content = $table.getElementsByClassName("ant-table-scroll")[0].getElementsByClassName("ant-table-body")[0].childNodes[0].childNodes[0];
+            if (obj !== 'content' && $content.scrollTop !== scrollTop) {
+                loadCount++;
+                $content.scrollTop = scrollTop;
+            }
+            //左部固定内容区
+            if ($table.getElementsByClassName("ant-table-fixed-left")[0]) {
+                var $left = $table.getElementsByClassName("ant-table-fixed-left")[0].getElementsByClassName("ant-table-body-inner")[0].childNodes[0].childNodes[0];
+                if ($left && obj !== 'left' && $left.scrollTop !== scrollTop) {
+                    loadCount++;
+                    $left.scrollTop = scrollTop;
+                }
+            }
+            //右部固定内容区
+            if ($table.getElementsByClassName("ant-table-fixed-right")[0]) {
+                var $right = $table.getElementsByClassName("ant-table-fixed-right")[0].getElementsByClassName("ant-table-body-inner")[0].childNodes[0].childNodes[0];
+                if ($right && obj !== 'right' && $right.scrollTop !== scrollTop) {
+                    loadCount++;
+                    $right.scrollTop = scrollTop;
+                }
+            }
+        } else {
+            loadCount--;
+        }
+    };
+};
+
+exports.default = SelectorTable;