Ver código fonte

提交breadcrumb功能

wuxw 6 anos atrás
pai
commit
d9b2c4b780

+ 19 - 0
WebService/src/main/resources/components/breadcrumb/breadcrumb.html

@@ -0,0 +1,19 @@
+<div id="breadcrumb" class="border-bottom white-bg page-heading">
+    <div class="row">
+        <div class="col-lg-12" style="margin-left: 5px;">
+            <h2>{{breadCrumbs.length > 0 ? breadCrumbs[breadCrumbs.length-1].pageName : ''}}</h2>
+            <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/">首页</a>
+                </li>
+                <li class="breadcrumb-item" v-for="breadCrumb in breadCrumbs">
+                    <span v-if="breadCrumb.parentPageName == ''">
+                        {{breadCrumb.parentPageName}}
+                    </span>
+                    <strong v-if="breadCrumb.parentPageName != ''">{{breadCrumb.pageName}}</strong>
+                </li>
+
+            </ol>
+        </div>
+    </div>
+</div>

+ 68 - 0
WebService/src/main/resources/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,68 @@
+/**
+    菜单 处理
+**/
+(function(vc){
+    var vm = new Vue({
+       el:'#breadcrumb',
+       data:{
+                breadCrumbs:[]
+       },
+       mounted:function(){
+           this._freshBreadCrumbByUrl();
+       },
+       methods:{
+           _freshBreadCrumbByUrl:function(){
+
+                var _tmpMenus = vc.getMenus();
+                var _url = vc.getUrl();
+
+                /**
+                    正常情况下是走不到这里的,
+                    因为系统登录时,就已经加载菜单信息缓存到本地了
+
+                **/
+                if(_tmpMenus == null || _tmpMenus == undefined){
+                    return ;
+                }
+                for(var menuIndex =0 ; menuIndex < _tmpMenus.length;menuIndex ++){
+                    //两层结构的情况
+                    if(_tmpMenus[menuIndex].hasOwnProperty('childs')){
+                        var _childs = _tmpMenus[menuIndex].childs;
+                        for(var _childIndex = 0; _childIndex < _childs.length; _childIndex ++){
+                            if(this._getRealUrl(_childs[_childIndex].href) == _url){
+                                var _tmpBreadCrumbInf = {
+                                    parentPageName: "",
+                                    pageName: _tmpMenus[menuIndex].name
+                                };
+                                vm.breadCrumbInfo.breadCrumbs.push(_tmpBreadCrumbInf);
+                                _tmpBreadCrumbInf = {
+                                    parentPageName: _tmpMenus[menuIndex].name,
+                                    pageName: _childs[_childIndex].name
+                                };
+                               vm.breadCrumbs.push(_tmpBreadCrumbInf);
+                                break;
+                            }
+                        }
+                    }else{
+                        if(this._getRealUrl(_tmpMenus[menuIndex].href) == url){
+                            var _tmpBreadCrumbInf = {
+                                parentPageName: "首页",
+                                pageName: _tmpMenus[menuIndex].name
+                            };
+                            vm.breadCrumbs.push(_tmpBreadCrumbInf);
+                        }
+                    }
+                }
+           },
+
+            _getRealUrl:function(_url){
+                if(_url.indexOf('?') != -1){
+                    return _url.substring(0, _url.indexOf('?'));
+                }
+                return _url;
+            }
+       },
+
+    });
+
+})(window.vc)

+ 2 - 1
WebService/src/main/resources/components/list-demo/listDemo.html

@@ -1,4 +1,5 @@
-<div id="component" class="wrapper wrapper-content animated fadeInRight ecommerce">
+<div id="component" >
+    <!-- class="wrapper wrapper-content animated fadeInRight ecommerce" -->
     <div class="row">
         <div class="col-lg-12">
             <div class="ibox">

+ 10 - 0
WebService/src/main/resources/static/js/core.js

@@ -225,6 +225,16 @@
 
         return "";
     };
+    //查询url
+    vc.getUrl = function(){
+        //返回当前 URL 的查询部分(问号 ? 之后的部分)。
+        var urlParameters = location.search;
+        //如果该求青中有请求的参数,则获取请求的参数,否则打印提示此请求没有请求的参数
+        if(urlParameters.indexOf('?') != -1){
+            return urlParameters.substring(0, urlParameters.indexOf('?'));
+        }
+        return urlParameters;
+    };
     //对象转get参数
     vc.objToGetParam =function(obj){
          var str = [];

+ 6 - 1
WebService/src/main/resources/views/demoFlow.html

@@ -5,7 +5,7 @@
       xmlns:vc="http://www.thymeleaf.org">
 <head>
     <meta charset="UTF-8"/>
-    <title>小区楼初始化|java110</title>
+    <title>demo学习|java110</title>
     <vc:create name="commonTop"></vc:create>
 </head>
 <body>
@@ -18,6 +18,11 @@
         <div class="row border-bottom">
             <vc:create name="nav"></vc:create>
         </div>
+
+        <div class="wrapper wrapper-content" style="padding-bottom: 0px;">
+            <vc:create name="breadcrumb"></vc:create>
+        </div>
+
         <!-- id="component" -->
         <div class="wrapper wrapper-content animated fadeInRight">
             <vc:create name="listDemo"></vc:create>

+ 33 - 0
WebService/src/main/resources/views/serviceBindingFlow.html

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en"
+      xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:th="http://www.thymeleaf.org"
+      xmlns:vc="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8"/>
+    <title>服务绑定|java110</title>
+    <vc:create name="commonTop"></vc:create>
+</head>
+<body>
+<vc:create name="bodyTop"></vc:create>
+<div id="wrapper">
+    <vc:create name="menu"></vc:create>
+
+
+    <div id="page-wrapper" class="gray-bg dashbard-1">
+        <div class="row border-bottom">
+            <vc:create name="nav"></vc:create>
+        </div>
+        <!-- id="component" -->
+        <div class="wrapper wrapper-content animated fadeInRight">
+            <vc:create name="appManage"></vc:create>
+        </div>
+
+        <vc:create name="copyright"></vc:create>
+
+    </div>
+</div>
+
+<vc:create name="commonBottom"></vc:create>
+</body>
+</html>