<template> <el-button type="primary">新增用户</el-button> <el-button type="danger">批量删除</el-button> <el-table :data="userList" style="width: 100%" @selection-change="handleSelectionChange" > <!-- 复选框 --> <el-table-column type="selection" width="33%" /> <el-table-column type="index" label="序号" width="52%" /> <el-table-column prop="loginAct" label="账号" show-overflow-tooltip /> <el-table-column property="name" label="姓名" show-overflow-tooltip /> <el-table-column property="phone" label="手机" show-overflow-tooltip /> <el-table-column property="email" label="邮箱" show-overflow-tooltip /> <el-table-column property="createTime" label="创建时间" show-overflow-tooltip /> <el-table-column label="操作" show-overflow-tooltip> <template #default="scope"> <el-button type="primary" @click="view(scope.row.id)">详情</el-button> <el-button type="success" @click="edit(scope.row.id)">编辑</el-button> <el-button type="danger" @click="del(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页条 --> <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="total" @prev-click="toPage" @next-click="toPage" @current-change="toPage" /> </template> <script> import { doGet } from '../http/httpRequest'; export default { name:"userView", data(){ return { userList : [], pageSize : 0, total : 0 } }, mounted(){ this.getData(1); }, methods : { // 勾选或者取消勾选触发 handleSelectionChange(){ }, // 自动传参 toPage(current){ // 把当前页作为current传递给获取数据方法,就可以实现分页查询了 this.getData(current); }, getData(current){ //获取数据,查询用户列表数据 doGet("api/users",{ // 当前查询第几页 current : current }).then(resp => { if(resp.data.code === 200){ this.userList = resp.data.data.list; this.total = resp.data.data.total; this.pageSize = resp.data.data.pageSize; } }); }, view(id){ // $route是获取当前路由的属性信息,不要和router搞混了 this.$router.push("/dashboard/user/detail/"+id); }, edit(id){ // $router是调用路由对象的方法,如push跳转等 this.$router.push("/dashboard/user/detail/"+id); }, del(id){ this.$router.push("/dashboard/user/detail/"+id); } } } </script> <style scoped> .el-pagination{ margin-top: 3%; } .el-table{ margin-top: 3%; } </style>
<template>
<el-button type="primary">新增用户</el-button>
<el-button type="danger">批量删除</el-button>
<el-table
:data="userList"
style="width: 100%"
@selection-change="handleSelectionChange"
>
<!-- 复选框 -->
<el-table-column type="selection" width="33%" />
<el-table-column type="index" label="序号" width="52%" />
<el-table-column prop="loginAct" label="账号" show-overflow-tooltip />
<el-table-column property="name" label="姓名" show-overflow-tooltip />
<el-table-column property="phone" label="手机" show-overflow-tooltip />
<el-table-column property="email" label="邮箱" show-overflow-tooltip />
<el-table-column property="createTime" label="创建时间" show-overflow-tooltip />
<el-table-column label="操作" show-overflow-tooltip>
<template #default="scope">
<el-button type="primary" @click="view(scope.row.id)">详情</el-button>
<el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
<el-button type="danger" @click="del(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页条 -->
<el-pagination
background
layout="prev, pager, next"
:page-size="pageSize"
:total="total"
@prev-click="toPage"
@next-click="toPage"
@current-change="toPage"
/>
</template>
<script>
import { doGet } from '../http/httpRequest';
export default {
name:"userView",
data(){
return {
userList : [],
pageSize : 0,
total : 0
}
},
mounted(){
this.getData(1);
},
methods : {
// 勾选或者取消勾选触发
handleSelectionChange(){
},
// 自动传参
toPage(current){
// 把当前页作为current传递给获取数据方法,就可以实现分页查询了
this.getData(current);
},
getData(current){
//获取数据,查询用户列表数据
doGet("api/users",{
// 当前查询第几页
current : current
}).then(resp => {
if(resp.data.code === 200){
this.userList = resp.data.data.list;
this.total = resp.data.data.total;
this.pageSize = resp.data.data.pageSize;
}
});
},
view(id){
// $route是获取当前路由的属性信息,不要和router搞混了
this.$router.push("/dashboard/user/detail/"+id);
},
edit(id){
// $router是调用路由对象的方法,如push跳转等
this.$router.push("/dashboard/user/detail/"+id);
},
del(id){
this.$router.push("/dashboard/user/detail/"+id);
}
}
}
</script>
<style scoped>
.el-pagination{
margin-top: 3%;
}
.el-table{
margin-top: 3%;
}
</style>
<template> <el-form ref="loginRefForm" :model="userDetail" label-width="20%"> <el-form-item label="ID:"> <div class="detail"> {{ userDetail.id }}</div> </el-form-item> <el-form-item label="账号:"> <div class="detail"> {{ userDetail.loginAct }}</div> </el-form-item> <el-form-item label="密码:"> <div class="detail"> {{ password }}</div> </el-form-item> <el-form-item label="姓名:"> <div class="detail"> {{ userDetail.name }}</div> </el-form-item> <el-form-item label="手机:"> <div class="detail"> {{ userDetail.phone }}</div> </el-form-item> <el-form-item label="邮箱:"> <div class="detail"> {{ userDetail.email }}</div> </el-form-item> <el-form-item label="账号未过期:"> <div class="detail"> {{ userDetail.accountNoExpired === 1 ? "是" : "否" }}</div> </el-form-item> <el-form-item label="密码未过期:"> <div class="detail"> {{ userDetail.credentialsNoExpired === 1 ? "是" : "否" }}</div> </el-form-item> <el-form-item label="账号未锁定:"> <div class="detail"> {{ userDetail.accountNoLocked === 1 ? "是" : "否" }}</div> </el-form-item> <el-form-item label="账号是否可用:"> <div class="detail"> {{ userDetail.accountEnabled === 1 ? "是" : "否" }}</div> </el-form-item> <el-form-item label="账号创建时间:"> <div class="detail"> {{ userDetail.createByDO.createTime }}</div> </el-form-item> <el-form-item label="账号创建者:"> <div class="detail"> {{ userDetail.createByDO.name }}</div> </el-form-item> <el-form-item label="修改账号时间:"> <div class="detail"> {{ userDetail.editByDO.editTime }}</div> </el-form-item> <el-form-item label="修改账号者:"> <div class="detail"> {{ userDetail.editByDO.name }}</div> </el-form-item> <el-form-item label="最后登录时间:"> <div class="detail"> {{ userDetail.lastLoginTime }}</div> </el-form-item> <el-form-item label="角色列表:"> <div class="detail"> {{ userDetail.roleList }}</div> </el-form-item> <el-form-item label="权限列表:"> <div class="detail"> {{ userDetail.permissionList }}</div> </el-form-item> </el-form> </template> <script> import { doGet } from '../http/httpRequest'; export default { name:"userView", mounted(){ this.loadUserDetail(); }, data(){ return { // 用户详情对象 userDetail : { createByDO : {}, editByDO : {} }, password : "********" } }, methods : { loadUserDetail(){ // 从当前路由中获取这个动态的ID // this.$route.path是获取路径的方法 let id = this.$route.params.id; doGet("/api/user/" + id,{}).then(resp => { if(resp.data.code === 200){ this.userDetail = resp.data.data; if(!this.userDetail.createByDO){ this.userDetail.createByDO = {}; } if(!this.userDetail.editByDO){ this.userDetail.editByDO = {}; } } }) } } } </script> <style scoped> .detail{ background-color: azure; width: 100%; padding-left: 1%; } </style>
<template>
<el-form ref="loginRefForm" :model="userDetail" label-width="20%">
<el-form-item label="ID:">
<div class="detail"> {{ userDetail.id }}</div>
</el-form-item>
<el-form-item label="账号:">
<div class="detail"> {{ userDetail.loginAct }}</div>
</el-form-item>
<el-form-item label="密码:">
<div class="detail"> {{ password }}</div>
</el-form-item>
<el-form-item label="姓名:">
<div class="detail"> {{ userDetail.name }}</div>
</el-form-item>
<el-form-item label="手机:">
<div class="detail"> {{ userDetail.phone }}</div>
</el-form-item>
<el-form-item label="邮箱:">
<div class="detail"> {{ userDetail.email }}</div>
</el-form-item>
<el-form-item label="账号未过期:">
<div class="detail"> {{ userDetail.accountNoExpired === 1 ? "是" : "否" }}</div>
</el-form-item>
<el-form-item label="密码未过期:">
<div class="detail"> {{ userDetail.credentialsNoExpired === 1 ? "是" : "否" }}</div>
</el-form-item>
<el-form-item label="账号未锁定:">
<div class="detail"> {{ userDetail.accountNoLocked === 1 ? "是" : "否" }}</div>
</el-form-item>
<el-form-item label="账号是否可用:">
<div class="detail"> {{ userDetail.accountEnabled === 1 ? "是" : "否" }}</div>
</el-form-item>
<el-form-item label="账号创建时间:">
<div class="detail"> {{ userDetail.createByDO.createTime }}</div>
</el-form-item>
<el-form-item label="账号创建者:">
<div class="detail"> {{ userDetail.createByDO.name }}</div>
</el-form-item>
<el-form-item label="修改账号时间:">
<div class="detail"> {{ userDetail.editByDO.editTime }}</div>
</el-form-item>
<el-form-item label="修改账号者:">
<div class="detail"> {{ userDetail.editByDO.name }}</div>
</el-form-item>
<el-form-item label="最后登录时间:">
<div class="detail"> {{ userDetail.lastLoginTime }}</div>
</el-form-item>
<el-form-item label="角色列表:">
<div class="detail"> {{ userDetail.roleList }}</div>
</el-form-item>
<el-form-item label="权限列表:">
<div class="detail"> {{ userDetail.permissionList }}</div>
</el-form-item>
</el-form>
</template>
<script>
import { doGet } from '../http/httpRequest';
export default {
name:"userView",
mounted(){
this.loadUserDetail();
},
data(){
return {
// 用户详情对象
userDetail : {
createByDO : {},
editByDO : {}
},
password : "********"
}
},
methods : {
loadUserDetail(){
// 从当前路由中获取这个动态的ID
// this.$route.path是获取路径的方法
let id = this.$route.params.id;
doGet("/api/user/" + id,{}).then(resp => {
if(resp.data.code === 200){
this.userDetail = resp.data.data;
if(!this.userDetail.createByDO){
this.userDetail.createByDO = {};
}
if(!this.userDetail.editByDO){
this.userDetail.editByDO = {};
}
}
})
}
}
}
</script>
<style scoped>
.detail{
background-color: azure;
width: 100%;
padding-left: 1%;
}
</style>
import { createRouter,createWebHistory } from "vue-router"; const router = createRouter({ // 路由历史 history:createWebHistory(), // 配置路由,可以配置多个路由 routes:[ { //路由路径 path:"/", //对应路径的页面 component:() => import('../view/login.vue') }, { //路由路径 path:"/dashboard", //对应路径的页面 component:() => import('../view/dashboard.vue'), // 子路由 children : [ { // 子路由的path开始不能有/ path:"user", //对应路径的页面 component:() => import('../view/userView.vue'), }, { // 子路由路径 path:"user/detail/:id", //路由路径所展示的页面 component : () => import('../view/userDetail.vue') } ] } ] }); export default router;
import { createRouter,createWebHistory } from "vue-router";
const router = createRouter({
// 路由历史
history:createWebHistory(),
// 配置路由,可以配置多个路由
routes:[
{
//路由路径
path:"/",
//对应路径的页面
component:() => import('../view/login.vue')
},
{
//路由路径
path:"/dashboard",
//对应路径的页面
component:() => import('../view/dashboard.vue'),
// 子路由
children : [
{
// 子路由的path开始不能有/
path:"user",
//对应路径的页面
component:() => import('../view/userView.vue'),
},
{
// 子路由路径
path:"user/detail/:id",
//路由路径所展示的页面
component : () => import('../view/userDetail.vue')
}
]
}
]
});
export default router;
<template> <el-container> <!-- 左侧 --> <el-aside :width="isShowed ? '3.4%' : '17%'"> <div class="menuTitle">{{ isShowed ? "" : title }}</div> <!-- 菜单 --> <el-menu active-text-color="#ffd04b" background-color="#334157" class="el-menu-vertical-demo" default-active="2" style="border-right: solid 0px;" :unique-opened="true" text-color="#fff" :collapse="isShowed" :collapse-transition="false" :router="true" > <!-- 市场活动菜单 --> <el-sub-menu index="1"> <template #title> <el-icon><OfficeBuilding /></el-icon> <span>市场活动</span> </template> <!-- 二级目录 --> <el-menu-item index="1-1"> <el-icon><OfficeBuilding /></el-icon> 市场活动 </el-menu-item> <el-menu-item index="1-2"> <el-icon><OfficeBuilding /></el-icon> 市场统计 </el-menu-item> </el-sub-menu> <!-- 线索管理菜单 --> <el-sub-menu index="2"> <template #title> <el-icon><Operation /></el-icon> <span>线索管理</span> </template> <!-- 二级目录 --> <el-menu-item index="2-1"> <el-icon><OfficeBuilding /></el-icon> 线索管理 </el-menu-item> <el-menu-item index="2-2"> <el-icon><OfficeBuilding /></el-icon> 线索统计 </el-menu-item> </el-sub-menu> <!-- 客户管理菜单 --> <el-sub-menu index="3"> <template #title> <el-icon><User /></el-icon> <span>客户管理</span> </template> <!-- 二级目录 --> <el-menu-item index="3-1"> <el-icon><OfficeBuilding /></el-icon> 客户管理 </el-menu-item> <el-menu-item index="3-2"> <el-icon><OfficeBuilding /></el-icon> 客户统计 </el-menu-item> </el-sub-menu> <!-- 交易管理菜单 --> <el-sub-menu index="4"> <template #title> <el-icon><location /></el-icon> <span>交易管理</span> </template> <!-- 二级目录 --> <el-menu-item index="4-1"> <el-icon><OfficeBuilding /></el-icon> 交易管理 </el-menu-item> <el-menu-item index="4-2"> <el-icon><OfficeBuilding /></el-icon> 交易统计 </el-menu-item> </el-sub-menu> <!-- 产品管理菜单 --> <el-sub-menu index="5"> <template #title> <el-icon><location /></el-icon> <span>产品管理</span> </template> <!-- 二级目录 --> <el-menu-item index="5-1"> <el-icon><OfficeBuilding /></el-icon> 产品管理 </el-menu-item> <el-menu-item index="5-2"> <el-icon><OfficeBuilding /></el-icon> 产品统计 </el-menu-item> </el-sub-menu> <!-- 字典管理菜单 --> <el-sub-menu index="6"> <template #title> <el-icon><location /></el-icon> <span>字典管理</span> </template> <!-- 二级目录 --> <el-menu-item index="6-1"> <el-icon><OfficeBuilding /></el-icon> 字典管理 </el-menu-item> <el-menu-item index="6-2"> <el-icon><OfficeBuilding /></el-icon> 字典统计 </el-menu-item> </el-sub-menu> <!-- 用户管理菜单 --> <el-sub-menu index="7"> <template #title> <el-icon><location /></el-icon> <span>用户管理</span> </template> <!-- 二级目录 --> <el-menu-item index="/dashboard/user"> <el-icon><OfficeBuilding /></el-icon> 用户管理 </el-menu-item> </el-sub-menu> <!-- 系统管理菜单 --> <el-sub-menu index="8"> <template #title> <el-icon><location /></el-icon> <span>系统管理</span> </template> <!-- 二级目录 --> <el-menu-item index="8-1"> <el-icon><OfficeBuilding /></el-icon> 系统管理 </el-menu-item> <el-menu-item index="8-2"> <el-icon><OfficeBuilding /></el-icon> 系统统计 </el-menu-item> </el-sub-menu> </el-menu> </el-aside> <el-container class="rightContent"> <!-- 右侧上 --> <el-header> <!-- 折叠 --> <el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon> <!-- 打开 --> <el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon> <!-- 用户信息的下拉菜单 --> <el-dropdown :hide-on-click="false"> <span class="el-dropdown-link"> {{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon> </span> <template #dropdown> <el-dropdown-menu> <el-dropdown-item>我的资料</el-dropdown-item> <el-dropdown-item>修改密码</el-dropdown-item> <el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item> </el-dropdown-menu> </template> </el-dropdown> </el-header> <!-- 右侧中 --> <el-main> <router-view></router-view> </el-main> <!-- 右侧下 --> <el-footer>@版权所有 2000-2099 旧约Alatus 深圳市龙华区MZJDQLHY第XX栋XX总部xx号</el-footer> </el-container> </el-container> </template> <script> import { doGet } from "../http/httpRequest.js"; import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js"; export default { name : "dashboard", mounted(){ // 挂载时获取用户名 this.loadLoginName(); }, methods : { loadLoginName(){ if(window.localStorage.getItem(getTokenName())){ } // 获取用户名 doGet("/api/login/info",{}).then((resp) => { this.user = resp.data.data; }); }, // 左侧菜单左右展开与折叠 showMenu(){ // 取反即可 this.isShowed = !this.isShowed; }, // 退出登录 logOut(){ // 一样没有参数值,直接给个空的大括号就好 doGet("/api/logOut",{}).then(resp => { if(resp.data.code === 200){ messageTip('退出成功,即将返回首页',"success"); // 退出成功 removeToken(); later("/"); } else{ messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => { messageTip('退出成功,即将返回首页',"success"); // 后端不起作用,我们就把前端这里存的删了先 removeToken(); later("/"); }).catch(() => { messageTip("已取消强制退出","warning"); }); } }); } }, data(){ return { isShowed : false, // 登录的用户对象 user : {}, title : "@CRM管理系统" } } } </script> <style scoped> .el-dropdown{ float: right; line-height: 225%; } .el-aside{ background-color: black; } .menuTitle{ color: white; text-align: center; height: 5%; line-height: 225%; } .el-header{ background-color: azure; height: 5%; line-height: 225%; } .el-footer{ background-color: aliceblue; height: 5%; line-height: 225%; text-align: center; } .rightContent{ /* 高度设置为计算高度,屏幕高度的100% */ height: calc(100vh); } .show{ /* 聚焦事件 */ cursor: pointer; } </style>
<template>
<el-container>
<!-- 左侧 -->
<el-aside :width="isShowed ? '3.4%' : '17%'">
<div class="menuTitle">{{ isShowed ? "" : title }}</div>
<!-- 菜单 -->
<el-menu
active-text-color="#ffd04b"
background-color="#334157"
class="el-menu-vertical-demo"
default-active="2"
style="border-right: solid 0px;"
:unique-opened="true"
text-color="#fff"
:collapse="isShowed"
:collapse-transition="false"
:router="true"
>
<!-- 市场活动菜单 -->
<el-sub-menu index="1">
<template #title>
<el-icon><OfficeBuilding /></el-icon>
<span>市场活动</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="1-1">
<el-icon><OfficeBuilding /></el-icon>
市场活动
</el-menu-item>
<el-menu-item index="1-2">
<el-icon><OfficeBuilding /></el-icon>
市场统计
</el-menu-item>
</el-sub-menu>
<!-- 线索管理菜单 -->
<el-sub-menu index="2">
<template #title>
<el-icon><Operation /></el-icon>
<span>线索管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="2-1">
<el-icon><OfficeBuilding /></el-icon>
线索管理
</el-menu-item>
<el-menu-item index="2-2">
<el-icon><OfficeBuilding /></el-icon>
线索统计
</el-menu-item>
</el-sub-menu>
<!-- 客户管理菜单 -->
<el-sub-menu index="3">
<template #title>
<el-icon><User /></el-icon>
<span>客户管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="3-1">
<el-icon><OfficeBuilding /></el-icon>
客户管理
</el-menu-item>
<el-menu-item index="3-2">
<el-icon><OfficeBuilding /></el-icon>
客户统计
</el-menu-item>
</el-sub-menu>
<!-- 交易管理菜单 -->
<el-sub-menu index="4">
<template #title>
<el-icon><location /></el-icon>
<span>交易管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="4-1">
<el-icon><OfficeBuilding /></el-icon>
交易管理
</el-menu-item>
<el-menu-item index="4-2">
<el-icon><OfficeBuilding /></el-icon>
交易统计
</el-menu-item>
</el-sub-menu>
<!-- 产品管理菜单 -->
<el-sub-menu index="5">
<template #title>
<el-icon><location /></el-icon>
<span>产品管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="5-1">
<el-icon><OfficeBuilding /></el-icon>
产品管理
</el-menu-item>
<el-menu-item index="5-2">
<el-icon><OfficeBuilding /></el-icon>
产品统计
</el-menu-item>
</el-sub-menu>
<!-- 字典管理菜单 -->
<el-sub-menu index="6">
<template #title>
<el-icon><location /></el-icon>
<span>字典管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="6-1">
<el-icon><OfficeBuilding /></el-icon>
字典管理
</el-menu-item>
<el-menu-item index="6-2">
<el-icon><OfficeBuilding /></el-icon>
字典统计
</el-menu-item>
</el-sub-menu>
<!-- 用户管理菜单 -->
<el-sub-menu index="7">
<template #title>
<el-icon><location /></el-icon>
<span>用户管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="/dashboard/user">
<el-icon><OfficeBuilding /></el-icon>
用户管理
</el-menu-item>
</el-sub-menu>
<!-- 系统管理菜单 -->
<el-sub-menu index="8">
<template #title>
<el-icon><location /></el-icon>
<span>系统管理</span>
</template>
<!-- 二级目录 -->
<el-menu-item index="8-1">
<el-icon><OfficeBuilding /></el-icon>
系统管理
</el-menu-item>
<el-menu-item index="8-2">
<el-icon><OfficeBuilding /></el-icon>
系统统计
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-aside>
<el-container class="rightContent">
<!-- 右侧上 -->
<el-header>
<!-- 折叠 -->
<el-icon class="show" @click="showMenu()" v-show="isShowed===false"><Fold /></el-icon>
<!-- 打开 -->
<el-icon class="show" @click="showMenu()" v-show="isShowed"><Expand /></el-icon>
<!-- 用户信息的下拉菜单 -->
<el-dropdown :hide-on-click="false">
<span class="el-dropdown-link">
{{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>我的资料</el-dropdown-item>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item divided @click="logOut()">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</el-header>
<!-- 右侧中 -->
<el-main>
<router-view></router-view>
</el-main>
<!-- 右侧下 -->
<el-footer>@版权所有 2000-2099 旧约Alatus 深圳市龙华区MZJDQLHY第XX栋XX总部xx号</el-footer>
</el-container>
</el-container>
</template>
<script>
import { doGet } from "../http/httpRequest.js";
import { messageTip, getTokenName, removeToken, messageConfirm, later } from "../util/util.js";
export default {
name : "dashboard",
mounted(){
// 挂载时获取用户名
this.loadLoginName();
},
methods : {
loadLoginName(){
if(window.localStorage.getItem(getTokenName())){
}
// 获取用户名
doGet("/api/login/info",{}).then((resp) => {
this.user = resp.data.data;
});
},
// 左侧菜单左右展开与折叠
showMenu(){
// 取反即可
this.isShowed = !this.isShowed;
},
// 退出登录
logOut(){
// 一样没有参数值,直接给个空的大括号就好
doGet("/api/logOut",{}).then(resp => {
if(resp.data.code === 200){
messageTip('退出成功,即将返回首页',"success");
// 退出成功
removeToken();
later("/");
}
else{
messageConfirm(resp.data.msg+",是否强制退出?","账号退出异常").then(() => {
messageTip('退出成功,即将返回首页',"success");
// 后端不起作用,我们就把前端这里存的删了先
removeToken();
later("/");
}).catch(() => {
messageTip("已取消强制退出","warning");
});
}
});
}
},
data(){
return {
isShowed : false,
// 登录的用户对象
user : {},
title : "@CRM管理系统"
}
}
}
</script>
<style scoped>
.el-dropdown{
float: right;
line-height: 225%;
}
.el-aside{
background-color: black;
}
.menuTitle{
color: white;
text-align: center;
height: 5%;
line-height: 225%;
}
.el-header{
background-color: azure;
height: 5%;
line-height: 225%;
}
.el-footer{
background-color: aliceblue;
height: 5%;
line-height: 225%;
text-align: center;
}
.rightContent{
/* 高度设置为计算高度,屏幕高度的100% */
height: calc(100vh);
}
.show{
/* 聚焦事件 */
cursor: pointer;
}
</style>