Skip to content

F
front-backend
Commit 2d9864f6 by zhengjie
Options

1.8 version

parent bd385f64
Showing with 222 additions and 247 deletions
src/components/RightPanel/index.vue
......@@ -2,7 +2,10 @@
<div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
<div class="rightPanel-background" />
<div class="rightPanel">
<div :style="{'top':buttonTop+'px'}" @click="show=!show"/>
<div v-if="settingBtn" :style="{'top':buttonTop+'px','background-color':theme}" class="handle-button" @click="show=!show">
<i :class="show?'el-icon-close':'el-icon-setting'" />
</div>
<div v-else :style="{'top':buttonTop+'px'}" @click="show=!show"/>
<div class="rightPanel-items">
<slot />
</div>
......@@ -25,11 +28,6 @@ export default {
type: Number
}
},
data() {
return {
theme: '#fff'
}
},
computed: {
show: {
get() {
......@@ -41,6 +39,16 @@ export default {
value: val
})
}
},
theme: {
get() {
return this.$store.state.settings.theme
}
},
settingBtn: {
get() {
return this.$store.state.settings.settingBtn
}
}
},
watch: {
......
src/components/placard/index.vue deleted 100644 → 0
<template>
<div>
<svg
t="1508738709248"
class="screenfull-svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2069"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32"
height="32"
@click="click"><path d="M921.9 468.6H749.6c-9.4 0-18.4 3.8-25 10.5-6.6 6.7-10.3 15.7-10.3 25.1v11.1c0 19.6 15.9 35.5 35.4 35.5h172.2c19.5 0 35.3-15.9 35.3-35.5v-11.1c0-9.4-3.7-18.4-10.3-25.1-6.6-6.7-15.6-10.5-25-10.5zM522.4 163.9c-53.6 42.6-165.7 102.3-246.3 159.8h-0.1c-0.9 0.6-1.8 3.8-2.8 4.3-9.5 5.4-13.8 20.1-65.6 20.1h-101c-26 0-42 12.2-42 39.6V631c0 27.4 14.7 40.9 42 40.9H208c51.5 0.1 55.7 14.8 65.2 20.1 0.9 0.5 1.8 3.7 2.7 4.3h0.1c78.2 57.5 191 121.8 246.4 162.7 16.7 12.3 72.1 33.9 72.1-42.1v-614c0-76.1-55.9-51.8-72.1-39z m159 167.8c9.2 16.1 27.3 20.2 40.5 9l141.5-119.3c13.3-11.1 16.5-33.2 7.4-49.4l-5.2-9.1c-9.1-16.1-27.3-20.1-40.5-9L683.6 273.2c-13.2 11.2-16.5 33.2-7.4 49.4l5.2 9.1z m40.4 347.4c-13.2-11.1-31.3-7-40.4 9l-5.2 9.1c-9.1 16.1-5.8 38.2 7.4 49.4L825.1 866c13.2 11.1 31.3 7.1 40.4-9l5.2-9.1c9.1-16.1 5.8-38.2-7.4-49.4L721.8 679.1z m0 0" p-id="1259"/></svg>
<el-dialog :append-to-body="true" :visible.sync="dialogTableVisible" width="60%" title="更新公告">
<blockquote class="my-blockquote">1.7版本更新说明</blockquote>
<div class="my-code">
<div style="font-weight: bold">一、后端</div>
<ol>
<li>修复用户存在多角色时登录失败的bug</li>
<li>修复在修改用户角色时缓存不刷新的bug</li>
<li>修复修改邮箱配置需要重新启动才生效的bug</li>
<li>修复上级目录选择自己导致列表不显示的bug</li>
<li>新增部分工具类的单元测试</li>
<li>common模块新增 SecurityUtils 工具类、可获取当前用户的 id和 username</li>
<li>配置文件新增 Swagger 的开启开关</li>
</ol>
<div style="font-weight: bold">二、前端</div>
<ol>
<li>新增系统设置，可设置logo、</li>
<li>新增首屏加载动画</li>
<li>新增系统Logo显示</li>
<li>优化首页的 Tag 不可删除，由 affix 属性控制</li>
<li>修复顶级部门不能修改的问题</li>
<li>其他细节优化</li>
</ol>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogTableVisible: false
}
},
methods: {
click() {
this.dialogTableVisible = true
}
}
}
</script>
<style scoped>
.screenfull-svg {
display: inline-block;
cursor: pointer;
fill: #5a5e66;;
width: 20px;
height: 20px;
vertical-align: 10px;
}
.my-blockquote{
margin: 0px 0px 10px;
padding: 12px;
line-height: 22px;
border-left: 5px solid #00437B;
border-radius: 0 2px 2px 0;
background-color: #f2f2f2;
}
.my-code{
position: relative;
padding: 15px;
line-height: 20px;
border-left: 5px solid #ddd;
color: #333;
font-family: Courier New;
font-size: 12px
}
</style>
src/config/index.js
......@@ -37,5 +37,10 @@ export default {
/**
* @description 是否显示logo
*/
sidebarLogo: true
sidebarLogo: true,
/**
* 是否显示设置的悬浮按钮
*/
settingBtn: false
}
src/main.js
......@@ -10,11 +10,11 @@ import 'mavon-editor/dist/css/index.css'
import '@/styles/index.scss' // global css
import App from './App'
import router from './router'
import router from './router/routers'
import store from './store'
import '@/icons' // icon
import './permission' // permission control
import './router/index' // permission control
Vue.use(mavonEditor)
Vue.use(ElementUI, { locale })
......
src/permission.js deleted 100644 → 0
import router from './router'
import store from './store'
import Config from '@/config'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
import { buildMenus } from '@/api/menu'
import { filterAsyncRouter } from './store/modules/permission'
NProgress.configure({ showSpinner: false })// NProgress Configuration
const whiteList = ['/login']// no redirect whitelist
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title + ' - ' + Config.webName
}
NProgress.start() // start progress bar
if (getToken()) {
// 已登录且要跳转的页面是登录页
if (to.path === '/login') {
next({ path: '/' })
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
// 动态路由，拉取菜单
loadMenus(next, to)
}).catch((err) => {
console.log(err)
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
// 登录时未拉取 菜单，在此处拉取
} else if (store.getters.loadMenus) {
// 修改成false，防止死循环
store.dispatch('updateLoadMenus').then(res => {})
loadMenus(next, to)
} else {
next()
}
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next()
} else {
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
NProgress.done()
}
}
})
export const loadMenus = (next, to) => {
buildMenus().then(res => {
const asyncRouter = filterAsyncRouter(res)
asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由
router.addRoutes(asyncRouter) // 动态添加可访问路由表
next({ ...to, replace: true })// hack方法 确保addRoutes已完成
})
})
}
router.afterEach(() => {
NProgress.done() // finish progress bar
})
src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import router from './routers'
import store from '@/store'
import Config from '@/config'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css'// progress bar style
import { getToken } from '@/utils/auth' // getToken from cookie
import { buildMenus } from '@/api/menu'
import { filterAsyncRouter } from '@/store/modules/permission'
Vue.use(Router)
NProgress.configure({ showSpinner: false })// NProgress Configuration
/* Layout */
import Layout from '../views/layout/Layout'
const whiteList = ['/login']// no redirect whitelist
/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title + ' - ' + Config.webName
}
**/
export const constantRouterMap = [
{ path: '/login',
meta: { title: '登录', noCache: true },
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/errorPage/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/errorPage/401'),
hidden: true
},
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path*',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/',
component: Layout,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: '首页',
meta: { title: '首页', icon: 'index', noCache: true, affix: true }
}
]
},
{
path: '/user',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'center',
component: () => import('@/views/system/user/center'),
name: '个人中心',
meta: { title: '个人中心', icon: 'user' }
NProgress.start() // start progress bar
if (getToken()) {
// 已登录且要跳转的页面是登录页
if (to.path === '/login') {
next({ path: '/' })
NProgress.done() // if current page is dashboard will not trigger afterEach hook, so manually handle it
} else {
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
store.dispatch('GetInfo').then(res => { // 拉取user_info
// 动态路由，拉取菜单
loadMenus(next, to)
}).catch((err) => {
console.log(err)
store.dispatch('LogOut').then(() => {
location.reload() // 为了重新实例化vue-router对象 避免bug
})
})
// 登录时未拉取 菜单，在此处拉取
} else if (store.getters.loadMenus) {
// 修改成false，防止死循环
store.dispatch('updateLoadMenus').then(res => {})
loadMenus(next, to)
} else {
next()
}
]
}
} else {
/* has no token*/
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入
next()
} else {
next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页
NProgress.done()
}
}
// { path: '*', redirect: '/404', hidden: true }
]
})
export const loadMenus = (next, to) => {
buildMenus().then(res => {
const asyncRouter = filterAsyncRouter(res)
asyncRouter.push({ path: '*', redirect: '/404', hidden: true })
store.dispatch('GenerateRoutes', asyncRouter).then(() => { // 存储路由
router.addRoutes(asyncRouter) // 动态添加可访问路由表
next({ ...to, replace: true })// hack方法 确保addRoutes已完成
})
})
}
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
router.afterEach(() => {
NProgress.done() // finish progress bar
})
src/router/routers.js 0 → 100644
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
/* Layout */
import Layout from '../views/layout/Layout'
/**
* hidden: true if `hidden:true` will not show in the sidebar(default is false)
* alwaysShow: true if set true, will always show the root menu, whatever its child routes length
* if not set alwaysShow, only more than one route under the children
* it will becomes nested mode, otherwise not show the root menu
* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb
* name:'router-name' the name is used by <keep-alive> (must set!!!)
* meta : {
title: 'title' the name show in submenu and breadcrumb (recommend set)
icon: 'svg-name' the icon show in the sidebar,
}
**/
export const constantRouterMap = [
{ path: '/login',
meta: { title: '登录', noCache: true },
component: () => import('@/views/login/index'),
hidden: true
},
{
path: '/404',
component: () => import('@/views/errorPage/404'),
hidden: true
},
{
path: '/401',
component: () => import('@/views/errorPage/401'),
hidden: true
},
{
path: '/redirect',
component: Layout,
hidden: true,
children: [
{
path: '/redirect/:path*',
component: () => import('@/views/redirect/index')
}
]
},
{
path: '/',
component: Layout,
redirect: 'dashboard',
children: [
{
path: 'dashboard',
component: () => import('@/views/dashboard/index'),
name: '首页',
meta: { title: '首页', icon: 'index', noCache: true, affix: true }
}
]
},
{
path: '/user',
component: Layout,
hidden: true,
redirect: 'noredirect',
children: [
{
path: 'center',
component: () => import('@/views/system/user/center'),
name: '个人中心',
meta: { title: '个人中心', icon: 'user' }
}
]
}
// { path: '*', redirect: '/404', hidden: true }
]
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
src/store/modules/permission.js
import { constantRouterMap } from '@/router'
import { constantRouterMap } from '@/router/routers'
import Layout from '@/views/layout/Layout'
const permission = {
......
src/store/modules/settings.js
import Config from '@/config'
import variables from '@/styles/element-variables.scss'
const settings = {
state: {
showRightPanel: false,
tagsView: Config.tagsView,
fixedHeader: Config.fixedHeader,
sidebarLogo: Config.sidebarLogo
sidebarLogo: Config.sidebarLogo,
theme: variables.theme,
settingBtn: Config.settingBtn
},
mutations: {
CHANGE_SETTING: (state, { key, value }) => {
......
src/styles/element-variables.scss 0 → 100644
/**
* I think element-ui's default theme color is too light for long-term use.
* So I modified the default color and you can modify it to your liking.
**/
/* theme color */
$--color-primary: #1890ff;
$--color-success: #13ce66;
$--color-warning: #FFBA00;
$--color-danger: #ff4949;
// $--color-info: #1E1E1E;
$--button-font-weight: 400;
// $--color-text-regular: #1f2d3d;
$--border-color-light: #dfe4ed;
$--border-color-lighter: #e6ebf5;
$--table-border:1px solid#dfe6ec;
/* icon font path, required */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
// the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export {
theme: $--color-primary;
}
src/utils/request.js
import axios from 'axios'
import router from '@/router'
import router from '@/router/routers'
import { Notification, MessageBox } from 'element-ui'
import store from '../store'
import { getToken } from '@/utils/auth'
......
src/views/layout/Layout.vue
......@@ -50,7 +50,7 @@ export default {
},
methods: {
handleClickOutside() {
this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
this.$store.dispatch('closeSideBar', { withoutAnimation: false })
}
}
}
......
src/views/layout/components/Navbar.vue
......@@ -5,9 +5,6 @@
<div class="right-menu">
<template v-if="device!=='mobile'">
<el-tooltip content="更新公告" effect="dark" placement="bottom">
<Placard class="screenfull right-menu-item"/>
</el-tooltip>
<el-tooltip content="全屏" effect="dark" placement="bottom">
<screenfull class="screenfull right-menu-item"/>
</el-tooltip>
......@@ -47,13 +44,11 @@ import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import Screenfull from '@/components/Screenfull'
import Placard from '@/components/placard'
export default {
components: {
Breadcrumb,
Hamburger,
Placard,
Screenfull
},
computed: {
......
src/views/layout/components/Settings/index.vue
......@@ -17,6 +17,11 @@
<el-switch v-model="sidebarLogo" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>显示 SettingBtn</span>
<el-switch v-model="settingBtn" class="drawer-switch" />
</div>
</div>
</div>
</template>
......@@ -59,6 +64,17 @@ export default {
value: val
})
}
},
settingBtn: {
get() {
return this.$store.state.settings.settingBtn
},
set(val) {
this.$store.dispatch('changeSetting', {
key: 'settingBtn',
value: val
})
}
}
}
}
......
src/views/layout/components/TagsView.vue
......@@ -27,7 +27,7 @@
<script>
import ScrollPane from '@/components/ScrollPane'
import path from 'path'
import { constantRouterMap } from '@/router'
import { constantRouterMap } from '@/router/routers'
export default {
components: { ScrollPane },
data() {
......
src/views/login/index.vue
......@@ -32,8 +32,8 @@ export default {
data() {
return {
loginForm: {
username: '',
password: '',
username: 'admin',
password: '123456',
rememberMe: false
},
loginRules: {
......
src/views/system/role/module/form.vue
......@@ -137,5 +137,4 @@ export default {
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment