From 19ebab2fa68a39883d66952b03d878dc60f771f5 Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Tue, 28 Aug 2018 09:58:31 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=9F=BA=E7=A1=80=E7=BB=93?=
 =?UTF-8?q?=E6=9E=84=E5=92=8C=E8=BE=93=E5=85=A5=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly 373359336f6e97367f7b6a31c09fb4a28915cb07 [formerly f700069d686be8e9ee177e36627eb284b3638ca7 [formerly a23ef90c3256f8bdee11ee6f63c778afa8b0e7d3]]]]]
Former-commit-id: cf1abe3e0fdd1078f74e78741bae59315d66aacf
Former-commit-id: 8c342c2eaeb9cf04bfbc1fa7b15f34c36445e77d
Former-commit-id: 38d7d5273db075c711a5235819cf75f15dfbd1a4 [formerly 054ce7262136015f7dd4dfa1cecd9a2e83a90449]
Former-commit-id: e6a1403e2d4426450c70b43a79f9809151df9146
Former-commit-id: b9d31641196ff5ba6cc16a8097ffc6a45582f601
Former-commit-id: e88fe6c0ea4ad041f4a9c44f36ba52222035e7d6
Former-commit-id: 34dbea74181ba5f7bba361921cc46c1750a6aadd
Former-commit-id: ffe6a1be153494a4845b800ebcdaf0483bd85ef0
---
 .../theme/theme-base.scss.REMOVED.git-id      |  2 +-
 .../components/header-search/index.vue        | 15 +++++
 .../components/panel-search/index.vue         | 41 ++++++++++++++
 src/layout/header-aside/layout.vue            | 55 +++++++++++++------
 src/store/modules/d2admin/index.js            |  4 +-
 src/store/modules/d2admin/modules/search.js   | 24 ++++++++
 6 files changed, 123 insertions(+), 18 deletions(-)
 create mode 100644 src/layout/header-aside/components/header-search/index.vue
 create mode 100644 src/layout/header-aside/components/panel-search/index.vue
 create mode 100644 src/store/modules/d2admin/modules/search.js

diff --git a/src/assets/style/theme/theme-base.scss.REMOVED.git-id b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
index 76786659..0313b944 100644
--- a/src/assets/style/theme/theme-base.scss.REMOVED.git-id
+++ b/src/assets/style/theme/theme-base.scss.REMOVED.git-id
@@ -1 +1 @@
-27d62e35e945646beaa49ba9850fdbce60ed9e66
\ No newline at end of file
+76c08deda5f3f6bd81e91aeb695cae984eab131e
\ No newline at end of file
diff --git a/src/layout/header-aside/components/header-search/index.vue b/src/layout/header-aside/components/header-search/index.vue
new file mode 100644
index 00000000..a2c59425
--- /dev/null
+++ b/src/layout/header-aside/components/header-search/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <el-button class="d2-mr btn-text can-hover" type="text" @click="handleClick">
+    <d2-icon name="search"/>
+  </el-button>
+</template>
+
+<script>
+export default {
+  methods: {
+    handleClick () {
+      this.$emit('click')
+    }
+  }
+}
+</script>
diff --git a/src/layout/header-aside/components/panel-search/index.vue b/src/layout/header-aside/components/panel-search/index.vue
new file mode 100644
index 00000000..95f890b7
--- /dev/null
+++ b/src/layout/header-aside/components/panel-search/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="panel-search">
+    <div class="panel-search__input-group" flex="main:center cross:center">
+      <el-input
+        class="panel-search__input"
+        ref="input"
+        v-model="input"
+        suffix-icon="el-icon-search"
+        placeholder="搜索页面"/>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      input: ''
+    }
+  },
+  methods: {
+    focus () {
+      this.$nextTick(() => {
+        this.$refs.input.focus()
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.panel-search {
+  margin: 20px;
+  .panel-search__input-group {
+    height: 200px;
+    .panel-search__input {
+      width: 300px;
+    }
+  }
+}
+</style>
diff --git a/src/layout/header-aside/layout.vue b/src/layout/header-aside/layout.vue
index 04dce9ce..057750bf 100644
--- a/src/layout/header-aside/layout.vue
+++ b/src/layout/header-aside/layout.vue
@@ -20,6 +20,7 @@
         <!-- 顶栏右侧 -->
         <div class="d2-header-right">
           <!-- 如果你只想在开发环境显示这个按钮请添加 v-if="$env === 'development'" -->
+          <d2-header-search @click="handleSearch"/>
           <d2-header-error-log/>
           <d2-header-fullscreen/>
           <d2-header-theme/>
@@ -37,17 +38,26 @@
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
-        <div class="d2-theme-container-main" flex-box="1" flex="dir:top">
-          <div class="d2-theme-container-main-header" flex-box="0">
-            <d2-tabs/>
-          </div>
-          <div class="d2-theme-container-main-body" flex-box="1">
-            <transition :name="transitionActive ? 'fade-transverse' : ''">
-              <keep-alive :include="keepAlive">
-                <router-view/>
-              </keep-alive>
-            </transition>
-          </div>
+        <div class="d2-theme-container-main" flex-box="1" flex>
+          <transition name="fade-scale">
+            <div v-show="searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <d2-panel-search ref="panelSearch"/>
+            </div>
+          </transition>
+          <transition name="fade-scale">
+            <div v-show="!searchActive" class="d2-theme-container-main-layer" flex="dir:top">
+              <div class="d2-theme-container-main-header" flex-box="0">
+                <d2-tabs/>
+              </div>
+              <div class="d2-theme-container-main-body" flex-box="1">
+                <transition :name="transitionActive ? 'fade-transverse' : ''">
+                  <keep-alive :include="keepAlive">
+                    <router-view/>
+                  </keep-alive>
+                </transition>
+              </div>
+            </div>
+          </transition>
         </div>
       </div>
     </div>
@@ -63,9 +73,11 @@ export default {
     'd2-menu-header': () => import('./components/menu-header'),
     'd2-tabs': () => import('./components/tabs'),
     'd2-header-fullscreen': () => import('./components/header-fullscreen'),
+    'd2-header-search': () => import('./components/header-search'),
     'd2-header-theme': () => import('./components/header-theme'),
     'd2-header-user': () => import('./components/header-user'),
-    'd2-header-error-log': () => import('./components/header-error-log')
+    'd2-header-error-log': () => import('./components/header-error-log'),
+    'd2-panel-search': () => import('./components/panel-search')
   },
   data () {
     return {
@@ -78,6 +90,7 @@ export default {
   computed: {
     ...mapState('d2admin', {
       grayActive: state => state.gray.active,
+      searchActive: state => state.search.active,
       transitionActive: state => state.transition.active,
       asideCollapse: state => state.menu.asideCollapse
     }),
@@ -97,14 +110,24 @@ export default {
     }
   },
   methods: {
-    ...mapMutations('d2admin/menu', [
-      'asideCollapseToggle'
-    ]),
+    ...mapMutations({
+      menuAsideCollapseToggle: 'd2admin/menu/asideCollapseToggle',
+      searchToggle: 'd2admin/search/toggle'
+    }),
     /**
      * 接收点击切换侧边栏的按钮
      */
     handleToggleAside () {
-      this.asideCollapseToggle()
+      this.menuAsideCollapseToggle()
+    },
+    /**
+     * 接收点击搜索按钮
+     */
+    handleSearch () {
+      this.searchToggle()
+      if (this.searchActive) {
+        this.$refs.panelSearch.focus()
+      }
     }
   }
 }
diff --git a/src/store/modules/d2admin/index.js b/src/store/modules/d2admin/index.js
index 6ad3350b..2cc2fbc3 100644
--- a/src/store/modules/d2admin/index.js
+++ b/src/store/modules/d2admin/index.js
@@ -10,6 +10,7 @@ import ua from './modules/ua'
 import gray from './modules/gray'
 import page from './modules/page'
 import transition from './modules/transition'
+import search from './modules/search'
 
 export default {
   namespaced: true,
@@ -25,6 +26,7 @@ export default {
     ua,
     gray,
     page,
-    transition
+    transition,
+    search
   }
 }
diff --git a/src/store/modules/d2admin/modules/search.js b/src/store/modules/d2admin/modules/search.js
new file mode 100644
index 00000000..a4de5849
--- /dev/null
+++ b/src/store/modules/d2admin/modules/search.js
@@ -0,0 +1,24 @@
+export default {
+  namespaced: true,
+  state: {
+    // 搜索面板激活状态
+    active: false
+  },
+  mutations: {
+    /**
+     * @description 切换激活状态
+     * @param {Object} state vuex state
+     */
+    toggle (state) {
+      state.active = !state.active
+    },
+    /**
+     * @description 设置激活模式
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set (state, active) {
+      state.active = active
+    }
+  }
+}