From f3befd562f9689009f8d69b73d18d46a0722f4d5 Mon Sep 17 00:00:00 2001
From: "udf_admin@163.com" <udf_admin@163.com>
Date: Sun, 3 May 2020 00:13:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/App.vue                             | 60 +++++++++++++++++--
 admin/src/components/leftMenu.vue             | 46 ++++++++++++++
 .../src/main/resources/templates/common.html  |  8 +--
 3 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 admin/src/components/leftMenu.vue

diff --git a/admin/src/App.vue b/admin/src/App.vue
index 6eb4a35..f042f03 100644
--- a/admin/src/App.vue
+++ b/admin/src/App.vue
@@ -2,8 +2,9 @@
   <div id="app" class="app" :style="appStyle">
     <el-container :style="mainElContainerStyle">
       <el-header :style="mainElHeaderStyle" :height="mainElHeaderStyle.height">
-        <el-button class="mainMenuBtn" :style="mainMenuBtnStyle" type="text">
-          <i class="el-icon-menu"></i>
+        <el-button class="mainMenuBtn" :style="mainMenuBtnStyle" type="text"
+                   @click="mainMenuBtnClick">
+          <i class="el-icon-menu" @click="mainMenuBtnClick" @mouseover="mainMenuBtnClick"></i>
         </el-button>
         <a class="mainLogoBtn" href="./" :style="mainLogoBtnStyle">
           <span>
@@ -67,7 +68,11 @@
         </div>
       </el-header>
       <el-container :style="mainChildElContainerStyle">
-        <!--<el-aside v-show="elAsideShow" width="200px">Aside</el-aside>-->
+        <el-aside v-show="elAsideShow" width="240px">
+          <el-scrollbar style="height:100%;">
+            <left-menu></left-menu>
+          </el-scrollbar>
+        </el-aside>
         <el-container :style="mainChildElContainerStyle">
           <el-scrollbar style="height:100%;width: 100%;">
             <el-backtop :style="backtopStyle" target=".el-scrollbar__wrap">
@@ -92,6 +97,18 @@
         </el-container>
       </el-container>
     </el-container>
+    <el-drawer
+      size="250px"
+      :with-header="false"
+      :show-close="false"
+      :visible.sync="leftMenuDrawerShow"
+      direction="ltr">
+      <div :style="leftMenuDrawerStyle">
+        <el-scrollbar style="height:100%;">
+          <left-menu></left-menu>
+        </el-scrollbar>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
@@ -99,15 +116,19 @@
 
   import glob from "./assets/js/glob";
   import api_user from "./api/user";
+  import leftMenu from "./components/leftMenu";
 
   export default {
     name: 'App',
+    components: {
+      leftMenu
+    },
     data() {
       return {
         golbSetting: {
           appLogoName: 'ITKK',
           copyRight: '© 2019-2020 itkk.org',
-          appBackground: "#F2F2F2",
+          appBackground: "#FAFAFA",
           headerBackground: "#FFFFFF",
           menuBtnColor: "#FFFFFF",
           themeBackground: "#FF6A00",
@@ -151,7 +172,9 @@
         showSearchInput: false,
         searchInputText: null,
         userDto: {},
-        elAsideShow: true
+        elAsideShow: true,
+        leftMenuDrawerShow: false,
+        leftMenuDrawerStyle: {}
       }
     },
     mounted() {
@@ -191,12 +214,15 @@
         this.backtopStyle.color = this.golbSetting.themeColor;
         this.userDtoBtnStyle.color = this.golbSetting.themeBackground;
         this.logoutBtnStyle.color = this.golbSetting.themeBackground;
+        this.logoutBtnStyle.background = this.golbSetting.appBackground;
       },
       //resize监听器
       resizeListener() {
         //设定容器高度
+        this.appStyle.height = window.innerHeight + 'px';
         this.mainElContainerStyle.height = window.innerHeight + 'px';
         this.mainChildElContainerStyle.height = (window.innerHeight - 50) + 'px';
+        this.leftMenuDrawerStyle.height = window.innerHeight + 'px';
         //设定框宽度
         this.searchInputStyle.width = window.innerWidth - 200 - 10 + 'px';
         //判断是否显示菜单栏
@@ -210,11 +236,19 @@
       logoutBtnClick() {
         const loading = this.$loading({lock: true, text: '操作中'});
         api_user.logout().then(response => window.location.href = '/').finally(() => loading.close());
+      },
+      //菜单按钮点击
+      mainMenuBtnClick() {
+        this.leftMenuDrawerShow = !this.leftMenuDrawerShow;
       }
     }
   }
 </script>
-
+<style lang="scss">
+  .el-drawer {
+    background-color: #F5F5F5;
+  }
+</style>
 <style lang="scss" scoped>
   .app {
     position: relative;
@@ -329,6 +363,20 @@
         }
       }
 
+      .el-aside {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        border-right: solid 1px #e6e6e6;
+        background: #F5F5F5;
+        box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 4px 0px;
+
+        .el-menu {
+          border-right: solid 0px #e6e6e6 !important;
+          height: 100% !important;
+        }
+      }
+
       .el-main {
         margin: 0;
         padding: 0;
diff --git a/admin/src/components/leftMenu.vue b/admin/src/components/leftMenu.vue
new file mode 100644
index 0000000..e512506
--- /dev/null
+++ b/admin/src/components/leftMenu.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="leftMenu">
+    <el-menu background-color="#F5F5F5">
+      <el-submenu index="1">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>导航一</span>
+        </template>
+        <el-menu-item-group>
+          <template slot="title">分组一</template>
+          <el-menu-item index="1-1">选项1</el-menu-item>
+          <el-menu-item index="1-2">选项2</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="分组2">
+          <el-menu-item index="1-3">选项3</el-menu-item>
+        </el-menu-item-group>
+        <el-submenu index="1-4">
+          <template slot="title">选项4</template>
+          <el-menu-item index="1-4-1">选项1</el-menu-item>
+        </el-submenu>
+      </el-submenu>
+      <el-menu-item index="2">
+        <i class="el-icon-menu"></i>
+        <span slot="title">导航二</span>
+      </el-menu-item>
+      <el-menu-item index="3" disabled>
+        <i class="el-icon-document"></i>
+        <span slot="title">导航三</span>
+      </el-menu-item>
+      <el-menu-item index="4">
+        <i class="el-icon-setting"></i>
+        <span slot="title">导航四</span>
+      </el-menu-item>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "leftMenu"
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>
diff --git a/udf-api/udf-api-server/src/main/resources/templates/common.html b/udf-api/udf-api-server/src/main/resources/templates/common.html
index beb82a8..6a0b148 100644
--- a/udf-api/udf-api-server/src/main/resources/templates/common.html
+++ b/udf-api/udf-api-server/src/main/resources/templates/common.html
@@ -17,7 +17,7 @@
             font-family: 'Microsoft yahei';
             font-size: 13px;
             font-weight: 400;
-            background-color: #F2F2F2;
+            background-color: #FAFAFA;
         }
 
         a, a:hover, a:active, a:focus {
@@ -440,22 +440,16 @@
             });
             //注册按钮点击事件
             $('.header-right-bar-registered-div button').on('click', function () {
-                //打开loading
-                openLoading();
                 //跳转注册界面
                 window.location.href = '/registered.html';
             });
             //登陆按钮点击事件
             $('.header-right-bar-login-div button').on('click', function () {
-                //打开loading
-                openLoading();
                 //跳转登陆界面
                 window.location.href = '/login.html';
             });
             //头像按钮点击事件
             $('.header-right-bar-user-div').on('click', function () {
-                //打开loading
-                openLoading();
                 //跳转控制台
                 window.location.href = '/admin';
             });