dlt-for-react 1.0.1

package/lib/layouts/layout/index.js

@@ -0,0 +1,519 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _spin = require('antd/lib/spin');
+
+var _spin2 = _interopRequireDefault(_spin);
+
+var _getSize2 = require('xgui-for-react/lib/utils/getSize');
+
+var _getSize3 = _interopRequireDefault(_getSize2);
+
+var _icon = require('antd/lib/icon');
+
+var _icon2 = _interopRequireDefault(_icon);
+
+var _message2 = require('antd/lib/message');
+
+var _message3 = _interopRequireDefault(_message2);
+
+var _extends2 = require('babel-runtime/helpers/extends');
+
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _NHFetch2 = require('xgui-for-react/lib/utils/NHFetch');
+
+var _NHFetch3 = _interopRequireDefault(_NHFetch2);
+
+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);
+
+var _layout = require('antd/lib/layout');
+
+var _layout2 = _interopRequireDefault(_layout);
+
+require('antd/lib/spin/style');
+
+require('antd/lib/icon/style');
+
+require('antd/lib/message/style');
+
+require('antd/lib/layout/style');
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _LeftMenu = require('../LeftMenu');
+
+var _LeftMenu2 = _interopRequireDefault(_LeftMenu);
+
+var _Top = require('../Top');
+
+var _Top2 = _interopRequireDefault(_Top);
+
+require('../../../assets/layouts/style.less');
+
+var _settingDrawer = require('../settingDrawer');
+
+var _settingDrawer2 = _interopRequireDefault(_settingDrawer);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _rcAnimate = require('rc-animate');
+
+var _rcAnimate2 = _interopRequireDefault(_rcAnimate);
+
+var _mixTop = require('../mixTop');
+
+var _mixTop2 = _interopRequireDefault(_mixTop);
+
+var _index = require('../NavigationBar/index');
+
+var _index2 = _interopRequireDefault(_index);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var leftMenuWidth = 255; //左侧菜单宽度
+var Sider = _layout2.default.Sider,
+    Content = _layout2.default.Content;
+// 默认配置
+
+var defaultSetting = {
+    title: "学工UI风格",
+    navTheme: "dark", // theme for nav menu 主题 dark or light
+    layout: "sidemenu", // nav menu position: sidemenu or topmenu or mixmenu   菜单位置 侧边菜单 顶部菜单 混合模式（侧边菜单+顶部logo）
+    contentWidth: "Fluid", // layout of content: Fluid or Fixed, only works when layout is topmenu 页面内容宽度
+    fixedHeader: false, // sticky header    是否固定header
+    autoHideHeader: false, // auto hide header  是否自动隐藏header
+    fixSiderbar: false, // sticky siderbar  是否固定侧边栏
+    primaryColor: '#1890ff', //primary-Color 全局主题色  --新版设计规范默认主色联奕蓝#397ef0
+    fontSize: 'default' //字号  default/big (默认字号+5)/huge（默认字号+15）
+};
+
+var NHLayout = function (_React$Component) {
+    (0, _inherits3.default)(NHLayout, _React$Component);
+
+    function NHLayout(props) {
+        (0, _classCallCheck3.default)(this, NHLayout);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (NHLayout.__proto__ || (0, _getPrototypeOf2.default)(NHLayout)).call(this, props));
+
+        _this.getLayoutSetting = function () {
+            _this.setState({ layoutShow: false });
+            (0, _NHFetch3.default)('api/zhxg-xtgl/openapi/getCsszByCsbz', 'GET', { csbz: 'XTGL_LAYOUT_SETTING' }).then(function (res) {
+                if (res && res.code === 200 && res.data) {
+                    var initSetting = res.data.csz ? JSON.parse(res.data.csz) : defaultSetting;
+                    sessionStorage.setItem('setting', (0, _stringify2.default)(initSetting));
+                    _this.setState({
+                        setting: initSetting,
+                        csszxid: res.data.pkid ? res.data.pkid : '',
+                        prevSetting: (0, _stringify2.default)(initSetting)
+                    }, function () {
+                        _this.changeBaseFontSize(initSetting.fontSize);
+                        if (window.less && window.less.modifyVars) {
+                            window.less.modifyVars({
+                                '@primary-color': initSetting.primaryColor
+                            }).then(function () {
+                                var styleDom = document.createElement('style');
+                                styleDom.innerHTML = '\n                            .xgui-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                                background: ' + initSetting.primaryColor + '0D;\n                            }';
+                                document.getElementsByTagName('body')[0].appendChild(styleDom);
+                                _this.setState({ layoutShow: true });
+                            }).catch(function () {
+                                _this.setState({ layoutShow: true });
+                            });
+                        } else {
+                            _this.setState({ layoutShow: true });
+                        }
+                    });
+                } else {
+                    sessionStorage.setItem('setting', (0, _stringify2.default)(defaultSetting));
+                    _this.changeBaseFontSize(defaultSetting.fontSize);
+                    if (window.less && window.less.modifyVars) {
+                        window.less.modifyVars({
+                            '@primary-color': defaultSetting.primaryColor
+                        }).then(function () {
+                            var styleDom = document.createElement('style');
+                            styleDom.innerHTML = '\n                        .xgui-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                            background: ' + defaultSetting.primaryColor + '0D;\n                        }';
+                            document.getElementsByTagName('body')[0].appendChild(styleDom);
+                            _this.setState({
+                                setting: defaultSetting,
+                                prevSetting: (0, _stringify2.default)(defaultSetting),
+                                layoutShow: true
+                            });
+                        });
+                    } else {
+                        _this.setState({
+                            layoutShow: true
+                        });
+                    }
+                }
+            }).catch(function () {
+                sessionStorage.setItem('setting', (0, _stringify2.default)(defaultSetting));
+                _this.changeBaseFontSize(defaultSetting.fontSize);
+                if (window.less && window.less.modifyVars) {
+                    window.less.modifyVars({
+                        '@primary-color': defaultSetting.primaryColor
+                    }).then(function () {
+                        var styleDom = document.createElement('style');
+                        styleDom.innerHTML = '\n                    .xgui-nhTableNew .ant-table-tbody>tr:nth-of-type(2n){\n                        background: ' + defaultSetting.primaryColor + '0D;\n                    }';
+                        document.getElementsByTagName('body')[0].appendChild(styleDom);
+                        _this.setState({
+                            setting: defaultSetting,
+                            prevSetting: (0, _stringify2.default)(defaultSetting),
+                            layoutShow: true
+                        });
+                    });
+                } else {
+                    _this.setState({
+                        layoutShow: true
+                    });
+                }
+            });
+        };
+
+        _this.changeBaseFontSize = function (size) {
+            var Dom = document.getElementsByTagName('html')[0];
+            var baseNumberFontSize = 54;
+            var _fontSize = undefined;
+            switch (size) {
+                case 'default':
+                    _fontSize = baseNumberFontSize + 'Px';
+                    break;
+                case 'big':
+                    _fontSize = +baseNumberFontSize + 5 + 'Px';
+                    break;
+                case 'huge':
+                    _fontSize = +baseNumberFontSize + 15 + 'Px';
+                    break;
+            }
+            Dom.style.fontSize = _fontSize;
+        };
+
+        _this.toggle = function () {
+            _this.setState({
+                collapsed: !_this.state.collapsed
+            });
+        };
+
+        _this.changeSetting = function (key, value) {
+            var setting = _this.state.setting;
+
+            var nextState = (0, _extends3.default)({}, setting);
+            nextState[key] = value;
+            if (key === "layout") {
+                // nextState.contentWidth = value === "topmenu" ? "Fluid" : "Fixed";
+                nextState.contentWidth = 'Fluid';
+            } else if (key === "fixedHeader" && !value) {
+                nextState.autoHideHeader = false;
+            }
+
+            _this.setState({ setting: nextState });
+            _this.setSettingToSession(nextState);
+        };
+
+        _this.setSetting = function (setting) {
+            _this.setState({ setting: setting });
+            _this.setSettingToSession(setting);
+        };
+
+        _this.setSettingToSession = function (setting) {
+            sessionStorage.setItem('setting', (0, _stringify2.default)(setting));
+        };
+
+        _this.saveSettingToDataBase = function () {
+            var _this$state = _this.state,
+                csszxid = _this$state.csszxid,
+                setting = _this$state.setting;
+
+            if (!csszxid) {
+                _message3.default.error('参数设置中未配置XTGL_LAYOUT_SETTING，请联系管理员处理!');
+                return;
+            }
+            var prams = [{ csszxid: csszxid, csz: (0, _stringify2.default)(setting) }];
+            (0, _NHFetch3.default)('api/zhxg-xtgl/parameterSetting/updateMulti', 'POST', prams).then(function (res) {
+                if (res && res.code === 200) {
+                    _message3.default.success('Layout配置项保存成功！');
+                }
+            });
+        };
+
+        _this.handScroll = function () {
+            var autoHideHeader = _this.state.setting.autoHideHeader;
+            var visible = _this.state.visible;
+
+            if (!autoHideHeader) {
+                return;
+            }
+            var scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
+            if (!_this.ticking) {
+                _this.ticking = true;
+                requestAnimationFrame(function () {
+                    if (_this.oldScrollTop > scrollTop) {
+                        _this.setState({
+                            visible: true
+                        });
+                    } else if (scrollTop > 300 && visible) {
+                        _this.setState({
+                            visible: false
+                        });
+                    } else if (scrollTop < 300 && !visible) {
+                        _this.setState({
+                            visible: true
+                        });
+                    }
+                    _this.oldScrollTop = scrollTop;
+                    _this.ticking = false;
+                });
+            }
+        };
+
+        _this.state = {
+            collapsed: false, //是否关闭菜单
+            fwmc: _this.props.config.fwmc, //服务名称
+            visible: true, //是否显示header
+            setting: sessionStorage.getItem('setting') ? JSON.parse(sessionStorage.getItem('setting')) : defaultSetting, // 配置
+            layoutShow: false, //展示layout
+            prevSetting: '', //数据库存储的配置可用于重置
+            csszxid: '', //layout设置项的pkid
+            hover: false //鼠标hover
+        };
+        return _this;
+    }
+
+    (0, _createClass3.default)(NHLayout, [{
+        key: 'UNSAFE_componentWillMount',
+        value: function UNSAFE_componentWillMount() {
+            var _this2 = this;
+
+            var config = this.props.config;
+
+            var fwmcUrl = config.fwmcUrl,
+                fwmc = config.fwmc;
+            //动态获取服务名称(优选使用fwmcUrl，如果未指定fwmcUrl则以fwmc为准)
+            if (fwmcUrl && fwmcUrl.startsWith("api/")) {
+                (0, _NHFetch3.default)(fwmcUrl, "GET").then(function (res) {
+                    if (res && res.data) {
+                        _this2.setState({
+                            fwmc: res.data
+                        });
+                    } else {
+                        _this2.setState({
+                            fwmc: fwmc
+                        });
+                    }
+                });
+            } else if (fwmc) {
+                this.setState({
+                    fwmc: fwmc
+                });
+            }
+        }
+    }, {
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            document.addEventListener("scroll", this.handScroll, { passive: true });
+            this.getLayoutSetting();
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            document.removeEventListener("scroll", this.handScroll);
+        }
+
+        /**
+         * 获取系统管理 配置项中的XTGL_LAYOUT_SETTING配置参数，如果为空的话就取默认的defaultSetting
+         */
+
+
+        /** 改变全局的fontsize */
+
+        /** 更改学工UI风格配置 */
+
+        /** 将setting缓存到session中 */
+
+        /** 将setting保存到数据库中 */
+
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this3 = this;
+
+            var curUrl = window.location.href.split('#')[1];
+            var menuIcons = this.props.menuIcons;
+            var _state = this.state,
+                setting = _state.setting,
+                visible = _state.visible,
+                layoutShow = _state.layoutShow,
+                hover = _state.hover;
+            var title = setting.title,
+                navTheme = setting.navTheme,
+                layout = setting.layout,
+                contentWidth = setting.contentWidth,
+                fixedHeader = setting.fixedHeader,
+                fixSiderbar = setting.fixSiderbar,
+                autoHideHeader = setting.autoHideHeader;
+            // const layout === 'topmenu' = layout === 'topmenu';  //显示顶部菜单
+            // 若内容区域宽度为定宽 则设置为1200px 左右居中
+
+            var contentProps = contentWidth === 'Fixed' ? { margin: '0 auto', width: '1200px' } : {};
+            var siderCom = _react2.default.createElement(
+                Sider,
+                {
+                    trigger: null,
+                    collapsible: true,
+                    collapsed: this.state.collapsed,
+                    width: leftMenuWidth,
+                    theme: navTheme,
+                    className: layout === 'mixmenu' && fixedHeader ? 'xgui-layout-fixHeader-content xgui-layout-sider' : 'xgui-layout-sider',
+                    onMouseEnter: function onMouseEnter() {
+                        _this3.setState({ hover: true });
+                    },
+                    onMouseLeave: function onMouseLeave() {
+                        _this3.setState({ hover: false });
+                    }
+                },
+                layout === 'sidemenu' && _react2.default.createElement(
+                    'div',
+                    { className: 'xgui-layout-logo' },
+                    _react2.default.createElement('img', { alt: '', style: { maxWidth: 40, maxHeight: 40 }, src: this.props.config.logoUrl,
+                        onError: function onError(e) {
+                            e.target.src = _this3.props.config.logo;
+                        } }),
+                    !this.state.collapsed && _react2.default.createElement(
+                        'span',
+                        { className: (0, _classnames2.default)('xgui-layout-logoSpan', { 'light': navTheme === 'light' }) },
+                        _react2.default.createElement(
+                            'b',
+                            null,
+                            this.state.fwmc
+                        )
+                    )
+                ),
+                _react2.default.createElement(_LeftMenu2.default, { curUrl: curUrl, menuIcons: menuIcons, collapsed: this.state.collapsed, config: this.props.config, allMenu: this.props.allMenu, setting: setting }),
+                _react2.default.createElement(
+                    'div',
+                    { onClick: this.toggle, style: hover ? {} : { visibility: 'hidden' }, className: 'xgui-sider-btn-fixed' },
+                    _react2.default.createElement(_icon2.default, { type: 'left', rotate: this.state.collapsed ? 180 : 0 })
+                ),
+                !this.state.collapsed && this.props.config.sysVersion ? _react2.default.createElement(
+                    'div',
+                    { className: 'xgui-layout-menu-version' },
+                    '\u7248\u672C\u53F7\uFF1A',
+                    this.props.config.sysVersion ? this.props.config.sysVersion : ''
+                ) : null
+            );
+            var conTentCom = _react2.default.createElement(
+                _layout2.default,
+                { hasSider: false },
+                layout !== 'mixmenu' && visible ? _react2.default.createElement(_Top2.default, { collapsed: this.state.collapsed, toggle: this.toggle, config: this.props.config, menuIcons: menuIcons,
+                    updataPassBtnAuth: this.props.config.updataPassBtnAuth, setting: setting }) : null,
+                _react2.default.createElement(
+                    Content,
+                    { style: (0, _extends3.default)({ height: layout !== 'mixmenu' ? (0, _getSize3.default)().contentH : (0, _getSize3.default)().contentH + 40 }, contentProps), className: fixedHeader ? 'xgui-layout-fixHeader-content' : '' },
+                    layout === 'mixmenu' && _react2.default.createElement(_index2.default, { layout: layout }),
+                    this.props.children
+                )
+            );
+            if (!layoutShow) {
+                // return null;
+                return _react2.default.createElement(
+                    _spin2.default,
+                    { spinning: true, size: 'large' },
+                    _react2.default.createElement('div', { style: { width: (0, _getSize3.default)().windowW, height: (0, _getSize3.default)().windowH } })
+                );
+            }
+            return _react2.default.createElement(
+                'div',
+                { style: { width: '100%', height: '100%' } },
+                _react2.default.createElement(
+                    _layout2.default,
+                    { style: { height: '100%' } },
+                    layout === 'mixmenu' && visible && _react2.default.createElement(_mixTop2.default, { collapsed: this.state.collapsed, toggle: this.toggle, config: this.props.config,
+                        updataPassBtnAuth: this.props.config.updataPassBtnAuth, setting: setting }),
+
+                    // layout !== 'topmenu'&&
+                    // <Sider
+                    //     trigger={null}
+                    //     collapsible
+                    //     collapsed={this.state.collapsed}
+                    //     width={200}
+                    //     theme={navTheme}
+                    // >
+                    //     <div className={'xgui-layout-logo'}>
+                    //         <img alt='' style={{maxWidth: 40, maxHeight: 40}} src={this.props.config.logoUrl}
+                    //             onError={(e) => {
+                    //                 e.target.src = this.props.config.logo;
+                    //             }}/>
+                    //         {!this.state.collapsed &&
+                    //         <span className={classNames('xgui-layout-logoSpan',{'light':navTheme==='light'})}><b>{this.state.fwmc}</b></span>}
+                    //     </div>
+                    //     <LeftMenu curUrl={curUrl} menuIcons={this.props.menuIcons} collapsed={ this.state.collapsed } config={this.props.config} allMenu={this.props.allMenu} setting={setting}/>
+                    //     {/* 显示在左侧菜单底部的版本号 */}
+                    //     {
+                    //         !this.state.collapsed && this.props.config.sysVersion?
+                    //         <div className={'xgui-layout-menu-version'}>
+                    //             版本号：{this.props.config.sysVersion?this.props.config.sysVersion:''}
+                    //         </div>
+                    //         : null
+                    //     }
+                    // </Sider>
+
+                    layout === 'mixmenu' ?
+                    // 混合菜单布局
+                    _react2.default.createElement(
+                        _layout2.default,
+                        { hasSider: true },
+                        siderCom,
+                        conTentCom
+                    ) :
+                    // 顶部菜单布局
+                    layout === 'topmenu' ? _react2.default.createElement(
+                        _react2.default.Fragment,
+                        null,
+                        conTentCom
+                    ) :
+                    // 侧边菜单布局
+                    _react2.default.createElement(
+                        _layout2.default,
+                        { hasSider: true },
+                        siderCom,
+                        conTentCom
+                    )
+                ),
+
+                // 只有系统管理服务内容可开启主题设置
+                this.props.config.baseUrl === 'api/zhxg-xtgl' && _react2.default.createElement(_settingDrawer2.default, { setting: setting, changeSetting: this.changeSetting, onSaveTheme: this.saveSettingToDataBase })
+            );
+        }
+    }]);
+    return NHLayout;
+}(_react2.default.Component);
+
+exports.default = NHLayout;