小哥
3 years ago
parent
3fbc9ac890
commit
93b3bc595d
@ -1,8 +1,8 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 若依管理系统
|
VUE_APP_TITLE = 智能作业系统
|
||||||
|
|
||||||
# 生产环境配置
|
# 生产环境配置
|
||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
# 若依管理系统/生产环境
|
# 智能作业系统/生产环境
|
||||||
VUE_APP_BASE_API = '/prod-api'
|
VUE_APP_BASE_API = '/prod-api'
|
||||||
|
|||||||
@ -1,10 +1,10 @@
|
|||||||
# 页面标题
|
# 页面标题
|
||||||
VUE_APP_TITLE = 若依管理系统
|
VUE_APP_TITLE = 智能作业系统
|
||||||
|
|
||||||
NODE_ENV = production
|
NODE_ENV = production
|
||||||
|
|
||||||
# 测试环境配置
|
# 测试环境配置
|
||||||
ENV = 'staging'
|
ENV = 'staging'
|
||||||
|
|
||||||
# 若依管理系统/测试环境
|
# 智能作业系统/测试环境
|
||||||
VUE_APP_BASE_API = '/stage-api'
|
VUE_APP_BASE_API = '/stage-api'
|
||||||
|
|||||||
@ -1,61 +1,61 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
// 登录方法
|
// 登录方法
|
||||||
export function login(username, password, code, uuid) {
|
export function login(username, password, code, uuid) {
|
||||||
return request({
|
return request({
|
||||||
url: '/auth/login',
|
url: '/system/login',
|
||||||
headers: {
|
headers: {
|
||||||
isToken: false
|
isToken: false
|
||||||
},
|
},
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: { username, password, code, uuid }
|
data: { username, password, code, uuid }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 注册方法
|
// 注册方法
|
||||||
export function register(data) {
|
export function register(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/auth/register',
|
url: '/system/register',
|
||||||
headers: {
|
headers: {
|
||||||
isToken: false
|
isToken: false
|
||||||
},
|
},
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 刷新方法
|
// 刷新方法
|
||||||
export function refreshToken() {
|
export function refreshToken() {
|
||||||
return request({
|
return request({
|
||||||
url: '/auth/refresh',
|
url: '/system/refresh',
|
||||||
method: 'post'
|
method: 'post'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取用户详细信息
|
// 获取用户详细信息
|
||||||
export function getInfo() {
|
export function getInfo() {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/user/getInfo',
|
url: '/system/user/getInfo',
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 退出方法
|
// 退出方法
|
||||||
export function logout() {
|
export function logout() {
|
||||||
return request({
|
return request({
|
||||||
url: '/auth/logout',
|
url: '/system/logout',
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 获取验证码
|
// 获取验证码
|
||||||
export function getCodeImg() {
|
export function getCodeImg() {
|
||||||
return request({
|
return request({
|
||||||
url: '/code',
|
url: '/code',
|
||||||
headers: {
|
headers: {
|
||||||
isToken: false
|
isToken: false
|
||||||
},
|
},
|
||||||
method: 'get',
|
method: 'get',
|
||||||
timeout: 20000
|
timeout: 20000
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,60 +1,60 @@
|
|||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
|
|
||||||
// 查询菜单列表
|
// 查询菜单列表
|
||||||
export function listMenu(query) {
|
export function listMenu(query) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu/list',
|
url: '/system/menu/list',
|
||||||
method: 'get',
|
method: 'get',
|
||||||
params: query
|
params: query
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 查询菜单详细
|
// 查询菜单详细
|
||||||
export function getMenu(menuId) {
|
export function getMenu(menuId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu/' + menuId,
|
url: '/system/menu/' + menuId,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 查询菜单下拉树结构
|
// 查询菜单下拉树结构
|
||||||
export function treeselect() {
|
export function treeselect() {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu/treeselect',
|
url: '/system/menu/treeselect',
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 根据角色ID查询菜单下拉树结构
|
// 根据角色ID查询菜单下拉树结构
|
||||||
export function roleMenuTreeselect(roleId) {
|
export function roleMenuTreeselect(roleId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu/roleMenuTreeselect/' + roleId,
|
url: '/system/menu/roleMenuTreeselect/' + roleId,
|
||||||
method: 'get'
|
method: 'get'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 新增菜单
|
// 新增菜单
|
||||||
export function addMenu(data) {
|
export function addMenu(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu',
|
url: '/system/menu',
|
||||||
method: 'post',
|
method: 'post',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 修改菜单
|
// 修改菜单
|
||||||
export function updateMenu(data) {
|
export function updateMenu(data) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu',
|
url: '/system/menu',
|
||||||
method: 'put',
|
method: 'put',
|
||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 删除菜单
|
// 删除菜单
|
||||||
export function delMenu(menuId) {
|
export function delMenu(menuId) {
|
||||||
return request({
|
return request({
|
||||||
url: '/system/menu/' + menuId,
|
url: '/system/menu/' + menuId,
|
||||||
method: 'delete'
|
method: 'delete'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
|
After Width: | Height: | Size: 192 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 304 B |
|
After Width: | Height: | Size: 705 B |
|
After Width: | Height: | Size: 619 B |
|
After Width: | Height: | Size: 378 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 133 KiB |
|
After Width: | Height: | Size: 1000 B |
@ -1,227 +1,228 @@
|
|||||||
#app {
|
#app {
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
min-height: 100%;
|
transition: margin-left .28s;
|
||||||
transition: margin-left .28s;
|
margin-left: $base-sidebar-width;
|
||||||
margin-left: $base-sidebar-width;
|
position: relative;
|
||||||
position: relative;
|
overflow-y: hidden;
|
||||||
}
|
top: 80px;
|
||||||
|
}
|
||||||
.sidebarHide {
|
|
||||||
margin-left: 0!important;
|
.sidebarHide {
|
||||||
}
|
margin-left: 0!important;
|
||||||
|
}
|
||||||
.sidebar-container {
|
|
||||||
-webkit-transition: width .28s;
|
.sidebar-container {
|
||||||
transition: width 0.28s;
|
-webkit-transition: width .28s;
|
||||||
width: $base-sidebar-width !important;
|
transition: width 0.28s;
|
||||||
background-color: $base-menu-background;
|
width: $base-sidebar-width !important;
|
||||||
height: 100%;
|
background-color: $base-menu-background;
|
||||||
position: fixed;
|
height: calc(100vh - 80px);
|
||||||
font-size: 0px;
|
position: fixed;
|
||||||
top: 0;
|
font-size: 0px;
|
||||||
bottom: 0;
|
top: 80px;
|
||||||
left: 0;
|
bottom: 0;
|
||||||
z-index: 1001;
|
left: 0;
|
||||||
overflow: hidden;
|
z-index: 1001;
|
||||||
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
overflow: hidden;
|
||||||
box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
-webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||||
|
box-shadow: 2px 0 6px rgba(0,21,41,.35);
|
||||||
// reset element-ui css
|
|
||||||
.horizontal-collapse-transition {
|
// reset element-ui css
|
||||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
.horizontal-collapse-transition {
|
||||||
}
|
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||||
|
}
|
||||||
.scrollbar-wrapper {
|
|
||||||
overflow-x: hidden !important;
|
.scrollbar-wrapper {
|
||||||
}
|
overflow-x: hidden !important;
|
||||||
|
}
|
||||||
.el-scrollbar__bar.is-vertical {
|
|
||||||
right: 0px;
|
.el-scrollbar__bar.is-vertical {
|
||||||
}
|
right: 0px;
|
||||||
|
}
|
||||||
.el-scrollbar {
|
|
||||||
height: 100%;
|
.el-scrollbar {
|
||||||
}
|
height: 100%;
|
||||||
|
}
|
||||||
&.has-logo {
|
|
||||||
.el-scrollbar {
|
&.has-logo {
|
||||||
height: calc(100% - 50px);
|
.el-scrollbar {
|
||||||
}
|
height: calc(100% - 50px);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.is-horizontal {
|
|
||||||
display: none;
|
.is-horizontal {
|
||||||
}
|
display: none;
|
||||||
|
}
|
||||||
a {
|
|
||||||
display: inline-block;
|
a {
|
||||||
width: 100%;
|
display: inline-block;
|
||||||
overflow: hidden;
|
width: 100%;
|
||||||
}
|
overflow: hidden;
|
||||||
|
}
|
||||||
.svg-icon {
|
|
||||||
margin-right: 16px;
|
.svg-icon {
|
||||||
}
|
margin-right: 16px;
|
||||||
|
}
|
||||||
.el-menu {
|
|
||||||
border: none;
|
.el-menu {
|
||||||
height: 100%;
|
border: none;
|
||||||
width: 100% !important;
|
height: 100%;
|
||||||
}
|
width: 100% !important;
|
||||||
|
}
|
||||||
.el-menu-item, .el-submenu__title {
|
|
||||||
overflow: hidden !important;
|
.el-menu-item, .el-submenu__title {
|
||||||
text-overflow: ellipsis !important;
|
overflow: hidden !important;
|
||||||
white-space: nowrap !important;
|
text-overflow: ellipsis !important;
|
||||||
}
|
white-space: nowrap !important;
|
||||||
|
}
|
||||||
// menu hover
|
|
||||||
.submenu-title-noDropdown,
|
// menu hover
|
||||||
.el-submenu__title {
|
.submenu-title-noDropdown,
|
||||||
&:hover {
|
.el-submenu__title {
|
||||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
&:hover {
|
||||||
}
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
& .theme-dark .is-active > .el-submenu__title {
|
|
||||||
color: $base-menu-color-active !important;
|
& .theme-dark .is-active > .el-submenu__title {
|
||||||
}
|
color: $base-menu-color-active !important;
|
||||||
|
}
|
||||||
& .nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
& .el-submenu .el-menu-item {
|
& .nest-menu .el-submenu>.el-submenu__title,
|
||||||
min-width: $base-sidebar-width !important;
|
& .el-submenu .el-menu-item {
|
||||||
|
min-width: $base-sidebar-width !important;
|
||||||
&:hover {
|
|
||||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
&:hover {
|
||||||
}
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
& .theme-dark .el-submenu .el-menu-item {
|
& .theme-dark .nest-menu .el-submenu>.el-submenu__title,
|
||||||
background-color: $base-sub-menu-background !important;
|
& .theme-dark .el-submenu .el-menu-item {
|
||||||
|
background-color: $base-sub-menu-background !important;
|
||||||
&:hover {
|
|
||||||
background-color: $base-sub-menu-hover !important;
|
&:hover {
|
||||||
}
|
background-color: $base-sub-menu-hover !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.hideSidebar {
|
|
||||||
.sidebar-container {
|
.hideSidebar {
|
||||||
width: 54px !important;
|
.sidebar-container {
|
||||||
}
|
width: 54px !important;
|
||||||
|
}
|
||||||
.main-container {
|
|
||||||
margin-left: 54px;
|
.main-container {
|
||||||
}
|
margin-left: 54px;
|
||||||
|
}
|
||||||
.submenu-title-noDropdown {
|
|
||||||
padding: 0 !important;
|
.submenu-title-noDropdown {
|
||||||
position: relative;
|
padding: 0 !important;
|
||||||
|
position: relative;
|
||||||
.el-tooltip {
|
|
||||||
padding: 0 !important;
|
.el-tooltip {
|
||||||
|
padding: 0 !important;
|
||||||
.svg-icon {
|
|
||||||
margin-left: 20px;
|
.svg-icon {
|
||||||
}
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.el-submenu {
|
|
||||||
overflow: hidden;
|
.el-submenu {
|
||||||
|
overflow: hidden;
|
||||||
&>.el-submenu__title {
|
|
||||||
padding: 0 !important;
|
&>.el-submenu__title {
|
||||||
|
padding: 0 !important;
|
||||||
.svg-icon {
|
|
||||||
margin-left: 20px;
|
.svg-icon {
|
||||||
}
|
margin-left: 20px;
|
||||||
|
}
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.el-menu--collapse {
|
|
||||||
.el-submenu {
|
.el-menu--collapse {
|
||||||
&>.el-submenu__title {
|
.el-submenu {
|
||||||
&>span {
|
&>.el-submenu__title {
|
||||||
height: 0;
|
&>span {
|
||||||
width: 0;
|
height: 0;
|
||||||
overflow: hidden;
|
width: 0;
|
||||||
visibility: hidden;
|
overflow: hidden;
|
||||||
display: inline-block;
|
visibility: hidden;
|
||||||
}
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.el-menu--collapse .el-menu .el-submenu {
|
|
||||||
min-width: $base-sidebar-width !important;
|
.el-menu--collapse .el-menu .el-submenu {
|
||||||
}
|
min-width: $base-sidebar-width !important;
|
||||||
|
}
|
||||||
// mobile responsive
|
|
||||||
.mobile {
|
// mobile responsive
|
||||||
.main-container {
|
.mobile {
|
||||||
margin-left: 0px;
|
.main-container {
|
||||||
}
|
margin-left: 0px;
|
||||||
|
}
|
||||||
.sidebar-container {
|
|
||||||
transition: transform .28s;
|
.sidebar-container {
|
||||||
width: $base-sidebar-width !important;
|
transition: transform .28s;
|
||||||
}
|
width: $base-sidebar-width !important;
|
||||||
|
}
|
||||||
&.hideSidebar {
|
|
||||||
.sidebar-container {
|
&.hideSidebar {
|
||||||
pointer-events: none;
|
.sidebar-container {
|
||||||
transition-duration: 0.3s;
|
pointer-events: none;
|
||||||
transform: translate3d(-$base-sidebar-width, 0, 0);
|
transition-duration: 0.3s;
|
||||||
}
|
transform: translate3d(-$base-sidebar-width, 0, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.withoutAnimation {
|
|
||||||
|
.withoutAnimation {
|
||||||
.main-container,
|
|
||||||
.sidebar-container {
|
.main-container,
|
||||||
transition: none;
|
.sidebar-container {
|
||||||
}
|
transition: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// when menu collapsed
|
|
||||||
.el-menu--vertical {
|
// when menu collapsed
|
||||||
&>.el-menu {
|
.el-menu--vertical {
|
||||||
.svg-icon {
|
&>.el-menu {
|
||||||
margin-right: 16px;
|
.svg-icon {
|
||||||
}
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.nest-menu .el-submenu>.el-submenu__title,
|
|
||||||
.el-menu-item {
|
.nest-menu .el-submenu>.el-submenu__title,
|
||||||
&:hover {
|
.el-menu-item {
|
||||||
// you can use $subMenuHover
|
&:hover {
|
||||||
background-color: rgba(0, 0, 0, 0.06) !important;
|
// you can use $subMenuHover
|
||||||
}
|
background-color: rgba(0, 0, 0, 0.06) !important;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// the scroll bar appears when the subMenu is too long
|
|
||||||
>.el-menu--popup {
|
// the scroll bar appears when the subMenu is too long
|
||||||
max-height: 100vh;
|
>.el-menu--popup {
|
||||||
overflow-y: auto;
|
max-height: 100vh;
|
||||||
|
overflow-y: auto;
|
||||||
&::-webkit-scrollbar-track-piece {
|
|
||||||
background: #d3dce6;
|
&::-webkit-scrollbar-track-piece {
|
||||||
}
|
background: #d3dce6;
|
||||||
|
}
|
||||||
&::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
&::-webkit-scrollbar {
|
||||||
}
|
width: 6px;
|
||||||
|
}
|
||||||
&::-webkit-scrollbar-thumb {
|
|
||||||
background: #99a9bf;
|
&::-webkit-scrollbar-thumb {
|
||||||
border-radius: 20px;
|
background: #99a9bf;
|
||||||
}
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -0,0 +1,42 @@
|
|||||||
|
<template>
|
||||||
|
<div class="right-fence-box">
|
||||||
|
<div class="content">
|
||||||
|
右侧边栏111
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
//右侧边栏布局
|
||||||
|
.right-fence-box {
|
||||||
|
// width: 423px;
|
||||||
|
width: 25.5%;
|
||||||
|
min-height: calc(100% - 104px);
|
||||||
|
border-radius: 6px;
|
||||||
|
box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
overflow-y: auto;
|
||||||
|
right: 24px;
|
||||||
|
top: 24px;
|
||||||
|
.content{
|
||||||
|
margin-top: 20%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.tab{
|
||||||
|
font-size: 2px;
|
||||||
|
background: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,93 +1,93 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||||
<transition name="sidebarLogoFade">
|
<transition name="sidebarLogoFade">
|
||||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||||
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||||
</router-link>
|
</router-link>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import logoImg from '@/assets/logo/logo.png'
|
import logoImg from '@/assets/logo/logo.png'
|
||||||
import variables from '@/assets/styles/variables.scss'
|
import variables from '@/assets/styles/variables.scss'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SidebarLogo',
|
name: 'SidebarLogo',
|
||||||
props: {
|
props: {
|
||||||
collapse: {
|
collapse: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
required: true
|
required: true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
variables() {
|
variables() {
|
||||||
return variables;
|
return variables;
|
||||||
},
|
},
|
||||||
sideTheme() {
|
sideTheme() {
|
||||||
return this.$store.state.settings.sideTheme
|
return this.$store.state.settings.sideTheme
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: '若依管理系统',
|
title: '智能作业系统',
|
||||||
logo: logoImg
|
logo: logoImg
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.sidebarLogoFade-enter-active {
|
.sidebarLogoFade-enter-active {
|
||||||
transition: opacity 1.5s;
|
transition: opacity 1.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebarLogoFade-enter,
|
.sidebarLogoFade-enter,
|
||||||
.sidebarLogoFade-leave-to {
|
.sidebarLogoFade-leave-to {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-logo-container {
|
.sidebar-logo-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
background: #2b2f3a;
|
background: #2b2f3a;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
& .sidebar-logo-link {
|
& .sidebar-logo-link {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
& .sidebar-logo {
|
& .sidebar-logo {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
& .sidebar-title {
|
& .sidebar-title {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 50px;
|
line-height: 50px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.collapse {
|
&.collapse {
|
||||||
.sidebar-logo {
|
.sidebar-logo {
|
||||||
margin-right: 0px;
|
margin-right: 0px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,57 +1,57 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="activeMenu"
|
:default-active="activeMenu"
|
||||||
:collapse="isCollapse"
|
:collapse="isCollapse"
|
||||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||||
:unique-opened="true"
|
:unique-opened="true"
|
||||||
:active-text-color="settings.theme"
|
:active-text-color="settings.theme"
|
||||||
:collapse-transition="false"
|
:collapse-transition="false"
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
v-for="(route, index) in sidebarRouters"
|
v-for="(route, index) in sidebarRouters"
|
||||||
:key="route.path + index"
|
:key="route.path + index"
|
||||||
:item="route"
|
:item="route"
|
||||||
:base-path="route.path"
|
:base-path="route.path"
|
||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters, mapState } from "vuex";
|
import { mapGetters, mapState } from "vuex";
|
||||||
import Logo from "./Logo";
|
import Logo from "./Logo";
|
||||||
import SidebarItem from "./SidebarItem";
|
import SidebarItem from "./SidebarItem";
|
||||||
import variables from "@/assets/styles/variables.scss";
|
import variables from "@/assets/styles/variables.scss";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SidebarItem, Logo },
|
components: { SidebarItem, Logo },
|
||||||
computed: {
|
computed: {
|
||||||
...mapState(["settings"]),
|
...mapState(["settings"]),
|
||||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||||
activeMenu() {
|
activeMenu() {
|
||||||
const route = this.$route;
|
const route = this.$route;
|
||||||
const { meta, path } = route;
|
const { meta, path } = route;
|
||||||
// if set path, the sidebar will highlight the path you set
|
// if set path, the sidebar will highlight the path you set
|
||||||
if (meta.activeMenu) {
|
if (meta.activeMenu) {
|
||||||
return meta.activeMenu;
|
return meta.activeMenu;
|
||||||
}
|
}
|
||||||
return path;
|
return path;
|
||||||
},
|
},
|
||||||
showLogo() {
|
showLogo() {
|
||||||
return this.$store.state.settings.sidebarLogo;
|
return this.$store.state.settings.sidebarLogo;
|
||||||
},
|
},
|
||||||
variables() {
|
variables() {
|
||||||
return variables;
|
return variables;
|
||||||
},
|
},
|
||||||
isCollapse() {
|
isCollapse() {
|
||||||
return !this.sidebar.opened;
|
return !this.sidebar.opened;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,86 +1,88 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
|
|
||||||
import Cookies from 'js-cookie'
|
import Cookies from 'js-cookie'
|
||||||
|
|
||||||
import Element from 'element-ui'
|
import Element from 'element-ui'
|
||||||
import './assets/styles/element-variables.scss'
|
import './assets/styles/element-variables.scss'
|
||||||
|
|
||||||
import '@/assets/styles/index.scss' // global css
|
import '@/assets/styles/index.scss' // global css
|
||||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||||
import App from './App'
|
import App from './App'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import directive from './directive' // directive
|
import directive from './directive' // directive
|
||||||
import plugins from './plugins' // plugins
|
import plugins from './plugins' // plugins
|
||||||
import { download } from '@/utils/request'
|
import global from './plugins/global';
|
||||||
|
import { download } from '@/utils/request'
|
||||||
import './assets/icons' // icon
|
|
||||||
import './permission' // permission control
|
import './assets/icons' // icon
|
||||||
import { getDicts } from "@/api/system/dict/data";
|
import './permission' // permission control
|
||||||
import { getConfigKey } from "@/api/system/config";
|
import { getDicts } from "@/api/system/dict/data";
|
||||||
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
|
import { getConfigKey } from "@/api/system/config";
|
||||||
// 分页组件
|
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
|
||||||
import Pagination from "@/components/Pagination";
|
// 分页组件
|
||||||
// 自定义表格工具组件
|
import Pagination from "@/components/Pagination";
|
||||||
import RightToolbar from "@/components/RightToolbar"
|
// 自定义表格工具组件
|
||||||
// 富文本组件
|
import RightToolbar from "@/components/RightToolbar"
|
||||||
import Editor from "@/components/Editor"
|
// 富文本组件
|
||||||
// 文件上传组件
|
import Editor from "@/components/Editor"
|
||||||
import FileUpload from "@/components/FileUpload"
|
// 文件上传组件
|
||||||
// 图片上传组件
|
import FileUpload from "@/components/FileUpload"
|
||||||
import ImageUpload from "@/components/ImageUpload"
|
// 图片上传组件
|
||||||
// 图片预览组件
|
import ImageUpload from "@/components/ImageUpload"
|
||||||
import ImagePreview from "@/components/ImagePreview"
|
// 图片预览组件
|
||||||
// 字典标签组件
|
import ImagePreview from "@/components/ImagePreview"
|
||||||
import DictTag from '@/components/DictTag'
|
// 字典标签组件
|
||||||
// 头部标签组件
|
import DictTag from '@/components/DictTag'
|
||||||
import VueMeta from 'vue-meta'
|
// 头部标签组件
|
||||||
// 字典数据组件
|
import VueMeta from 'vue-meta'
|
||||||
import DictData from '@/components/DictData'
|
// 字典数据组件
|
||||||
|
import DictData from '@/components/DictData'
|
||||||
// 全局方法挂载
|
|
||||||
Vue.prototype.getDicts = getDicts
|
// 全局方法挂载
|
||||||
Vue.prototype.getConfigKey = getConfigKey
|
Vue.prototype.getDicts = getDicts
|
||||||
Vue.prototype.parseTime = parseTime
|
Vue.prototype.getConfigKey = getConfigKey
|
||||||
Vue.prototype.resetForm = resetForm
|
Vue.prototype.parseTime = parseTime
|
||||||
Vue.prototype.addDateRange = addDateRange
|
Vue.prototype.resetForm = resetForm
|
||||||
Vue.prototype.selectDictLabel = selectDictLabel
|
Vue.prototype.addDateRange = addDateRange
|
||||||
Vue.prototype.selectDictLabels = selectDictLabels
|
Vue.prototype.selectDictLabel = selectDictLabel
|
||||||
Vue.prototype.download = download
|
Vue.prototype.selectDictLabels = selectDictLabels
|
||||||
Vue.prototype.handleTree = handleTree
|
Vue.prototype.download = download
|
||||||
|
Vue.prototype.handleTree = handleTree
|
||||||
// 全局组件挂载
|
Vue.prototype.$global = global;
|
||||||
Vue.component('DictTag', DictTag)
|
|
||||||
Vue.component('Pagination', Pagination)
|
// 全局组件挂载
|
||||||
Vue.component('RightToolbar', RightToolbar)
|
Vue.component('DictTag', DictTag)
|
||||||
Vue.component('Editor', Editor)
|
Vue.component('Pagination', Pagination)
|
||||||
Vue.component('FileUpload', FileUpload)
|
Vue.component('RightToolbar', RightToolbar)
|
||||||
Vue.component('ImageUpload', ImageUpload)
|
Vue.component('Editor', Editor)
|
||||||
Vue.component('ImagePreview', ImagePreview)
|
Vue.component('FileUpload', FileUpload)
|
||||||
|
Vue.component('ImageUpload', ImageUpload)
|
||||||
Vue.use(directive)
|
Vue.component('ImagePreview', ImagePreview)
|
||||||
Vue.use(plugins)
|
|
||||||
Vue.use(VueMeta)
|
Vue.use(directive)
|
||||||
DictData.install()
|
Vue.use(plugins)
|
||||||
|
Vue.use(VueMeta)
|
||||||
/**
|
DictData.install()
|
||||||
* If you don't want to use mock-server
|
|
||||||
* you want to use MockJs for mock api
|
/**
|
||||||
* you can execute: mockXHR()
|
* If you don't want to use mock-server
|
||||||
*
|
* you want to use MockJs for mock api
|
||||||
* Currently MockJs will be used in the production environment,
|
* you can execute: mockXHR()
|
||||||
* please remove it before going online! ! !
|
*
|
||||||
*/
|
* Currently MockJs will be used in the production environment,
|
||||||
|
* please remove it before going online! ! !
|
||||||
Vue.use(Element, {
|
*/
|
||||||
size: Cookies.get('size') || 'medium' // set element-ui default size
|
|
||||||
})
|
Vue.use(Element, {
|
||||||
|
size: Cookies.get('size') || 'medium' // set element-ui default size
|
||||||
Vue.config.productionTip = false
|
})
|
||||||
|
|
||||||
new Vue({
|
Vue.config.productionTip = false
|
||||||
el: '#app',
|
|
||||||
router,
|
new Vue({
|
||||||
store,
|
el: '#app',
|
||||||
render: h => h(App)
|
router,
|
||||||
})
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
})
|
||||||
|
|||||||
@ -0,0 +1,32 @@
|
|||||||
|
let style
|
||||||
|
let clearWaterMark = () => {
|
||||||
|
if (style) style.remove
|
||||||
|
}
|
||||||
|
export default function createWaterMark(str,_height) {
|
||||||
|
clearWaterMark()
|
||||||
|
if (!str) return
|
||||||
|
let width = window.parseInt(document.body.clientWidth),
|
||||||
|
canvasWidth = width / window.parseInt(width / 400),
|
||||||
|
fontFamily = window.getComputedStyle(document.body)['font-family'],
|
||||||
|
canvas = document.createElement('canvas')
|
||||||
|
canvas.width = canvasWidth
|
||||||
|
canvas.height = 200
|
||||||
|
let cxt = canvas.getContext('2d')
|
||||||
|
cxt.rotate((-20 * Math.PI) / 180)
|
||||||
|
cxt.font = `18px${fontFamily}`
|
||||||
|
cxt.fillStyle = 'rgba(8,8,8,0.2)'
|
||||||
|
cxt.fillText(str, 50, 200)
|
||||||
|
let imgSrc = canvas.toDataURL('image/png')
|
||||||
|
style = document.createElement('style')
|
||||||
|
style.innerHTML = `.with-watermark:before{
|
||||||
|
content:"";
|
||||||
|
width:100%;
|
||||||
|
pointer-events:none;
|
||||||
|
height:${_height}px;
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
z-index:99999;
|
||||||
|
background-image:url("${imgSrc}")
|
||||||
|
}`
|
||||||
|
;(document.head.append || document.head.appendChild).apply(document.head, [style])
|
||||||
|
}
|
||||||
@ -1,115 +1,115 @@
|
|||||||
import { login, logout, getInfo, refreshToken } from '@/api/login'
|
import { login, logout, getInfo, refreshToken } from '@/api/login'
|
||||||
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
|
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
|
||||||
|
|
||||||
const user = {
|
const user = {
|
||||||
state: {
|
state: {
|
||||||
token: getToken(),
|
token: getToken(),
|
||||||
name: '',
|
name: '',
|
||||||
avatar: '',
|
avatar: '',
|
||||||
roles: [],
|
roles: [],
|
||||||
permissions: []
|
permissions: []
|
||||||
},
|
},
|
||||||
|
|
||||||
mutations: {
|
mutations: {
|
||||||
SET_TOKEN: (state, token) => {
|
SET_TOKEN: (state, token) => {
|
||||||
state.token = token
|
state.token = token
|
||||||
},
|
},
|
||||||
SET_EXPIRES_IN: (state, time) => {
|
SET_EXPIRES_IN: (state, time) => {
|
||||||
state.expires_in = time
|
state.expires_in = time
|
||||||
},
|
},
|
||||||
SET_NAME: (state, name) => {
|
SET_NAME: (state, name) => {
|
||||||
state.name = name
|
state.name = name
|
||||||
},
|
},
|
||||||
SET_AVATAR: (state, avatar) => {
|
SET_AVATAR: (state, avatar) => {
|
||||||
state.avatar = avatar
|
state.avatar = avatar
|
||||||
},
|
},
|
||||||
SET_ROLES: (state, roles) => {
|
SET_ROLES: (state, roles) => {
|
||||||
state.roles = roles
|
state.roles = roles
|
||||||
},
|
},
|
||||||
SET_PERMISSIONS: (state, permissions) => {
|
SET_PERMISSIONS: (state, permissions) => {
|
||||||
state.permissions = permissions
|
state.permissions = permissions
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
actions: {
|
actions: {
|
||||||
// 登录
|
// 登录
|
||||||
Login({ commit }, userInfo) {
|
Login({ commit }, userInfo) {
|
||||||
const username = userInfo.username.trim()
|
const username = userInfo.username.trim()
|
||||||
const password = userInfo.password
|
const password = userInfo.password
|
||||||
const code = userInfo.code
|
const code = userInfo.code
|
||||||
const uuid = userInfo.uuid
|
const uuid = userInfo.uuid
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
login(username, password, code, uuid).then(res => {
|
login(username, password, code, uuid).then(res => {
|
||||||
let data = res.data
|
let data = res.data
|
||||||
setToken(data.access_token)
|
setToken(data.access_token)
|
||||||
commit('SET_TOKEN', data.access_token)
|
commit('SET_TOKEN', data.access_token)
|
||||||
setExpiresIn(data.expires_in)
|
setExpiresIn(data.expires_in)
|
||||||
commit('SET_EXPIRES_IN', data.expires_in)
|
commit('SET_EXPIRES_IN', data.expires_in)
|
||||||
resolve()
|
resolve()
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 获取用户信息
|
// 获取用户信息
|
||||||
GetInfo({ commit, state }) {
|
GetInfo({ commit, state }) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
getInfo().then(res => {
|
getInfo().then(res => {
|
||||||
const user = res.user
|
const user = res.user
|
||||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
||||||
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||||
commit('SET_ROLES', res.roles)
|
commit('SET_ROLES', res.roles)
|
||||||
commit('SET_PERMISSIONS', res.permissions)
|
commit('SET_PERMISSIONS', res.permissions)
|
||||||
} else {
|
} else {
|
||||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||||
}
|
}
|
||||||
commit('SET_NAME', user.userName)
|
commit('SET_NAME', user.userName)
|
||||||
commit('SET_AVATAR', avatar)
|
commit('SET_AVATAR', avatar)
|
||||||
resolve(res)
|
resolve(res)
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 刷新token
|
// 刷新token
|
||||||
RefreshToken({commit, state}) {
|
RefreshToken({commit, state}) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
refreshToken(state.token).then(res => {
|
refreshToken(state.token).then(res => {
|
||||||
setExpiresIn(res.data)
|
setExpiresIn(res.data)
|
||||||
commit('SET_EXPIRES_IN', res.data)
|
commit('SET_EXPIRES_IN', res.data)
|
||||||
resolve()
|
resolve()
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 退出系统
|
// 退出系统
|
||||||
LogOut({ commit, state }) {
|
LogOut({ commit, state }) {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
logout(state.token).then(() => {
|
logout(state.token).then(() => {
|
||||||
commit('SET_TOKEN', '')
|
commit('SET_TOKEN', '')
|
||||||
commit('SET_ROLES', [])
|
commit('SET_ROLES', [])
|
||||||
commit('SET_PERMISSIONS', [])
|
commit('SET_PERMISSIONS', [])
|
||||||
removeToken()
|
removeToken()
|
||||||
resolve()
|
resolve()
|
||||||
}).catch(error => {
|
}).catch(error => {
|
||||||
reject(error)
|
reject(error)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
// 前端 登出
|
// 前端 登出
|
||||||
FedLogOut({ commit }) {
|
FedLogOut({ commit }) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
commit('SET_TOKEN', '')
|
commit('SET_TOKEN', '')
|
||||||
removeToken()
|
removeToken()
|
||||||
resolve()
|
resolve()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default user
|
export default user
|
||||||
|
|||||||
Loading…
Reference in new issue