forked from AkkomaGang/admin-fe
refine main.js
This commit is contained in:
parent
e912cea26a
commit
9768305166
9 changed files with 146 additions and 142 deletions
|
@ -10,7 +10,7 @@
|
||||||
import SimpleMDE from 'simplemde';
|
import SimpleMDE from 'simplemde';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Sticky',
|
name: 'simplemde-md',
|
||||||
props: {
|
props: {
|
||||||
value: String,
|
value: String,
|
||||||
id: {
|
id: {
|
||||||
|
|
|
@ -1,47 +1,44 @@
|
||||||
import './waves.css';
|
import './waves.css';
|
||||||
|
|
||||||
const vueWaves = {};
|
export default{
|
||||||
vueWaves.install = (Vue, options = {}) => {
|
bind(el, binding) {
|
||||||
Vue.directive('waves', {
|
el.addEventListener('click', e => {
|
||||||
bind(el, binding) {
|
const customOpts = Object.assign({}, binding.value);
|
||||||
el.addEventListener('click', e => {
|
const opts = Object.assign({
|
||||||
const customOpts = Object.assign(options, binding.value);
|
ele: el, // 波纹作用元素
|
||||||
const opts = Object.assign({
|
type: 'hit', // hit点击位置扩散center中心点扩展
|
||||||
ele: el, // 波纹作用元素
|
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
|
||||||
type: 'hit', // hit点击位置扩散center中心点扩展
|
}, customOpts),
|
||||||
color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
|
target = opts.ele;
|
||||||
}, customOpts),
|
if (target) {
|
||||||
target = opts.ele;
|
target.style.position = 'relative';
|
||||||
if (target) {
|
target.style.overflow = 'hidden';
|
||||||
target.style.position = 'relative';
|
const rect = target.getBoundingClientRect();
|
||||||
target.style.overflow = 'hidden';
|
let ripple = target.querySelector('.waves-ripple');
|
||||||
const rect = target.getBoundingClientRect();
|
if (!ripple) {
|
||||||
let ripple = target.querySelector('.waves-ripple');
|
ripple = document.createElement('span');
|
||||||
if (!ripple) {
|
ripple.className = 'waves-ripple';
|
||||||
ripple = document.createElement('span');
|
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
|
||||||
ripple.className = 'waves-ripple';
|
target.appendChild(ripple);
|
||||||
ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
|
} else {
|
||||||
target.appendChild(ripple);
|
ripple.className = 'waves-ripple';
|
||||||
} else {
|
|
||||||
ripple.className = 'waves-ripple';
|
|
||||||
}
|
|
||||||
switch (opts.type) {
|
|
||||||
case 'center':
|
|
||||||
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
|
|
||||||
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
|
|
||||||
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
|
|
||||||
}
|
|
||||||
ripple.style.backgroundColor = opts.color;
|
|
||||||
ripple.className = 'waves-ripple z-active';
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
}, false);
|
switch (opts.type) {
|
||||||
}
|
case 'center':
|
||||||
})
|
ripple.style.top = (rect.height / 2 - ripple.offsetHeight / 2) + 'px';
|
||||||
};
|
ripple.style.left = (rect.width / 2 - ripple.offsetWidth / 2) + 'px';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ripple.style.top = (e.pageY - rect.top - ripple.offsetHeight / 2 - document.body.scrollTop) + 'px';
|
||||||
|
ripple.style.left = (e.pageX - rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft) + 'px';
|
||||||
|
}
|
||||||
|
ripple.style.backgroundColor = opts.color;
|
||||||
|
ripple.className = 'waves-ripple z-active';
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
export default vueWaves;
|
|
||||||
|
|
||||||
|
|
14
src/errorLog.js
Normal file
14
src/errorLog.js
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import errLog from '@/store/errLog'
|
||||||
|
|
||||||
|
// 生产环境错误日志
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
Vue.config.errorHandler = function(err, vm) {
|
||||||
|
console.log(err, window.location.href);
|
||||||
|
errLog.pushLog({
|
||||||
|
err,
|
||||||
|
url: window.location.href,
|
||||||
|
vm
|
||||||
|
})
|
||||||
|
};
|
||||||
|
}
|
107
src/main.js
107
src/main.js
|
@ -1,102 +1,27 @@
|
||||||
// The Vue build version to load with the `import` command
|
import Vue from 'vue'
|
||||||
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
|
import App from './App'
|
||||||
import Vue from 'vue';
|
import router from './router'
|
||||||
import App from './App';
|
import store from './store'
|
||||||
import router from './router';
|
import 'normalize.css/normalize.css'// normalize.css 样式格式化
|
||||||
import store from './store';
|
import ElementUI from 'element-ui'
|
||||||
import ElementUI from 'element-ui';
|
import 'element-ui/lib/theme-default/index.css'
|
||||||
import 'element-ui/lib/theme-default/index.css';
|
import '@/assets/iconfont/iconfont' // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
|
||||||
import 'assets/custom-theme/index.css'; // 换肤版本element-ui css
|
import IconSvg from '@/components/Icon-svg'// svg组件
|
||||||
import NProgress from 'nprogress'; // Progress 进度条
|
import * as filters from '@/filters' // 全局filter
|
||||||
import 'nprogress/nprogress.css';// Progress 进度条 样式
|
import '@/errorLog'// error log
|
||||||
import 'normalize.css/normalize.css';// normalize.css 样式格式化
|
import '@/permission' // 权限
|
||||||
import 'assets/iconfont/iconfont'; // iconfont 具体图标见https://github.com/PanJiaChen/vue-element-admin/wiki
|
import '@/mock/index.js' // 该项目所有请求使用mockjs模拟
|
||||||
import * as filters from './filters'; // 全局vue filter
|
|
||||||
import Multiselect from 'vue-multiselect';// 使用的一个多选框组件,element-ui的select不能满足所有需求
|
|
||||||
import 'vue-multiselect/dist/vue-multiselect.min.css';// 多选框组件css
|
|
||||||
import Sticky from 'components/Sticky'; // 粘性header组件
|
|
||||||
import IconSvg from 'components/Icon-svg';// svg 组件
|
|
||||||
import vueWaves from './directive/waves';// 水波纹指令
|
|
||||||
import errLog from 'store/errLog';// error log组件
|
|
||||||
import './mock/index.js'; // 该项目所有请求使用mockjs模拟
|
|
||||||
import { getToken } from 'utils/auth';
|
|
||||||
|
|
||||||
// register globally
|
// register globally
|
||||||
Vue.component('multiselect', Multiselect);
|
|
||||||
Vue.component('Sticky', Sticky);
|
|
||||||
Vue.component('icon-svg', IconSvg)
|
Vue.component('icon-svg', IconSvg)
|
||||||
Vue.use(ElementUI);
|
Vue.use(ElementUI)
|
||||||
Vue.use(vueWaves);
|
|
||||||
|
|
||||||
// register global utility filters.
|
// register global utility filters.
|
||||||
Object.keys(filters).forEach(key => {
|
Object.keys(filters).forEach(key => {
|
||||||
Vue.filter(key, filters[key])
|
Vue.filter(key, filters[key])
|
||||||
});
|
})
|
||||||
|
|
||||||
// permissiom judge
|
Vue.config.productionTip = false
|
||||||
function hasPermission(roles, permissionRoles) {
|
|
||||||
if (roles.indexOf('admin') >= 0) return true; // admin权限 直接通过
|
|
||||||
if (!permissionRoles) return true;
|
|
||||||
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
|
||||||
}
|
|
||||||
|
|
||||||
// register global progress.
|
|
||||||
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd'];// 不重定向白名单
|
|
||||||
router.beforeEach((to, from, next) => {
|
|
||||||
NProgress.start(); // 开启Progress
|
|
||||||
if (getToken()) { // 判断是否有token
|
|
||||||
if (to.path === '/login') {
|
|
||||||
next({ path: '/' });
|
|
||||||
} else {
|
|
||||||
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
|
|
||||||
store.dispatch('GetInfo').then(res => { // 拉取user_info
|
|
||||||
const roles = res.data.role;
|
|
||||||
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
|
|
||||||
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
|
|
||||||
next({ ...to }); // hack方法 确保addRoutes已完成
|
|
||||||
})
|
|
||||||
}).catch(() => {
|
|
||||||
store.dispatch('FedLogOut').then(() => {
|
|
||||||
next({ path: '/login' });
|
|
||||||
})
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
|
|
||||||
if (hasPermission(store.getters.roles, to.meta.role)) {
|
|
||||||
next();//
|
|
||||||
} else {
|
|
||||||
next({ path: '/401', query: { noGoBack: true } });
|
|
||||||
}
|
|
||||||
// 可删 ↑
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
|
|
||||||
next()
|
|
||||||
} else {
|
|
||||||
next('/login'); // 否则全部重定向到登录页
|
|
||||||
NProgress.done(); // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
router.afterEach(() => {
|
|
||||||
NProgress.done(); // 结束Progress
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.config.productionTip = false;
|
|
||||||
|
|
||||||
// 生产环境错误日志
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
Vue.config.errorHandler = function(err, vm) {
|
|
||||||
console.log(err, window.location.href);
|
|
||||||
errLog.pushLog({
|
|
||||||
err,
|
|
||||||
url: window.location.href,
|
|
||||||
vm
|
|
||||||
})
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
|
|
56
src/permission.js
Normal file
56
src/permission.js
Normal file
|
@ -0,0 +1,56 @@
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import NProgress from 'nprogress' // Progress 进度条
|
||||||
|
import 'nprogress/nprogress.css'// Progress 进度条样式
|
||||||
|
import { getToken } from '@/utils/auth' // 验权
|
||||||
|
|
||||||
|
// permissiom judge
|
||||||
|
function hasPermission(roles, permissionRoles) {
|
||||||
|
if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
|
||||||
|
if (!permissionRoles) return true
|
||||||
|
return roles.some(role => permissionRoles.indexOf(role) >= 0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// register global progress.
|
||||||
|
const whiteList = ['/login', '/authredirect', '/reset', '/sendpwd']// 不重定向白名单
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
NProgress.start() // 开启Progress
|
||||||
|
if (getToken()) { // 判断是否有token
|
||||||
|
if (to.path === '/login') {
|
||||||
|
next({ path: '/' })
|
||||||
|
} else {
|
||||||
|
if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
|
||||||
|
store.dispatch('GetInfo').then(res => { // 拉取user_info
|
||||||
|
const roles = res.data.role
|
||||||
|
store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
|
||||||
|
router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
|
||||||
|
next({ ...to }) // hack方法 确保addRoutes已完成
|
||||||
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
store.dispatch('FedLogOut').then(() => {
|
||||||
|
next({ path: '/login' })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
// 没有动态改变权限的需求可直接next() 删除下方权限判断 ↓
|
||||||
|
if (hasPermission(store.getters.roles, to.meta.role)) {
|
||||||
|
next()//
|
||||||
|
} else {
|
||||||
|
next({ path: '/401', query: { noGoBack: true } })
|
||||||
|
}
|
||||||
|
// 可删 ↑
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
|
||||||
|
next()
|
||||||
|
} else {
|
||||||
|
next('/login') // 否则全部重定向到登录页
|
||||||
|
NProgress.done() // 在hash模式下 改变手动改变hash 重定向回来 不会触发afterEach 暂时hack方案 ps:history模式下无问题,可删除该行!
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
router.afterEach(() => {
|
||||||
|
NProgress.done() // 结束Progress
|
||||||
|
})
|
|
@ -24,9 +24,13 @@
|
||||||
<script>
|
<script>
|
||||||
import MdInput from 'components/MDinput';
|
import MdInput from 'components/MDinput';
|
||||||
import PanThumb from 'components/PanThumb';
|
import PanThumb from 'components/PanThumb';
|
||||||
|
import waves from '@/directive/waves.js';// 水波纹指令
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { MdInput, PanThumb },
|
components: { MdInput, PanThumb },
|
||||||
|
directives: {
|
||||||
|
waves
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
title: ''
|
title: ''
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="createPost-container">
|
<div class="createPost-container">
|
||||||
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
|
<el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
|
||||||
|
|
||||||
<Sticky :className="'sub-navbar '+postForm.status">
|
<sticky :className="'sub-navbar '+postForm.status">
|
||||||
<template v-if="fetchSuccess">
|
<template v-if="fetchSuccess">
|
||||||
<div style="display:inline-block">
|
<div style="display:inline-block">
|
||||||
|
|
||||||
|
@ -57,7 +57,7 @@
|
||||||
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
|
<el-tag>发送异常错误,刷新页面,或者联系程序员</el-tag>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
</Sticky>
|
</sticky>
|
||||||
|
|
||||||
<div class="createPost-main-container">
|
<div class="createPost-main-container">
|
||||||
<el-row>
|
<el-row>
|
||||||
|
@ -107,7 +107,7 @@
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
<div class="editor-container">
|
<div class="editor-container">
|
||||||
<Tinymce :height=400 ref="editor" v-model="postForm.content"></Tinymce>
|
<tinymce :height=400 ref="editor" v-model="postForm.content"></tinymce>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-bottom: 20px;">
|
<div style="margin-bottom: 20px;">
|
||||||
|
@ -122,14 +122,17 @@
|
||||||
<script>
|
<script>
|
||||||
import Tinymce from 'components/Tinymce'
|
import Tinymce from 'components/Tinymce'
|
||||||
import Upload from 'components/Upload/singleImage3'
|
import Upload from 'components/Upload/singleImage3'
|
||||||
import MDinput from 'components/MDinput';
|
import MDinput from 'components/MDinput'
|
||||||
import { validateURL } from 'utils/validate';
|
import Multiselect from 'vue-multiselect'// 使用的一个多选框组件,element-ui的select不能满足所有需求
|
||||||
import { getArticle } from 'api/article';
|
import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
|
||||||
import { userSearch } from 'api/remoteSearch';
|
import Sticky from 'components/Sticky' // 粘性header组件
|
||||||
|
import { validateURL } from 'utils/validate'
|
||||||
|
import { getArticle } from 'api/article'
|
||||||
|
import { userSearch } from 'api/remoteSearch'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'articleDetail',
|
name: 'articleDetail',
|
||||||
components: { Tinymce, MDinput, Upload },
|
components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
|
||||||
data() {
|
data() {
|
||||||
const validateRequire = (rule, value, callback) => {
|
const validateRequire = (rule, value, callback) => {
|
||||||
if (value === '') {
|
if (value === '') {
|
||||||
|
|
|
@ -151,6 +151,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { fetchList, fetchPv } from 'api/article_table';
|
import { fetchList, fetchPv } from 'api/article_table';
|
||||||
|
import waves from '@/directive/waves.js';// 水波纹指令
|
||||||
import { parseTime } from 'utils';
|
import { parseTime } from 'utils';
|
||||||
|
|
||||||
const calendarTypeOptions = [
|
const calendarTypeOptions = [
|
||||||
|
@ -168,6 +169,9 @@
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'table_demo',
|
name: 'table_demo',
|
||||||
|
directives: {
|
||||||
|
waves
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
list: null,
|
list: null,
|
||||||
|
|
|
@ -46,6 +46,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { toggleClass } from 'utils';
|
import { toggleClass } from 'utils';
|
||||||
|
import '@/assets/custom-theme/index.css'; // 换肤版本element-ui css
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
Loading…
Reference in a new issue