朱兆平 / vue_cli · 提交

转到一个项目

作者 朱兆平
提交 e918b85cfbea00c91c7ae904815dff3e9f50462d 1 个父辈 b587d24c

界面美化

内嵌 并排对比
正在显示 9 个修改的文件 包含 286 行增加 和 29 行删除
@@ -91,6 +91,7 @@ var axois_init = { @@ -91,6 +91,7 @@ var axois_init = {
91 sessionStorage.removeItem('user'); 91 sessionStorage.removeItem('user');
92 sessionStorage.removeItem('menu'); 92 sessionStorage.removeItem('menu');
93 sessionStorage.removeItem('token'); 93 sessionStorage.removeItem('token');
  94 + next()
94 }else{ 95 }else{
95 let user = JSON.parse(sessionStorage.getItem('user')); 96 let user = JSON.parse(sessionStorage.getItem('user'));
96 if(sessionStorage.getItem('token')){ 97 if(sessionStorage.getItem('token')){
@@ -99,9 +100,11 @@ var axois_init = { @@ -99,9 +100,11 @@ var axois_init = {
99 100
100 if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) { 101 if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
101 next({ path: '/login' }) 102 next({ path: '/login' })
  103 + }else{
  104 + next()
102 } 105 }
103 } 106 }
104 - next() 107 +
105 }); 108 });
106 } 109 }
107 } 110 }
  1 +<template>
  2 +</template>
  3 +
  4 +<script>
  5 + export default {
  6 + name: "ChangeIcon",
  7 + mounted() {
  8 + console.log("changeicon mounted")
  9 + // this.$emit('icon');
  10 + },
  11 + methods: {
  12 + childMethod() {
  13 + this.$emit('icon');
  14 + }
  15 + }
  16 + }
  17 +</script>
  18 +
  19 +<style scoped>
  20 +
  21 +</style>
@@ -18,15 +18,15 @@ @@ -18,15 +18,15 @@
18 <!-- <el-radio-button :label="true">收起</el-radio-button>--> 18 <!-- <el-radio-button :label="true">收起</el-radio-button>-->
19 <!-- </el-radio-group>--> 19 <!-- </el-radio-group>-->
20 20
21 - <div align="center" style="background-color: #2b2f3a;height: 67px">  
22 - <img src="~@/assets/logo1.png">  
23 - <h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1> 21 + <div align="center" style="height: 66px;line-height: 66px;">
  22 + <img id="logo" src="~@/assets/logo1.png">
  23 + <h1 id="logo-text" style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px"> &nbsp; &nbsp;物流公共信息服务平台</h1>
24 </div> 24 </div>
25 <template v-for="(item,index) in menu"> 25 <template v-for="(item,index) in menu">
26 <el-submenu :index="index+''" v-if="item.hasChild"> 26 <el-submenu :index="index+''" v-if="item.hasChild">
27 <template slot="title"> 27 <template slot="title">
28 <i :class="item.iconCls"></i> 28 <i :class="item.iconCls"></i>
29 - <span slot="title">{{item.name}}</span> 29 + <span slot="title" class="my-el-menu-item">{{item.name}}</span>
30 </template> 30 </template>
31 <el-menu-item v-for="child in item.children" 31 <el-menu-item v-for="child in item.children"
32 :index="child.path" 32 :index="child.path"
@@ -38,7 +38,7 @@ @@ -38,7 +38,7 @@
38 </el-submenu> 38 </el-submenu>
39 <el-menu-item v-if="!item.hasChild" :index="item.path"> 39 <el-menu-item v-if="!item.hasChild" :index="item.path">
40 <i :class="item.iconCls"></i> 40 <i :class="item.iconCls"></i>
41 - <span slot="title">{{item.name}}</span> 41 + <span slot="title" class="my-el-menu-item">{{item.name}}</span>
42 </el-menu-item> 42 </el-menu-item>
43 </template> 43 </template>
44 </el-menu> 44 </el-menu>
@@ -48,9 +48,11 @@ @@ -48,9 +48,11 @@
48 import userInfo from '@/api/base'; 48 import userInfo from '@/api/base';
49 import {userMenu} from '@/api/perm_api'; 49 import {userMenu} from '@/api/perm_api';
50 import {mapActions, mapGetters} from 'vuex' 50 import {mapActions, mapGetters} from 'vuex'
  51 + import ChangeIcon from './ChangeIcon'
51 export default { 52 export default {
52 name: 'NavMenus', 53 name: 'NavMenus',
53 props:['collapsed'], 54 props:['collapsed'],
  55 + components:{ChangeIcon},
54 data() { 56 data() {
55 return { 57 return {
56 rotate:false, 58 rotate:false,
@@ -92,7 +94,7 @@ @@ -92,7 +94,7 @@
92 getUserMenu:function(){ 94 getUserMenu:function(){
93 const _this=this; 95 const _this=this;
94 const para={ 96 const para={
95 - userId:userInfo.userId 97 + userId:JSON.parse(sessionStorage.getItem('user')).userId
96 }; 98 };
97 userMenu(para).then((res) => { 99 userMenu(para).then((res) => {
98 console.log("ce"+res.data); 100 console.log("ce"+res.data);
@@ -126,18 +128,41 @@ @@ -126,18 +128,41 @@
126 }) 128 })
127 }) 129 })
128 }, 130 },
  131 + changeIcon: function () {
  132 + this.$nextTick(function(){
  133 + let doms = document.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down');
  134 + if (doms && doms.length>0){
  135 + let domArr = Array.from(doms)
  136 + domArr.forEach(function (item,index) {
  137 + item.className = "el-submenu__icon-arrow el-icon-caret-bottom";
  138 + })
  139 + }
  140 + })
  141 + }
129 }, 142 },
130 computed: { 143 computed: {
131 ...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName 144 ...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
132 }, 145 },
133 mounted() { 146 mounted() {
134 - console.log(userInfo); 147 + },
  148 + created() {
135 this.initMenu(); 149 this.initMenu();
136 - 150 + },
  151 + watch: {
  152 + menu(value) {
  153 + this.$nextTick(function(){
  154 + this.changeIcon();
  155 + })
  156 + }
137 } 157 }
138 } 158 }
139 </script> 159 </script>
140 -<style scoped lang="scss"> 160 +<style>
  161 + .my-el-menu-item{
  162 + color:#bcbfc5;
  163 + }
  164 +</style>
  165 +<style lang="scss">
141 166
142 </style> 167 </style>
143 <style scoped lang="scss"> 168 <style scoped lang="scss">
@@ -152,12 +177,9 @@ @@ -152,12 +177,9 @@
152 177
153 } 178 }
154 .logo-width{ 179 .logo-width{
155 - width:22%;  
156 - margin: -20px;  
157 } 180 }
158 .logo-collapse-width{ 181 .logo-collapse-width{
159 width:90px; 182 width:90px;
160 - margin: -20px;  
161 183
162 } 184 }
163 /*el-submenu__title:hover {*/ 185 /*el-submenu__title:hover {*/
1 <template> 1 <template>
2 - <div style="width: 100%;height: 50px">  
3 - <Assembly></Assembly> 2 + <div style="width: 100%;">
  3 +<!-- <Assembly></Assembly>-->
4 <el-tabs v-model="activeIndex" 4 <el-tabs v-model="activeIndex"
5 v-if="openTab.length" 5 v-if="openTab.length"
6 type="card" 6 type="card"
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 :name="item.route"> 15 :name="item.route">
16 </el-tab-pane> 16 </el-tab-pane>
17 <section class="content-container"> 17 <section class="content-container">
18 - <div class="grid-content bg-purple-light"> 18 + <div>
19 <el-col :span="24" class="content-wrapper"> 19 <el-col :span="24" class="content-wrapper">
20 <transition name="fade" mode="out-in"> 20 <transition name="fade" mode="out-in">
21 <router-view></router-view> 21 <router-view></router-view>
1 import Login from './views/Login.vue' 1 import Login from './views/Login.vue'
2 import NotFound from './views/404.vue' 2 import NotFound from './views/404.vue'
3 import Home from './views/Home.vue' 3 import Home from './views/Home.vue'
  4 +import HomeNew from './views/HomeNew.vue'
4 import Main from './views/dashboard/index' 5 import Main from './views/dashboard/index'
5 // import Table from './views/nav1/Table.vue' 6 // import Table from './views/nav1/Table.vue'
6 import Role from './views/nav1/role.vue' 7 import Role from './views/nav1/role.vue'
@@ -129,7 +130,7 @@ let routes = [ @@ -129,7 +130,7 @@ let routes = [
129 }, 130 },
130 { 131 {
131 path: '/', 132 path: '/',
132 - component: Home, 133 + component: HomeNew,
133 name: '主页', 134 name: '主页',
134 leaf: true, 135 leaf: true,
135 iconCls: 'el-icon-menu', 136 iconCls: 'el-icon-menu',
@@ -139,7 +140,7 @@ let routes = [ @@ -139,7 +140,7 @@ let routes = [
139 }, 140 },
140 { 141 {
141 path: '/', 142 path: '/',
142 - component: Home, 143 + component: HomeNew,
143 name: 'Charts', 144 name: 'Charts',
144 iconCls: 'fa fa-bar-chart', 145 iconCls: 'fa fa-bar-chart',
145 children: [ 146 children: [
@@ -206,7 +207,7 @@ let routes = [ @@ -206,7 +207,7 @@ let routes = [
206 }, 207 },
207 { 208 {
208 path: '/admin', 209 path: '/admin',
209 - component: Home, 210 + component: HomeNew,
210 name: '系统设置', 211 name: '系统设置',
211 iconCls: 'el-icon-setting',//图标样式class 212 iconCls: 'el-icon-setting',//图标样式class
212 leaf: false, 213 leaf: false,
  1 +<template>
  2 + <el-container>
  3 + <el-aside style="width:250px;background-color: rgb(238, 241, 246)" id="l-menu">
  4 + <NavMenu :collapsed="collapsed"></NavMenu>
  5 + </el-aside>
  6 +
  7 + <el-container>
  8 + <el-header style="text-align: right; font-size: 12px">
  9 + <div class="tools" @click.prevent="collapse" style="width: 15px;z-index:9999;position:absolute;">
  10 + <!-- ;margin-top: 80px;z-index:9999;margin-left: 170px-->
  11 + <i style="color:#a6b6c6;vertical-align: middle;line-height: 60px;" :class="[collapsed?'el-icon-s-unfold':'el-icon-s-fold']"></i>
  12 + </div>
  13 + <el-dropdown trigger="hover" style="margin-top:10px">
  14 + <i class="el-icon-question" style="vertical-align: middle;"></i>
  15 + <i class="el-icon-message-solid" style="vertical-align: middle;"></i>
  16 + <span class="el-dropdown-link userinfo-inner">
  17 + <img width="40" height="40" style="border-radius:50%;" src="~img/faceDefault.jpg"/></span>
  18 + <el-dropdown-menu slot="dropdown">
  19 + <el-dropdown-item>{{sysUserName}}</el-dropdown-item>
  20 + <el-dropdown-item>我的消息</el-dropdown-item>
  21 + <el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
  22 + <el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
  23 + <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
  24 + </el-dropdown-menu>
  25 + </el-dropdown>
  26 + </el-header>
  27 +
  28 + <el-main style="background-color:#f5f7fd;padding:10px">
  29 + <TabMenu></TabMenu>
  30 + </el-main>
  31 + </el-container>
  32 + </el-container>
  33 +</template>
  34 +
  35 +<script>
  36 + import rt from '../routes'
  37 + import { editPass,resetToken} from '../api/user';
  38 + import ElFormItem from "element-ui/packages/form/src/form-item";
  39 + import TabMenu from "@/components/TabMenu"
  40 + import NavMenu from "@/components/NavMenu"
  41 +
  42 + export default {
  43 +
  44 + provide() {
  45 + return {
  46 + reload: this.reload
  47 + }
  48 + },
  49 + components: {ElFormItem,TabMenu,NavMenu},
  50 + data() {
  51 + return {
  52 + rotate:false,
  53 + sysName:'',
  54 + collapsed:false,
  55 + // sysUserName: '',
  56 + sysUserId:'',
  57 + // sysUserAvatar: '',
  58 + isRouterAlive: true,
  59 + form: {
  60 + name: '',
  61 + region: '',
  62 + date1: '',
  63 + date2: '',
  64 + delivery: false,
  65 + type: [],
  66 + resource: '',
  67 + desc: ''
  68 + },
  69 + editForm: {
  70 + userId: '',
  71 + password: '',
  72 + },
  73 + }
  74 + },
  75 + methods: {
  76 + reload() {
  77 + this.$nextTick(function () {
  78 + this.$router.push({
  79 + path: this.$router.path,
  80 + query:{
  81 + t: new Date().getTime()
  82 + }
  83 + })
  84 + })
  85 + },
  86 + onSubmit() {
  87 + console.log('submit!');
  88 + },
  89 + handleopen() {
  90 + console.log('handleopen');
  91 + },
  92 + handleclose() {
  93 + console.log('handleclose');
  94 + },
  95 + handleselect: function (a, b) {
  96 + this.reload()
  97 + },
  98 + // 退出登录
  99 + logout: function () {
  100 + var _this = this;
  101 + this.$confirm('确认退出吗?', '提示', {
  102 + //type: 'warning'
  103 + }).then(() => {
  104 + sessionStorage.removeItem('user');
  105 + sessionStorage.removeItem('menu');
  106 + //退出后初始化原来的路由
  107 + let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
  108 + console.log(sysRoutes);
  109 + _this.$router.options.routes = sysRoutes;
  110 +
  111 + _this.$router.push('/login');
  112 + }).catch(() => {
  113 +
  114 + });
  115 +
  116 +
  117 + },
  118 + //折叠导航栏
  119 + collapse:function(){
  120 + this.collapsed=!this.collapsed;
  121 + }
  122 + },
  123 + mounted() {
  124 + var _this = this;
  125 + var user = sessionStorage.getItem('user');
  126 + if (user) {
  127 + user = JSON.parse(user);
  128 + this.sysUserName = user.username || '';
  129 + this.sysUserId=user.userId||'';
  130 +
  131 + this.sysUserAvatar = user.userface || '~img/faceDefault.jpg';
  132 + }
  133 + //操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
  134 + var userRouters = sessionStorage.getItem('menu');
  135 + if (userRouters) {
  136 + userRouters = JSON.parse(userRouters);
  137 + _this.$router.options.routes = userRouters;
  138 + console.log("home:");
  139 + console.log(_this.$router.options.routes);
  140 + }
  141 + },
  142 + watch: {
  143 + collapsed(value) {
  144 + let menuDom = document.getElementById("l-menu");
  145 + //折叠
  146 + if (value){
  147 + this.$nextTick(function () {
  148 + menuDom.setAttribute("style","width:90px");
  149 + })
  150 + }else {
  151 + //不折叠
  152 + this.$nextTick(function () {
  153 + menuDom.setAttribute("style","width:250px");
  154 + })
  155 +
  156 + }
  157 + }
  158 + }
  159 + }
  160 +
  161 +</script>
  162 +<style>
  163 +</style>
  164 +<style scoped lang="scss">
  165 + @import '~scss_vars';
  166 +
  167 +</style>
  168 +<style lang="scss">
  169 + header{
  170 + line-height: 60px;
  171 + box-shadow: 0px 10px 10px #eaeff3;
  172 + z-index: 2;
  173 + i{
  174 + font-size: 24px;
  175 + margin-right: 20px;
  176 + text-align: center;
  177 + vertical-align: middle;
  178 + height: 60px;
  179 + margin-top: 0px;
  180 + color: rgb(166, 182, 198);
  181 + width: 30px;
  182 + }
  183 + }
  184 + main{
  185 +
  186 + }
  187 +
  188 +</style>
@@ -105,7 +105,10 @@ @@ -105,7 +105,10 @@
105 <el-row :gutter="20"> 105 <el-row :gutter="20">
106 <el-col :span="8"> 106 <el-col :span="8">
107 <el-form-item label="权限排序" prop="permissionOrder"> 107 <el-form-item label="权限排序" prop="permissionOrder">
108 - <el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input> 108 + <el-input-number v-model="addForm.permissionOrder"
  109 + auto-complete="off"
  110 + controls-position="right"
  111 + placeholder="请输入权限排序：例如:123"></el-input-number>
109 </el-form-item> 112 </el-form-item>
110 </el-col> 113 </el-col>
111 <el-col :span="8"> 114 <el-col :span="8">
@@ -4,14 +4,21 @@ @@ -4,14 +4,21 @@
4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;"> 4 <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
5 <el-form :inline="true" :model="filters"> 5 <el-form :inline="true" :model="filters">
6 <el-form-item> 6 <el-form-item>
7 - <el-input v-model="filters.roleName" placeholder="岗位/角色名称"></el-input> 7 + <el-input v-model="filters.roleName" placeholder="岗位/角色名称">
  8 + <template slot="prepend">岗位名称</template>
  9 + </el-input>
8 </el-form-item> 10 </el-form-item>
9 <el-form-item> 11 <el-form-item>
10 - <el-button type="primary" v-on:click="getRoles()">查询</el-button> 12 + <el-button type="primary" v-on:click="getRoles()" icon="el-icon-search">查&emsp;&emsp;询</el-button>
11 </el-form-item> 13 </el-form-item>
12 <el-form-item> 14 <el-form-item>
13 - <el-button type="primary" @click="handleAdd">新增</el-button> 15 + <el-button type="success" @click="handleAdd" icon="el-icon-document">新&emsp;&emsp;增</el-button>
14 </el-form-item> 16 </el-form-item>
  17 + <el-form-item>
  18 + <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
  19 + </el-form-item>
  20 +
  21 +
15 </el-form> 22 </el-form>
16 </el-col> 23 </el-col>
17 24
@@ -47,16 +54,19 @@ @@ -47,16 +54,19 @@
47 </el-table-column> 54 </el-table-column>
48 <el-table-column label="操作" min-width="260" fixed="right"> 55 <el-table-column label="操作" min-width="260" fixed="right">
49 <template slot-scope="scope"> 56 <template slot-scope="scope">
50 - <el-button type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>  
51 - <el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>  
52 - <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>  
53 - <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> 57 + <el-row>
  58 + <el-button type="success" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
  59 + <el-button @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
  60 + </el-row>
  61 + <el-row>
  62 + <el-button @click="handleEdit(scope.$index, scope.row)">编&emsp;&emsp;辑</el-button>
  63 + <el-button type="danger" @click="handleDel(scope.$index, scope.row)">删&emsp;&emsp;除</el-button>
  64 + </el-row>
54 </template> 65 </template>
55 </el-table-column> 66 </el-table-column>
56 </el-table> 67 </el-table>
57 <!--工具条--> 68 <!--工具条-->
58 <el-col :span="24" class="toolbar"> 69 <el-col :span="24" class="toolbar">
59 - <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>  
60 <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;"> 70 <el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
61 </el-pagination> 71 </el-pagination>
62 </el-col> 72 </el-col>
@@ -558,6 +568,15 @@ @@ -558,6 +568,15 @@
558 568
559 </script> 569 </script>
560 570
561 -<style scoped> 571 +<style>
  572 + .toolbar{
  573 + height: 60px;
  574 + background-color: white;
  575 + line-height: 60px;
  576 + vertical-align: middle;
  577 + border-radius: 5px 5px 5px 5px;
  578 + padding: 15px 0 0 20px;
  579 + box-shadow: 0px 5px 5px #e5e8eb;
  580 + }
562 581
563 </style> 582 </style>