|  |  | <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> | 
... | ... |  |