mirror of
https://gitee.com/log4j/pig-ui.git
synced 2024-12-22 12:58:55 +08:00
'admin-21.03.25:优化网站loading、forEach替代map、更新最新依赖'
This commit is contained in:
lyt
parent
69fdd605d8
commit
8e9ad4be94
@ -36,4 +36,4 @@ module.exports = {
|
||||
vueIndentScriptAndStyle: false,
|
||||
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
|
||||
endOfLine: 'lf',
|
||||
}
|
||||
};
|
||||
|
||||
13
index.html
13
index.html
@ -17,18 +17,7 @@
|
||||
<title>vue-next-admin</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div class="loading-next">
|
||||
<div class="loading-next-box">
|
||||
<div class="loading-next-animation">
|
||||
<div class="loading-next-animation-box">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<script type="text/javascript">
|
||||
if (window.location.origin === 'https://lyt-top.gitee.io') {
|
||||
var _hmt = _hmt || [];
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"@antv/g6": "^4.2.1",
|
||||
"@antv/g6": "^4.2.3",
|
||||
"axios": "^0.21.1",
|
||||
"clipboard": "^2.0.8",
|
||||
"countup.js": "^2.0.7",
|
||||
@ -32,13 +32,13 @@
|
||||
"@types/node": "^14.14.35",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@types/sortablejs": "^1.10.6",
|
||||
"@typescript-eslint/eslint-plugin": "^4.18.0",
|
||||
"@typescript-eslint/parser": "^4.18.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.19.0",
|
||||
"@typescript-eslint/parser": "^4.19.0",
|
||||
"@vitejs/plugin-vue": "^1.1.5",
|
||||
"@vue/compiler-sfc": "^3.0.7",
|
||||
"dotenv": "^8.2.0",
|
||||
"eslint": "^7.22.0",
|
||||
"eslint-plugin-vue": "^7.7.0",
|
||||
"eslint-plugin-vue": "^7.8.0",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.32.8",
|
||||
"sass-loader": "^11.0.1",
|
||||
|
||||
@ -3,6 +3,7 @@ import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
import { store } from '/@/store/index.ts';
|
||||
import { getSession, clearSession } from '/@/utils/storage.ts';
|
||||
import { NextLoading } from '/@/utils/loading.ts';
|
||||
import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts';
|
||||
|
||||
// 定义动态路由
|
||||
@ -811,6 +812,7 @@ export function setBackEndControlRefreshRoutes() {
|
||||
|
||||
// 后端控制路由，模拟执行路由数据初始化
|
||||
const initBackEndControlRoutesFun = (res: any) => {
|
||||
NextLoading.start();
|
||||
const oldRoutes = JSON.parse(JSON.stringify(res.data));
|
||||
store.dispatch('requestOldRoutes/setBackEndControlRoutes', oldRoutes);
|
||||
dynamicRoutes[0].children = backEndRouter(res.data);
|
||||
@ -868,7 +870,7 @@ export function formatTwoStageRoutes(arr: any) {
|
||||
if (arr.length < 0) return false;
|
||||
const newArr: any = [];
|
||||
const cacheList: Array<string> = [];
|
||||
arr.map((v: any) => {
|
||||
arr.forEach((v: any) => {
|
||||
if (v.path === '/') {
|
||||
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
|
||||
} else {
|
||||
@ -904,7 +906,7 @@ export function hasAuth(auths: any, route: any) {
|
||||
// 递归过滤有权限的路由
|
||||
export function setFilterMenuFun(routes: any, auth: any) {
|
||||
const menu: any = [];
|
||||
routes.map((route: any) => {
|
||||
routes.forEach((route: any) => {
|
||||
const item = { ...route };
|
||||
if (hasAuth(auth, item)) {
|
||||
if (item.children) item.children = setFilterMenuFun(item.children, auth);
|
||||
@ -915,12 +917,12 @@ export function setFilterMenuFun(routes: any, auth: any) {
|
||||
}
|
||||
|
||||
// 获取当前用户的权限去比对路由表，用于动态路由的添加
|
||||
export function setFilterRoute() {
|
||||
export function setFilterRoute(chil: any) {
|
||||
let filterRoute: any = [];
|
||||
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => {
|
||||
chil.forEach((route: any) => {
|
||||
if (route.meta.auth)
|
||||
route.meta.auth.map((metaAuth: any) => {
|
||||
store.state.userInfos.userInfos.authPageList.map((auth: any) => {
|
||||
route.meta.auth.forEach((metaAuth: any) => {
|
||||
store.state.userInfos.userInfos.authPageList.forEach((auth: any) => {
|
||||
if (metaAuth === auth) filterRoute.push({ ...route });
|
||||
});
|
||||
});
|
||||
@ -931,20 +933,20 @@ export function setFilterRoute() {
|
||||
// 比对后的路由表，进行重新赋值
|
||||
export function setFilterRouteEnd() {
|
||||
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
|
||||
filterRouteEnd[0].children = setFilterRoute();
|
||||
filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children);
|
||||
return filterRouteEnd;
|
||||
}
|
||||
|
||||
// 添加动态路由
|
||||
export function setAddRoute() {
|
||||
setFilterRouteEnd().map((route: any) => {
|
||||
setFilterRouteEnd().forEach((route: any) => {
|
||||
router.addRoute((route as unknown) as RouteRecordRaw);
|
||||
});
|
||||
}
|
||||
|
||||
// 删除/重置路由
|
||||
export function resetRoute() {
|
||||
setFilterRouteEnd().map((route: any) => {
|
||||
setFilterRouteEnd().forEach((route: any) => {
|
||||
const { name } = route;
|
||||
router.hasRoute(name) && router.removeRoute(name);
|
||||
});
|
||||
@ -952,6 +954,7 @@ export function resetRoute() {
|
||||
|
||||
// 初始化方法，防止刷新时丢失
|
||||
export function initAllFun() {
|
||||
NextLoading.start();
|
||||
const token = getSession('token');
|
||||
if (!token) return false;
|
||||
store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
|
||||
@ -997,6 +1000,7 @@ router.beforeEach((to, from, next) => {
|
||||
// 路由加载后
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
NextLoading.done();
|
||||
});
|
||||
|
||||
// 导出路由
|
||||
|
||||
23
src/utils/loading.ts
Normal file
23
src/utils/loading.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { nextTick } from 'vue';
|
||||
|
||||
// 定义方法
|
||||
export const NextLoading = {
|
||||
// 创建 loading
|
||||
start: () => {
|
||||
const body: any = document.body;
|
||||
const div = document.createElement('div');
|
||||
div.setAttribute('class', 'loading-next');
|
||||
const html = `<div class="loading-next-box"><div class="loading-next-animation"><div class="loading-next-animation-box"><div></div><div></div></div></div></div>`;
|
||||
div.innerHTML = html;
|
||||
body.insertBefore(div, body.childNodes[0]);
|
||||
},
|
||||
// 移除 loading
|
||||
done: () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
const el = document.querySelector('.loading-next');
|
||||
el && el.parentNode?.removeChild(el);
|
||||
}, 1000);
|
||||
});
|
||||
},
|
||||
};
|
||||
@ -36,7 +36,7 @@
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="login-content-submit" round @click="onSignIn">
|
||||
<el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">
|
||||
<span>登 录</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
@ -47,7 +47,7 @@
|
||||
import { toRefs, reactive, defineComponent, computed } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { setAddRoute, setFilterMenu, setCacheTagsViewRoutes, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
|
||||
import { initAllFun, getBackEndControlRoutes, setBackEndControlRoutesFun } from '/@/router/index.ts';
|
||||
import { useStore } from '/@/store/index.ts';
|
||||
import { setSession } from '/@/utils/storage.ts';
|
||||
import { formatAxis } from '/@/utils/formatTime.ts';
|
||||
@ -62,19 +62,17 @@ export default defineComponent({
|
||||
password: '123456',
|
||||
code: '1234',
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
});
|
||||
// 时间获取
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
// 重新执行添加动态路由、过滤权限菜单、缓存等方法
|
||||
const initAllFun = () => {
|
||||
setAddRoute();
|
||||
setFilterMenu();
|
||||
setCacheTagsViewRoutes();
|
||||
};
|
||||
// 登录
|
||||
const onSignIn = () => {
|
||||
state.loading.signIn = true;
|
||||
let defaultAuthPageList: Array<string> = [];
|
||||
let defaultAuthBtnList: Array<string> = [];
|
||||
// admin 页面权限标识，对应路由 meta.auth
|
||||
@ -130,7 +128,9 @@ export default defineComponent({
|
||||
router.push('/');
|
||||
// 登录成功提示
|
||||
setTimeout(() => {
|
||||
state.loading.signIn = true;
|
||||
ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
|
||||
// 关闭 loading
|
||||
}, 300);
|
||||
};
|
||||
return {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user