朱兆平 / vue_cli · 提交

转到一个项目

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

界面美化

内嵌 并排对比
正在显示 9 个修改的文件 包含 287 行增加 和 30 行删除
... ... @@ -91,6 +91,7 @@ var axois_init = {
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
sessionStorage.removeItem('token');
next()
}else{
let user = JSON.parse(sessionStorage.getItem('user'));
if(sessionStorage.getItem('token')){
... ... @@ -99,9 +100,11 @@ var axois_init = {
if (!jsutil.checkNull(user) && to.path != '/login' && !sessionStorage.getItem('menu') && !sessionStorage.getItem('token')) {
next({ path: '/login' })
}else{
next()
}
}
next()
});
}
}
... ...
<template>
</template>
<script>
export default {
name: "ChangeIcon",
mounted() {
console.log("changeicon mounted")
// this.$emit('icon');
},
methods: {
childMethod() {
this.$emit('icon');
}
}
}
</script>
<style scoped>
</style>
... ...
... ... @@ -18,15 +18,15 @@
<!-- <el-radio-button :label="true">收起</el-radio-button>-->
<!-- </el-radio-group>-->
<div align="center" style="background-color: #2b2f3a;height: 67px">
<img src="~@/assets/logo1.png">
<h1 style="color:white;display: inline-block;font-weight: 600;font-size: 15px;line-height: 50px">航空物流公共信息服务平台</h1>
<div align="center" style="height: 66px;line-height: 66px;">
<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">
<el-submenu :index="index+''" v-if="item.hasChild">
<template slot="title">
<i :class="item.iconCls"></i>
<span slot="title">{{item.name}}</span>
<span slot="title" class="my-el-menu-item">{{item.name}}</span>
</template>
<el-menu-item v-for="child in item.children"
:index="child.path"
... ... @@ -38,7 +38,7 @@
</el-submenu>
<el-menu-item v-if="!item.hasChild" :index="item.path">
<i :class="item.iconCls"></i>
<span slot="title">{{item.name}}</span>
<span slot="title" class="my-el-menu-item">{{item.name}}</span>
</el-menu-item>
</template>
</el-menu>
... ... @@ -48,9 +48,11 @@
import userInfo from '@/api/base';
import {userMenu} from '@/api/perm_api';
import {mapActions, mapGetters} from 'vuex'
import ChangeIcon from './ChangeIcon'
export default {
name: 'NavMenus',
props:['collapsed'],
components:{ChangeIcon},
data() {
return {
rotate:false,
... ... @@ -92,7 +94,7 @@
getUserMenu:function(){
const _this=this;
const para={
userId:userInfo.userId
userId:JSON.parse(sessionStorage.getItem('user')).userId
};
userMenu(para).then((res) => {
console.log("ce"+res.data);
... ... @@ -126,18 +128,41 @@
})
})
},
changeIcon: function () {
this.$nextTick(function(){
let doms = document.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down');
if (doms && doms.length>0){
let domArr = Array.from(doms)
domArr.forEach(function (item,index) {
item.className = "el-submenu__icon-arrow el-icon-caret-bottom";
})
}
})
}
},
computed: {
...mapGetters(['getUserMenuStore']) // 动态计算属性，相当于this.$store.getters.resturantName
},
mounted() {
console.log(userInfo);
},
created() {
this.initMenu();
},
watch: {
menu(value) {
this.$nextTick(function(){
this.changeIcon();
})
}
}
}
</script>
<style scoped lang="scss">
<style>
.my-el-menu-item{
color:#bcbfc5;
}
</style>
<style lang="scss">
</style>
<style scoped lang="scss">
... ... @@ -152,12 +177,9 @@
}
.logo-width{
width:22%;
margin: -20px;
}
.logo-collapse-width{
width:90px;
margin: -20px;
}
/*el-submenu__title:hover {*/
... ...
<template>
<div style="width: 100%;height: 50px">
<Assembly></Assembly>
<div style="width: 100%;">
<!-- <Assembly></Assembly>-->
<el-tabs v-model="activeIndex"
v-if="openTab.length"
type="card"
... ... @@ -15,7 +15,7 @@
:name="item.route">
</el-tab-pane>
<section class="content-container">
<div class="grid-content bg-purple-light">
<div>
<el-col :span="24" class="content-wrapper">
<transition name="fade" mode="out-in">
<router-view></router-view>
... ...
import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import HomeNew from './views/HomeNew.vue'
import Main from './views/dashboard/index'
// import Table from './views/nav1/Table.vue'
import Role from './views/nav1/role.vue'
... ... @@ -129,7 +130,7 @@ let routes = [
},
{
path: '/',
component: Home,
component: HomeNew,
name: '主页',
leaf: true,
iconCls: 'el-icon-menu',
... ... @@ -139,7 +140,7 @@ let routes = [
},
{
path: '/',
component: Home,
component: HomeNew,
name: 'Charts',
iconCls: 'fa fa-bar-chart',
children: [
... ... @@ -206,7 +207,7 @@ let routes = [
},
{
path: '/admin',
component: Home,
component: HomeNew,
name: '系统设置',
iconCls: 'el-icon-setting',//图标样式class
leaf: false,
... ...
<template>
<el-container>
<el-aside style="width:250px;background-color: rgb(238, 241, 246)" id="l-menu">
<NavMenu :collapsed="collapsed"></NavMenu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<div class="tools" @click.prevent="collapse" style="width: 15px;z-index:9999;position:absolute;">
<!-- ;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>
<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">
<el-dropdown-item>{{sysUserName}}</el-dropdown-item>
<el-dropdown-item>我的消息</el-dropdown-item>
<el-dropdown-item @click.native="editPass">修改密码</el-dropdown-item>
<el-dropdown-item @click.native="updateCache">更新缓存</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<el-main style="background-color:#f5f7fd;padding:10px">
<TabMenu></TabMenu>
</el-main>
</el-container>
</el-container>
</template>
<script>
import rt from '../routes'
import { editPass,resetToken} from '../api/user';
import ElFormItem from "element-ui/packages/form/src/form-item";
import TabMenu from "@/components/TabMenu"
import NavMenu from "@/components/NavMenu"
export default {
provide() {
return {
reload: this.reload
}
},
components: {ElFormItem,TabMenu,NavMenu},
data() {
return {
rotate:false,
sysName:'',
collapsed:false,
// sysUserName: '',
sysUserId:'',
// sysUserAvatar: '',
isRouterAlive: true,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
editForm: {
userId: '',
password: '',
},
}
},
methods: {
reload() {
this.$nextTick(function () {
this.$router.push({
path: this.$router.path,
query:{
t: new Date().getTime()
}
})
})
},
onSubmit() {
console.log('submit!');
},
handleopen() {
console.log('handleopen');
},
handleclose() {
console.log('handleclose');
},
handleselect: function (a, b) {
this.reload()
},
// 退出登录
logout: function () {
var _this = this;
this.$confirm('确认退出吗?', '提示', {
//type: 'warning'
}).then(() => {
sessionStorage.removeItem('user');
sessionStorage.removeItem('menu');
//退出后初始化原来的路由
let sysRoutes = JSON.parse(sessionStorage.getItem('sysMenu'));
console.log(sysRoutes);
_this.$router.options.routes = sysRoutes;
_this.$router.push('/login');
}).catch(() => {
});
},
//折叠导航栏
collapse:function(){
this.collapsed=!this.collapsed;
}
},
mounted() {
var _this = this;
var user = sessionStorage.getItem('user');
if (user) {
user = JSON.parse(user);
this.sysUserName = user.username || '';
this.sysUserId=user.userId||'';
this.sysUserAvatar = user.userface || '~img/faceDefault.jpg';
}
//操作路由,判断本地存储的用户栏目列表是否存在，如果存在则加载路由
var userRouters = sessionStorage.getItem('menu');
if (userRouters) {
userRouters = JSON.parse(userRouters);
_this.$router.options.routes = userRouters;
console.log("home:");
console.log(_this.$router.options.routes);
}
},
watch: {
collapsed(value) {
let menuDom = document.getElementById("l-menu");
//折叠
if (value){
this.$nextTick(function () {
menuDom.setAttribute("style","width:90px");
})
}else {
//不折叠
this.$nextTick(function () {
menuDom.setAttribute("style","width:250px");
})
}
}
}
}
</script>
<style>
</style>
<style scoped lang="scss">
@import '~scss_vars';
</style>
<style lang="scss">
header{
line-height: 60px;
box-shadow: 0px 10px 10px #eaeff3;
z-index: 2;
i{
font-size: 24px;
margin-right: 20px;
text-align: center;
vertical-align: middle;
height: 60px;
margin-top: 0px;
color: rgb(166, 182, 198);
width: 30px;
}
}
main{
}
</style>
... ...
... ... @@ -105,7 +105,10 @@
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="权限排序" prop="permissionOrder">
<el-input v-model="addForm.permissionOrder" auto-complete="off" placeholder="请输入权限排序：例如:123"></el-input>
<el-input-number v-model="addForm.permissionOrder"
auto-complete="off"
controls-position="right"
placeholder="请输入权限排序：例如:123"></el-input-number>
</el-form-item>
</el-col>
<el-col :span="8">
... ...
... ... @@ -4,14 +4,21 @@
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true" :model="filters">
<el-form-item>
<el-input v-model="filters.roleName" placeholder="岗位/角色名称"></el-input>
<el-input v-model="filters.roleName" placeholder="岗位/角色名称">
<template slot="prepend">岗位名称</template>
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" v-on:click="getRoles()">查询</el-button>
<el-button type="primary" v-on:click="getRoles()" icon="el-icon-search">查&emsp;&emsp;询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
<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-form-item>
</el-form>
</el-col>
... ... @@ -47,16 +54,19 @@
</el-table-column>
<el-table-column label="操作" min-width="260" fixed="right">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
<el-button size="small" @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
<el-row>
<el-button type="success" @click="handleAdd(scope.$index, scope.row)">新增下级</el-button>
<el-button @click="setPerm(scope.$index, scope.row)">设置权限</el-button>
</el-row>
<el-row>
<el-button @click="handleEdit(scope.$index, scope.row)">编&emsp;&emsp;辑</el-button>
<el-button type="danger" @click="handleDel(scope.$index, scope.row)">删&emsp;&emsp;除</el-button>
</el-row>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
<el-pagination layout="total, prev, pager, next" @current-change="handleCurrentChange" :page-size="5" :total="total" style="float:right;">
</el-pagination>
</el-col>
... ... @@ -383,7 +393,7 @@
*/
/*moment 安装 npm install moment --save*/
// para.creattime = moment(para.creattime).format('YYYY-MM-DD HH:mm:ss');
this.addLoading = false;
this.addLoading = false;
edit(para).then((res) => {
//NProgress.done();
... ... @@ -558,6 +568,15 @@
</script>
<style scoped>
<style>
.toolbar{
height: 60px;
background-color: white;
line-height: 60px;
vertical-align: middle;
border-radius: 5px 5px 5px 5px;
padding: 15px 0 0 20px;
box-shadow: 0px 5px 5px #e5e8eb;
}
</style>
... ...