easy3wmui 0.0.42-beta22 → 0.0.42-beta24

package/assets/index.css

@@ -178,13 +178,20 @@
   border-radius: 2px;
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
 }
+#Easy3wMUserLayout {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: 100%;
+}
 #Easy3wMUserLayout .Easy3wMUserLayoutContent {
-  background-color: #f0f2f5;
   width: 100%;
-  min-height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }
 #Easy3wMCard .adm-card {
   padding: 0;

package/assets/mTable.css

@@ -0,0 +1,71 @@
+#Easy3wMTable {
+  --padding: 6px;
+}
+#Easy3wMTable .queryCriteria .more {
+  padding: 0 12px;
+}
+#Easy3wMTable .queryCriteria .adm-button {
+  font-size: var(--adm-font-size-6);
+}
+#Easy3wMTable .queryCriteria .adm-list-item-content-extra {
+  font-size: var(--adm-font-size-6);
+  padding: 0;
+}
+#Easy3wMTable .queryCriteriaBtn {
+  margin-top: 24px;
+}
+#Easy3wMTable .singleItem .itemAttr {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: stretch;
+      align-items: stretch;
+  -ms-flex-pack: start;
+      justify-content: flex-start;
+  padding-bottom: var(--padding);
+}
+#Easy3wMTable .singleItem .itemAttr .attrLabel {
+  width: auto;
+  max-width: 70%;
+  -ms-flex: none;
+      flex: none;
+  padding-right: var(--padding);
+  color: var(--adm-color-weak);
+}
+#Easy3wMTable .singleItem .itemAttr .attrKey {
+  text-align: right;
+  -ms-flex: auto;
+      flex: auto;
+  color: var(--adm-color-text);
+}
+#Easy3wMTable .singleItem .itemAttr .attrKey.clickable {
+  color: var(--adm-color-primary);
+}
+#Easy3wMTable .singleItem .itemAttr:last-child {
+  padding-bottom: 0;
+}
+#Easy3wMTable .singleItem .itemAttr.clickable {
+  cursor: pointer;
+  color: var(--adm-color-primary);
+}
+#Easy3wMTable .singleItem .itemAttr.clickable .attrLabel {
+  color: var(--adm-color-primary);
+}
+#Easy3wMTable .singleItem .itemAttr.clickable .attrKey {
+  color: var(--adm-color-primary);
+}
+#Easy3wMTable .easy3wMGridPageStepper {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: row;
+      flex-direction: row;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  padding: 12px;
+}
+#Easy3wMTable .easy3wMGridPageStepper .adm-button {
+  font-size: var(--adm-font-size-6);
+  padding-left: 24px;
+  padding-right: 24px;
+}

package/assets/mUserLayout.css

@@ -1,8 +1,15 @@
+#Easy3wMUserLayout {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  height: 100%;
+}
 #Easy3wMUserLayout .Easy3wMUserLayoutContent {
-  background-color: #f0f2f5;
   width: 100%;
-  min-height: 100%;
   background-repeat: no-repeat;
   background-position: center;
   background-size: 100%;
+  -ms-flex-positive: 1;
+      flex-grow: 1;
 }

package/lib/Easy3wMInsideLayout/index.js

@@ -80,8 +80,7 @@ var Easy3wMInsideLayout = function (_Component) {
         includeCopyRightFlag = _props.includeCopyRightFlag,
         links = _props.links,
         copyrightContent = _props.copyrightContent,
-        routeDataLayout = _props.routeDataLayout,
-        bottomFixed = _props.bottomFixed;
+        routeDataLayout = _props.routeDataLayout;
 
     var hadHaederFlag = includeHeaderFlag !== '0';
     var copyRightFlag = includeCopyRightFlag !== '0';
@@ -121,7 +120,6 @@ var Easy3wMInsideLayout = function (_Component) {
         )
       ),
       copyRightFlag ? _react2['default'].createElement(_Easy3wMGlobalFooter2['default'], {
-        bottomFixed: bottomFixed,
         links: links,
         copyright: copyright
       }) : ''

package/lib/Easy3wMTable/index.js

@@ -0,0 +1,443 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _form = require('antd-mobile/es/components/form');
+
+var _form2 = _interopRequireDefault(_form);
+
+var _button = require('antd-mobile/es/components/button');
+
+var _button2 = _interopRequireDefault(_button);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _antdMobile = require('antd-mobile');
+
+var _antdMobileIcons = require('antd-mobile-icons');
+
+var _easy3wmui = require('easy3wmui');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+/* eslint-disable no-param-reassign */
+var Item = _easy3wmui.Easy3wMList.Item;
+
+var Easy3wMTable = function (_PureComponent) {
+  (0, _inherits3['default'])(Easy3wMTable, _PureComponent);
+
+  function Easy3wMTable(props) {
+    (0, _classCallCheck3['default'])(this, Easy3wMTable);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _PureComponent.call(this, props));
+
+    _this.formRef = function (form) {
+      if (_this.state.form) {
+        //
+      } else {
+        _this.setState({
+          form: form
+        });
+      }
+      return _react2['default'].createRef();
+    };
+
+    _this.touchFetch = function (callback) {
+      var handleSearch = _this.props.handleSearch;
+      var offset = _this.state.offset;
+
+      handleSearch(offset, _this.searchInfo, callback);
+    };
+
+    _this.touchChangePage = function (operationType) {
+      var offset = _this.state.offset;
+
+      if (operationType === 'minus') {
+        offset -= 1;
+      } else if (operationType === 'add') {
+        offset += 1;
+      }
+      _this.setState({
+        offset: offset // 当前页
+      }, _this.touchFetch);
+    };
+
+    _this.touchDropUpFlip = function () {
+      var flipContainer = document.querySelector('.flipContainer'); // 翻页主体
+      _this.flipContainerHeight = flipContainer.offsetHeight; // 元素高度
+      var flipText = document.querySelector('.flipText'); // 翻页提示文字
+      // 当手指放在触摸屏上时，发生此事件
+      flipContainer.addEventListener('touchstart', function (e) {
+        return _this.touchstart(e, flipContainer, flipText);
+      });
+      // 当手指在屏幕上拖动时，发生此事件
+      flipContainer.addEventListener('touchmove', function (e) {
+        return _this.touchmove(e, flipContainer, flipText);
+      });
+      // 当手指从触摸屏上移开时，发生此事件
+      flipContainer.addEventListener('touchend', function (e) {
+        return _this.touchend(e, flipContainer, flipText);
+      });
+    };
+
+    _this.touchstart = function (e, flipContainer, flipText) {
+      var offset = _this.state.offset;
+      var intData = _this.props.intData;
+
+      if (offset === Math.ceil(intData / 10)) {
+        flipText.innerText = '已经没有更多了！';
+      } else if (Math.round(flipContainer.getBoundingClientRect().bottom) === document.body.offsetHeight) {
+        _this.startPos = e.touches[0].pageY;
+        flipContainer.style.transition = 'transform 0s';
+        // this.setState({
+        //   startPos, // 起始位置
+        // });
+      }
+    };
+
+    _this.touchmove = function (e, flipContainer, flipText) {
+      if (Math.round(flipContainer.getBoundingClientRect().bottom) === document.body.offsetHeight && _this.startPos) {
+        _this.transitionHeight = e.touches[0].pageY - _this.startPos;
+        if (_this.transitionHeight < 0 && _this.transitionHeight > -48) {
+          flipText.innerText = '上拉翻页';
+          flipContainer.style.transform = 'translateY(' + _this.transitionHeight + 'px)';
+          if (_this.transitionHeight < 0 && _this.transitionHeight > -36) {
+            flipText.innerText = '释放更新';
+          }
+        }
+      } else {
+        _this.startPos = e.touches[0].pageY;
+      }
+    };
+
+    _this.touchend = function (e, flipContainer, flipText) {
+      if (_this.transitionHeight < 0 && _this.transitionHeight > -36) {
+        flipText.innerText = '更新中...';
+        var offset = _this.state.offset;
+
+        _this.setState({
+          offset: offset + 1
+        }, function () {
+          _this.touchFetch(function () {
+            flipContainer.style.transition = 'transform 0.5s ease 1s';
+            flipContainer.style.transform = 'translateY(0px)';
+            flipText.innerText = '';
+          });
+        });
+      } else {
+        flipContainer.style.transition = 'transform 0.5s ease 1s';
+        flipContainer.style.transform = 'translateY(0px)';
+        setTimeout(function () {
+          flipText.innerText = '';
+        }, 1500);
+      }
+      _this.startPos = null; // 起始位置
+      _this.transitionHeight = null; // 移动距离
+    };
+
+    _this.touchClearSV = function () {
+      _this.searchInfo.keywordsQry = ''; // 关键字
+      _this.setState({
+        offset: 1
+      }, function () {
+        return _this.touchFetch();
+      });
+    };
+
+    _this.touchChangeSV = function (keywordsQry) {
+      _this.searchInfo.keywordsQry = keywordsQry;
+    };
+
+    _this.touchSearch = function () {
+      _this.setState({
+        offset: 1
+      }, function () {
+        return _this.touchFetch();
+      });
+    };
+
+    _this.showModal = function () {
+      _this.setState({
+        visible: true // 显示更多筛选条件Modal
+      });
+    };
+
+    _this.hideModal = function () {
+      _this.setState({
+        visible: false // 隐藏更多筛选条件Modal
+      });
+    };
+
+    _this.touchConfirm = function () {
+      var values = _this.state.form.getFieldsValue();
+      var searchInfo = (0, _extends3['default'])({}, _this.searchInfo, values);
+      _this.searchInfo = searchInfo;
+      _this.touchFetch();
+      _this.hideModal();
+    };
+
+    var bidPureComponent = _this.props.bidPureComponent;
+
+    if (bidPureComponent && typeof bidPureComponent === 'function') {
+      bidPureComponent(_this);
+    }
+    _this.searchInfo = {}; // 查询条件
+    // 上拉翻页属性
+    _this.startPos = null; // 起始位置
+    _this.transitionHeight = null; // 移动距离
+    _this.state = {
+      offset: 1, // 分页
+      visible: false, // 隐藏更多筛选条件Modal
+      form: null // 表单实例
+    };
+    return _this;
+  }
+
+  Easy3wMTable.prototype.componentDidMount = function componentDidMount() {
+    var dropUpFlipFlag = this.props.dropUpFlipFlag;
+
+    if (dropUpFlipFlag) {
+      // 上拉翻页标识 true 开启 false 关闭
+      this.touchDropUpFlip();
+    }
+  };
+
+  Easy3wMTable.prototype.componentWillUnmount = function componentWillUnmount() {
+    var flipContainer = document.querySelector('.flipContainer'); // 翻页主体
+    if (flipContainer.removeEventListener) {
+      // 所有浏览器，除了 IE 8 及更早IE版本
+      // 当手指放在触摸屏上时，发生此事件
+      flipContainer.removeEventListener('touchstart', this.touchstart);
+      // 当手指在屏幕上拖动时，发生此事件
+      flipContainer.removeEventListener('touchmove', this.touchmove);
+      // 当手指从触摸屏上移开时，发生此事件
+      flipContainer.removeEventListener('touchend', this.touchend);
+    } else if (flipContainer.detachEvent) {
+      // IE 8 及更早IE版本
+      // 当手指放在触摸屏上时，发生此事件
+      flipContainer.detachEvent('touchstart', this.touchstart);
+      // 当手指在屏幕上拖动时，发生此事件
+      flipContainer.detachEvent('touchmove', this.touchmove);
+      // 当手指从触摸屏上移开时，发生此事件
+      flipContainer.detachEvent('touchend', this.touchend);
+    }
+  };
+  // 生成form实例
+
+  // 触发查询
+
+  // --------------------------------------------------- 上拉翻页 end ---------------------------------------------------
+  // 按钮翻页
+
+  // --------------------------------------------- 查询条件 start ---------------------------------------------
+  // --------------------------------------------------- 上拉翻页 start ---------------------------------------------------
+  // 上拉翻页
+
+  // 当手指放在触摸屏上时，发生此事件
+
+  // 当手指在屏幕上拖动时，发生此事件
+
+  // 当手指从触摸屏上移开时，发生此事件
+
+  // 清空查询条件
+
+  // 查询条件--流程名称修改
+
+  // 查询
+
+  // --------------------------------------------- 查询条件 end -----------------------------------------------
+  // --------------------------------------------- 更多筛选条件 start ---------------------------------------------
+  // 显示更多筛选条件Modal
+
+  // 隐藏更多筛选条件Modal
+
+  // 确定
+
+
+  // --------------------------------------------- 更多筛选条件 end -----------------------------------------------
+  Easy3wMTable.prototype.render = function render() {
+    var _this2 = this;
+
+    var _state = this.state,
+        offset = _state.offset,
+        visible = _state.visible;
+    var _props = this.props,
+        columns = _props.columns,
+        intData = _props.intData,
+        arrData = _props.arrData,
+        needPaginationFlag = _props.needPaginationFlag,
+        queryCriteria = _props.queryCriteria,
+        arrFilter = _props.arrFilter;
+    // columns 表头 arr    intData 数量 num    arrData 数据 arr    needPaginationFlag 分页标识 bool    handleSearch 查询方法 fun
+    // dropUpFlipFlag 上拉翻页标识 bool    bidPureComponent 将this传递出去 fun    queryCriteria 关键字 str
+
+    var arrBtn = [{
+      cName: '查询',
+      onClick: function onClick() {
+        return _this2.touchConfirm();
+      }
+    }, {
+      cName: '关闭',
+      onClick: function onClick() {
+        return _this2.hideModal();
+      }
+    }];
+    return _react2['default'].createElement(
+      'div',
+      { id: 'Easy3wMTable' },
+      _react2['default'].createElement(
+        'div',
+        { className: 'flipContainer' },
+        _react2['default'].createElement(
+          _easy3wmui.Easy3wMList,
+          null,
+          queryCriteria ? _react2['default'].createElement(Item, {
+            className: 'queryCriteria',
+            extra: arrFilter && arrFilter.length ? _react2['default'].createElement(
+              'div',
+              { className: 'more', onClick: this.showModal },
+              '\u66F4\u591A\u7B5B\u9009'
+            ) : '',
+            title: _react2['default'].createElement(_easy3wmui.Easy3wMSearchBar, {
+              onChange: function onChange(value) {
+                return _this2.touchChangeSV(value);
+              } // 输入框内容变化时触发
+              , onSearch: function onSearch() {
+                return _this2.touchSearch();
+              } // 输入框回车时触发
+              , onClear: function onClear() {
+                return _this2.touchClearSV('');
+              } // 点击清除按钮后触发
+              , placeholder: '\u8BF7\u8F93\u5165\u5173\u952E\u5B57\u67E5\u8BE2' // 提示文本
+              , clearOnCancel: false // 点击取消按钮后是否清空输入框
+              , showCancelButton: function showCancelButton() {
+                return true;
+              } // 是否在搜索框右侧显示取消按钮
+              , cancelText: '\u67E5\u8BE2' // 取消按钮的文案
+              , onCancel: function onCancel() {
+                return _this2.touchSearch();
+              } // 点击取消按钮时触发
+            })
+          }) : '',
+          arrData ? arrData.map(function (item, index) {
+            return _react2['default'].createElement(
+              Item,
+              null,
+              _react2['default'].createElement(
+                'div',
+                { className: 'singleItem' },
+                columns.map(function (obj) {
+                  var title = obj.title,
+                      dataIndex = obj.dataIndex,
+                      render = obj.render,
+                      onRow = obj.onRow,
+                      _onClick = obj.onClick;
+
+                  var value = item[dataIndex];
+                  if (render) {
+                    value = render(value, item, index);
+                  }
+                  return _react2['default'].createElement(
+                    'div',
+                    { className: 'itemAttr ' + (onRow ? 'clickable' : ''), onClick: function onClick() {
+                        return onRow(item[dataIndex], item, index);
+                      } },
+                    _react2['default'].createElement(
+                      'span',
+                      { className: 'attrLabel' },
+                      title
+                    ),
+                    _react2['default'].createElement(
+                      'span',
+                      { className: 'attrKey ' + (_onClick ? 'clickable' : ''), onClick: function onClick() {
+                          return _onClick(item[dataIndex], item, index);
+                        } },
+                      value
+                    )
+                  );
+                })
+              )
+            );
+          }) : ''
+        ),
+        needPaginationFlag ? _react2['default'].createElement(
+          _easy3wmui.Easy3wMCard,
+          null,
+          _react2['default'].createElement(
+            'div',
+            { className: 'easy3wMGridPageStepper' },
+            _react2['default'].createElement(
+              _button2['default'],
+              { color: 'default', fill: 'none', onClick: function onClick() {
+                  return _this2.touchChangePage('minus');
+                }, disabled: offset === 1 },
+              _react2['default'].createElement(_antdMobileIcons.LeftOutline, null)
+            ),
+            _react2['default'].createElement(
+              'span',
+              null,
+              offset,
+              '/',
+              Math.ceil(intData / 10),
+              '  \u5171',
+              intData,
+              '\u6761'
+            ),
+            _react2['default'].createElement(
+              _button2['default'],
+              { color: 'default', fill: 'none', onClick: function onClick() {
+                  return _this2.touchChangePage('add');
+                }, disabled: offset === Math.ceil(intData / 10) },
+              _react2['default'].createElement(_antdMobileIcons.RightOutline, null)
+            )
+          )
+        ) : '',
+        _react2['default'].createElement(
+          _easy3wmui.Easy3wMPopup,
+          {
+            visible: visible,
+            onClose: this.hideModal,
+            position: 'top'
+            // showCloseButton
+            , bodyStyle: { height: '100vh', overflow: 'auto' },
+            getContainer: document.querySelector('.flipContainer')
+          },
+          _react2['default'].createElement(_form2['default'], { ref: this.formRef }),
+          this.state.form ? _react2['default'].createElement(_easy3wmui.Easy3wMFormPage, {
+            rowItems: arrFilter,
+            form: this.state.form
+          }) : '',
+          _react2['default'].createElement(
+            'div',
+            { className: 'queryCriteriaBtn' },
+            _react2['default'].createElement(_easy3wmui.Easy3wMButton, { arrBtn: arrBtn })
+          )
+        )
+      ),
+      _react2['default'].createElement('div', { className: 'flipText', style: { textAlign: 'center' } })
+    );
+  };
+
+  return Easy3wMTable;
+}(_react.PureComponent);
+
+exports['default'] = Easy3wMTable;
+module.exports = exports['default'];

package/lib/Easy3wMUserLayout/index.js

@@ -78,7 +78,6 @@ var Easy3wMUserLayout = function (_PureComponent) {
         copyrightContent = _props.copyrightContent,
         headerElem = _props.headerElem,
         links = _props.links,
-        bottomFixed = _props.bottomFixed,
         rootRedirectPath = _props.rootRedirectPath,
         routeDataLayout = _props.routeDataLayout,
         backImg = _props.backImg,
@@ -124,7 +123,6 @@ var Easy3wMUserLayout = function (_PureComponent) {
           )
         ),
         copyRightFlag ? _react2['default'].createElement(_Easy3wMGlobalFooter2['default'], {
-          bottomFixed: bottomFixed,
           links: links,
           copyright: copyright
         }) : ''

package/lib/index.js

@@ -713,6 +713,15 @@ Object.defineProperty(exports, 'Easy3wMGridPage', {
   }
 });
 
+var _Easy3wMTable = require('./Easy3wMTable');
+
+Object.defineProperty(exports, 'Easy3wMTable', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Easy3wMTable)['default'];
+  }
+});
+
 var _Easy3wMGlobalHeader = require('./Easy3wMGlobalHeader');
 
 Object.defineProperty(exports, 'Easy3wMGlobalHeader', {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easy3wmui",
-  "version": "0.0.42-beta22",
+  "version": "0.0.42-beta24",
   "description": "easy3wmui components for react",
   "keywords": [
     "react",