18 changed files with 805 additions and 123 deletions
-
92src/assets/styles/btn.scss
-
117src/assets/styles/eladmin.scss
-
78src/assets/styles/element-ui.scss
-
14src/assets/styles/index.scss
-
48src/assets/styles/transition.scss
-
1src/layout/index.js
-
10src/layout/mixin/ResizeHandler.js
-
11src/main.js
-
3src/router/index.js
-
30src/router/routers.js
-
6src/settings.js
-
56src/store/modules/app.js
-
36src/store/modules/settings.js
-
165src/store/modules/tagsView.js
-
93src/store/modules/user.js
-
22src/utils/rsaEncrypt.js
-
42src/views/login.vue
-
104vue.config.js
@ -0,0 +1,92 @@ |
|||
@import 'variables'; |
|||
@mixin colorBtn($color) { |
|||
background: $color; |
|||
&:hover { |
|||
color: $color; |
|||
&:before, |
|||
&:after { |
|||
background: $color; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.blue-btn { |
|||
@include colorBtn($blue) |
|||
} |
|||
|
|||
.light-blue-btn { |
|||
@include colorBtn($light-blue) |
|||
} |
|||
|
|||
.red-btn { |
|||
@include colorBtn($red) |
|||
} |
|||
|
|||
.pink-btn { |
|||
@include colorBtn($pink) |
|||
} |
|||
|
|||
.green-btn { |
|||
@include colorBtn($green) |
|||
} |
|||
|
|||
.tiffany-btn { |
|||
@include colorBtn($tiffany) |
|||
} |
|||
|
|||
.yellow-btn { |
|||
@include colorBtn($yellow) |
|||
} |
|||
|
|||
.pan-btn { |
|||
font-size: 14px; |
|||
color: #fff; |
|||
padding: 14px 36px; |
|||
border-radius: 8px; |
|||
border: none; |
|||
outline: none; |
|||
transition: 600ms ease all; |
|||
position: relative; |
|||
display: inline-block; |
|||
&:hover { |
|||
background: #fff; |
|||
&:before, |
|||
&:after { |
|||
width: 100%; |
|||
transition: 600ms ease all; |
|||
} |
|||
} |
|||
&:before, |
|||
&:after { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
height: 2px; |
|||
width: 0; |
|||
transition: 400ms ease all; |
|||
} |
|||
&::after { |
|||
right: inherit; |
|||
top: inherit; |
|||
left: 0; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
.custom-button { |
|||
display: inline-block; |
|||
line-height: 1; |
|||
white-space: nowrap; |
|||
cursor: pointer; |
|||
background: #fff; |
|||
color: #fff; |
|||
-webkit-appearance: none; |
|||
text-align: center; |
|||
box-sizing: border-box; |
|||
outline: 0; |
|||
margin: 0; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
border-radius: 4px; |
|||
} |
|||
@ -0,0 +1,117 @@ |
|||
.head-container { |
|||
padding-bottom: 10px; |
|||
.filter-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin: 0 3px 10px 0; |
|||
input { |
|||
height: 30.5px; |
|||
line-height: 30.5px; |
|||
} |
|||
} |
|||
.el-form-item-label { |
|||
margin: 0 3px 9px 0; |
|||
display: inline-block; |
|||
text-align: right; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #606266; |
|||
line-height: 30.5px; |
|||
padding: 0 7px 0 7px; |
|||
} |
|||
.el-button+.el-button { |
|||
margin-left: 0 !important; |
|||
} |
|||
.el-select__caret.el-input__icon.el-icon-arrow-up{ |
|||
line-height: 30.5px; |
|||
} |
|||
.date-item { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
margin-bottom: 10px; |
|||
height: 30.5px !important; |
|||
width: 230px !important; |
|||
} |
|||
} |
|||
.el-avatar { |
|||
display: inline-block; |
|||
text-align: center; |
|||
background: #ccc; |
|||
color: #fff; |
|||
white-space: nowrap; |
|||
position: relative; |
|||
overflow: hidden; |
|||
vertical-align: middle; |
|||
width: 32px; |
|||
height: 32px; |
|||
line-height: 32px; |
|||
border-radius: 16px; |
|||
} |
|||
|
|||
.logo-con{ |
|||
height: 60px; |
|||
padding: 13px 0 0; |
|||
img{ |
|||
height: 32px; |
|||
width: 135px; |
|||
display: block; |
|||
//margin: 0 auto; |
|||
} |
|||
} |
|||
|
|||
#el-login-footer { |
|||
height: 40px; |
|||
line-height: 40px; |
|||
position: fixed; |
|||
bottom: 0; |
|||
width: 100%; |
|||
text-align: center; |
|||
color: #fff; |
|||
font-family: Arial, serif; |
|||
font-size: 12px; |
|||
letter-spacing: 1px; |
|||
} |
|||
|
|||
#el-main-footer { |
|||
background: none repeat scroll 0 0 white; |
|||
border-top: 1px solid #e7eaec; |
|||
overflow: hidden; |
|||
padding: 10px 6px 0 6px; |
|||
height: 33px; |
|||
font-size: 0.7rem !important; |
|||
color: #7a8b9a; |
|||
letter-spacing: 0.8px; |
|||
font-family: Arial, sans-serif !important; |
|||
position: fixed; |
|||
bottom: 0; |
|||
z-index: 99; |
|||
width: 100%; |
|||
} |
|||
.eladmin-upload { |
|||
border: 1px dashed #c0ccda; |
|||
border-radius: 5px; |
|||
height: 45px; |
|||
line-height: 45px; |
|||
width: 368px; |
|||
} |
|||
.my-blockquote{ |
|||
margin: 0 0 10px; |
|||
padding: 15px; |
|||
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, serif; |
|||
font-size: 12px |
|||
} |
|||
|
|||
.el-tabs{ |
|||
margin-bottom: 25px; |
|||
} |
|||
@ -0,0 +1,78 @@ |
|||
|
|||
|
|||
.el-breadcrumb__inner, |
|||
.el-breadcrumb__inner a { |
|||
font-weight: 400 !important; |
|||
} |
|||
|
|||
.el-upload { |
|||
input[type="file"] { |
|||
display: none !important; |
|||
} |
|||
} |
|||
|
|||
.el-upload__input { |
|||
display: none; |
|||
} |
|||
|
|||
.cell { |
|||
.el-tag { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
|
|||
.small-padding { |
|||
.cell { |
|||
padding-left: 5px; |
|||
padding-right: 5px; |
|||
} |
|||
} |
|||
|
|||
.fixed-width { |
|||
.el-button--mini { |
|||
padding: 7px 10px; |
|||
width: 60px; |
|||
} |
|||
} |
|||
|
|||
.status-col { |
|||
.cell { |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
|
|||
.el-tag { |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.el-dialog { |
|||
transform: none; |
|||
left: 0; |
|||
position: relative; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
// refine element ui upload |
|||
.upload-container { |
|||
.el-upload { |
|||
width: 100%; |
|||
|
|||
.el-upload-dragger { |
|||
width: 100%; |
|||
height: 200px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// dropdown |
|||
.el-dropdown-menu { |
|||
a { |
|||
display: block |
|||
} |
|||
} |
|||
|
|||
// fix date-picker ui bug in filter-item |
|||
.el-range-editor.el-input__inner { |
|||
display: inline-flex !important; |
|||
} |
|||
@ -0,0 +1,48 @@ |
|||
|
|||
|
|||
/* fade */ |
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.28s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-active { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* fade-transform */ |
|||
.fade-transform-leave-active, |
|||
.fade-transform-enter-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.fade-transform-enter { |
|||
opacity: 0; |
|||
transform: translateX(-30px); |
|||
} |
|||
|
|||
.fade-transform-leave-to { |
|||
opacity: 0; |
|||
transform: translateX(30px); |
|||
} |
|||
|
|||
/* breadcrumb transition */ |
|||
.breadcrumb-enter-active, |
|||
.breadcrumb-leave-active { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-enter, |
|||
.breadcrumb-leave-active { |
|||
opacity: 0; |
|||
transform: translateX(20px); |
|||
} |
|||
|
|||
.breadcrumb-move { |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.breadcrumb-leave-active { |
|||
position: absolute; |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export { default as TopMenus } from './TopMenus.vue' |
|||
@ -0,0 +1,56 @@ |
|||
import Cookies from 'js-cookie' |
|||
|
|||
const state = { |
|||
sidebar: { |
|||
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, |
|||
withoutAnimation: false |
|||
}, |
|||
device: 'desktop', |
|||
size: Cookies.get('size') || 'small' |
|||
} |
|||
|
|||
const mutations = { |
|||
TOGGLE_SIDEBAR: state => { |
|||
state.sidebar.opened = !state.sidebar.opened |
|||
state.sidebar.withoutAnimation = false |
|||
if (state.sidebar.opened) { |
|||
Cookies.set('sidebarStatus', 1) |
|||
} else { |
|||
Cookies.set('sidebarStatus', 0) |
|||
} |
|||
}, |
|||
CLOSE_SIDEBAR: (state, withoutAnimation) => { |
|||
Cookies.set('sidebarStatus', 0) |
|||
state.sidebar.opened = false |
|||
state.sidebar.withoutAnimation = withoutAnimation |
|||
}, |
|||
TOGGLE_DEVICE: (state, device) => { |
|||
state.device = device |
|||
}, |
|||
SET_SIZE: (state, size) => { |
|||
state.size = size |
|||
Cookies.set('size', size) |
|||
} |
|||
} |
|||
|
|||
const actions = { |
|||
toggleSideBar({ commit }) { |
|||
commit('TOGGLE_SIDEBAR') |
|||
}, |
|||
closeSideBar({ commit }, { withoutAnimation }) { |
|||
commit('CLOSE_SIDEBAR', withoutAnimation) |
|||
}, |
|||
toggleDevice({ commit }, device) { |
|||
commit('TOGGLE_DEVICE', device) |
|||
}, |
|||
setSize({ commit }, size) { |
|||
commit('SET_SIZE', size) |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -0,0 +1,36 @@ |
|||
import variables from '@/assets/styles/element-variables.scss' |
|||
import defaultSettings from '@/settings' |
|||
const { tagsView, fixedHeader, sidebarLogo, uniqueOpened, showFooter, footerTxt, caseNumber } = defaultSettings |
|||
|
|||
const state = { |
|||
theme: variables.theme, |
|||
showSettings: tagsView, |
|||
fixedHeader: fixedHeader, |
|||
sidebarLogo: sidebarLogo, |
|||
uniqueOpened: uniqueOpened, |
|||
showFooter: showFooter, |
|||
footerTxt: footerTxt, |
|||
caseNumber: caseNumber |
|||
|
|||
} |
|||
|
|||
const mutations = { |
|||
CHANGE_SETTING: (state, { key, value }) => { |
|||
if (state.hasOwnProperty(key)) { |
|||
state[key] = value |
|||
} |
|||
} |
|||
} |
|||
|
|||
const actions = { |
|||
changeSetting({ commit }, data) { |
|||
commit('CHANGE_SETTING', data) |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -0,0 +1,165 @@ |
|||
const state = { |
|||
visitedViews: [], |
|||
cachedViews: [] |
|||
} |
|||
|
|||
const mutations = { |
|||
ADD_VISITED_VIEW: (state, view) => { |
|||
if (state.visitedViews.some(v => v.path === view.path)) return |
|||
state.visitedViews.push( |
|||
Object.assign({}, view, { |
|||
title: view.meta.title || 'no-name' |
|||
}) |
|||
) |
|||
}, |
|||
ADD_CACHED_VIEW: (state, view) => { |
|||
if (state.cachedViews.includes(view.name)) return |
|||
if (!view.meta.noCache) { |
|||
state.cachedViews.push(view.name) |
|||
} |
|||
}, |
|||
|
|||
DEL_VISITED_VIEW: (state, view) => { |
|||
for (const [i, v] of state.visitedViews.entries()) { |
|||
if (v.path === view.path) { |
|||
state.visitedViews.splice(i, 1) |
|||
break |
|||
} |
|||
} |
|||
}, |
|||
DEL_CACHED_VIEW: (state, view) => { |
|||
for (const i of state.cachedViews) { |
|||
if (i === view.name) { |
|||
const index = state.cachedViews.indexOf(i) |
|||
state.cachedViews.splice(index, 1) |
|||
break |
|||
} |
|||
} |
|||
}, |
|||
|
|||
DEL_OTHERS_VISITED_VIEWS: (state, view) => { |
|||
state.visitedViews = state.visitedViews.filter(v => { |
|||
return v.meta.affix || v.path === view.path |
|||
}) |
|||
}, |
|||
DEL_OTHERS_CACHED_VIEWS: (state, view) => { |
|||
for (const i of state.cachedViews) { |
|||
if (i === view.name) { |
|||
const index = state.cachedViews.indexOf(i) |
|||
state.cachedViews = state.cachedViews.slice(index, index + 1) |
|||
break |
|||
} |
|||
} |
|||
}, |
|||
|
|||
DEL_ALL_VISITED_VIEWS: state => { |
|||
// keep affix tags
|
|||
const affixTags = state.visitedViews.filter(tag => tag.meta.affix) |
|||
state.visitedViews = affixTags |
|||
}, |
|||
DEL_ALL_CACHED_VIEWS: state => { |
|||
state.cachedViews = [] |
|||
}, |
|||
|
|||
UPDATE_VISITED_VIEW: (state, view) => { |
|||
for (let v of state.visitedViews) { |
|||
if (v.path === view.path) { |
|||
v = Object.assign(v, view) |
|||
break |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
const actions = { |
|||
addView({ dispatch }, view) { |
|||
dispatch('addVisitedView', view) |
|||
dispatch('addCachedView', view) |
|||
}, |
|||
addVisitedView({ commit }, view) { |
|||
commit('ADD_VISITED_VIEW', view) |
|||
}, |
|||
addCachedView({ commit }, view) { |
|||
commit('ADD_CACHED_VIEW', view) |
|||
}, |
|||
|
|||
delView({ dispatch, state }, view) { |
|||
return new Promise(resolve => { |
|||
dispatch('delVisitedView', view) |
|||
dispatch('delCachedView', view) |
|||
resolve({ |
|||
visitedViews: [...state.visitedViews], |
|||
cachedViews: [...state.cachedViews] |
|||
}) |
|||
}) |
|||
}, |
|||
delVisitedView({ commit, state }, view) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_VISITED_VIEW', view) |
|||
resolve([...state.visitedViews]) |
|||
}) |
|||
}, |
|||
delCachedView({ commit, state }, view) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_CACHED_VIEW', view) |
|||
resolve([...state.cachedViews]) |
|||
}) |
|||
}, |
|||
|
|||
delOthersViews({ dispatch, state }, view) { |
|||
return new Promise(resolve => { |
|||
dispatch('delOthersVisitedViews', view) |
|||
dispatch('delOthersCachedViews', view) |
|||
resolve({ |
|||
visitedViews: [...state.visitedViews], |
|||
cachedViews: [...state.cachedViews] |
|||
}) |
|||
}) |
|||
}, |
|||
delOthersVisitedViews({ commit, state }, view) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_OTHERS_VISITED_VIEWS', view) |
|||
resolve([...state.visitedViews]) |
|||
}) |
|||
}, |
|||
delOthersCachedViews({ commit, state }, view) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_OTHERS_CACHED_VIEWS', view) |
|||
resolve([...state.cachedViews]) |
|||
}) |
|||
}, |
|||
|
|||
delAllViews({ dispatch, state }, view) { |
|||
return new Promise(resolve => { |
|||
dispatch('delAllVisitedViews', view) |
|||
dispatch('delAllCachedViews', view) |
|||
resolve({ |
|||
visitedViews: [...state.visitedViews], |
|||
cachedViews: [...state.cachedViews] |
|||
}) |
|||
}) |
|||
}, |
|||
delAllVisitedViews({ commit, state }) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_ALL_VISITED_VIEWS') |
|||
resolve([...state.visitedViews]) |
|||
}) |
|||
}, |
|||
delAllCachedViews({ commit, state }) { |
|||
return new Promise(resolve => { |
|||
commit('DEL_ALL_CACHED_VIEWS') |
|||
resolve([...state.cachedViews]) |
|||
}) |
|||
}, |
|||
|
|||
updateVisitedView({ commit }, view) { |
|||
commit('UPDATE_VISITED_VIEW', view) |
|||
} |
|||
} |
|||
|
|||
export default { |
|||
namespaced: true, |
|||
state, |
|||
mutations, |
|||
actions |
|||
} |
|||
@ -0,0 +1,93 @@ |
|||
import { login, getInfo, logout } from '@/api/login' |
|||
import { getToken, setToken, removeToken } from '@/utils/auth' |
|||
|
|||
const user = { |
|||
state: { |
|||
token: getToken(), |
|||
user: {}, |
|||
roles: [], |
|||
// 第一次加载菜单时用到
|
|||
loadMenus: false |
|||
}, |
|||
|
|||
mutations: { |
|||
SET_TOKEN: (state, token) => { |
|||
state.token = token |
|||
}, |
|||
SET_USER: (state, user) => { |
|||
state.user = user |
|||
}, |
|||
SET_ROLES: (state, roles) => { |
|||
state.roles = roles |
|||
}, |
|||
SET_LOAD_MENUS: (state, loadMenus) => { |
|||
state.loadMenus = loadMenus |
|||
} |
|||
}, |
|||
|
|||
actions: { |
|||
// 登录
|
|||
Login({ commit }, userInfo) { |
|||
const rememberMe = userInfo.rememberMe |
|||
return new Promise((resolve, reject) => { |
|||
login(userInfo.username, userInfo.password, userInfo.code, userInfo.uuid).then(res => { |
|||
setToken(res.token, rememberMe) |
|||
commit('SET_TOKEN', res.token) |
|||
setUserInfo(res.user, commit) |
|||
// 第一次加载菜单时用到， 具体见 src 目录下的 permission.js
|
|||
commit('SET_LOAD_MENUS', true) |
|||
resolve() |
|||
}).catch(error => { |
|||
reject(error) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
// 获取用户信息
|
|||
getInfo({ commit }) { |
|||
return new Promise((resolve, reject) => { |
|||
getInfo().then(res => { |
|||
setUserInfo(res, commit) |
|||
resolve(res) |
|||
}).catch(error => { |
|||
reject(error) |
|||
}) |
|||
}) |
|||
}, |
|||
// 登出
|
|||
LogOut({ commit }) { |
|||
return new Promise((resolve, reject) => { |
|||
logout().then(res => { |
|||
logOut(commit) |
|||
resolve() |
|||
}).catch(error => { |
|||
logOut(commit) |
|||
reject(error) |
|||
}) |
|||
}) |
|||
}, |
|||
|
|||
updateLoadMenus({ commit }) { |
|||
return new Promise((resolve, reject) => { |
|||
commit('SET_LOAD_MENUS', false) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
|
|||
export const logOut = (commit) => { |
|||
commit('SET_TOKEN', '') |
|||
commit('SET_ROLES', []) |
|||
removeToken() |
|||
} |
|||
|
|||
export const setUserInfo = (res, commit) => { |
|||
if (res.roles.length === 0) { |
|||
commit('SET_ROLES', ['ROLE_SYSTEM_DEFAULT']) |
|||
} else { |
|||
commit('SET_ROLES', res.roles) |
|||
} |
|||
commit('SET_USER', res.user) |
|||
} |
|||
|
|||
export default user |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue