响应式小改动

vue/src/assets/styles/display.scss

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 768px) {
+    .hidden-xs {
+        display: none !important
+    }
+}

vue/src/assets/styles/index.scss

@@ -1,5 +1,6 @@
 @import "variables";
 @import "~element-ui/packages/theme-chalk/src/index";
+@import 'display';
 @import "transition";
 @import "element-ui";
 @import "nprogress";
@@ -181,4 +182,15 @@ a:hover {
     }
 }
 
+.button-group {
+    .el-button {
+        margin-top: 10px;
+        margin-right: 10px;
+
+        & + .el-button {
+            margin-left: 0;
+        }
+    }
+}
+
 

vue/src/assets/styles/sidebar.scss

@@ -30,6 +30,8 @@ $iconSize: 17px;
     //自动隐藏
     &.hide-sidebar {
         width: 0;
+        pointer-events: none;
+        transform: translateX(-$sideBarWidth);
     }
 
     .sidebar-logo-container {

vue/src/bizComponents/SearchForm/index.vue

@@ -1,4 +1,6 @@
 <script type="text/jsx">
+    import {debounce} from "@/utils"
+
     export default {
         name: "SearchForm",
         provide() {
@@ -36,6 +38,7 @@
             }
         },
         mounted() {
+            this.resize = debounce(this.resize)
             this.resize()
             window.addEventListener('resize', this.resize)
         },
@@ -44,7 +47,7 @@
         },
         render() {
             const slots = this.$slots.default
-            let collapseChildren = []
+            const collapseChildren = []
             if (this.showCollapse) {
                 collapseChildren.push(
                     <el-collapse-transition>
@@ -86,6 +89,8 @@
 
 <style lang="scss">
     .searchForm {
+        margin-bottom: -15px;
+
         .searchForm__collapse {
             position: relative;
             bottom: 20px;

vue/src/layout/components/Navbar/index.vue

@@ -5,11 +5,11 @@
         <breadcrumb v-if="showBreadcrumb"/>
 
         <div class="right-menu">
-            <search id="header-search" class="right-menu-item"/>
+            <search id="header-search" class="right-menu-item hidden-xs"/>
 
-            <fullscreen v-model="fullscreen" class="fullscreen-btn right-menu-item" title="全屏开关"/>
+            <fullscreen v-model="fullscreen" class="fullscreen-btn right-menu-item hidden-xs" title="全屏开关"/>
 
-            <div class="setting-btn right-menu-item" @click="settingDrawer=true">
+            <div class="setting-btn right-menu-item hidden-xs" @click="settingDrawer=true">
                 <i class="el-icon-s-operation navbar-icon" title="个性设置"/>
             </div>
 
@@ -20,24 +20,22 @@
             >
                 <div class="avatar-wrapper">
                     <el-avatar :size="30" :src="avatar" icon="el-icon-user-solid"/>
-                    <span>{{name}}</span>
+                    <span class="hidden-xs">{{name}}</span>
                 </div>
                 <el-dropdown-menu class="user-dropdown" slot="dropdown">
                     <router-link to="/user/index">
                         <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
                     </router-link>
-                    <el-dropdown-item icon="el-icon-guide" @click.native="$guide(0,steps)">新手指引</el-dropdown-item>
+                    <el-dropdown-item class="hidden-xs" icon="el-icon-guide" @click.native="$guide(0,steps)">
+                        新手指引
+                    </el-dropdown-item>
                     <router-link v-if="showSystemMonitor" to="/system/monitor">
                         <el-dropdown-item icon="el-icon-monitor">系统监控</el-dropdown-item>
                     </router-link>
                     <router-link v-if="showSystemResource" to="/system/resource">
                         <el-dropdown-item icon="el-icon-setting">接口设置</el-dropdown-item>
                     </router-link>
-                    <el-dropdown-item
-                            divided
-                            icon="el-icon-switch-button"
-                            @click.native="logout"
-                    >
+                    <el-dropdown-item divided icon="el-icon-switch-button" @click.native="logout">
                         退出登录
                     </el-dropdown-item>
                 </el-dropdown-menu>

vue/src/layout/mixin/ResizeHandler.js

@@ -1,21 +1,25 @@
+import {debounce} from '@/utils'
+
 const {body} = document
 const WIDTH = 768
 
+function $_isMobile() {
+    const rect = body.getBoundingClientRect()
+    return rect.width - 1 < WIDTH
+}
+
 export default {
     methods: {
-        $_isMobile() {
-            const rect = body.getBoundingClientRect()
-            return rect.width - 1 < WIDTH
-        },
         $_resizeHandler() {
             if (!document.hidden) {
-                const isMobile = this.$_isMobile()
+                const isMobile = $_isMobile()
                 this.$store.commit('app/device', isMobile ? 'mobile' : 'pc')
                 isMobile && this.$store.commit('setting/sidebarCollapse', true)
             }
         }
     },
     mounted() {
+        this.$_resizeHandler = debounce(this.$_resizeHandler)
         window.addEventListener('resize', this.$_resizeHandler)
         this.$_resizeHandler()
     },

vue/src/views/purchase/inbound/index.vue

@@ -39,7 +39,7 @@
                 </el-select>
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button icon="el-icon-view" size="small" type="primary" @click="see">查 看</el-button>

vue/src/views/purchase/order/index.vue

@@ -55,7 +55,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button icon="el-icon-view" size="small" type="primary" @click="see">查 看</el-button>

vue/src/views/sell/order/index.vue

@@ -55,7 +55,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button icon="el-icon-view" size="small" type="primary" @click="see">查 看</el-button>

vue/src/views/sell/outbound/index.vue

@@ -39,7 +39,7 @@
                 </el-select>
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button icon="el-icon-view" size="small" type="primary" @click="see">查 看</el-button>

vue/src/views/stock/current/index.vue

@@ -33,7 +33,7 @@
                     />
                 </search-form-item>
             </search-form>
-            <el-row>
+            <el-row class="button-group">
                 <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
                 <el-button icon="el-icon-download" size="small" type="info" @click="downloadExcel">导 出</el-button>
             </el-row>

vue/src/views/system/customer/index.vue

@@ -32,7 +32,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" size="small" type="primary" @click="add">添 加</el-button>
             <el-button v-if="canUpdate" size="small" type="primary" @click="edit">编 辑</el-button>

vue/src/views/system/role/index.vue

@@ -23,7 +23,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>

vue/src/views/system/supplier/index.vue

@@ -32,7 +32,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" size="small" type="primary" @click="add">添 加</el-button>
             <el-button v-if="canUpdate" size="small" type="primary" @click="edit">编 辑</el-button>

vue/src/views/system/user/index.vue

@@ -23,7 +23,7 @@
                 />
             </search-form-item>
         </search-form>
-        <el-row>
+        <el-row class="button-group">
             <el-button icon="el-icon-search" size="small" type="success" @click="search">查 询</el-button>
             <el-button v-if="canAdd" icon="el-icon-plus" size="small" type="primary" @click="add">添 加</el-button>
             <el-button v-if="canUpdate" icon="el-icon-edit" size="small" type="primary" @click="edit">编 辑</el-button>