菜单组件化继续优化

朱兆平
src/common/js/util.js
src/components/NavMenu/index.vue
src/components/TabMenu/index.vue
src/routes.js
src/views/Home.vue
src/views/HomeNew.vue
src/views/nav1/role.vue
--- a/src/common/js/util.js
查看文件 @0cef10f
+++ b/src/common/js/util.js
查看文件 @0cef10f
@@ -72,7 +72,7 @@ export default {
     },
     checkNull: params => {
-        if (params!==null  && typeof(params)!="undefined"){
+        if (params!==null  && typeof(params)!="undefined" && params !== ""){
             return true;
         }else {
             return false;
--- a/src/components/NavMenu/index.vue
查看文件 @0cef10f
+++ b/src/components/NavMenu/index.vue
查看文件 @0cef10f
@@ -19,7 +19,7 @@
 <!--            </el-radio-group>-->
             <div align="center" style="height: 66px;line-height: 66px;">
-                <img id="logo" src="~@/assets/logo1.png">
+<!--                <img id="logo" src="~@/assets/logo1.png">-->
                 <h1 id="logo-text" style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px"> &nbsp; &nbsp;物流公共信息服务平台</h1>
             </div>
             <template v-for="(item,index) in menu">
--- a/src/components/TabMenu/index.vue
查看文件 @0cef10f
+++ b/src/components/TabMenu/index.vue
查看文件 @0cef10f
@@ -7,22 +7,22 @@
                  :closable = "tabCloseable"
                  @tab-click='tabClick'
                  @tab-remove="tabRemove"
-                 style="width: 100%;margin-top: 0px;height: 50px">
+                 style="width: 100%;margin-top: 0px;">
             <el-tab-pane
                     v-for="(item, index) in this.$store.state.openTab"
                     :key="item.name"
                     :label="item.name"
                     :name="item.route">
+                <section class="content-container">
+                    <div>
+                        <el-col :span="24" class="content-wrapper">
+                            <transition name="fade" mode="out-in">
+                                <router-view></router-view>
+                            </transition>
+                        </el-col>
+                    </div>
+                </section>
             </el-tab-pane>
-            <section class="content-container">
-                <div>
-                    <el-col :span="24" class="content-wrapper">
-                        <transition name="fade" mode="out-in">
-                            <router-view></router-view>
-                        </transition>
-                    </el-col>
-                </div>
-            </section>
         </el-tabs>
     </div>
 </template>
@@ -145,9 +145,12 @@
     }
     /*底层背景色*/
     .el-tabs__nav-scroll{
-        background-color: rgb(239,243,246);
+        /*background-color: rgb(239,243,246);*/
     }
-    /*首个内部边框*/
+    .el-tabs--card>.el-tabs__header{
+        border: none;
+    }
+        /*首个内部边框*/
     .el-tabs--card>.el-tabs__header .el-tabs__item:first-child{
         border: 1px solid rgba(80,109,130,.64);
     }
@@ -164,9 +167,9 @@
         color:#495060;
         height: 26px;
         border: 1px solid rgba(80,109,130,.64);
-        margin: 4px 3px;
+        margin: 0px 3px;
         line-height: 26px;
-        border-radius: 5px 5px 0 0;
+        border-radius: 0 0 5px 5px;
         background-color: #fff;
         font-size: 12px;
         font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;
@@ -174,7 +177,7 @@
     /*    选中的黑框的样式*/
     .el-tabs--card>.el-tabs__header .el-tabs__item.is-active{
         border-bottom: 1px solid rgba(80,109,130,.64);
-        border-radius: 5px 5px 0 0;
+        border-radius: 0 0 5px 5px;
         background-color: #398af1;
         color: #fff;
         border-color: #398af1;
--- a/src/routes.js
查看文件 @0cef10f
+++ b/src/routes.js
查看文件 @0cef10f
@@ -189,20 +189,14 @@ let routes = [
     // 货运系统--航班预配
     {
         path: '/domdep',
-        component: Home,
+        component: HomeNew,
         name: '国内出港',
         iconCls: 'el-icon-position',
         children: [
             { path: '/preConfiguration', component: preConfiguration, name: '航班预配' },
             { path: '/allocate', component: allocate, name: '航班配载' },
             { path: '/documents', component: documents, name: '航班文件' },
-            { path: '/charge', component: charge, name: '付费处理' },
-
-            { path: '/perm', component: Perm, name: '权限管理' },
-            { path: '/log', component: LOG, name: '系统日志' },
-            { path: '/department', component: Department, name: '部门管理' },
-            { path: '/company', component: Company, name: '公司管理'},
-            { path: '/group', component: Group, name: '集团管理'}
+            { path: '/charge', component: charge, name: '付费处理' }
         ]
     },
     {
@@ -234,7 +228,7 @@ let routes = [
     },
     {
         path: '/output',
-        component: Home,
+        component: HomeNew,
         name: '国际出港业务申报',
         iconCls: 'el-icon-collection',
         children: [
@@ -310,7 +304,7 @@ let routes = [
     {
         path: '/nmms2',
-        component: Home,
+        component: HomeNew,
         name: '进港业务申报',
         iconCls: 'fa fa-id-card-o',
         children: [
@@ -328,7 +322,7 @@ let routes = [
     // 货运系统--航班预配
     {
         path: '/flight_scheduling',
-        component: Home,
+        component: HomeNew,
         name: '航班计划',
         iconCls: 'el-icon-delete-location',
         children: [
@@ -348,7 +342,7 @@ let routes = [
     },
     {
         path: '/airtransport',
-        component: Home,
+        component: HomeNew,
         name: '通用业务申报',
         iconCls:'el-icon-goods',
         children:[
@@ -362,7 +356,7 @@ let routes = [
     },
     {
         path: '/querytransport',
-        component: Home,
+        component: HomeNew,
         name: '通用业务查询',
         iconCls:'el-icon-goods',
         children:[
@@ -376,7 +370,7 @@ let routes = [
     },
     {
         path: '/input',
-        component: Home,
+        component: HomeNew,
         name: '进港航班申报',
         iconCls:'el-icon-goods',
         children:[
@@ -402,7 +396,7 @@ let routes = [
     },
     {
         path: '/',
-        component: Home,
+        component: HomeNew,
         name: '转关运抵',
         iconCls: 'el-icon-delete-location',
         children: [
@@ -411,7 +405,7 @@ let routes = [
     },
     {
         path: '/out',
-        component: Home,
+        component: HomeNew,
         name: '出港航班申报',
         iconCls:'el-icon-goods',
         children:[
@@ -425,7 +419,7 @@ let routes = [
     },
     {
         path: '/at',
-        component: Home,
+        component: HomeNew,
         name: '在港动态',
         iconCls:'el-icon-goods',
         children:[
--- a/src/views/Home.vue
查看文件 @0cef10f
+++ b/src/views/Home.vue
查看文件 @0cef10f
@@ -327,7 +327,7 @@
         .header {
             height: 70px;
             line-height: 70px;
-            background: $color-primary url("~img/banner.png");
+            background: $color-primary url("~img/air-banner.png");
             color:#fff;
             .userinfo {
                 text-align: right;
--- a/src/views/HomeNew.vue
查看文件 @0cef10f
+++ b/src/views/HomeNew.vue
查看文件 @0cef10f
@@ -10,9 +10,9 @@
                     <!--                    ;margin-top: 80px;z-index:9999;margin-left: 170px-->
                             <i  style="color:#a6b6c6;vertical-align: middle;line-height: 60px;" :class="[collapsed?'el-icon-s-unfold':'el-icon-s-fold']"></i>
                 </div>
+                <i class="el-icon-question" style="vertical-align: middle;"></i>
+                <i class="el-icon-message-solid" style="vertical-align: middle;"></i>
                 <el-dropdown trigger="hover" style="margin-top:10px">
-                    <i class="el-icon-question" style="vertical-align: middle;"></i>
-                    <i class="el-icon-message-solid" style="vertical-align: middle;"></i>
                     <span class="el-dropdown-link userinfo-inner">
                         <img width="40" height="40" style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
                     <el-dropdown-menu slot="dropdown">
@@ -25,7 +25,7 @@
                 </el-dropdown>
             </el-header>
-            <el-main style="background-color:#f5f7fd;padding:10px">
+            <el-main>
                 <TabMenu></TabMenu>
             </el-main>
         </el-container>
@@ -52,7 +52,7 @@
                 rotate:false,
                 sysName:'',
                 collapsed:false,
-                // sysUserName: '',
+                sysUserName: '',
                 sysUserId:'',
                 // sysUserAvatar: '',
                 isRouterAlive: true,
@@ -181,8 +181,9 @@
             width: 30px;
         }
     }
-    main{
-
+    main.el-main{
+        background-color:#f5f7fd;
+        padding:0 10px 10px 10px;
     }
 </style>
--- a/src/views/nav1/role.vue
查看文件 @0cef10f
+++ b/src/views/nav1/role.vue
查看文件 @0cef10f
@@ -15,7 +15,7 @@
 					<el-button type="success" @click="handleAdd" icon="el-icon-document">新&emsp;&emsp;增</el-button>
 				</el-form-item>
 				<el-form-item>
-					<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
+					<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0" icon="el-icon-delete">批量删除</el-button>
 				</el-form-item>
@@ -115,11 +115,24 @@
 		</el-dialog>
 		<!--权限设置界面-->
-		<el-dialog title="岗位的权限设置" :visible.sync="PermFormVisible" :close-on-click-modal="false">
+		<el-dialog title="岗位的权限设置"
+				   :visible.sync="PermFormVisible"
+				   :close-on-click-modal="false"
+				   top="5vh"
+		>
+			<el-row>
+				<el-col :span="4" >
+					<el-button type="primary" @click.native="treeMerge(false)">合并节点</el-button>
+				</el-col>
+				<el-col :span="4">
+					<el-button type="success" @click.native="treeMerge(true)">展开节点</el-button>
+				</el-col>
+			</el-row>
 			<el-form :model="permForm" label-width="80px"  ref="permForm">
 				<el-tree :data="permissons" :props="treeDefaultProps"
 					@check="clickDeal"
-					show-checkbox highlight-current default-expand-all check-on-click-node check-strictly
+					:default-expand-all = "treeExpand"
+					show-checkbox highlight-current  check-on-click-node check-strictly
 					node-key="permissionId" ref="tree">
 				</el-tree>
 			</el-form>
@@ -158,6 +171,7 @@
                     children: 'children',
                     label: 'name',
                 },
+				treeExpand: false,
                 departmentNameList:[],
 				roles: [],
 				permissons: [],
@@ -209,6 +223,12 @@
 			}
 		},
 		methods: {
+			treeMerge: function (expand) {
+				this.treeExpand = expand;
+				for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
+					this.$refs.tree.store._getAllNodes()[i].expanded=this.treeExpand;
+				}
+			},
 			handleCurrentChange(val) {
 				this.pageNum = val;
 				this.getRoles();