dlt-for-react 1.0.24 → 1.1.0

package/lib/components/NHListView/index.js

@@ -0,0 +1,374 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _listView = require('antd-mobile/lib/list-view');
+
+var _listView2 = _interopRequireDefault(_listView);
+
+var _searchBar = require('antd-mobile/lib/search-bar');
+
+var _searchBar2 = _interopRequireDefault(_searchBar);
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+require('antd-mobile/lib/list-view/style/css');
+
+require('antd-mobile/lib/search-bar/style/css');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _NHFetch = require('../../utils/NHFetch');
+
+var _NHFetch2 = _interopRequireDefault(_NHFetch);
+
+var _getLoginUser = require('../../utils/getLoginUser');
+
+var _getLoginUser2 = _interopRequireDefault(_getLoginUser);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+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) : subClass.__proto__ = superClass; }
+
+/**
+ * 基于ant design mobile 的ListView封装，与antd-mobile同名的属性基本与其保持一致，可以参考其文档
+ * ListView文档：https://mobile.ant.design/components/list-view-cn/
+ * 注意事项：
+ * 1.useBodyScroll跟height必须存在一个，否则无法展示
+ */
+var NHListView = function (_React$Component) {
+    _inherits(NHListView, _React$Component);
+
+    function NHListView(props) {
+        _classCallCheck(this, NHListView);
+
+        var _this = _possibleConstructorReturn(this, (NHListView.__proto__ || Object.getPrototypeOf(NHListView)).call(this, props));
+
+        _this.encodeSql = function (params) {
+            for (var key in params) {
+                if (key.toUpperCase().startsWith('SQL_') && params[key]) {
+                    // params[key] = encode(params[key]);
+                    params[key] = params[key];
+                } else if (key.toUpperCase().startsWith('G_') && params[key]) {
+                    params[key] = _this.encodeSql(params[key]);
+                }
+            }
+            return params;
+        };
+
+        _this.getFilterParams = function () {
+            var pagination = _this.state.pageData; //分页的参数
+            var filters = _this.state.filters; //多选过滤的数据
+            var sorter = _this.state.sorter; //过滤的数据
+            var searchTextMap = _this.state.searchTextMap; //字段上搜索栏的值
+            var searchParams = _this.state.searchParams; //传递过来的查询参数
+            var sqlParams = _this.props.sqlParams; //在sql语句中的参数
+            var initParams = _this.props.initParams; //初始化参数
+            var rangeFilter = _this.props.rangeFilter; //是否根据职务范围过滤
+            var rangeFilterList = _this.props.rangeFilterList; // 自定义职务过滤列表
+            if (!searchParams) {
+                searchParams = {};
+            }
+            //对里面可能存在的参数值为sql语句进行处理
+            searchParams = _this.encodeSql(searchParams);
+            sqlParams = _this.encodeSql(sqlParams);
+            initParams = _this.encodeSql(initParams);
+
+            var params = {
+                pagination: pagination,
+                filters: filters,
+                sorter: sorter,
+                searchTextMap: searchTextMap,
+                searchParams: searchParams,
+                sqlParams: sqlParams,
+                initParams: initParams,
+                sign: _this.props.sign
+            };
+
+            // 如果启用职位范围过滤
+            if (rangeFilter) {
+                var userId = (0, _getLoginUser2.default)() ? (0, _getLoginUser2.default)().userId : '';
+                params.rangeFilter = { id: userId };
+            }
+            if (rangeFilterList) {
+                params.rangeFilterList = rangeFilterList;
+            }
+            return params;
+        };
+
+        _this.readTableData = function () {
+            var params = _this.getFilterParams();
+            _this.setState({ isLoading: true });
+            var baseUrl = _this.props.baseUrl;
+            var url = _this.props.url ? _this.props.url : (baseUrl ? baseUrl : window.baseUrl) + "/proData/gridList";
+            (0, _NHFetch2.default)(url, "POST", params).then(function (res) {
+                if (res) {
+                    var data = [].concat(_toConsumableArray(_this.state.data), _toConsumableArray(res.data.list));
+                    var hasMore = res.data.pageCount > res.data.pageNum;
+                    _this.setState({
+                        data: data,
+                        dataSource: _this.state.dataSource.cloneWithRows(data),
+                        pageCount: res.data.pageCount,
+                        pageData: {
+                            total: res.data.total,
+                            pageSize: _this.state.pageData.pageSize,
+                            page: _this.state.pageData.page
+                        },
+                        hasMore: hasMore
+                    });
+                }
+                _this.setState({ isLoading: false });
+            }).catch(function (res) {
+                _this.setState({ isLoading: false });
+                return res;
+            });
+        };
+
+        _this.onEndReached = function (event) {
+            if (_this.state.isLoading || !_this.state.hasMore) {
+                return;
+            }
+            _this.setState({ isLoading: true });
+            // 如果传了sign，获取sign对应的查询数据
+            if (_this.props.sign) {
+                _this.setState({
+                    pageData: _extends({}, _this.state.pageData, {
+                        page: _this.state.pageData.page + 1
+                    })
+                }, _this.readTableData);
+            } else if (_this.props.dataSource) {
+                // 如果没有sign且存在dataSource，使用DataSource
+                if (typeof _this.props.onEndReached === 'function') {
+                    _this.props.onEndReached(event, function () {
+                        return _this.setState({ isLoading: false });
+                    });
+                }
+            } else {
+                throw new Error('must be exist sign or dataSource in NHListView');
+            }
+        };
+
+        _this.handleSeachBarChange = function (val) {
+            var commonSearchFields = _this.props.commonSearchFields || [];
+            var searchFieldsStr = commonSearchFields.map(function (item) {
+                return item.toUpperCase();
+            }).join(',');
+            var searchParams = {};
+            if (val && val.trim() !== '') {
+                searchParams[searchFieldsStr] = val;
+            }
+            _this.setState({
+                searchText: val,
+                searchParams: searchParams
+            });
+        };
+
+        _this.onSearch = function () {
+            if (_this.props.sign) {
+                _this.setState({
+                    pageData: _extends({}, _this.state.pageData, {
+                        page: 1
+                    }),
+                    data: []
+                }, _this.readTableData);
+            } else if (_this.props.dataSource) {
+                // 如果没有sign且存在dataSource，使用DataSource
+                if (typeof _this.props.onSearch === 'function') {
+                    _this.props.onSearch(_this.state.searchText, function () {
+                        return _this.setState({ isLoading: false });
+                    });
+                }
+            } else {
+                throw new Error('must be exist sign or dataSource in NHListView');
+            }
+        };
+
+        _this.handleSearchClear = function () {
+            _this.setState({
+                searchParams: {}
+            }, _this.onSearch);
+        };
+
+        _this.getSeatchBar = function () {
+            if (!_this.props.searchBarVisible) {
+                return null;
+            }
+            return _react2.default.createElement(
+                'div',
+                null,
+                _react2.default.createElement(_searchBar2.default, {
+                    placeholder: '\u8BF7\u8F93\u5165\u67E5\u8BE2\u6761\u4EF6',
+                    onChange: _this.handleSeachBarChange,
+                    onSubmit: _this.onSearch,
+                    onClear: _this.handleSearchClear
+                })
+            );
+        };
+
+        var dataSource = new _listView2.default.DataSource({
+            rowHasChanged: function rowHasChanged(row1, row2) {
+                return row1 !== row2;
+            }
+        });
+
+        _this.state = {
+            dataSource: dataSource,
+            isLoading: true,
+            pageData: { //分页设置的是三个参数
+                total: 0,
+                pageSize: props.pageSize, //当前页默认多少条数据
+                page: 1
+            },
+            data: [],
+            hasMore: true
+        };
+        return _this;
+    }
+
+    _createClass(NHListView, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            if (this.props.searchBarVisible && this.props.sign && (!this.props.commonSearchFields || this.props.commonSearchFields.length <= 0)) {
+                throw new Error('searchBarVisible and commonSearchFields should exist at the same time when use sign mod');
+            }
+            // 根据sign加载数据
+            if (this.props.sign) {
+                this.readTableData();
+            } else if (this.props.dataSource) {
+                // 使用本地数据
+                this.setState({
+                    dataSource: this.state.dataSource.cloneWithRows(this.props.dataSource)
+                });
+            } else {
+                // sign与DataSource都不存在，抛出异常
+                throw new Error('must be exist sign or dataSource in NHListView');
+            }
+        }
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(nextProps) {
+            if (nextProps.dataSource !== this.props.dataSource) {
+                this.setState({
+                    dataSource: this.state.dataSource.cloneWithRows(nextProps.dataSource),
+                    isLoading: false
+                });
+            }
+        }
+
+        // 所有数据已经渲染完，需要获取新的数据
+
+        // 搜索栏变化
+
+        // 搜索操作
+
+        // 搜索栏清空
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this2 = this;
+
+            var _props = this.props,
+                renderRow = _props.renderRow,
+                renderSeparator = _props.renderSeparator,
+                scrollRenderAheadDistance = _props.scrollRenderAheadDistance,
+                onEndReachedThreshold = _props.onEndReachedThreshold,
+                onScroll = _props.onScroll,
+                renderHeader = _props.renderHeader,
+                useBodyScroll = _props.useBodyScroll,
+                height = _props.height,
+                searchBarVisible = _props.searchBarVisible;
+
+            var styles = {};
+            if (!useBodyScroll && height) {
+                styles.height = height;
+                styles.overflow = 'auto';
+            }
+            return _react2.default.createElement(
+                'div',
+                null,
+                this.getSeatchBar(),
+                _react2.default.createElement(_listView2.default, {
+                    ref: function ref(el) {
+                        return _this2.lv = el;
+                    },
+                    dataSource: this.state.dataSource,
+                    renderHeader: renderHeader,
+                    renderFooter: function renderFooter() {
+                        return _react2.default.createElement(
+                            'div',
+                            { style: { padding: 30, textAlign: 'center' } },
+                            _this2.state.isLoading ? '加载中...' : _this2.state.hasMore ? '加载完成' : '已经到底了'
+                        );
+                    },
+                    renderRow: renderRow,
+                    renderSeparator: renderSeparator,
+                    className: 'am-list',
+                    style: styles,
+                    pageSize: 4,
+                    useBodyScroll: useBodyScroll,
+                    onScroll: onScroll,
+                    scrollRenderAheadDistance: scrollRenderAheadDistance,
+                    onEndReached: this.onEndReached,
+                    onEndReachedThreshold: onEndReachedThreshold
+                })
+            );
+        }
+    }]);
+
+    return NHListView;
+}(_react2.default.Component);
+
+NHListView.defaultProps = {
+    renderSeparator: function renderSeparator(sectionID, rowID) {
+        return _react2.default.createElement('div', {
+            key: sectionID + '-' + rowID,
+            style: {
+                backgroundColor: '#F5F5F9',
+                height: 8,
+                borderTop: '1px solid #ECECED',
+                borderBottom: '1px solid #ECECED'
+            }
+        });
+    }, // 默认的分割渲染
+    scrollRenderAheadDistance: 500, // 当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行
+    onEndReachedThreshold: 10, // 调用onEndReached之前的临界值，单位是像素
+    pageSize: 20, // 每次查询数据时的条数
+    useBodyScroll: false, // 使用body作为滚动容器
+    searchBarVisible: false // 是否显示搜索栏
+};
+exports.default = NHListView;
+
+
+NHListView.protoTypes = {
+    sign: _propTypes2.default.string, // 数据源标志
+    baseUrl: _propTypes2.default.string, // 服务前缀url
+    url: _propTypes2.default.string, // 数据源接口url，默认为： baseUrl + "/proData/gridList"
+    renderHeader: _propTypes2.default.func, // 渲染头部，() => renderable
+    renderSeparator: _propTypes2.default.func, // 渲染分隔区域，(sectionID, rowID, adjacentRowHighlighted) => renderable
+    renderRow: _propTypes2.default.func, // 渲染每一行，(rowData, sectionID, rowID, highlightRow) => renderable
+    onEndReached: _propTypes2.default.func, // 所有数据都已经渲染完成触发，sign状态下无效，(event?) => {}
+    onScroll: _propTypes2.default.func, // 滚动时触发的函数，e => {}
+    scrollRenderAheadDistance: _propTypes2.default.number, // 当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行
+    onEndReachedThreshold: _propTypes2.default.number, // 调用onEndReached之前的临界值，单位是像素
+    pageSize: _propTypes2.default.number, // 每次获取数据时的条数
+    commonSearchFields: _propTypes2.default.array, // 通用搜索的字段名称
+    searchBarVisible: _propTypes2.default.bool, // 是否显示搜索栏
+    onSearch: _propTypes2.default.func // dataSource作为数据源时通过这个方法通知外部进行搜索过滤
+};