2.1.3 大屏版本发布

ant-design-vue-jeecg/src/components/tools/UserMenu.vue

@@ -1,5 +1,26 @@
 <template>
   <div class="user-wrapper" :class="theme">
+    <!-- update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
+    <!-- update-begin author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
+    <span class="action" @click="showClick">
+      <a-icon type="search"></a-icon>
+    </span>
+    <span v-show="shows" class="borders">
+      <a-select
+        class="search-input"
+        showSearch
+        :showArrow="false"
+        placeholder="搜索菜单"
+        optionFilterProp="children"
+        :filterOption="filterOption"
+        @change="searchMethods"
+        @blur="hiddenClick"
+      >
+        <a-select-option v-for="site in search " :value="site.id">{{site.meta.title}}</a-select-option>
+      </a-select>
+    </span>
+    <!-- update-end author:sunjianlei date:20191@20 for: 解决全局样式冲突的问题 -->
+    <!-- update_end  author:zhaoxin date:20191129 for: 做头部菜单栏导航 -->
     <span class="action">
       <a class="logout_title" target="_blank" href="http://jeecg-boot.mydoc.io">
         <a-icon type="question-circle-o"></a-icon>
@@ -66,12 +87,19 @@
   import UserPassword from './UserPassword'
   import SettingDrawer from "@/components/setting/SettingDrawer";
   import DepartSelect from './DepartSelect'
-  import { mapActions, mapGetters } from 'vuex'
+  import { mapActions, mapGetters,mapState } from 'vuex'
   import { mixinDevice } from '@/utils/mixin.js'
 
   export default {
     name: "UserMenu",
     mixins: [mixinDevice],
+    data(){
+      return{
+        //菜单搜索
+        search:[],
+        shows:false
+      }
+    },
     components: {
       HeaderNotice,
       UserPassword,
@@ -85,7 +113,31 @@
         default: 'dark'
       }
     },
+    /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+    created() {
+      let lists = []
+      console.log("permissionMenuList: ",this.permissionMenuList)
+      this.searchMenus(lists,this.permissionMenuList)
+      this.search=[...lists]
+      console.log(this.search)
+    },
+    computed: {
+      ...mapState({
+        // 后台菜单
+        permissionMenuList: state => state.user.permissionList
+
+      })
+    },
+    /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
     methods: {
+      /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+      showClick(){
+        this.shows = !this.shows
+      },
+      hiddenClick(){
+        this.shows = false
+      },
+      /* update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
       ...mapActions(["Logout"]),
       ...mapGetters(["nickname", "avatar","userInfo"]),
       getAvatar(){
@@ -122,11 +174,54 @@
       },
       systemSetting(){
         this.$refs.settingDrawer.showDrawer()
+      },
+      /* update_begin author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
+      searchMenus(arr,menus){
+        for(let i of menus){
+          if(!i.hidden && "layouts/RouteView"!==i.component){
+           arr.push(i)
+          }
+          if(i.children&& i.children.length>0){
+            this.searchMenus(arr,i.children)
+          }
+        }
+      },
+      filterOption(input, option) {
+        return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+      },
+      searchMethods(value){
+        let jump = this.search.filter(item=>item.id==value)
+        this.$router.push({ path:jump[0].path})
       }
+      /*update_end author:zhaoxin date:20191129 for: 做头部菜单栏导航*/
     }
   }
 </script>
 
+<style lang="scss" scoped>
+  /* update_begin author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
+  /* update-begin author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
+  .user-wrapper .search-input {
+    width: 180px;
+    color: white;
+
+    /deep/ {
+      .ant-select-selection {
+        background-color: inherit;
+        border: 0;
+        border-bottom: 1px solid white;
+      }
+
+      .ant-select-selection__placeholder,
+      .ant-select-search__field__placeholder {
+        color: inherit;
+      }
+    }
+  }
+  /* update-end author:sunjianlei date:20191220 for: 解决全局样式冲突问题 */
+  /* update_end author:zhaoxin date:20191129 for: 让搜索框颜色能随主题颜色变换*/
+</style>
+
 <style scoped>
   .logout_title {
     color: inherit;