mirrors/pig-ui
1
0
Fork 0
mirror of https://gitee.com/log4j/pig-ui.git synced 2024-12-22 21:22:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'admin-21.03.25:优化网站loading、forEach替代map、更新最新依赖'

Browse Source
This commit is contained in:
lyt 2021-03-25 18:07:15 +08:00
parent 69fdd605d8
commit 8e9ad4be94
6 changed files with 50 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierrc.js
View File

@ -36,4 +36,4 @@ module.exports = {
vueIndentScriptAndStyle: false, vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>" // 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'lf', endOfLine: 'lf',
} };

13
index.html
View File

@ -17,18 +17,7 @@
<title>vue-next-admin</title> <title>vue-next-admin</title>
</head> </head>
<body> <body>
<div id="app"> <div id="app"></div>
<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>
<script type="text/javascript"> <script type="text/javascript">
if (window.location.origin === 'https://lyt-top.gitee.io') { if (window.location.origin === 'https://lyt-top.gitee.io') {
var _hmt = _hmt || []; var _hmt = _hmt || [];

8
package.json
View File

@ -7,7 +7,7 @@
"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/" "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"
}, },
"dependencies": { "dependencies": {
"@antv/g6": "^4.2.1", "@antv/g6": "^4.2.3",
"axios": "^0.21.1", "axios": "^0.21.1",
"clipboard": "^2.0.8", "clipboard": "^2.0.8",
"countup.js": "^2.0.7", "countup.js": "^2.0.7",
@ -32,13 +32,13 @@
"@types/node": "^14.14.35", "@types/node": "^14.14.35",
"@types/nprogress": "^0.2.0", "@types/nprogress": "^0.2.0",
"@types/sortablejs": "^1.10.6", "@types/sortablejs": "^1.10.6",
"@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/eslint-plugin": "^4.19.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/parser": "^4.19.0",
"@vitejs/plugin-vue": "^1.1.5", "@vitejs/plugin-vue": "^1.1.5",
"@vue/compiler-sfc": "^3.0.7", "@vue/compiler-sfc": "^3.0.7",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"eslint": "^7.22.0", "eslint": "^7.22.0",
"eslint-plugin-vue": "^7.7.0", "eslint-plugin-vue": "^7.8.0",
"prettier": "^2.2.1", "prettier": "^2.2.1",
"sass": "^1.32.8", "sass": "^1.32.8",
"sass-loader": "^11.0.1", "sass-loader": "^11.0.1",

22
src/router/index.ts
View File

@ -3,6 +3,7 @@ import NProgress from 'nprogress';
import 'nprogress/nprogress.css'; import 'nprogress/nprogress.css';
import { store } from '/@/store/index.ts'; import { store } from '/@/store/index.ts';
import { getSession, clearSession } from '/@/utils/storage.ts'; import { getSession, clearSession } from '/@/utils/storage.ts';
import { NextLoading } from '/@/utils/loading.ts';
import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts'; import { getMenuAdmin, getMenuTest } from '/@/api/menu/index.ts';
// 定义动态路由 // 定义动态路由
@ -811,6 +812,7 @@ export function setBackEndControlRefreshRoutes() {
// 后端控制路由，模拟执行路由数据初始化 // 后端控制路由，模拟执行路由数据初始化
const initBackEndControlRoutesFun = (res: any) => { const initBackEndControlRoutesFun = (res: any) => {
NextLoading.start();
const oldRoutes = JSON.parse(JSON.stringify(res.data)); const oldRoutes = JSON.parse(JSON.stringify(res.data));
store.dispatch('requestOldRoutes/setBackEndControlRoutes', oldRoutes); store.dispatch('requestOldRoutes/setBackEndControlRoutes', oldRoutes);
dynamicRoutes[0].children = backEndRouter(res.data); dynamicRoutes[0].children = backEndRouter(res.data);
@ -868,7 +870,7 @@ export function formatTwoStageRoutes(arr: any) {
if (arr.length < 0) return false; if (arr.length < 0) return false;
const newArr: any = []; const newArr: any = [];
const cacheList: Array<string> = []; const cacheList: Array<string> = [];
arr.map((v: any) => { arr.forEach((v: any) => {
if (v.path === '/') { if (v.path === '/') {
newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] }); newArr.push({ component: v.component, name: v.name, path: v.path, redirect: v.redirect, meta: v.meta, children: [] });
} else { } else {
@ -904,7 +906,7 @@ export function hasAuth(auths: any, route: any) {
// 递归过滤有权限的路由 // 递归过滤有权限的路由
export function setFilterMenuFun(routes: any, auth: any) { export function setFilterMenuFun(routes: any, auth: any) {
const menu: any = []; const menu: any = [];
routes.map((route: any) => { routes.forEach((route: any) => {
const item = { ...route }; const item = { ...route };
if (hasAuth(auth, item)) { if (hasAuth(auth, item)) {
if (item.children) item.children = setFilterMenuFun(item.children, auth); 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 = []; let filterRoute: any = [];
formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes))[0].children.map((route: any) => { chil.forEach((route: any) => {
if (route.meta.auth) if (route.meta.auth)
route.meta.auth.map((metaAuth: any) => { route.meta.auth.forEach((metaAuth: any) => {
store.state.userInfos.userInfos.authPageList.map((auth: any) => { store.state.userInfos.userInfos.authPageList.forEach((auth: any) => {
if (metaAuth === auth) filterRoute.push({ ...route }); if (metaAuth === auth) filterRoute.push({ ...route });
}); });
}); });
@ -931,20 +933,20 @@ export function setFilterRoute() {
// 比对后的路由表，进行重新赋值 // 比对后的路由表，进行重新赋值
export function setFilterRouteEnd() { export function setFilterRouteEnd() {
let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes)); let filterRouteEnd: any = formatTwoStageRoutes(formatFlatteningRoutes(dynamicRoutes));
filterRouteEnd[0].children = setFilterRoute(); filterRouteEnd[0].children = setFilterRoute(filterRouteEnd[0].children);
return filterRouteEnd; return filterRouteEnd;
} }
// 添加动态路由 // 添加动态路由
export function setAddRoute() { export function setAddRoute() {
setFilterRouteEnd().map((route: any) => { setFilterRouteEnd().forEach((route: any) => {
router.addRoute((route as unknown) as RouteRecordRaw); router.addRoute((route as unknown) as RouteRecordRaw);
}); });
} }
// 删除/重置路由 // 删除/重置路由
export function resetRoute() { export function resetRoute() {
setFilterRouteEnd().map((route: any) => { setFilterRouteEnd().forEach((route: any) => {
const { name } = route; const { name } = route;
router.hasRoute(name) && router.removeRoute(name); router.hasRoute(name) && router.removeRoute(name);
}); });
@ -952,6 +954,7 @@ export function resetRoute() {
// 初始化方法，防止刷新时丢失 // 初始化方法，防止刷新时丢失
export function initAllFun() { export function initAllFun() {
NextLoading.start();
const token = getSession('token'); const token = getSession('token');
if (!token) return false; if (!token) return false;
store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息 store.dispatch('userInfos/setUserInfos'); // 触发初始化用户信息
@ -997,6 +1000,7 @@ router.beforeEach((to, from, next) => {
// 路由加载后 // 路由加载后
router.afterEach(() => { router.afterEach(() => {
NProgress.done(); NProgress.done();
NextLoading.done();
}); });
// 导出路由 // 导出路由

23
src/utils/loading.ts Normal file
View 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);
});
},
};

16
src/views/login/component/account.vue
View File

@ -36,7 +36,7 @@
</el-row> </el-row>
</el-form-item> </el-form-item>
<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> <span>登 录</span>
</el-button> </el-button>
</el-form-item> </el-form-item>
@ -47,7 +47,7 @@
import { toRefs, reactive, defineComponent, computed } from 'vue'; import { toRefs, reactive, defineComponent, computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'; 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 { useStore } from '/@/store/index.ts';
import { setSession } from '/@/utils/storage.ts'; import { setSession } from '/@/utils/storage.ts';
import { formatAxis } from '/@/utils/formatTime.ts'; import { formatAxis } from '/@/utils/formatTime.ts';
@ -62,19 +62,17 @@ export default defineComponent({
password: '123456', password: '123456',
code: '1234', code: '1234',
}, },
loading: {
signIn: false,
},
}); });
// 时间获取 // 时间获取
const currentTime = computed(() => { const currentTime = computed(() => {
return formatAxis(new Date()); return formatAxis(new Date());
}); });
// 重新执行添加动态路由、过滤权限菜单、缓存等方法
const initAllFun = () => {
setAddRoute();
setFilterMenu();
setCacheTagsViewRoutes();
};
// 登录 // 登录
const onSignIn = () => { const onSignIn = () => {
state.loading.signIn = true;
let defaultAuthPageList: Array<string> = []; let defaultAuthPageList: Array<string> = [];
let defaultAuthBtnList: Array<string> = []; let defaultAuthBtnList: Array<string> = [];
// admin 页面权限标识，对应路由 meta.auth // admin 页面权限标识，对应路由 meta.auth
@ -130,7 +128,9 @@ export default defineComponent({
router.push('/'); router.push('/');
// 登录成功提示 // 登录成功提示
setTimeout(() => { setTimeout(() => {
state.loading.signIn = true;
ElMessage.success(`${currentTimeInfo}，欢迎回来！`); ElMessage.success(`${currentTimeInfo}，欢迎回来！`);
// 关闭 loading
}, 300); }, 300);
}; };
return { return {