提交前台样式

app/base/base_controller.js

@@ -26,6 +26,9 @@ class BaseController extends Controller {
         ctx.menu = menuList[ctx.controllerName] === undefined ? {} : menuList[ctx.controllerName];
         // 菜单列表
         ctx.menuList = menuList;
+        ctx.showProject = false;
+        ctx.showTender = false;
+        ctx.showTitle = false;
     }
 
     /**

app/controller/project_controller.js

@@ -14,6 +14,17 @@ module.exports = app => {
     class ProjectController extends app.BaseController {
 
         /**
+         * 构造函数
+         *
+         * @param {Object} ctx - egg全局context
+         * @return {void}
+         */
+        constructor(ctx) {
+            super(ctx);
+            ctx.showProject = true;
+        }
+
+        /**
          * 项目信息页面
          *
          * @param {Object} ctx - egg全局变量

app/lib/sql_builder.js

@@ -43,7 +43,7 @@ class SqlBuilder {
         if (Object.keys(data).length <= 0) {
             return;
         }
-        this.setData.push({ field, data});
+        this.setData.push({ field, data });
     }
 
     /**

app/public/css/main.css

@@ -9,7 +9,7 @@ body {
     font-size: 0.9rem
 }
 .btn.disabled, .btn:disabled {
-  color:#999
+    color:#999
 }
 /*自定义css*/
 .form-signin {
@@ -56,104 +56,104 @@ body {
 }
 /*2.主体框架*/
 .header {
-  background:#fff;
-  position: fixed;
-  z-index: 10;
-  width: 100%;
-  height: 50px;
-  top: 0;
-  left: 0
+    background:#fff;
+    position: fixed;
+    z-index: 10;
+    width: 100%;
+    height: 50px;
+    top: 0;
+    left: 0
 }
 .main{
-  position: relative;
-  z-index: 4;
+    position: relative;
+    z-index: 4;
 }
 .main-nav {
-  position: fixed;
-  z-index: 99;
-  width:55px;
-  left: 0;
-  top: 0;
-  height: 100%;
-  background: #33425b;
+    position: fixed;
+    z-index: 99;
+    width:120px;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: #33425b;
 }
 .main-panel{
-  padding-left:55px;
-  box-sizing: border-box;
+    padding-left:120px;
+    box-sizing: border-box;
 }
 .panel-sidebar{
-  box-sizing: border-box;
-  background: #fbfcfd;
-  position: fixed;
-  height: 100%;
-  z-index: 4;
-  left:55px;
-  padding-top: 100px;
-  border-right: 1px solid #ddd;
-  width: 250px;
+    box-sizing: border-box;
+    background: #fbfcfd;
+    position: fixed;
+    height: 100%;
+    z-index: 4;
+    left:120px;
+    padding-top: 100px;
+    border-right: 1px solid #ddd;
+    width: 250px;
 }
 .panel-content{
-  padding:115px 0 0;
-  position: relative;
-  z-index: 3;
-  box-sizing: border-box;
-  overflow-y: auto;
-  height: 100vh;
+    padding:115px 0 0;
+    position: relative;
+    z-index: 3;
+    box-sizing: border-box;
+    overflow-y: auto;
+    height: 100vh;
 }
 .panel-content .content-wrap{
-  margin:0 15px 15px;
+    margin:0 15px 15px;
 }
 .panel-sidebar+.panel-content{
-  padding: 115px 0 0 250px;
+    padding: 115px 0 0 250px;
 }
 .panel-title, .panel-title>.title-bar {
-  height:50px;
-  line-height: 50px
+    height:50px;
+    line-height: 50px
 }
 .panel-title{
-  position: fixed;
-  top: 50px;
-  z-index: 98;
-  width: 100%;
-  box-sizing: border-box;
-  background: #fff;
-  box-shadow: 0 1px 3px rgba(0,0,0,.05);
-  border-top: 1px solid #ddd;
+    position: fixed;
+    top: 50px;
+    z-index: 98;
+    width: 100%;
+    box-sizing: border-box;
+    background: #fff;
+    box-shadow: 0 1px 3px rgba(0,0,0,.05);
+    border-top: 1px solid #ddd;
 }
 .panel-sidebar .panel-title{
-  width:250px;
-  border-right: 1px solid #ddd;
-  box-shadow: 0 1px 3px rgba(0,0,0,.1);
+    width:250px;
+    border-right: 1px solid #ddd;
+    box-shadow: 0 1px 3px rgba(0,0,0,.1);
 }
 .panel-content .panel-title{
-  left: 0;
-  padding-left: 305px;
-  padding-right: 20px;
+    left: 0;
+    padding-left: 370px;
+    padding-right: 20px;
 }
 .panel-content .panel-title.fluid{
-  padding-left:55px
+    padding-left:120px
 }
 .panel-title>.title-bar{
-  padding-left: 20px
+    padding-left: 20px
 }
 .panel-title>.title-bar>h2,.panel-title>.title-main>h2{
-  font-size: 16px;
-  margin:0;
-  height: 50px;
-  line-height: 50px;
-  display:block
+    font-size: 16px;
+    margin:0;
+    height: 50px;
+    line-height: 50px;
+    display:block
 }
 .panel-title>.title-bar>h2 .btn{
-  margin-right:15px
-}
-.panel-title>.title-main .btn {
-  margin:0 0 0 20px
+    margin-right:15px
 }
 .panel-title>.title-main .btn.pull-right {
-  margin:10px 0 0 10px
+    margin:10px 0 0 10px
+}
+.panel-title>.title-main .form-control {
+    margin:10px 0 0 0
 }
 .panel-title>.title-main{
-  padding-left: 15px
+    padding-left: 15px
 }
 /*滚动*/
 .scrollbar-auto {
@@ -176,158 +176,184 @@ body {
 }
 /*头部*/
 .header .logo {
-  float: left;
-  box-shadow: 1px 0 6px rgba(0,0,0,.06);
-  margin-right: 20px;
-  margin:0
+    float: left;
+    box-shadow: 1px 0 6px rgba(0,0,0,.06);
+    margin-right: 20px;
+    margin:0
 }
 .header .logo>a{
-  width:55px;
-  height:50px;
-  line-height: 50px;
-  display: inline-block;
-  color:#fff;
-  font-size:24px;
-  padding:0 10px;
-  transition: all ease .4s;
-  background:#207fd1 url(logo.png) no-repeat;
-  text-indent: -9999px;
-  vertical-align: top
+    width:120px;
+    height:50px;
+    line-height: 50px;
+    display: inline-block;
+    color:#fff;
+    font-size:24px;
+    padding:0 10px;
+    transition: all ease .4s;
+    background:#207fd1 url(logo.png) no-repeat;
+    text-indent: -9999px;
+    vertical-align: top
 }
 .header .logo>a:hover{
-  background-color:#5596cf;
-  text-decoration: none;
+    background-color:#5596cf;
+    text-decoration: none;
 }
 .header-user > div {
-  float:left
+    float:left
 }
 .avatar .pic {
-  height: 35px;
-  width: 35px;
-  border-radius: 100%;
-  display: inline-block;
-  float:left;
-  margin:7px 7px 0 0
+    height: 35px;
+    width: 35px;
+    border-radius: 100%;
+    display: inline-block;
+    float:left;
+    margin:7px 7px 0 0
 }
 .avatar .pic img{
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 100%;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 100%;
 }
 .avatar > a,.msg >a{
-  display: block;
-  height:50px;
-  line-height: 50px;
-  color:#666;
-  padding:0 15px;
-  cursor: pointer;
+    display: block;
+    height:50px;
+    line-height: 50px;
+    color:#666;
+    padding:0 15px;
+    cursor: pointer;
 }
 .avatar > a:hover,.msg > a:hover{
-  text-decoration: none;
-  box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
+    text-decoration: none;
+    box-shadow: inset 0 3px 5px rgba(0,0,0,.125)
 }
 .header-user .msg{
-  border-left:1px solid #eee
+    border-left:1px solid #eee
 }
 .header-user .msg .glyphicon{
-  font-size:20px;
-  vertical-align: middle;
+    font-size:20px;
+    vertical-align: middle;
 }
 .header-user .msg .badge{
-  margin:0 0 0 5px
+    margin:0 0 0 5px
 }
 .header .poj-name {
-  float:left;
-  padding:0 0 0 15px;
-  font-size:18px
+    float:left;
+    padding:0 0 0 15px;
+    font-size:18px
 }
 .header .poj-name a{
-  color:#666
+    color:#666
 }
 .header .poj-name > span{
-  height:50px;
-  line-height:50px;
+    height:50px;
+    line-height:50px;
 }
 /*登陆相关*/
 .login-body{
-  background: #fff
+    background: #fff
 }
 .login-infoinput {
-  margin-top:15%
+    margin-top:15%
 }
 /*侧栏主菜单*/
 .nav-top{
-  padding-top: 50px
+    padding-top: 50px
 }
 .bg-nav a{
-  color:#7786ab;
-  font-size: 24px;
-  width:55px;
-  height: 55px;
-  line-height: 55px;
-  display: inline-block;
+    color:#7786ab;
+    width:120px;
+    height: 55px;
+    line-height: 55px;
+    display: inline-block;
+    padding:0 0 0 10px
 }
-.bg-nav > li.active > a{
-  border-radius: 0;
-  background: #192948
+.bg-nav > li{
+    width:120px
+}
+.bg-nav > li.active{
+    background: #192948
+}
+.bg-nav > li.active a{
+    border-radius: 0;
+    background: #192948
 }
 .bg-nav > li > a:hover,.bg-nav > li.active > a:hover{
-  background: #192948;
-  color:#f2f2f2
+    background: #192948;
+    color:#f2f2f2;
+    text-decoration: none;
 }
 .bg-nav > li + li {
     margin-top:0;
 }
+.bg-nav .sub-menu {
+    list-style:none;
+    padding:0 0 0 20px;
+    width:120px;
+    display: none
+}
+.bg-nav .sub-menu a {
+    width:100px;
+    height:30px;
+    line-height:30px
+}
+.bg-nav .sub-menu:last-child{
+    margin:0 0 20px 0
+}
+.bg-nav .menu-arrow{
+    margin:22px 8px 0 0
+}
 .nav-box h3{
-  font-size: 14px;
-  font-weight: 700;
-  padding-bottom: 4px;
-  border-bottom: 1px solid #e2eaec;
-  padding-right: 15px;
-  margin-bottom: 10px;
-  margin-left: 20px
+    font-size: 14px;
+    font-weight: 700;
+    padding-bottom: 4px;
+    border-bottom: 1px solid #e2eaec;
+    padding-right: 15px;
+    margin-bottom: 10px;
+    margin-left: 20px
 }
 .nav-list li a{
-  color: #333;
-  display: block;
-  height: 35px;
-  line-height: 35px;
-  box-sizing: border-box;
-  padding-left: 17px;
-  padding-right: 45px;
-  text-overflow: ellipsis;
-  position: relative;
+    color: #333;
+    display: block;
+    height: 35px;
+    line-height: 35px;
+    box-sizing: border-box;
+    padding-left: 17px;
+    padding-right: 45px;
+    text-overflow: ellipsis;
+    position: relative;
 }
 .nav-list li a:hover{
-  text-decoration: none;
-  background:#e4e7ea;
-  cursor: pointer;
+    text-decoration: none;
+    background:#e4e7ea;
+    cursor: pointer;
 }
 .nav-list li a .badge{
-  position: absolute;
-  right:17px;
-  top:9px
+    position: absolute;
+    right:17px;
+    top:9px
 }
 .nav-list li.active a{
-  background:#e4e7ea;
-  font-weight: 600
-}
-.nav-list li.active .badge{
-  background:#207fd1
+    background:#e4e7ea;
+    font-weight: 600
 }
 /*内容区*/
 .c-header {
-  padding:0 0 5px
+    padding:0 0 5px
 }
 .c-body{
-  padding:15px;
-  background:#fff;
+    padding:15px;
+    background:#fff;
 }
 .form-group .necessary{
-  font-size:18px;
-  color:#f90000
+    font-size:18px;
+    color:#f90000
+}
+
+.bg-gray {
+    background-color:#bbb!important;
 }
+
 .toast{
     position: absolute;
     top: 0;

app/public/js/global.js

@@ -1,33 +1,33 @@
 /*全局自适应高度*/
-function autoFlashHeight() {
+function autoFlashHeight(){
     var headerHeight = $(".header").height();
     var toolsbarHeight = $(".toolsbar").height();
     var ftoolsbarHeight = $(".toolsbar-f").height();
     var bottomContentHeight = $(".bottom-content").height();
     var toolsBarHeightQ = $(".tools-bar-height-q").height();
     var toolsBarHeightD = $(".tools-bar-height-d").height();
-    $(".main-data-side-q").height($(window).height() - headerHeight - toolsbarHeight - toolsBarHeightQ - 202);
-    $(".main-data-side-d").height($(window).height() - headerHeight - toolsbarHeight - toolsBarHeightD - 202);
-    $(".main-data-top").height($(window).height() - headerHeight - toolsbarHeight - bottomContentHeight - 1);
-    $(".main-data-full").height($(window).height() - headerHeight - toolsbarHeight - 1);
-    $(".main-data-full-fl").height($(window).height() - headerHeight - toolsbarHeight - 37);
-    $(".main-data-not").height($(window).height() - headerHeight - 1);
-    $(".main-data-side-search").height($(window).height() - headerHeight - toolsbarHeight - 64);
-    $(".side-content").height($(window).height() - headerHeight);
-    $(".poj-list").height($(window).height() - headerHeight - toolsbarHeight);
-    $(".form-view").height($(window).height() - headerHeight - ftoolsbarHeight);
-    $(".form-list").height($(window).height() - headerHeight - 50);
+    $(".main-data-side-q").height($(window).height()-headerHeight-toolsbarHeight-toolsBarHeightQ-202);
+    $(".main-data-side-d").height($(window).height()-headerHeight-toolsbarHeight-toolsBarHeightD-202);
+    $(".main-data-top").height($(window).height()-headerHeight-toolsbarHeight-bottomContentHeight-1);
+    $(".main-data-full").height($(window).height()-headerHeight-toolsbarHeight-1);
+    $(".main-data-full-fl").height($(window).height()-headerHeight-toolsbarHeight-37);
+    $(".main-data-not").height($(window).height()-headerHeight-1);
+    $(".main-data-side-search").height($(window).height()-headerHeight-toolsbarHeight-64);
+    $(".side-content").height($(window).height()-headerHeight );
+    $(".poj-list").height($(window).height()-headerHeight-toolsbarHeight);
+    $(".form-view").height($(window).height()-headerHeight-ftoolsbarHeight);
+    $(".form-list").height($(window).height()-headerHeight-50 );
 };
 $(window).resize(autoFlashHeight);
 /*全局自适应高度结束*/
-$(function () {
+$(function(){
     /*侧滑*/
-    $(".open-sidebar").click(function () {
-        $(".slide-sidebar").animate({width: "800"}).addClass("open");
+    $(".open-sidebar").click(function(){
+        $(".slide-sidebar").animate({width:"800"}).addClass("open");
     });
-    $("body").click(function (event) {
+    $("body").click(function(event){
         var e = event || window.event; //浏览器兼容性
-        if (!$(event.target).is('a')) {
+        if(!$(event.target).is('a')) {
             var elem = event.target || e.srcElement;
             while (elem) { //循环判断至跟节点，防止点击的是div子元素
                 if (elem.className == "open-sidebar" || elem.className == 'slide-sidebar open') {
@@ -35,7 +35,7 @@ $(function () {
                 }
                 elem = elem.parentNode;
             }
-            $(".slide-sidebar").animate({width: "0"}).removeClass("open")// 关闭处理
+            $(".slide-sidebar").animate({width:"0"}).removeClass("open")// 关闭处理
         }
 
     });
@@ -44,6 +44,22 @@ $(function () {
     $(function () {
         $('[data-toggle="tooltip"]').tooltip()
     });
+    /*侧栏菜单*/
+    $(".bg-nav > li > a").click(function() {
+        var self = $(this);
+        var subMenu = $(this).siblings('ul.sub-menu');
+        if(subMenu.length > 0) {
+            if(subMenu.is(":visible")) {
+                self.find('.menu-arrow').removeClass('fa-angle-up').addClass('fa-angle-down');
+                subMenu.slideUp('fast');
+                self.parent().removeClass('active');
+            }else{
+                self.parent().addClass('active');
+                self.find('.menu-arrow').removeClass('fa-angle-down').addClass('fa-angle-up');
+                subMenu.slideDown('fast');
+            }
+        }
+    });
 
     // 数据提交
     $("#submit-form").click(function() {

app/view/layout/layout.ejs

@@ -23,25 +23,15 @@
 <body>
 <div class="header">
     <h1 class="logo"><a>主页-纵横变更管理系统</a></h1>
-    <% if (Object.keys(ctx.session.sessionProject).length > 0) { %>
+    <% if(ctx.showProject) { %>
+    <% include ./project_list.ejs %>
+    <% } %>
+    <% if(ctx.showTender) { %>
+    <% include ./tender_list.ejs %>
+    <% } %>
+    <% if(ctx.showTitle) { %>
     <div class="poj-name">
-        <span class="name"><%= ctx.session.sessionProject.name %></span>
-        <% if (ctx.session.sessionProjectList.length > 0) { %>
-        <div class="btn-group">
-            <a class=" btn" data-toggle="dropdown">
-                <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
-            </a>
-            <div class="dropdown-menu">
-                <% ctx.session.sessionProjectList.forEach(function(project) {%>
-                <% if (project.name !== null) {%>
-                <a href="/project/switch/<%= project.id %>" class="dropdown-item"><%= project.name %></a>
-                <% } %>
-                <% }) %>
-            </div>
-        </div>
-        <% } %>
-        <a href="/project/info" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i
-                    class="fa fa-cogs"></i></a>
+        <span class="name"><%= ctx.menu.name %></span>
     </div>
     <% } %>
     <div class="header-box">

app/view/layout/menu.ejs

@@ -1,17 +1,23 @@
 <div class="main-nav">
     <div class="nav-top">
-        <ul class="nav nav-pills flex-column nav-fill bg-nav">
-            <li class="nav-item <% if(ctx.controllerName === 'dashboard') { %>active<% } %>">
-                <a href="/dashboard" data-toggle="tooltip" data-placement="right" title="主页">
-                    <i class="fa fa-dashboard"></i>
-                </a>
-            </li>
+        <ul class="nav nav-pills flex-column bg-nav">
             <% for (const index in ctx.menuList) { %>
             <% if (ctx.menuList[index].display === undefined || !ctx.menuList[index].display) { continue } %>
             <li class="nav-item <% if(ctx.controllerName === index) { %>active<% } %>">
-                <a href="<%= ctx.menuList[index].url %>" data-toggle="tooltip" data-placement="right" title="<%= ctx.menuList[index].name %>">
+                <a href="<%= ctx.menuList[index].children === null ? ctx.menuList[index].url : 'javascript:void(0);' %>" data-toggle="tooltip" data-placement="right" title="<%= ctx.menuList[index].name %>">
                     <i class="fa <%= ctx.menuList[index].icon %>"></i>
+                    <span><%= ctx.menuList[index].name %></span>
+                    <% if (ctx.menuList[index].children !== null) { %>
+                    <i class="fa fa-angle-down pull-right menu-arrow"></i>
+                    <% } %>
                 </a>
+                <% if (ctx.menuList[index].children !== null) { %>
+                <ul class="sub-menu">
+                    <% for (const childIndex in ctx.menuList[index].children) { %>
+                    <li><a href="<%= ctx.menuList[index].children[childIndex].url %>"><%= ctx.menuList[index].children[childIndex].name %></a></li>
+                    <% } %>
+                </ul>
+                <% } %>
             </li>
             <% } %>
         </ul>

app/view/layout/project_list.ejs

@@ -0,0 +1,21 @@
+<% if (Object.keys(ctx.session.sessionProject).length > 0) { %>
+<div class="poj-name">
+    <span class="name"><%= ctx.session.sessionProject.name %></span>
+    <% if (ctx.session.sessionProjectList.length > 0) { %>
+    <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown">
+            <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换项目"></span>
+        </a>
+        <div class="dropdown-menu">
+            <% ctx.session.sessionProjectList.forEach(function(project) {%>
+            <% if (project.name !== null) {%>
+            <a href="/project/switch/<%= project.id %>" class="dropdown-item"><%= project.name %></a>
+            <% } %>
+            <% }) %>
+        </div>
+    </div>
+    <% } %>
+    <a href="/project/info" class="btn" data-toggle="tooltip" data-placement="bottom" title="项目设置"><i
+            class="fa fa-cogs"></i></a>
+</div>
+<% } %>

app/view/layout/tender_list.ejs

@@ -0,0 +1,13 @@
+<div class="poj-name">
+    <span class="name">WWUJ-1</span>
+    <div class="btn-group">
+        <a class=" btn" data-toggle="dropdown">
+            <span class="fa fa-caret-down" data-toggle="tooltip" data-placement="bottom" title="切换标段"></span>
+        </a>
+        <div class="dropdown-menu">
+            <a href="#" class="dropdown-item">WWUJ-2</a>
+            <a href="#" class="dropdown-item">WWUJ-3</a>
+            <a href="#" class="dropdown-item">WWUJ-4</a>
+        </div>
+    </div>
+</div>

config/menu.js

@@ -9,6 +9,20 @@
  */
 
 const menu = {
+    dashboard: {
+        name: '待办事项',
+        icon: 'fa-dashboard',
+        display: true,
+        url: '/dashboard',
+        children: null,
+    },
+    tender: {
+        name: '标段管理',
+        icon: 'fa-list-ul',
+        display: true,
+        url: '/tender',
+        children: null,
+    },
     project: {
         name: '项目设置',
         icon: null,
@@ -32,15 +46,37 @@ const menu = {
         name: '台帐管理',
         icon: 'fa-list-alt',
         display: true,
-        children: null,
-        url: '/ledger',
+        url: '',
+        children: {
+            explode: {
+                name: '台账分解',
+                url: '/ledger/explode',
+            },
+            change: {
+                name: '台账变更',
+                url: '/ledger/change',
+            },
+            index: {
+                name: '计量台账',
+                url: '/ledger/index',
+            },
+        },
     },
     measure: {
         name: '计量管理',
         icon: 'fa-calendar-check-o',
         display: true,
-        children: null,
-        url: '/measure',
+        url: '',
+        children: {
+            middle: {
+                name: '中间计量',
+                url: '/measure/middle',
+            },
+            stage: {
+                name: '期计量',
+                url: '/measure/stage',
+            },
+        },
     },
     change: {
         name: '变更管理',