IE支持

src/main/vue/config/index.js

@@ -26,7 +26,7 @@ module.exports = {
         proxyTable: {},
 
         // Various Dev Server settings
-        host: 'localhost', // can be overwritten by process.env.HOST
+        host: '0.0.0.0', // can be overwritten by process.env.HOST
         port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
         autoOpenBrowser: false,
         errorOverlay: true,

src/main/vue/src/entries/admin.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>管理后台</title>
     <link rel="icon" href="/static/favicon.ico"/>
+    <script src="/static/polyfill.min.js"></script>
     <script src="/static/fontawesome-v5.2.0.js"></script>
 </head>
 

src/main/vue/src/entries/admin.js

@@ -12,7 +12,7 @@ import VueAMap from 'vue-amap'
 import 'normalize.css/normalize.css'
 import 'element-ui/lib/theme-chalk/index.css'
 import '../main.less'
-import { format } from 'date-fns'
+import {format} from 'date-fns'
 import zh from 'date-fns/locale/zh_cn'
 
 VueAMap.initAMapApiLoader({
@@ -26,7 +26,7 @@ Vue.use(ElementUI);
 Vue.use(VueI18n);
 Vue.component('multi-upload', MultiUpload);
 Vue.component('single-upload', SingleUpload);
-const baseUrl = process.env.NODE_ENV === 'production' ? '../' : 'http://localhost:8080';
+const baseUrl = process.env.NODE_ENV === 'production' ? '../' : `http://${location.hostname}:8080`;
 Vue.prototype.$baseUrl = baseUrl;
 axios.defaults.withCredentials = true;
 axios.defaults.baseURL = baseUrl;
@@ -34,7 +34,7 @@ Vue.prototype.$http = {
     get(params) {
         return new Promise((resolve, reject) => {
             if (params instanceof String) {
-                params = { url: params };
+                params = {url: params};
             } else if (!params instanceof Object) {
                 reject('params error');
                 return;
@@ -55,7 +55,7 @@ Vue.prototype.$http = {
             store.commit('updateFetchingData', true);
             axios.get(params.url, {
                 params: params.data
-            }, { withCredentials: true }).then(res => {
+            }, {withCredentials: true}).then(res => {
                 store.commit('updateFetchingData', false);
                 if (res.status === 200) {
                     resolve(res.data);
@@ -82,7 +82,7 @@ Vue.prototype.$http = {
     },
     post(params) {
         if (params instanceof String) {
-            params = { url: params };
+            params = {url: params};
         } else if (!params instanceof Object) {
             reject('params error');
             return;
@@ -122,7 +122,7 @@ Vue.prototype.$http = {
         }
         return new Promise((resolve, reject) => {
             store.commit('updateFetchingData', true);
-            axios.post(params.url, data, { withCredentials: true }).then(res => {
+            axios.post(params.url, data, {withCredentials: true}).then(res => {
                 store.commit('updateFetchingData', false);
                 if (res.status === 200) {
                     resolve(res.data);
@@ -151,11 +151,11 @@ Vue.prototype.$http = {
 Vue.mixin({
     methods: {
         timeFormatter(row, column, cellValue, index) {
-            return format(new Date(cellValue), 'HH:mm', { locale: zh })
+            return format(new Date(cellValue), 'HH:mm', {locale: zh})
         },
         datetimeFormatter(row, column, cellValue, index) {
             if (!cellValue) return ''
-            return format(new Date(cellValue), 'YYYY/MM/DD HH:mm', { locale: zh })
+            return format(new Date(cellValue), 'YYYY/MM/DD HH:mm', {locale: zh})
         }
     }
 });
@@ -179,6 +179,6 @@ new Vue({
     el: '#app',
     router,
     store,
-    components: { Main },
+    components: {Main},
     template: '<Main/>'
 });

src/main/vue/src/pages/App.vue

@@ -26,7 +26,7 @@
                 </el-tooltip>
 
                 <el-dropdown @command="onCommand" style="margin-left: 20px;">
-                    <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar" />
+                    <img :src="userInfo ? userInfo.icon || '' : ''" class="avatar"/>
                     <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                     </el-dropdown-menu>
@@ -41,184 +41,185 @@
 </template>
 
 <script>
-import SysMenu from '../components/SysMenu'
-import NavMenu from '../components/NavMenu'
-import { mapState } from 'vuex'
+    import SysMenu from '../components/SysMenu'
+    import NavMenu from '../components/NavMenu'
+    import {mapState} from 'vuex'
 
-export default {
-    name: 'App',
-    mounted() {
-        this.getMenus();
-        let fn = () => {
-            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+    export default {
+        name: 'App',
+        mounted() {
+            this.getMenus();
+            let fn = () => {
+                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
 
-        };
-        document.addEventListener('fullscreenchange', fn);
-        document.addEventListener('webkitfullscreenchange', fn);
-        document.addEventListener('mozfullscreenchange', fn);
-        document.addEventListener('MSFullscreenChange', fn);
-    },
-    data() {
-        return {
-            rawMenus: [],
-            menus: [],
-            activeMenu: '',
-            menuPath: [],
-            collapse: false,
-            isFullscreen: false
-        }
-    },
-    computed: {
-        ...mapState(['userInfo'])
-    },
-    methods: {
-        findActiveMenu() {
-            this.activeMenu = '';
-            this.menuPath = [];
-            let path = this.$route.path;
-            const findActiveMenu = (parents, childMenus) => {
-                childMenus.forEach(i => {
-                    let parents_copy = [...parents];
-                    if (i.href === path) {
-                        parents_copy.push(i);
-                        this.menuPath = parents_copy.map(i => i.name);
-                        this.activeMenu = i.id;
-                    } else {
-                        if (i.children) {
-                            parents_copy.push(i);
-                            findActiveMenu(parents_copy, i.children);
-                        }
-                    }
-                })
             };
-            findActiveMenu([], this.rawMenus);
-        },
-        getMenus() {
-            this.$http.get({
-                url: '/sysMenu/userMenuTree',
-                data: {
-                    userId: this.userInfo.id
-                }
-            }).then(res => {
-                if (res.success) {
-                    this.rawMenus = res.data;
-                    this.menus = res.data;
-                    this.findActiveMenu();
-                }
-            })
+            document.addEventListener('fullscreenchange', fn);
+            document.addEventListener('webkitfullscreenchange', fn);
+            document.addEventListener('mozfullscreenchange', fn);
+            document.addEventListener('MSFullscreenChange', fn);
         },
-        toggleFullScreen() {
-            this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
-            let element = document.body;
-            let requestMethod;
-            if (this.isFullscreen) {
-                requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
-            } else {
-                requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
-            }
-            if (requestMethod) {
-                requestMethod.call(this.isFullscreen ? document : element);
+        data() {
+            return {
+                rawMenus: [],
+                menus: [],
+                activeMenu: '',
+                menuPath: [],
+                collapse: false,
+                isFullscreen: false
             }
         },
-        onCommand(command) {
-            if (command === 'logout') {
-                this.$http.post({
-                    url: '/auth/logout'
+        computed: {
+            ...mapState(['userInfo'])
+        },
+        methods: {
+            findActiveMenu() {
+                this.activeMenu = '';
+                this.menuPath = [];
+                let path = this.$route.path;
+                const findActiveMenu = (parents, childMenus) => {
+                    childMenus.forEach(i => {
+                        let parents_copy = [...parents];
+                        if (i.href === path) {
+                            parents_copy.push(i);
+                            this.menuPath = parents_copy.map(i => i.name);
+                            this.activeMenu = i.id;
+                        } else {
+                            if (i.children) {
+                                parents_copy.push(i);
+                                findActiveMenu(parents_copy, i.children);
+                            }
+                        }
+                    })
+                };
+                findActiveMenu([], this.rawMenus);
+            },
+            getMenus() {
+                this.$http.get({
+                    url: '/sysMenu/userMenuTree',
+                    data: {
+                        userId: this.userInfo.id
+                    }
                 }).then(res => {
                     if (res.success) {
-                        this.$store.commit('updateUserInfo', null);
-                        this.$router.replace('/login');
+                        this.rawMenus = res.data;
+                        this.menus = res.data;
+                        this.findActiveMenu();
                     }
                 })
+            },
+            toggleFullScreen() {
+                this.isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
+                let element = document.body;
+                let requestMethod;
+                if (this.isFullscreen) {
+                    requestMethod = document.exitFullscreen || document.mozCancelFullScreen || document.webkitExitFullscreen;
+                } else {
+                    requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
+                }
+                if (requestMethod) {
+                    requestMethod.call(this.isFullscreen ? document : element);
+                }
+            },
+            onCommand(command) {
+                if (command === 'logout') {
+                    this.$http.post({
+                        url: '/auth/logout'
+                    }).then(res => {
+                        if (res.success) {
+                            this.$store.commit('updateUserInfo', null);
+                            this.$router.replace('/login');
+                        }
+                    })
+                }
+            }
+        },
+        watch: {
+            $route(val) {
+                this.findActiveMenu(this.rawMenus);
+            },
+            isFullscreen(val) {
+                this.$refs.fullscreen.innerHTML = '';
+                let i = document.createElement('i');
+                i.style.fontSize = '20px';
+                i.className = val ? 'fas fa-compress' : 'fas fa-expand';
+                this.$refs.fullscreen.append(i);
+                FontAwesome.dom.i2svg();
             }
-        }
-    },
-    watch: {
-        $route(val) {
-            this.findActiveMenu(this.rawMenus);
         },
-        isFullscreen(val) {
-            this.$refs.fullscreen.innerHTML = '';
-            let i = document.createElement('i');
-            i.style.fontSize = '20px';
-            i.className = val ? 'fas fa-compress' : 'fas fa-expand';
-            this.$refs.fullscreen.append(i);
-            FontAwesome.dom.i2svg();
+        components: {
+            SysMenu,
+            NavMenu
         }
-    },
-    components: {
-        SysMenu,
-        NavMenu
     }
-}
 </script>
 <style lang="less">
-.aside {
-    width: auto !important;
-    .el-menu {
-        border: none !important;
-        &:not(.el-menu--collapse) {
-            width: 200px;
+    .aside {
+        width: auto !important;
+        .el-menu {
+            border: none !important;
+            &:not(.el-menu--collapse) {
+                width: 200px;
+            }
         }
     }
-}
 </style>
 <style lang="less" scoped>
-#app {
-    height: 100%;
-}
+    #app {
+        height: 100%;
+    }
 
-.header {
-    color: #303133;
-    background: #fff;
-    display: flex;
-    align-items: center;
-    padding-left: 0;
-    border-bottom: 1px solid #dcdfe6;
-    .header-btn {
-        width: 60px;
-        height: 60px;
+    .header {
+        color: #303133;
+        background: #fff;
         display: flex;
         align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: all 0.3s;
-        & > div {
+        padding-left: 0;
+        border-bottom: 1px solid #dcdfe6;
+        .header-btn {
+            width: 60px;
+            height: 60px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
             transition: all 0.3s;
+            & > div {
+                transition: all 0.3s;
+            }
+            &:hover {
+                background: fade(black, 10%);
+            }
         }
-        &:hover {
-            background: fade(black, 10%);
+        .avatar {
+            width: 40px;
+            height: 40px;
+            border: 1px solid #ebebeb;
+            border-radius: 50%;
         }
-    }
-    .avatar {
-        width: 40px;
-        height: 40px;
-        border: 1px solid #ebebeb;
-        border-radius: 50%;
-    }
-    a {
-        &:visited {
-            color: #303133;
+        a {
+            &:visited {
+                color: #303133;
+            }
         }
     }
-}
 
-.aside {
-    background: #324157;
-    transition: all 0.4s ease;
-    .logo-wrapper {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 60px;
-        color: white;
-        font-size: 20px;
-        font-weight: 700;
-        background: fade(black, 20%);
+    .aside {
+        background: #324157;
+        transition: all 0.4s ease;
+        -ms-overflow-style: none;
+        .logo-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 60px;
+            color: white;
+            font-size: 20px;
+            font-weight: 700;
+            background: fade(black, 20%);
+        }
     }
-}
 
-.aside::-webkit-scrollbar {
-    display: none;
-}
+    .aside::-webkit-scrollbar {
+        display: none;
+    }
 </style>