布局修改、组件代码移植
This commit is contained in:
小哥
parent
3fbc9ac890
commit
93b3bc595d
|
|
@ -1,10 +1,10 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
VUE_APP_TITLE = 智能作业系统
|
||||
|
||||
# 开发环境配置
|
||||
ENV = 'development'
|
||||
|
||||
# 若依管理系统/开发环境
|
||||
# 智能作业系统/开发环境
|
||||
VUE_APP_BASE_API = '/dev-api'
|
||||
|
||||
# 路由懒加载
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 若依管理系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 智能作业系统
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 智能作业系统/生产环境
|
||||
VUE_APP_BASE_API = '/prod-api'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
# 页面标题
|
||||
VUE_APP_TITLE = 若依管理系统
|
||||
|
||||
NODE_ENV = production
|
||||
|
||||
# 测试环境配置
|
||||
ENV = 'staging'
|
||||
|
||||
# 若依管理系统/测试环境
|
||||
VUE_APP_BASE_API = '/stage-api'
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 智能作业系统
|
||||
|
||||
NODE_ENV = production
|
||||
|
||||
# 测试环境配置
|
||||
ENV = 'staging'
|
||||
|
||||
# 智能作业系统/测试环境
|
||||
VUE_APP_BASE_API = '/stage-api'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "ruoyi",
|
||||
"version": "3.6.1",
|
||||
"description": "若依管理系统",
|
||||
"description": "智能作业系统",
|
||||
"author": "若依",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,28 +1,112 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<theme-picker />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThemePicker from "@/components/ThemePicker";
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: { ThemePicker },
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
|
||||
titleTemplate: title => {
|
||||
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
#app .theme-picker {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
<theme-picker />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ThemePicker from "@/components/ThemePicker";
|
||||
import WaterMark from '@/plugins/waterMark.js'
|
||||
|
||||
export default {
|
||||
name: "App",
|
||||
components: { ThemePicker },
|
||||
metaInfo() {
|
||||
return {
|
||||
title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
|
||||
titleTemplate: title => {
|
||||
return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// this.initWartHeight = document.body.clientHeight
|
||||
// this.initWaterMark(this.initWartHeight)
|
||||
// window.addEventListener('scroll', this.handleScroll, true)
|
||||
},
|
||||
methods: {
|
||||
//添加水印
|
||||
initWaterMark(height) {
|
||||
let userInfo = this.$store.state.user.userInfo,
|
||||
_time = this.$global.createTime('day'),
|
||||
_str = '测试角色' + ' / ' + '测试用户' + ' / ' + _time
|
||||
console.log(userInfo, '水印')
|
||||
WaterMark(_str, height)
|
||||
},
|
||||
handleScroll() {
|
||||
this.$nextTick(() => {
|
||||
let height = document.getElementById('app-main').scrollHeight
|
||||
console.log('内容区高度', height)
|
||||
if (height && this.initWartHeight != height) {
|
||||
this.initWartHeight = height
|
||||
this.initWaterMark(height)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 根据当前路由设置hasOpen
|
||||
isOpenIframePage() {
|
||||
console.log(this.componentsArr, 'this.componentsArr')
|
||||
const target = this.componentsArr.find(item => {
|
||||
console.log(item, 'item')
|
||||
return item.path === this.$route.query.path
|
||||
})
|
||||
if (target && !target.hasOpen) {
|
||||
target.hasOpen = true
|
||||
}
|
||||
},
|
||||
// 遍历路由的所有页面，把含有iframeComponent标识的收集起来
|
||||
getComponentsArr() {
|
||||
// debugger
|
||||
const router = this.$router
|
||||
const routes = router.options.routes
|
||||
// console.log(router.options.routes, '打印 router.options.routes')
|
||||
const iframeArr = [] //routes.filter(item => item.iframeComponent)
|
||||
const [{ iframeComponent = null } = {}] = iframeArr || []
|
||||
// if (sessionStorage.getItem('iframeMenuList')) return false
|
||||
// 处理单客画像客户明细切换页签改变问题
|
||||
const [{ name: custRouteName, path, component }] = routes.filter(item => item.name === 'uCustView')
|
||||
const custComponent = { name: custRouteName, menuUrl: path, component }
|
||||
// console.log(custViews, 'custViews')
|
||||
if (sessionStorage.getItem('iframeMenuList')) {
|
||||
const iframeMenuList = JSON.parse(sessionStorage.getItem('iframeMenuList')) || []
|
||||
// console.log(routes,iframeArr,'iframeArr')
|
||||
console.log(iframeMenuList, 'options 1111')
|
||||
|
||||
return [...iframeMenuList, custComponent].map(item => {
|
||||
const name = item.menuId || item.menuUrl.replace('/', '')
|
||||
return {
|
||||
name,
|
||||
path: item.menuUrl,
|
||||
menuUrl: item.menuUrl,
|
||||
hasOpen: false, // 是否打开过，默认false
|
||||
component: iframeComponent, // 组件文件的引用
|
||||
// fullPath: item.fullPath,
|
||||
}
|
||||
})
|
||||
}
|
||||
return false
|
||||
},
|
||||
// 初始化iframe
|
||||
initIframe() {
|
||||
// debugger
|
||||
const componentsArr = this.getComponentsArr()
|
||||
console.log(componentsArr, 'componentsArr')
|
||||
if (componentsArr) {
|
||||
componentsArr.forEach(item => {
|
||||
Vue.component(item.name, item.component)
|
||||
})
|
||||
this.componentsArr = componentsArr
|
||||
console.log(this.componentsArr, 'this.componentsArr')
|
||||
// 判断当前路由是否iframe页
|
||||
this.isOpenIframePage()
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
#app .theme-picker {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,61 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 登录方法
|
||||
export function login(username, password, code, uuid) {
|
||||
return request({
|
||||
url: '/auth/login',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: { username, password, code, uuid }
|
||||
})
|
||||
}
|
||||
|
||||
// 注册方法
|
||||
export function register(data) {
|
||||
return request({
|
||||
url: '/auth/register',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新方法
|
||||
export function refreshToken() {
|
||||
return request({
|
||||
url: '/auth/refresh',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户详细信息
|
||||
export function getInfo() {
|
||||
return request({
|
||||
url: '/system/user/getInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/auth/logout',
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
export function getCodeImg() {
|
||||
return request({
|
||||
url: '/code',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'get',
|
||||
timeout: 20000
|
||||
})
|
||||
}
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 登录方法
|
||||
export function login(username, password, code, uuid) {
|
||||
return request({
|
||||
url: '/system/login',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: { username, password, code, uuid }
|
||||
})
|
||||
}
|
||||
|
||||
// 注册方法
|
||||
export function register(data) {
|
||||
return request({
|
||||
url: '/system/register',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新方法
|
||||
export function refreshToken() {
|
||||
return request({
|
||||
url: '/system/refresh',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户详细信息
|
||||
export function getInfo() {
|
||||
return request({
|
||||
url: '/system/user/getInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/system/logout',
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
export function getCodeImg() {
|
||||
return request({
|
||||
url: '/code',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'get',
|
||||
timeout: 20000
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +1,60 @@
|
|||
import request from '@/utils/request'
|
||||
|
||||
// 查询菜单列表
|
||||
export function listMenu(query) {
|
||||
return request({
|
||||
url: '/system/menu/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询菜单详细
|
||||
export function getMenu(menuId) {
|
||||
return request({
|
||||
url: '/system/menu/' + menuId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询菜单下拉树结构
|
||||
export function treeselect() {
|
||||
return request({
|
||||
url: '/system/menu/treeselect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据角色ID查询菜单下拉树结构
|
||||
export function roleMenuTreeselect(roleId) {
|
||||
return request({
|
||||
url: '/system/menu/roleMenuTreeselect/' + roleId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
export function addMenu(data) {
|
||||
return request({
|
||||
url: '/system/menu',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改菜单
|
||||
export function updateMenu(data) {
|
||||
return request({
|
||||
url: '/system/menu',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
export function delMenu(menuId) {
|
||||
return request({
|
||||
url: '/system/menu/' + menuId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询菜单列表
|
||||
export function listMenu(query) {
|
||||
return request({
|
||||
url: '/system/menu/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询菜单详细
|
||||
export function getMenu(menuId) {
|
||||
return request({
|
||||
url: '/system/menu/' + menuId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 查询菜单下拉树结构
|
||||
export function treeselect() {
|
||||
return request({
|
||||
url: '/system/menu/treeselect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据角色ID查询菜单下拉树结构
|
||||
export function roleMenuTreeselect(roleId) {
|
||||
return request({
|
||||
url: '/system/menu/roleMenuTreeselect/' + roleId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
export function addMenu(data) {
|
||||
return request({
|
||||
url: '/system/menu',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改菜单
|
||||
export function updateMenu(data) {
|
||||
return request({
|
||||
url: '/system/menu',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
export function delMenu(menuId) {
|
||||
return request({
|
||||
url: '/system/menu/' + menuId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 B |
Binary file not shown.
|
After Width: | Height: | Size: 705 B |
Binary file not shown.
|
After Width: | Height: | Size: 619 B |
Binary file not shown.
|
After Width: | Height: | Size: 378 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1000 B |
|
|
@ -1,227 +1,228 @@
|
|||
#app {
|
||||
|
||||
.main-container {
|
||||
min-height: 100%;
|
||||
transition: margin-left .28s;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-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 {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !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 {
|
||||
min-width: $base-sidebar-width !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 {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
|
||||
&>.el-submenu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$base-sidebar-width, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
&>.el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// 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 {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
#app {
|
||||
|
||||
.main-container {
|
||||
transition: margin-left .28s;
|
||||
margin-left: $base-sidebar-width;
|
||||
position: relative;
|
||||
overflow-y: hidden;
|
||||
top: 80px;
|
||||
}
|
||||
|
||||
.sidebarHide {
|
||||
margin-left: 0!important;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
-webkit-transition: width .28s;
|
||||
transition: width 0.28s;
|
||||
width: $base-sidebar-width !important;
|
||||
background-color: $base-menu-background;
|
||||
height: calc(100vh - 80px);
|
||||
position: fixed;
|
||||
font-size: 0px;
|
||||
top: 80px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1001;
|
||||
overflow: hidden;
|
||||
-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 {
|
||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
|
||||
}
|
||||
|
||||
.scrollbar-wrapper {
|
||||
overflow-x: hidden !important;
|
||||
}
|
||||
|
||||
.el-scrollbar__bar.is-vertical {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&.has-logo {
|
||||
.el-scrollbar {
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.el-menu {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.el-menu-item, .el-submenu__title {
|
||||
overflow: hidden !important;
|
||||
text-overflow: ellipsis !important;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
// menu hover
|
||||
.submenu-title-noDropdown,
|
||||
.el-submenu__title {
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.06) !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 {
|
||||
min-width: $base-sidebar-width !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 {
|
||||
background-color: $base-sub-menu-background !important;
|
||||
|
||||
&:hover {
|
||||
background-color: $base-sub-menu-hover !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hideSidebar {
|
||||
.sidebar-container {
|
||||
width: 54px !important;
|
||||
}
|
||||
|
||||
.main-container {
|
||||
margin-left: 54px;
|
||||
}
|
||||
|
||||
.submenu-title-noDropdown {
|
||||
padding: 0 !important;
|
||||
position: relative;
|
||||
|
||||
.el-tooltip {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-submenu {
|
||||
overflow: hidden;
|
||||
|
||||
&>.el-submenu__title {
|
||||
padding: 0 !important;
|
||||
|
||||
.svg-icon {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse {
|
||||
.el-submenu {
|
||||
&>.el-submenu__title {
|
||||
&>span {
|
||||
height: 0;
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-menu--collapse .el-menu .el-submenu {
|
||||
min-width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
// mobile responsive
|
||||
.mobile {
|
||||
.main-container {
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sidebar-container {
|
||||
transition: transform .28s;
|
||||
width: $base-sidebar-width !important;
|
||||
}
|
||||
|
||||
&.hideSidebar {
|
||||
.sidebar-container {
|
||||
pointer-events: none;
|
||||
transition-duration: 0.3s;
|
||||
transform: translate3d(-$base-sidebar-width, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.withoutAnimation {
|
||||
|
||||
.main-container,
|
||||
.sidebar-container {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// when menu collapsed
|
||||
.el-menu--vertical {
|
||||
&>.el-menu {
|
||||
.svg-icon {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.nest-menu .el-submenu>.el-submenu__title,
|
||||
.el-menu-item {
|
||||
&:hover {
|
||||
// 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 {
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar-track-piece {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: #99a9bf;
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,528 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<div class="banner-box">
|
||||
<img src="../assets/img/banner/head_bank_logo.png" alt="" class="bank_logo" />
|
||||
<div class="header-name">
|
||||
<span class="bigcharacter-logo">天津银行公司业务智能作业系统</span>
|
||||
<span class="ismallcharacter-logo">BUSINESS INTELLIGENCE OPERATING SYSTEM OF BANK OF TIANJIN</span>
|
||||
</div>
|
||||
<!-- <div class="model_wrap">
|
||||
<div class="banner-model">
|
||||
<el-badge :is-dot="getDaRankNewStatus" class="banner-model spc_dot">
|
||||
<div @click="toRbRank" class="model-item">
|
||||
<img src="../assets/img/banner/red_black.png" class="banner-icon" />
|
||||
<p>红黑榜</p>
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
<el-badge :is-dot="listNewStatus" class="banner-model">
|
||||
<div @click="toNewProd" class="model-item">
|
||||
<img src="../assets/img/banner/new_pro.png" class="banner-icon" />
|
||||
<p>新品上架</p>
|
||||
</div>
|
||||
</el-badge>
|
||||
<el-badge class="banner-model">
|
||||
<div @click="toHotPro" class="model-item">
|
||||
<img src="../assets/img/banner/pro_hot.png" class="banner-icon" />
|
||||
<p>产品热销</p>
|
||||
</div>
|
||||
</el-badge>
|
||||
</div> -->
|
||||
<div class="banner-user">
|
||||
<img src="../assets/img/banner/head_avatar.png" />
|
||||
<div>
|
||||
<p></p>
|
||||
<p>数据日期：</p>
|
||||
</div>
|
||||
</div>
|
||||
<el-dropdown @command="handleClickCommand" trigger="click">
|
||||
<span>
|
||||
{{ currentRoleName }}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item v-for="item in roleList" :key="item.roleId" :command="item.roleId">{{
|
||||
item.roleName
|
||||
}}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
<!-- 修改密码 -->
|
||||
<div class="icon-l"></div>
|
||||
|
||||
<div class="logout">
|
||||
<el-tooltip popper-class="func-tootip" placement="bottom" effect="light">
|
||||
<div class="logout-text" slot="content">退出登录</div>
|
||||
<img src="../assets/logo-imgs/安全退出icon@2x.png" alt="" class="icon-close" @click="logout" />
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="resetPwd">
|
||||
<span class="reset-text" @click="modifyPwd">修改密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog
|
||||
class="pwd-dialog"
|
||||
title="修改密码"
|
||||
append-to-body
|
||||
:visible.sync="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:close-on-press-escape="false"
|
||||
:show-close="true"
|
||||
width="600px"
|
||||
:before-close="cancle"
|
||||
>
|
||||
<el-form ref="pwdForm" size="small" :model="pwdForm" :rules="pwdRule">
|
||||
<el-form-item label="用户名" >
|
||||
<el-input v-model="pwdForm.loginName" readonly></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="原密码" prop="oldPassword">
|
||||
<el-input v-model="pwdForm.oldPassword" placeholder="请输入原密码" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input v-model="pwdForm.newPassword" placeholder="请输入新密码" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input v-model="pwdForm.confirmPwd" placeholder="请再次输入新密码" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码格式" required>
|
||||
<div class="reind-text">8~18个字符，以数字或字母开头，可以包含的特殊字符有：`.~!@#%*()?-_=+。</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="func-btn">
|
||||
<el-button type="default" size="small" @click="cancle">取消</el-button>
|
||||
<el-button type="primary" size="small" @click="updatePwd">保存</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapMutations, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
// inject: ['reload'],
|
||||
data() {
|
||||
const validateNewPassword = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入新密码'))
|
||||
} else {
|
||||
if (this.pwdForm.confirmPwd !== '') {
|
||||
this.$refs.pwdForm.validateField('confirmPwd')
|
||||
}
|
||||
callback()
|
||||
}
|
||||
}
|
||||
const validateConfirmPwd = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入新密码'))
|
||||
} else if (value !== this.pwdForm.newPassword) {
|
||||
callback(new Error('两次输入密码不一致!'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
return {
|
||||
roleList: [],
|
||||
getState: true,
|
||||
getDaRankNewStatus: false,
|
||||
listNewStatus: false,
|
||||
currentRole: '',
|
||||
currentRoleName: '',
|
||||
dialogVisible: false,
|
||||
pwdForm: {
|
||||
loginName: '',
|
||||
oldPassword: '',
|
||||
newPassword: '',
|
||||
confirmPwd: '',
|
||||
},
|
||||
pwdRule: {
|
||||
newPassword: [
|
||||
{ validator: validateNewPassword, trigger: 'blur' },
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{
|
||||
pattern: /^[A-Za-z0-9][A-Za-z0-9`~!@#%*()?\-_=+.]{7,17}$/,
|
||||
message: '8~18个字符，以数字或字母开头，可以包含的特殊字符有：`~!@#%*()?-_=+.',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
confirmPwd: [
|
||||
{ validator: validateConfirmPwd, trigger: 'blur' },
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
isNew: true,
|
||||
isNewRank: true,
|
||||
etDate: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
//监控头部顶部新品上架和红黑榜-new图片显示的问题
|
||||
changeState: {
|
||||
handler(newVal) {
|
||||
this.$store.state.user.headerState = newVal
|
||||
if (!newVal) {
|
||||
this.listNewStatus = false
|
||||
}
|
||||
},
|
||||
},
|
||||
changeStateRed: {
|
||||
handler(newVal) {
|
||||
this.$store.state.user.StateRed = newVal
|
||||
if (!newVal) {
|
||||
this.getDaRankNewStatus = false
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
// setUserInfo: 'SET_USER_INFO',
|
||||
// setRoleList: 'SET_ROLE_LIST',
|
||||
// switchMenuLoaded: 'SWITCH_MENU_LOADED',
|
||||
// changeState: 'changeState',
|
||||
// changeStateRed: 'changeStateRed',
|
||||
}),
|
||||
...mapActions({
|
||||
logout: 'doLogOut',
|
||||
}),
|
||||
async logout() {
|
||||
this.$confirm('确定注销并退出系统吗？', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
this.$store.dispatch('LogOut').then(() => {
|
||||
location.href = '/index';
|
||||
})
|
||||
}).catch(() => {});
|
||||
},
|
||||
// doLogout() {
|
||||
// this.logout()
|
||||
// .then(res => {
|
||||
// this.$message.success('注销成功，即将为您跳转到登录页！')
|
||||
// setTimeout(() => location.reload(), 1500)
|
||||
// })
|
||||
// .catch(err => {
|
||||
// this.$message.success('注销成功，即将为您跳转到登录页！')
|
||||
// setTimeout(() => this.doClean(), 1500)
|
||||
// })
|
||||
// },
|
||||
modifyPwd() {
|
||||
this.pwdForm.loginName = this.userInfo.loginName
|
||||
this.dialogVisible = true
|
||||
},
|
||||
cancle() {
|
||||
this.dialogVisible = false
|
||||
this.$refs.pwdForm.resetFields()
|
||||
},
|
||||
updatePwd() {
|
||||
this.$refs.pwdForm.validate(valid => {
|
||||
if (valid) {
|
||||
if (this.pwdForm.confirmPwd !== this.pwdForm.newPassword) {
|
||||
this.$message({
|
||||
message: '两次输入的密码不一致',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
const { newPassword, ...args } = this.pwdForm
|
||||
this.$api.sys.user
|
||||
.resetPassword({
|
||||
...args,
|
||||
password: newPassword,
|
||||
})
|
||||
.then(res => {
|
||||
if (res.data.code == 200) {
|
||||
this.$message.success('修改密码成功，请重新登录！')
|
||||
this.dialogVisible = false
|
||||
setTimeout(() => {
|
||||
this.doClean()
|
||||
}, 500)
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.data.msg,
|
||||
type: 'error',
|
||||
})
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$message.error('请检查输入项！')
|
||||
}
|
||||
})
|
||||
},
|
||||
doClean() {
|
||||
// this.$store.commit('RESET_USER')
|
||||
// this.$store.commit('RESET_APP')
|
||||
// this.$auth.removeToken()
|
||||
// location.reload()
|
||||
},
|
||||
|
||||
//切换角色
|
||||
handleClickCommand(command) {
|
||||
this.currentRole = command
|
||||
let role = this.roleList.find(item => item.roleId === command)
|
||||
this.currentRoleName = role.roleName
|
||||
this.roleChangeFn(this, role.roleId)
|
||||
},
|
||||
toNewProd() {
|
||||
this.listNewStatus = false
|
||||
window.sessionStorage.setItem('headerState', 'false')
|
||||
this.$router.push({
|
||||
path: '/pm/newProd',
|
||||
})
|
||||
},
|
||||
toHotPro() {
|
||||
this.listNewStatus = false
|
||||
this.$router.push({
|
||||
path: '/pm/hotPro',
|
||||
})
|
||||
},
|
||||
toActive() {
|
||||
this.isNew = false
|
||||
this.$router.push({
|
||||
path: '/mkt/activeQuery',
|
||||
})
|
||||
},
|
||||
toRbRank() {
|
||||
this.getDaRankNewStatus = false
|
||||
window.sessionStorage.setItem('StateRed', 'false')
|
||||
this.$router.push({
|
||||
path: '/ws/rbRank',
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
}),
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
// if (this.userInfo.userName === '') {
|
||||
// this.$store.commit('RESET_USER')
|
||||
// this.$store.commit('RESET_APP')
|
||||
// this.$auth.removeToken()
|
||||
// this.$router.replace({ path: '/login' })
|
||||
// }
|
||||
// const role = this.roleList.find(item => item.roleId === this.userInfo.roleId)
|
||||
// ;[this.currentRoleName, this.currentRole] = !role ? ['', ''] : [role.roleName, role.roleId]
|
||||
|
||||
// if (window.sessionStorage.getItem('headerState') !== 'false') {
|
||||
// if (this.$store.state.user.headerState) {
|
||||
// //查询新品上架是是否有数据更新接口
|
||||
// this.$http.post(this.$api.pmApi.listNewStatus, {}).then(res => {
|
||||
// if (res.data.code == 200) {
|
||||
// let newState = res.data.data.isNew
|
||||
// if (newState != 0) {
|
||||
// this.listNewStatus = true
|
||||
// } else {
|
||||
// this.listNewStatus = false
|
||||
// }
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: res.data.msg,
|
||||
// type: 'error',
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// this.listNewStatus = false
|
||||
// }
|
||||
// }
|
||||
// if (window.sessionStorage.getItem('StateRed') !== 'false') {
|
||||
// if (this.$store.state.user.StateRed) {
|
||||
// // 获取红黑榜是否存在新榜
|
||||
// this.$http.post(this.$api.main.getDaRankNewStatus, {}).then(res => {
|
||||
// if (res.data.code == 200) {
|
||||
// let redState = res.data.data.isNew
|
||||
// if (redState != 0) {
|
||||
// this.getDaRankNewStatus = true
|
||||
// } else {
|
||||
// this.getDaRankNewStatus = false
|
||||
// }
|
||||
// } else {
|
||||
// this.$message({
|
||||
// message: res.data.msg,
|
||||
// type: 'error',
|
||||
// })
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
// this.getDaRankNewStatus = false
|
||||
// }
|
||||
// }
|
||||
// const getLoginNum = sessionStorage.getItem('userLoginNum')
|
||||
// if (sessionStorage.getItem('userLoginNum') === '1') {
|
||||
// this.$confirm('当前为首次登陆，是否前往修改密码？', '提示', {
|
||||
// type: 'warning',
|
||||
// })
|
||||
// .then(() => {
|
||||
// sessionStorage.removeItem('userLoginNum')
|
||||
// this.modifyPwd()
|
||||
// })
|
||||
// .catch(() => {
|
||||
// sessionStorage.removeItem('userLoginNum')
|
||||
// })
|
||||
// }
|
||||
//
|
||||
// this.etDate = sessionStorage.getItem('etDate')
|
||||
// console.log(this.etDate, 'this.etDate')
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.header {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
height: 80px;
|
||||
}
|
||||
.banner-box {
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-size: 0.16rem;
|
||||
.bank_logo {
|
||||
width: 100px;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
margin: 0 30px;
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
.banner-model {
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
.model-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.banner-icon {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
margin-right: 0.02rem;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
p {
|
||||
line-height: 18px;
|
||||
// font-size: 12px;
|
||||
}
|
||||
.el-badge {
|
||||
.el-badge__content.is-fixed.is-dot {
|
||||
top: 6px !important;
|
||||
right: 12px !important;
|
||||
}
|
||||
.el-badge__content.is-dot {
|
||||
height: 8px !important;
|
||||
width: 8px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.model_wrap {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
.banner-model:first-child {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.el-divider--vertical {
|
||||
margin: 15px 8px !important;
|
||||
}
|
||||
.banner-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 30px;
|
||||
margin-left: auto;
|
||||
img {
|
||||
margin: 0 10px 0 10px;
|
||||
height: 38px;
|
||||
width: 38px;
|
||||
background-size: contain;
|
||||
}
|
||||
p {
|
||||
font-size: 0.14rem;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.el-dropdown {
|
||||
// max-width: 100px; //角色名称过长不显示注释
|
||||
text-align: center;
|
||||
// line-height: 44px;
|
||||
font-size: 0.16rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
.logout {
|
||||
width: 0.2rem;
|
||||
height: 0.2rem;
|
||||
color: red;
|
||||
// margin: 0 0.4rem 0 0.22rem;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-badge__content.is-fixed.is-dot {
|
||||
right: 15px;
|
||||
margin-top: 6px;
|
||||
margin-right: 17px;
|
||||
background: red;
|
||||
}
|
||||
::v-deep .spc_dot .el-badge__content.is-fixed.is-dot {
|
||||
left: 39px;
|
||||
margin-top: 1px !important;
|
||||
}
|
||||
.resetPwd {
|
||||
cursor: pointer;
|
||||
width: 56px;
|
||||
height: 14px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.icon-l{
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
margin-right: 20px;
|
||||
margin-left: 20px;
|
||||
background: #B9C8DF;
|
||||
}
|
||||
.icon-close{
|
||||
width: 15px;
|
||||
height: 16px;
|
||||
}
|
||||
.header-name {
|
||||
width: 308px;
|
||||
height: 40px;
|
||||
// margin: 20px 0 0 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.bigcharacter-logo{
|
||||
width: 308px;
|
||||
height: 22px;
|
||||
color: rgba(34, 34, 34, 1);
|
||||
font-size: 22px;
|
||||
font-family: SourceHanSansCN-Heavy, SourceHanSansCN;
|
||||
text-align: left;
|
||||
font-weight: bolder;
|
||||
line-height: 33px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ismallcharacter-logo{
|
||||
width: 308px;
|
||||
height: 9px;
|
||||
display: inline-block;
|
||||
color: rgba(34, 34, 34, 1);
|
||||
font-size: 9px;
|
||||
transform: scale(0.75);
|
||||
font-family: SourceHanSansCN-Bold, SourceHanSansCN;
|
||||
font-weight:600;
|
||||
white-space: nowrap;
|
||||
line-height: 14px;
|
||||
margin-left: -39px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -35,7 +35,7 @@ export default {
|
|||
return this.tabList.length > 0
|
||||
},
|
||||
...mapGetters({
|
||||
isCollapse: 'getCollapseStatus',
|
||||
|
||||
}),
|
||||
},
|
||||
created(){
|
||||
|
|
|
|||
|
|
@ -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,20 +1,24 @@
|
|||
<template>
|
||||
<section class="app-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view v-if="!$route.meta.link" :key="key" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
<div class="left-main">
|
||||
<transition name="fade-transform" mode="out-in">
|
||||
<keep-alive :include="cachedViews">
|
||||
<router-view v-if="!$route.meta.link" :key="key" />
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</div>
|
||||
<RightFence></RightFence>
|
||||
<iframe-toggle />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import iframeToggle from "./IframeToggle/index"
|
||||
import RightFence from '@/components/RightFence.vue'
|
||||
|
||||
export default {
|
||||
name: 'AppMain',
|
||||
components: { iframeToggle },
|
||||
components: { iframeToggle, RightFence },
|
||||
computed: {
|
||||
cachedViews() {
|
||||
return this.$store.state.tagsView.cachedViews
|
||||
|
|
@ -30,10 +34,13 @@ export default {
|
|||
.app-main {
|
||||
/* 50= navbar 50 */
|
||||
background-color: #EBEFFB;
|
||||
min-height: calc(100vh - 50px);
|
||||
height: calc(100vh - 50px);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.left-main{
|
||||
width: calc(75% - 40px);
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
|
|
@ -43,7 +50,7 @@ export default {
|
|||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 0px);
|
||||
height: calc(100vh - 80px);
|
||||
}
|
||||
|
||||
.fixed-header + .app-main {
|
||||
|
|
|
|||
|
|
@ -1,93 +1,93 @@
|
|||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<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>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import logoImg from '@/assets/logo/logo.png'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
|
||||
export default {
|
||||
name: 'SidebarLogo',
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
sideTheme() {
|
||||
return this.$store.state.settings.sideTheme
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '若依管理系统',
|
||||
logo: logoImg
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebarLogoFade-enter-active {
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
|
||||
.sidebarLogoFade-enter,
|
||||
.sidebarLogoFade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<transition name="sidebarLogoFade">
|
||||
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
|
||||
<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>
|
||||
</router-link>
|
||||
<router-link v-else key="expand" class="sidebar-logo-link" to="/">
|
||||
<img v-if="logo" :src="logo" class="sidebar-logo" />
|
||||
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
|
||||
</router-link>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import logoImg from '@/assets/logo/logo.png'
|
||||
import variables from '@/assets/styles/variables.scss'
|
||||
|
||||
export default {
|
||||
name: 'SidebarLogo',
|
||||
props: {
|
||||
collapse: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
sideTheme() {
|
||||
return this.$store.state.settings.sideTheme
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '智能作业系统',
|
||||
logo: logoImg
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sidebarLogoFade-enter-active {
|
||||
transition: opacity 1.5s;
|
||||
}
|
||||
|
||||
.sidebarLogoFade-enter,
|
||||
.sidebarLogoFade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.sidebar-logo-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
background: #2b2f3a;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
& .sidebar-logo-link {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
& .sidebar-logo {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
vertical-align: middle;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
& .sidebar-title {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
line-height: 50px;
|
||||
font-size: 14px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.collapse {
|
||||
.sidebar-logo {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,57 @@
|
|||
<template>
|
||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="settings.theme"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import Logo from "./Logo";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/assets/styles/variables.scss";
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
},
|
||||
showLogo() {
|
||||
return this.$store.state.settings.sidebarLogo;
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
|
||||
<logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
|
||||
<el-menu
|
||||
:default-active="activeMenu"
|
||||
:collapse="isCollapse"
|
||||
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
|
||||
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
|
||||
:unique-opened="true"
|
||||
:active-text-color="settings.theme"
|
||||
:collapse-transition="false"
|
||||
mode="vertical"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="(route, index) in sidebarRouters"
|
||||
:key="route.path + index"
|
||||
:item="route"
|
||||
:base-path="route.path"
|
||||
/>
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapState } from "vuex";
|
||||
import Logo from "./Logo";
|
||||
import SidebarItem from "./SidebarItem";
|
||||
import variables from "@/assets/styles/variables.scss";
|
||||
|
||||
export default {
|
||||
components: { SidebarItem, Logo },
|
||||
computed: {
|
||||
...mapState(["settings"]),
|
||||
...mapGetters(["sidebarRouters", "sidebar"]),
|
||||
activeMenu() {
|
||||
const route = this.$route;
|
||||
const { meta, path } = route;
|
||||
// if set path, the sidebar will highlight the path you set
|
||||
if (meta.activeMenu) {
|
||||
return meta.activeMenu;
|
||||
}
|
||||
return path;
|
||||
},
|
||||
showLogo() {
|
||||
return this.$store.state.settings.sidebarLogo;
|
||||
},
|
||||
variables() {
|
||||
return variables;
|
||||
},
|
||||
isCollapse() {
|
||||
return !this.sidebar.opened;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
|
||||
<div class="app-layout-header">
|
||||
<div class="me-header">
|
||||
<p-header></p-header>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
|
||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||
<div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
|
||||
|
|
@ -11,12 +16,14 @@
|
|||
<right-panel>
|
||||
<settings />
|
||||
</right-panel>
|
||||
<RightFence></RightFence>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RightPanel from '@/components/RightPanel'
|
||||
import pHeader from '@/components/Header'
|
||||
import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
|
||||
import ResizeMixin from './mixin/ResizeHandler'
|
||||
import { mapState } from 'vuex'
|
||||
|
|
@ -28,6 +35,7 @@ export default {
|
|||
AppMain,
|
||||
Navbar,
|
||||
RightPanel,
|
||||
pHeader,
|
||||
Settings,
|
||||
Sidebar,
|
||||
TagsView
|
||||
|
|
@ -65,12 +73,25 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
@import "~@/assets/styles/mixin.scss";
|
||||
@import "~@/assets/styles/variables.scss";
|
||||
|
||||
.app-layout-header {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
.me-header {
|
||||
width: 100%;
|
||||
// height: 0.6rem;
|
||||
height: 80px;
|
||||
background-image: url('./../assets/img/home/head_bg_logo.png');
|
||||
color: #333;
|
||||
// background-size: cover;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.app-wrapper {
|
||||
@include clearfix;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
height: calc(100% - 0px);
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
|
||||
&.mobile.openSidebar {
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -1,86 +1,88 @@
|
|||
import Vue from 'vue'
|
||||
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import directive from './directive' // directive
|
||||
import plugins from './plugins' // plugins
|
||||
import { download } from '@/utils/request'
|
||||
|
||||
import './assets/icons' // icon
|
||||
import './permission' // permission control
|
||||
import { getDicts } from "@/api/system/dict/data";
|
||||
import { getConfigKey } from "@/api/system/config";
|
||||
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
|
||||
// 分页组件
|
||||
import Pagination from "@/components/Pagination";
|
||||
// 自定义表格工具组件
|
||||
import RightToolbar from "@/components/RightToolbar"
|
||||
// 富文本组件
|
||||
import Editor from "@/components/Editor"
|
||||
// 文件上传组件
|
||||
import FileUpload from "@/components/FileUpload"
|
||||
// 图片上传组件
|
||||
import ImageUpload from "@/components/ImageUpload"
|
||||
// 图片预览组件
|
||||
import ImagePreview from "@/components/ImagePreview"
|
||||
// 字典标签组件
|
||||
import DictTag from '@/components/DictTag'
|
||||
// 头部标签组件
|
||||
import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
Vue.prototype.getConfigKey = getConfigKey
|
||||
Vue.prototype.parseTime = parseTime
|
||||
Vue.prototype.resetForm = resetForm
|
||||
Vue.prototype.addDateRange = addDateRange
|
||||
Vue.prototype.selectDictLabel = selectDictLabel
|
||||
Vue.prototype.selectDictLabels = selectDictLabels
|
||||
Vue.prototype.download = download
|
||||
Vue.prototype.handleTree = handleTree
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
Vue.component('Pagination', Pagination)
|
||||
Vue.component('RightToolbar', RightToolbar)
|
||||
Vue.component('Editor', Editor)
|
||||
Vue.component('FileUpload', FileUpload)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
|
||||
Vue.use(directive)
|
||||
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()
|
||||
*
|
||||
* 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.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
import Vue from 'vue'
|
||||
|
||||
import Cookies from 'js-cookie'
|
||||
|
||||
import Element from 'element-ui'
|
||||
import './assets/styles/element-variables.scss'
|
||||
|
||||
import '@/assets/styles/index.scss' // global css
|
||||
import '@/assets/styles/ruoyi.scss' // ruoyi css
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import directive from './directive' // directive
|
||||
import plugins from './plugins' // plugins
|
||||
import global from './plugins/global';
|
||||
import { download } from '@/utils/request'
|
||||
|
||||
import './assets/icons' // icon
|
||||
import './permission' // permission control
|
||||
import { getDicts } from "@/api/system/dict/data";
|
||||
import { getConfigKey } from "@/api/system/config";
|
||||
import { parseTime, resetForm, addDateRange, selectDictLabel, selectDictLabels, handleTree } from "@/utils/ruoyi";
|
||||
// 分页组件
|
||||
import Pagination from "@/components/Pagination";
|
||||
// 自定义表格工具组件
|
||||
import RightToolbar from "@/components/RightToolbar"
|
||||
// 富文本组件
|
||||
import Editor from "@/components/Editor"
|
||||
// 文件上传组件
|
||||
import FileUpload from "@/components/FileUpload"
|
||||
// 图片上传组件
|
||||
import ImageUpload from "@/components/ImageUpload"
|
||||
// 图片预览组件
|
||||
import ImagePreview from "@/components/ImagePreview"
|
||||
// 字典标签组件
|
||||
import DictTag from '@/components/DictTag'
|
||||
// 头部标签组件
|
||||
import VueMeta from 'vue-meta'
|
||||
// 字典数据组件
|
||||
import DictData from '@/components/DictData'
|
||||
|
||||
// 全局方法挂载
|
||||
Vue.prototype.getDicts = getDicts
|
||||
Vue.prototype.getConfigKey = getConfigKey
|
||||
Vue.prototype.parseTime = parseTime
|
||||
Vue.prototype.resetForm = resetForm
|
||||
Vue.prototype.addDateRange = addDateRange
|
||||
Vue.prototype.selectDictLabel = selectDictLabel
|
||||
Vue.prototype.selectDictLabels = selectDictLabels
|
||||
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('Editor', Editor)
|
||||
Vue.component('FileUpload', FileUpload)
|
||||
Vue.component('ImageUpload', ImageUpload)
|
||||
Vue.component('ImagePreview', ImagePreview)
|
||||
|
||||
Vue.use(directive)
|
||||
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()
|
||||
*
|
||||
* 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.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,473 @@
|
|||
import axios from 'axios'
|
||||
const global = {
|
||||
// 表单必输项
|
||||
requiredRule: {
|
||||
required: true,
|
||||
message: '该项为必输项！',
|
||||
trigger: ['blur', 'change'],
|
||||
},
|
||||
|
||||
// 文件上传接口
|
||||
uploadURL: process.env.VUE_APP_BASE_API + 'sys/file/upload',
|
||||
|
||||
//影像平台接口上传接口文件
|
||||
uploadToIcon: process.env.VUE_APP_BASE_API + '/sys/file/uploadToIcon',
|
||||
|
||||
//文件下载
|
||||
downLoadUrl: process.env.VUE_APP_BASE_API + 'sys/file/download?fileId=',
|
||||
|
||||
// 公告文件上传接口
|
||||
uploadToIconSf: process.env.VUE_APP_BASE_API + '/sys/file/upload',
|
||||
// 图片
|
||||
// getPicUrl:'/get/{value}/mg.do'
|
||||
getPicUrl: process.env.VUE_APP_BASE_API + '/sys/file/get/{value}/mg.do',
|
||||
|
||||
// 码值转换
|
||||
getNameByCode: (codeInfo, codeValue, isMult = false) => {
|
||||
if (!codeInfo) {
|
||||
return codeValue
|
||||
}
|
||||
if (!codeValue) {
|
||||
return ''
|
||||
}
|
||||
if (isMult) codeValue = isMult ? codeValue.split(',') : codeValue
|
||||
let codeName = '',
|
||||
codeValues = []
|
||||
for (let i = 0; i < codeInfo.length; i++) {
|
||||
if (Array.isArray(codeValue)) {
|
||||
for (let j = 0; j < codeValue.length; j++) {
|
||||
if (codeValue[j] == codeInfo[i].value) {
|
||||
codeValues.push(codeInfo[i].content)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (codeValue == codeInfo[i].value) {
|
||||
codeName = codeInfo[i].content
|
||||
break
|
||||
}
|
||||
}
|
||||
codeName = codeValues.join(',')
|
||||
}
|
||||
return codeName == '' ? codeValue : codeName
|
||||
},
|
||||
|
||||
// 分转元
|
||||
regFenToYuan: val => {
|
||||
let num = Number(val)
|
||||
if (!isNaN(num)) {
|
||||
num = num * 0.01 + ''
|
||||
let reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g //千分符的正则
|
||||
return num.replace(reg, '$1,')
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
},
|
||||
// 判断字符串是否为空
|
||||
isEmptyStr(str) {
|
||||
if (str == '') return true
|
||||
const regu = '^[ ]+$'
|
||||
const re = new RegExp(regu)
|
||||
return re.test(str)
|
||||
},
|
||||
//文件下载/表格导出
|
||||
downloadFiles(_url, _params, _this, requestFn = 'download') {
|
||||
|
||||
_this.$http[requestFn](_url, _params).then(response => {
|
||||
if (_url === _this.$api.cmApi.exporAllCstInfo) {
|
||||
console.log(response, 'response')
|
||||
// if (response.isOK) {
|
||||
// _this.$message.successs(response.msg)
|
||||
// } else {
|
||||
// _this.$message.error(response.msg)
|
||||
// }
|
||||
} else if (!response.data.code) {
|
||||
let contentDisposition = response.headers['content-disposition']
|
||||
const blob = new Blob([response.data])
|
||||
|
||||
if ('download' in document.createElement('a')) {
|
||||
const elink = document.createElement('a')
|
||||
let fileName = decodeURI(contentDisposition.substring(contentDisposition.indexOf('filename=') + 9, contentDisposition.length));
|
||||
fileName = fileName.replace((/"/g), "");
|
||||
elink.download = fileName
|
||||
elink.style.display = 'none'
|
||||
elink.href = URL.createObjectURL(blob)
|
||||
document.body.appendChild(elink)
|
||||
elink.click()
|
||||
URL.revokeObjectURL(elink.href)
|
||||
document.body.removeChild(elink)
|
||||
} else {
|
||||
navigator.msSaveBlob(blob, fileName)
|
||||
}
|
||||
} else {
|
||||
_this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
/* 文件下载/表格导出
|
||||
* 支持影像平台下载
|
||||
*/
|
||||
downloadImage(_url, _params, _this, requestFn = 'download') {
|
||||
_this.$http[requestFn](_url, _params).then(response => {
|
||||
if (!response.data.code) {
|
||||
let fileName = response.headers['content-disposition']
|
||||
const blob = new Blob([response.data])
|
||||
if ('download' in document.createElement('a')) {
|
||||
const elink = document.createElement('a')
|
||||
// 公共方法不支持截取，去掉fileName两边的""
|
||||
fileName = fileName.substr(0, fileName.length - 1)
|
||||
let spcStr = (fileName.split('=')[1]).substr(1)
|
||||
elink.download = fileName && decodeURI(spcStr)
|
||||
elink.style.display = 'none'
|
||||
elink.href = URL.createObjectURL(blob)
|
||||
document.body.appendChild(elink)
|
||||
elink.click()
|
||||
URL.revokeObjectURL(elink.href)
|
||||
document.body.removeChild(elink)
|
||||
} else {
|
||||
navigator.msSaveBlob(blob, fileName)
|
||||
}
|
||||
} else {
|
||||
_this.$message.error(response.msg)
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 每隔几个字符进行添加对应标记
|
||||
* @param {*} str 需要添加标记的字符串
|
||||
* @param {*} vkey 标记
|
||||
* @param {*} vnum 字符个数
|
||||
*/
|
||||
strReplace: (str, vnum = 2, vkey = '-') => {
|
||||
if (!str) return ''
|
||||
let result = ''
|
||||
for (var i = 0, len = str.length; i < len; i++) {
|
||||
result += str[i]
|
||||
if (i % vnum == 1) result += vkey
|
||||
}
|
||||
if (result.slice(-1) == vkey) result = result.slice(0, -1)
|
||||
return result
|
||||
},
|
||||
/**
|
||||
* 判断是否是数组
|
||||
*/
|
||||
isArrayFn: value => {
|
||||
if (typeof Array.isArray === 'function') {
|
||||
return Array.isArray(value)
|
||||
} else {
|
||||
return Object.prototype.toString.call(value) === '[object Array]'
|
||||
}
|
||||
},
|
||||
/**
|
||||
* isEmpty 判空
|
||||
*/
|
||||
isEmpty: str => {
|
||||
let flag = true
|
||||
if (str != null && str != undefined)
|
||||
flag =
|
||||
str
|
||||
.replace(/(^\s*)|(\s*$)/g, '')
|
||||
.replace(/<\/?.+?>/g, '')
|
||||
.replace(/[\r\n]/g, '').length > 0 ?
|
||||
false :
|
||||
true
|
||||
return flag
|
||||
},
|
||||
/**
|
||||
* 时间格式化
|
||||
* @param {*} time 传入的时间
|
||||
*/
|
||||
timeFamat(time) {
|
||||
var newTime = new Date(time)
|
||||
var year = newTime.getFullYear() //年
|
||||
var month = newTime.getMonth() + 1 //月
|
||||
var day = newTime.getDate() //日
|
||||
|
||||
var clock = year + '-'
|
||||
|
||||
if (month < 10) clock += '0'
|
||||
|
||||
clock += month + '-'
|
||||
|
||||
if (day < 10) clock += '0'
|
||||
|
||||
clock += day
|
||||
|
||||
return clock
|
||||
},
|
||||
/**
|
||||
* 创建当前时间
|
||||
* @param {*} isTrue 精确到年、月、天标识
|
||||
*/
|
||||
createTime: isTrue => {
|
||||
var now = new Date()
|
||||
|
||||
var year = now.getFullYear() //年
|
||||
var month = now.getMonth() + 1 //月
|
||||
var day = now.getDate() //日
|
||||
|
||||
var hh = now.getHours() //时
|
||||
var mm = now.getMinutes() //分
|
||||
var ss = now.getSeconds() //秒
|
||||
if (isTrue == 'year') return year
|
||||
|
||||
var clock = year + '-'
|
||||
|
||||
if (month < 10) clock += '0'
|
||||
|
||||
if (isTrue == 'month') return (clock += month)
|
||||
|
||||
clock += month + '-'
|
||||
|
||||
if (day < 10) clock += '0'
|
||||
|
||||
clock += day
|
||||
|
||||
//精确到天
|
||||
if (isTrue == 'day') return clock
|
||||
clock += clock + ' '
|
||||
|
||||
if (hh < 10) clock += '0'
|
||||
|
||||
clock += hh + ':'
|
||||
if (mm < 10) clock += '0'
|
||||
clock += mm + ':'
|
||||
|
||||
if (ss < 10) clock += '0'
|
||||
clock += ss
|
||||
return clock
|
||||
},
|
||||
//加法
|
||||
NumberAdd: (arg1, arg2, n = 2) => {
|
||||
var r1, r2, m
|
||||
try {
|
||||
r1 = arg1.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r1 = 0
|
||||
}
|
||||
try {
|
||||
r2 = arg2.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r2 = 0
|
||||
}
|
||||
m = Math.pow(10, Math.max(r1, r2))
|
||||
return ((arg1 * m + arg2 * m) / m).toFixed(n)
|
||||
},
|
||||
//减法
|
||||
NumberSub: (arg1, arg2) => {
|
||||
var r1, r2, m, n
|
||||
try {
|
||||
r1 = arg1.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r1 = 0
|
||||
}
|
||||
try {
|
||||
r2 = arg2.toString().split('.')[1].length
|
||||
} catch (e) {
|
||||
r2 = 0
|
||||
}
|
||||
m = Math.pow(10, Math.max(r1, r2))
|
||||
//动态控制精度长度
|
||||
n = r1 >= r2 ? r1 : r2
|
||||
return ((arg1 * m - arg2 * m) / m).toFixed(n)
|
||||
},
|
||||
//乘法
|
||||
NumberMul: (arg1, arg2) => {
|
||||
var m = 0,
|
||||
s1 = arg1.toString(),
|
||||
s2 = arg2.toString()
|
||||
try {
|
||||
m += s1.split('.')[1].length
|
||||
} catch (e) {}
|
||||
try {
|
||||
m += s2.split('.')[1].length
|
||||
} catch (e) {}
|
||||
return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m)
|
||||
},
|
||||
|
||||
//除法
|
||||
NumberDiv: (arg1, arg2) => {
|
||||
var t1 = 0,
|
||||
t2 = 0,
|
||||
r1,
|
||||
r2
|
||||
try {
|
||||
t1 = arg1.toString().split('.')[1].length
|
||||
} catch (e) {}
|
||||
try {
|
||||
t2 = arg2.toString().split('.')[1].length
|
||||
} catch (e) {}
|
||||
|
||||
r1 = Number(arg1.toString().replace('.', ''))
|
||||
|
||||
r2 = Number(arg2.toString().replace('.', ''))
|
||||
return (r1 / r2) * Math.pow(10, t2 - t1)
|
||||
},
|
||||
|
||||
/*
|
||||
检查数组是否有重复
|
||||
keyName:数组里面的对象的属性名
|
||||
*/
|
||||
isArrayRepeat: (arr, keyName) => {
|
||||
let hash = {}
|
||||
if (keyName) {
|
||||
for (let i in arr) {
|
||||
if (hash[arr[i][keyName]]) {
|
||||
return true
|
||||
} else {
|
||||
hash[arr[i][keyName]] = true
|
||||
}
|
||||
}
|
||||
} else {
|
||||
for (let i in arr) {
|
||||
if (hash[arr[i]]) {
|
||||
return true
|
||||
} else {
|
||||
hash[arr[i]] = true
|
||||
}
|
||||
}
|
||||
}
|
||||
return false
|
||||
},
|
||||
/*
|
||||
异步请求顺序执行
|
||||
_arr:方法名
|
||||
*/
|
||||
async getAllFn(_arr, _this) {
|
||||
for (let i = 0; i < _arr.length; i++) {
|
||||
await this.getReqDataFn(_arr[i], _this)
|
||||
}
|
||||
},
|
||||
getReqDataFn(fn, _this) {
|
||||
var p = new Promise(resolve => {
|
||||
_this[fn]()
|
||||
setTimeout(() => {
|
||||
resolve()
|
||||
}, 100)
|
||||
})
|
||||
return p
|
||||
},
|
||||
|
||||
/*
|
||||
格式化金额数字, 加千分位并保留两位小数
|
||||
params: num(传入的金额)
|
||||
*/
|
||||
formatAmountNum: num => {
|
||||
if (num == 0) {
|
||||
return num
|
||||
}
|
||||
if (!num) {
|
||||
return
|
||||
}
|
||||
num = num + ''
|
||||
if (!num.includes('.')) {
|
||||
num += '.'
|
||||
}
|
||||
return num
|
||||
.replace(/(\d)(?=(\d{3})+\.)/g, function ($0, $1) {
|
||||
return $1 + ','
|
||||
})
|
||||
.replace(/\.$/, '.00')
|
||||
},
|
||||
/**
|
||||
* 时间比较大小
|
||||
*/
|
||||
compareDate: (sDate, eDate, isSame = false) => {
|
||||
let st = new Date(sDate)
|
||||
let et = new Date(eDate)
|
||||
let flag = !st && !et ? false : st.getTime() >= et.getTime() ? false : true
|
||||
if (isSame) flag = !st && !et ? false : st.getTime() > et.getTime() ? false : true
|
||||
return flag
|
||||
},
|
||||
/**
|
||||
* 手机号码验证
|
||||
*/
|
||||
checkPhoneFn: (mobile) => {
|
||||
let reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[0-9])[0-9]{8}$/;
|
||||
return reg.test(mobile)
|
||||
},
|
||||
/**
|
||||
* 将指定日期区间按月份分割
|
||||
* @param {Object} beginDate 开始日期
|
||||
* @param {Object} endDate 结束日期
|
||||
* @return {Array} 分割好的array数组
|
||||
*/
|
||||
dateCutByMonth(beginDate, endDate) {
|
||||
//分割好的数组
|
||||
let dateCutList = new Array();
|
||||
let b_date = new Date(beginDate);
|
||||
let e_date = new Date(endDate);
|
||||
//获取各个年份
|
||||
let b_year = parseInt(b_date.getFullYear());
|
||||
let e_year = parseInt(e_date.getFullYear());
|
||||
//获取各个月份
|
||||
let b_month = parseInt(b_date.getMonth()) + 1;
|
||||
let e_month = parseInt(e_date.getMonth()) + 1;
|
||||
|
||||
//获取日期之间相差的月数
|
||||
let month_list = monthList();
|
||||
|
||||
//按月份分割日期
|
||||
for (let i = 0; i < month_list.length; i++) {
|
||||
//当前月开始日期:第一天
|
||||
let i_b_date = new Date(month_list[i]);
|
||||
i_b_date.setDate(1);
|
||||
//当前月最后一天
|
||||
let i_e_date = new Date(month_list[i]);
|
||||
i_e_date.setMonth(i_e_date.getMonth() + 1);
|
||||
i_e_date.setDate(1);
|
||||
i_e_date.setDate(i_e_date.getDate() - 1);
|
||||
|
||||
//第一次循环：开始月份
|
||||
if (i == 0) {
|
||||
let i_e_ymd = dateToString(i_e_date);
|
||||
dateCutList.push([beginDate, i_e_ymd]);
|
||||
|
||||
//除第一次和最后一次循环：中间月份
|
||||
} else if (i != 0 && i != month_list.length - 1) {
|
||||
let i_b_ymd = dateToString(i_b_date);
|
||||
let i_e_ymd = dateToString(i_e_date);
|
||||
dateCutList.push([i_b_ymd, i_e_ymd]);
|
||||
//最后一次循环：结束月份
|
||||
} else if (i == month_list.length - 1) {
|
||||
let i_b_ymd = dateToString(i_b_date);
|
||||
dateCutList.push([i_b_ymd, endDate]);
|
||||
}
|
||||
}
|
||||
return dateCutList;
|
||||
/**
|
||||
* 获取日期区间的月份集合
|
||||
*/
|
||||
function monthList() {
|
||||
//相差的月份总数
|
||||
let result = new Array();
|
||||
|
||||
let b = new Date(b_year, b_month - 1, 1);
|
||||
let e = new Date(e_year, e_month - 1, 1);
|
||||
while (b < e) {
|
||||
result.push(b.getFullYear() + "-" + (b.getMonth() + 1));
|
||||
b.setMonth(b.getMonth() + 1);
|
||||
}
|
||||
result.push(e_year + "-" + e_month);
|
||||
return result;
|
||||
}
|
||||
/**
|
||||
* 将日期转换为指定格式的字符串
|
||||
* @param {Date} date 要转换的日期
|
||||
*/
|
||||
function dateToString(date) {
|
||||
let month = (date.getMonth() + 1);
|
||||
let day = date.getDate();
|
||||
if (month < 10) {
|
||||
month = '0' + month
|
||||
}
|
||||
if (day < 10) {
|
||||
day = '0' + day
|
||||
}
|
||||
return date.getFullYear() + "-" + (month) + "-" + day;
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
|
||||
export default global
|
||||
|
|
@ -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 { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
name: '',
|
||||
avatar: '',
|
||||
roles: [],
|
||||
permissions: []
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_EXPIRES_IN: (state, time) => {
|
||||
state.expires_in = time
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
let data = res.data
|
||||
setToken(data.access_token)
|
||||
commit('SET_TOKEN', data.access_token)
|
||||
setExpiresIn(data.expires_in)
|
||||
commit('SET_EXPIRES_IN', data.expires_in)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
||||
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', res.roles)
|
||||
commit('SET_PERMISSIONS', res.permissions)
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_NAME', user.userName)
|
||||
commit('SET_AVATAR', avatar)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 刷新token
|
||||
RefreshToken({commit, state}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
refreshToken(state.token).then(res => {
|
||||
setExpiresIn(res.data)
|
||||
commit('SET_EXPIRES_IN', res.data)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 前端 登出
|
||||
FedLogOut({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
commit('SET_TOKEN', '')
|
||||
removeToken()
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default user
|
||||
import { login, logout, getInfo, refreshToken } from '@/api/login'
|
||||
import { getToken, setToken, setExpiresIn, removeToken } from '@/utils/auth'
|
||||
|
||||
const user = {
|
||||
state: {
|
||||
token: getToken(),
|
||||
name: '',
|
||||
avatar: '',
|
||||
roles: [],
|
||||
permissions: []
|
||||
},
|
||||
|
||||
mutations: {
|
||||
SET_TOKEN: (state, token) => {
|
||||
state.token = token
|
||||
},
|
||||
SET_EXPIRES_IN: (state, time) => {
|
||||
state.expires_in = time
|
||||
},
|
||||
SET_NAME: (state, name) => {
|
||||
state.name = name
|
||||
},
|
||||
SET_AVATAR: (state, avatar) => {
|
||||
state.avatar = avatar
|
||||
},
|
||||
SET_ROLES: (state, roles) => {
|
||||
state.roles = roles
|
||||
},
|
||||
SET_PERMISSIONS: (state, permissions) => {
|
||||
state.permissions = permissions
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
// 登录
|
||||
Login({ commit }, userInfo) {
|
||||
const username = userInfo.username.trim()
|
||||
const password = userInfo.password
|
||||
const code = userInfo.code
|
||||
const uuid = userInfo.uuid
|
||||
return new Promise((resolve, reject) => {
|
||||
login(username, password, code, uuid).then(res => {
|
||||
let data = res.data
|
||||
setToken(data.access_token)
|
||||
commit('SET_TOKEN', data.access_token)
|
||||
setExpiresIn(data.expires_in)
|
||||
commit('SET_EXPIRES_IN', data.expires_in)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 获取用户信息
|
||||
GetInfo({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
getInfo().then(res => {
|
||||
const user = res.user
|
||||
const avatar = (user.avatar == "" || user.avatar == null) ? require("@/assets/images/profile.jpg") : user.avatar;
|
||||
if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
|
||||
commit('SET_ROLES', res.roles)
|
||||
commit('SET_PERMISSIONS', res.permissions)
|
||||
} else {
|
||||
commit('SET_ROLES', ['ROLE_DEFAULT'])
|
||||
}
|
||||
commit('SET_NAME', user.userName)
|
||||
commit('SET_AVATAR', avatar)
|
||||
resolve(res)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 刷新token
|
||||
RefreshToken({commit, state}) {
|
||||
return new Promise((resolve, reject) => {
|
||||
refreshToken(state.token).then(res => {
|
||||
setExpiresIn(res.data)
|
||||
commit('SET_EXPIRES_IN', res.data)
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 退出系统
|
||||
LogOut({ commit, state }) {
|
||||
return new Promise((resolve, reject) => {
|
||||
logout(state.token).then(() => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_ROLES', [])
|
||||
commit('SET_PERMISSIONS', [])
|
||||
removeToken()
|
||||
resolve()
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 前端 登出
|
||||
FedLogOut({ commit }) {
|
||||
return new Promise(resolve => {
|
||||
commit('SET_TOKEN', '')
|
||||
removeToken()
|
||||
resolve()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default user
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="app-container home-page">
|
||||
<PageTabs
|
||||
class="alive-tabs"
|
||||
:tabdate="tabdate">
|
||||
</PageTabs>
|
||||
<div style="width: 100%;height:100%;background-color: #ffffff;margin-left: 5px;box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);border-radius: 6px;">
|
||||
<div style="width: 100%;height: calc(100vh - 500px);background-color: #ffffff;margin-left: 5px;box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.1);border-radius: 6px;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -36,6 +36,8 @@ export default {
|
|||
activated() {
|
||||
},
|
||||
created() {
|
||||
console.log('用户基本信息', sessionStorage.getItem('userInfo'))
|
||||
console.log('缓存', JSON.stringify(sessionStorage.sessionObj))
|
||||
let roleType =
|
||||
sessionStorage.getItem('userInfo') && JSON.parse(sessionStorage.getItem('userInfo')).roleType
|
||||
? JSON.parse(sessionStorage.getItem('userInfo')).roleType
|
||||
|
|
|
|||
Loading…
Reference in New Issue