<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 v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </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(); }, // 提供者生产者 provide(){ return { // 提供了一个函数,要求必须是箭头函数 reload: () => { this.isRouterAlive = false; this.$nextTick(function(){ this.isRouterAlive = true; }); } } }, 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管理系统", // 控制右侧子路由内容是否显示 isRouterAlive : true } } } </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 v-slot="{ Component }">
<keep-alive>
<component :is="Component" />
</keep-alive>
</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();
},
// 提供者生产者
provide(){
return {
// 提供了一个函数,要求必须是箭头函数
reload: () => {
this.isRouterAlive = false;
this.$nextTick(function(){
this.isRouterAlive = true;
});
}
}
},
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管理系统",
// 控制右侧子路由内容是否显示
isRouterAlive : true
}
}
}
</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-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.createByPO.createTime }}</div> </el-form-item> <el-form-item label="账号创建者:"> <div class="detail"> {{ userDetail.createByPO.name }}</div> </el-form-item> <el-form-item label="修改账号时间:"> <div class="detail"> {{ userDetail.editByPO.editTime }}</div> </el-form-item> <el-form-item label="修改账号者:"> <div class="detail"> {{ userDetail.editByPO.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-item> <el-button type="primary" plain @click="goBack()">返 回</el-button> </el-form-item> </el-form> </template> <script> import { doGet } from '../http/httpRequest'; import { messageTip } from '../util/util'; export default { name:"userView", mounted(){ this.loadUserDetail(); }, data(){ return { // 用户详情对象 userDetail : { createByPO : {}, editByPO : {} }, 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.createByPO){ this.userDetail.createByPO = {}; } if(!this.userDetail.editByPO){ this.userDetail.editByPO = {}; } } }) }, goBack(){ messageTip("返回成功","success"); this.$router.back(); } } } </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.createByPO.createTime }}</div>
</el-form-item>
<el-form-item label="账号创建者:">
<div class="detail"> {{ userDetail.createByPO.name }}</div>
</el-form-item>
<el-form-item label="修改账号时间:">
<div class="detail"> {{ userDetail.editByPO.editTime }}</div>
</el-form-item>
<el-form-item label="修改账号者:">
<div class="detail"> {{ userDetail.editByPO.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-item>
<el-button type="primary" plain @click="goBack()">返 回</el-button>
</el-form-item>
</el-form>
</template>
<script>
import { doGet } from '../http/httpRequest';
import { messageTip } from '../util/util';
export default {
name:"userView",
mounted(){
this.loadUserDetail();
},
data(){
return {
// 用户详情对象
userDetail : {
createByPO : {},
editByPO : {}
},
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.createByPO){
this.userDetail.createByPO = {};
}
if(!this.userDetail.editByPO){
this.userDetail.editByPO = {};
}
}
})
},
goBack(){
messageTip("返回成功","success");
this.$router.back();
}
}
}
</script>
<style scoped>
.detail{
background-color: azure;
width: 100%;
padding-left: 1%;
}
</style>