easy3wui 1.5.22 → 1.5.23

package/lib/Easy3wLoginLayout/index.js

@@ -0,0 +1,628 @@
+'use strict';
+
+exports.__esModule = true;
+
+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 _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+require('antd/lib/icon/style');
+
+var _dropdown = require('antd/lib/dropdown');
+
+var _dropdown2 = _interopRequireDefault(_dropdown);
+
+require('antd/lib/dropdown/style');
+
+var _spin = require('antd/lib/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+require('antd/lib/spin/style');
+
+var _menu = require('antd/lib/menu');
+
+var _menu2 = _interopRequireDefault(_menu);
+
+require('antd/lib/menu/style');
+
+var _layout = require('antd/lib/layout');
+
+var _layout2 = _interopRequireDefault(_layout);
+
+require('antd/lib/layout/style');
+
+var _badge = require('antd/lib/badge');
+
+var _badge2 = _interopRequireDefault(_badge);
+
+require('antd/lib/badge/style');
+
+var _tag = require('antd/lib/tag');
+
+var _tag2 = _interopRequireDefault(_tag);
+
+require('antd/lib/tag/style');
+
+var _message = require('antd/lib/message');
+
+var _message2 = _interopRequireDefault(_message);
+
+require('antd/lib/message/style');
+
+var _reactDocumentTitle = require('react-document-title');
+
+var _reactDocumentTitle2 = _interopRequireDefault(_reactDocumentTitle);
+
+var _router = require('dva/router');
+
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+var _groupBy = require('lodash/groupBy');
+
+var _groupBy2 = _interopRequireDefault(_groupBy);
+
+var _reactContainerQuery = require('react-container-query');
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _ = require('./../Easy3wException/404');
+
+var _2 = _interopRequireDefault(_);
+
+var _Easy3wGlobalFooter = require('./../Easy3wGlobalFooter');
+
+var _Easy3wGlobalFooter2 = _interopRequireDefault(_Easy3wGlobalFooter);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
+var Header = _layout2['default'].Header,
+    Sider = _layout2['default'].Sider,
+    Content = _layout2['default'].Content;
+var SubMenu = _menu2['default'].SubMenu;
+
+
+var query = {
+  'screen-xs': {
+    maxWidth: 575
+  },
+  'screen-sm': {
+    minWidth: 576,
+    maxWidth: 767
+  },
+  'screen-md': {
+    minWidth: 768,
+    maxWidth: 991
+  },
+  'screen-lg': {
+    minWidth: 992,
+    maxWidth: 1199
+  },
+  'screen-xl': {
+    minWidth: 1200
+  }
+};
+
+var Easy3wLoginLayout = function (_React$PureComponent) {
+  (0, _inherits3['default'])(Easy3wLoginLayout, _React$PureComponent);
+
+  function Easy3wLoginLayout(props) {
+    (0, _classCallCheck3['default'])(this, Easy3wLoginLayout);
+
+    var _this = (0, _possibleConstructorReturn3['default'])(this, _React$PureComponent.call(this, props));
+
+    _this.onCollapse = function (collapsed) {
+      _this.props.dispatch({
+        type: 'global/changeLayoutCollapsed',
+        payload: collapsed
+      });
+    };
+
+    _this.onMenuClick = function (_ref) {
+      var key = _ref.key;
+
+      if (key === 'logout') {
+        _this.props.dispatch({
+          type: 'login/logout'
+        });
+      }
+    };
+
+    _this.getMenuData = function (data, parentPath) {
+      var arr = [];
+      data.forEach(function (item) {
+        if (item.children) {
+          arr.push({ path: parentPath + '/' + item.path, name: item.name });
+          arr = arr.concat(_this.getMenuData(item.children, parentPath + '/' + item.path));
+        }
+      });
+      return arr;
+    };
+
+    _this.handleOpenChange = function (openKeys) {
+      var lastOpenKey = openKeys[openKeys.length - 1];
+      var isMainMenu = _this.menus.some(function (item) {
+        return lastOpenKey && (item.key === lastOpenKey || item.path === lastOpenKey);
+      });
+      _this.setState((0, _extends3['default'])({}, _this.state, {
+        openKeys: isMainMenu ? [lastOpenKey] : [].concat(openKeys)
+      }));
+    };
+
+    _this.toggle = function () {
+      var _this$props = _this.props,
+          collapsed = _this$props.collapsed,
+          triggerResizeEvent = _this$props.triggerResizeEvent;
+
+      _this.props.dispatch({
+        type: 'global/changeLayoutCollapsed',
+        payload: !collapsed
+      });
+      triggerResizeEvent();
+    };
+
+    _this.handleNoticeClear = function (type) {
+      _message2['default'].success('\u6E05\u7A7A\u4E86' + type);
+      _this.props.dispatch({
+        type: 'global/clearNotices',
+        payload: type
+      });
+    };
+
+    _this.handleNoticeVisibleChange = function (visible) {
+      if (visible) {
+        _this.props.dispatch({
+          type: 'global/fetchNotices'
+        });
+      }
+    };
+
+    _this.state = {
+      openKeys: _this.getDefaultCollapsedSubMenus(props),
+      defaultIdx: '/inside/other/mywork'
+    };
+    return _this;
+  }
+
+  Easy3wLoginLayout.prototype.getChildContext = function getChildContext() {
+    var _props = this.props,
+        location = _props.location,
+        getRouteData = _props.getRouteData,
+        menuData = _props.menuData;
+
+    var routeData = getRouteData('InsideLayout');
+    var firstMenuData = menuData.reduce(function (arr, current) {
+      return arr.concat(current.children);
+    }, []);
+    var menuDataNow = this.getMenuData(firstMenuData, '');
+    var breadcrumbNameMap = {};
+
+    routeData.concat(menuDataNow).forEach(function (item) {
+      breadcrumbNameMap[item.path] = item.name;
+    });
+    return { location: location, breadcrumbNameMap: breadcrumbNameMap };
+  };
+
+  Easy3wLoginLayout.prototype.componentWillMount = function componentWillMount() {};
+
+  Easy3wLoginLayout.prototype.componentDidMount = function componentDidMount() {};
+
+  Easy3wLoginLayout.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
+    var _props2 = this.props,
+        menuData = _props2.menuData,
+        indexData = _props2.indexData;
+
+    var roleMenuData = [];
+    if (nextProps.currentUser.userRoleList) {
+      if (nextProps.currentUser.userRoleList.length > 0 && nextProps.currentUser.userRoleList[0].roleCode) {
+        // 获取该角色的菜单
+        var currentUser = nextProps.currentUser;
+        var userRoleList = currentUser.userRoleList;
+
+        if (currentUser.userRoleList[0].roleCode) {
+          roleMenuData = menuData.find(function (obj) {
+            return obj.role.includes(currentUser.userRoleList[0].roleCode);
+          });
+          if (!roleMenuData) {
+            roleMenuData = menuData.find(function (obj) {
+              return obj.role.includes('other');
+            });
+          }
+          // 菜单按角色进行过滤,适应多角色
+          var roleMenuDataC = roleMenuData.children.filter(function (obj) {
+            var isFind = false;
+            userRoleList.forEach(function (role) {
+              if (obj.role.includes(role.roleCode)) {
+                isFind = true;
+              }
+            });
+            return isFind;
+          });
+          this.menus = roleMenuDataC;
+          var realMenu = [];
+          roleMenuDataC.forEach(function (firstMenu) {
+            if (firstMenu.children) {
+              var newFirstMenu = firstMenu;
+              var secondMenu = firstMenu.children.filter(function (obj) {
+                var isFind = false;
+                userRoleList.forEach(function (role) {
+                  if (obj.role.includes(role.roleCode)) {
+                    isFind = true;
+                  }
+                });
+                if (obj.path.includes('http://evaluateUrl')) {
+                  obj.path = obj.path.replace('http://evaluateUrl', '' + currentUser.evaluateUrl);
+                }
+                return isFind;
+              });
+              newFirstMenu.children = secondMenu;
+              realMenu.push(newFirstMenu);
+            } else {
+              if (firstMenu.path.includes('http://evaluateUrl')) {
+                firstMenu.path = firstMenu.path.replace('http://evaluateUrl', '' + currentUser.evaluateUrl);
+              }
+              realMenu.push(firstMenu);
+            }
+          });
+          this.menus = realMenu;
+          // 寻找该角色首页工作台
+          var roleIndexData = indexData.find(function (obj) {
+            return obj.role === currentUser.userRoleList[0].roleCode;
+          });
+          this.setState((0, _extends3['default'])({}, this.state, {
+            defaultIdx: roleIndexData || '/inside/other/mywork'
+          }));
+        } else {
+          roleMenuData = menuData.find(function (obj) {
+            return obj.role.inclue('other');
+          });
+          this.menus = roleMenuData.children;
+          this.setState((0, _extends3['default'])({}, this.state, {
+            defaultIdx: '/inside/other/mywork'
+          }));
+        }
+      }
+    }
+  };
+
+  Easy3wLoginLayout.prototype.componentWillUnmount = function componentWillUnmount() {
+    var triggerResizeEvent = this.props.triggerResizeEvent;
+
+    triggerResizeEvent.cancel();
+  };
+
+  Easy3wLoginLayout.prototype.getDefaultCollapsedSubMenus = function getDefaultCollapsedSubMenus(props) {
+    var currentMenuSelectedKeys = [].concat(this.getCurrentMenuSelectedKeys(props));
+    currentMenuSelectedKeys.splice(-1, 1);
+    if (currentMenuSelectedKeys.length === 0) {
+      return ['mywork'];
+    }
+    return currentMenuSelectedKeys;
+  };
+
+  Easy3wLoginLayout.prototype.getCurrentMenuSelectedKeys = function getCurrentMenuSelectedKeys(props) {
+    var _ref2 = props || this.props,
+        pathname = _ref2.location.pathname;
+
+    var keys = pathname.split('/').slice(1);
+    if (keys.length === 1 && keys[0] === '') {
+      return [this.menus[0].key];
+    }
+    return keys;
+  };
+
+  Easy3wLoginLayout.prototype.getNavMenuItems = function getNavMenuItems(menusData) {
+    var _this2 = this;
+
+    var parentPath = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+
+    if (!menusData) {
+      return [];
+    }
+    return menusData.map(function (item) {
+      if (!item.name) {
+        return null;
+      }
+      var itemPath = void 0;
+      if (item.path.indexOf('http') === 0) {
+        itemPath = item.path;
+      } else {
+        itemPath = (parentPath + '/' + (item.path || '')).replace(/\/+/g, '/');
+      }
+      if (item.children && item.children.some(function (child) {
+        return child.name;
+      })) {
+        return _react2['default'].createElement(
+          SubMenu,
+          {
+            title: item.icon ? _react2['default'].createElement(
+              'span',
+              null,
+              _react2['default'].createElement(_icon2['default'], { type: item.icon }),
+              _react2['default'].createElement(
+                'span',
+                null,
+                item.name
+              )
+            ) : item.name,
+            key: item.key || item.path
+          },
+          _this2.getNavMenuItems(item.children, itemPath)
+        );
+      }
+      var icon = item.icon && _react2['default'].createElement(_icon2['default'], { type: item.icon });
+      return _react2['default'].createElement(
+        _menu2['default'].Item,
+        { key: item.key || item.path },
+        /^https?:\/\//.test(itemPath) ? _react2['default'].createElement(
+          'a',
+          { href: itemPath, target: item.target },
+          icon,
+          _react2['default'].createElement(
+            'span',
+            null,
+            item.name
+          )
+        ) : _react2['default'].createElement(
+          _router.Link,
+          {
+            to: itemPath,
+            target: item.target,
+            replace: itemPath === _this2.props.location.pathname
+          },
+          icon,
+          _react2['default'].createElement(
+            'span',
+            null,
+            item.name
+          )
+        )
+      );
+    });
+  };
+
+  Easy3wLoginLayout.prototype.getPageTitle = function getPageTitle() {
+    var _props3 = this.props,
+        location = _props3.location,
+        getRouteData = _props3.getRouteData,
+        systemName = _props3.systemName;
+    var pathname = location.pathname;
+
+    var title = systemName;
+    getRouteData('InsideLayout').forEach(function (item) {
+      if (item.path === pathname) {
+        title = item.name + ' - ' + systemName;
+      }
+    });
+    return title;
+  };
+
+  Easy3wLoginLayout.prototype.getNoticeData = function getNoticeData() {
+    var _props$notices = this.props.notices,
+        notices = _props$notices === undefined ? [] : _props$notices;
+
+    if (notices.length === 0) {
+      return {};
+    }
+    var newNotices = notices.map(function (notice) {
+      var newNotice = (0, _extends3['default'])({}, notice);
+      if (newNotice.datetime) {
+        newNotice.datetime = (0, _moment2['default'])(notice.datetime).fromNow();
+      }
+      // transform id to item key
+      if (newNotice.id) {
+        newNotice.key = newNotice.id;
+      }
+      if (newNotice.extra && newNotice.status) {
+        var color = {
+          todo: '',
+          processing: 'blue',
+          urgent: 'red',
+          doing: 'gold'
+        }[newNotice.status];
+        newNotice.extra = _react2['default'].createElement(
+          _tag2['default'],
+          { color: color, style: { marginRight: 0 } },
+          newNotice.extra
+        );
+      }
+      return newNotice;
+    });
+    return (0, _groupBy2['default'])(newNotices, 'type');
+  };
+
+  Easy3wLoginLayout.prototype.render = function render() {
+    var _props4 = this.props,
+        currentUser = _props4.currentUser,
+        collapsed = _props4.collapsed,
+        getRouteData = _props4.getRouteData,
+        pending = _props4.pending,
+        systemName = _props4.systemName,
+        copyrightContent = _props4.copyrightContent,
+        logoPath = _props4.logoPath;
+
+    var menu = _react2['default'].createElement(
+      _menu2['default'],
+      { className: (0, _classnames2['default'])('e3wLoginLayoutMenu'), selectedKeys: [], onClick: this.onMenuClick },
+      _react2['default'].createElement(
+        _menu2['default'].Item,
+        { disabled: true },
+        _react2['default'].createElement(_icon2['default'], { type: 'user' }),
+        '\u4E2A\u4EBA\u4E2D\u5FC3'
+      ),
+      _react2['default'].createElement(
+        _menu2['default'].Item,
+        { disabled: true },
+        _react2['default'].createElement(_icon2['default'], { type: 'setting' }),
+        '\u8BBE\u7F6E'
+      ),
+      _react2['default'].createElement(_menu2['default'].Divider, null),
+      _react2['default'].createElement(
+        _menu2['default'].Item,
+        { key: 'logout' },
+        _react2['default'].createElement(_icon2['default'], { type: 'logout' }),
+        '\u9000\u51FA\u767B\u5F55'
+      )
+    );
+
+    // Don't show popup menu when it is been collapsed
+    var menuProps = collapsed ? {} : {
+      openKeys: this.state.openKeys
+    };
+
+    var layout = _react2['default'].createElement(
+      _layout2['default'],
+      null,
+      _react2['default'].createElement(
+        Sider,
+        {
+          trigger: null,
+          collapsible: true,
+          collapsed: collapsed,
+          breakpoint: 'md',
+          onCollapse: this.onCollapse,
+          width: 185,
+          className: (0, _classnames2['default'])('e3wLoginLayoutSider')
+        },
+        _react2['default'].createElement(
+          'div',
+          { className: (0, _classnames2['default'])('e3wLoginLayoutLogo') },
+          _react2['default'].createElement(
+            _router.Link,
+            { to: '/inside/other/mywork' },
+            _react2['default'].createElement('img', { src: logoPath, alt: 'logo' })
+          )
+        ),
+        currentUser ? _react2['default'].createElement(
+          _menu2['default'],
+          (0, _extends3['default'])({
+            theme: 'dark',
+            mode: 'vertical'
+          }, menuProps, {
+            onOpenChange: this.handleOpenChange,
+            selectedKeys: this.getCurrentMenuSelectedKeys(),
+            style: { margin: '16px 0', width: '100%' }
+          }),
+          this.getNavMenuItems(this.menus)
+        ) : null
+      ),
+      _react2['default'].createElement(
+        _layout2['default'],
+        null,
+        _react2['default'].createElement(
+          Header,
+          { className: (0, _classnames2['default'])('e3wLoginLayoutHeader') },
+          _react2['default'].createElement(_icon2['default'], {
+            className: (0, _classnames2['default'])('e3wLoginLayoutTrigger'),
+            type: collapsed ? 'menu-unfold' : 'menu-fold',
+            onClick: this.toggle
+          }),
+          _react2['default'].createElement(
+            'h1',
+            null,
+            systemName
+          ),
+          _react2['default'].createElement(
+            'div',
+            { className: (0, _classnames2['default'])('e3wLoginLayoutRight') },
+            _react2['default'].createElement(
+              _router.Link,
+              { to: '/inside/other/mywork' },
+              _react2['default'].createElement(
+                _badge2['default'],
+                { count: pending },
+                _react2['default'].createElement(_icon2['default'], { type: 'bell', className: (0, _classnames2['default'])('e3wLoginLayoutIcon') })
+              )
+            ),
+            currentUser.name ? _react2['default'].createElement(
+              _dropdown2['default'],
+              { overlay: menu },
+              _react2['default'].createElement(
+                'span',
+                { className: (0, _classnames2['default'])(['e3wLoginLayoutAction', 'e3wLoginLayoutAccount']) },
+                _react2['default'].createElement(_icon2['default'], { type: 'user', className: (0, _classnames2['default'])(['e3wLoginLayoutAvatar']) }),
+                currentUser.displayName
+              )
+            ) : _react2['default'].createElement(_spin2['default'], { size: 'small', style: { marginLeft: 8 } })
+          )
+        ),
+        _react2['default'].createElement(
+          Content,
+          { style: { margin: '24px 24px 0', height: '100%' } },
+          this.state.defaultIdx ? _react2['default'].createElement(
+            _router.Switch,
+            null,
+            getRouteData('InsideLayout').map(function (item) {
+              return _react2['default'].createElement(_router.Route, {
+                exact: item.exact,
+                key: item.path,
+                path: item.path,
+                component: item.component
+              });
+            }),
+            _react2['default'].createElement(_router.Redirect, { exact: true, from: '/inside/index', to: '/inside/other/mywork' }),
+            _react2['default'].createElement(_router.Route, { component: _2['default'] })
+          ) : _react2['default'].createElement(_spin2['default'], { size: 'small', style: { marginLeft: 8 } }),
+          _react2['default'].createElement(_Easy3wGlobalFooter2['default'], {
+            links: [],
+            copyright: copyrightContent
+          })
+        )
+      )
+    );
+
+    return _react2['default'].createElement(
+      _reactDocumentTitle2['default'],
+      { title: this.getPageTitle() },
+      _react2['default'].createElement(
+        _reactContainerQuery.ContainerQuery,
+        { query: query },
+        function (params) {
+          return _react2['default'].createElement(
+            'div',
+            { className: (0, _classnames2['default'])(params) },
+            ' ',
+            currentUser.name ? layout : ''
+          );
+        }
+      )
+    );
+  };
+
+  return Easy3wLoginLayout;
+}(_react2['default'].PureComponent);
+
+Easy3wLoginLayout.childContextTypes = {
+  location: _propTypes2['default'].object,
+  breadcrumbNameMap: _propTypes2['default'].object
+};
+exports['default'] = Easy3wLoginLayout;
+module.exports = exports['default'];