🎉 初始化项目
This commit is contained in:
8
web/src/pinia/index.js
Normal file
8
web/src/pinia/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import { useAppStore } from '@/pinia/modules/app'
|
||||
import { useUserStore } from '@/pinia/modules/user'
|
||||
import { useDictionaryStore } from '@/pinia/modules/dictionary'
|
||||
|
||||
const store = createPinia()
|
||||
|
||||
export { store, useAppStore, useUserStore, useDictionaryStore }
|
||||
162
web/src/pinia/modules/app.js
Normal file
162
web/src/pinia/modules/app.js
Normal file
@@ -0,0 +1,162 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, watchEffect, reactive } from 'vue'
|
||||
import { setBodyPrimaryColor } from '@/utils/format'
|
||||
import { useDark, usePreferredDark } from '@vueuse/core'
|
||||
|
||||
export const useAppStore = defineStore('app', () => {
|
||||
const device = ref('')
|
||||
const drawerSize = ref('')
|
||||
const operateMinWith = ref('240')
|
||||
const config = reactive({
|
||||
weakness: false,
|
||||
grey: false,
|
||||
primaryColor: '#3b82f6',
|
||||
showTabs: true,
|
||||
darkMode: 'auto',
|
||||
layout_side_width: 256,
|
||||
layout_side_collapsed_width: 80,
|
||||
layout_side_item_height: 48,
|
||||
show_watermark: true,
|
||||
side_mode: 'normal',
|
||||
// 页面过渡动画配置
|
||||
transition_type: 'slide',
|
||||
global_size: 'default'
|
||||
})
|
||||
|
||||
const isDark = useDark({
|
||||
selector: 'html',
|
||||
attribute: 'class',
|
||||
valueDark: 'dark',
|
||||
valueLight: 'light'
|
||||
})
|
||||
|
||||
const preferredDark = usePreferredDark()
|
||||
|
||||
const toggleTheme = (darkMode) => {
|
||||
isDark.value = darkMode
|
||||
}
|
||||
|
||||
const toggleWeakness = (e) => {
|
||||
config.weakness = e
|
||||
}
|
||||
|
||||
const toggleGrey = (e) => {
|
||||
config.grey = e
|
||||
}
|
||||
|
||||
const togglePrimaryColor = (e) => {
|
||||
config.primaryColor = e
|
||||
}
|
||||
|
||||
const toggleTabs = (e) => {
|
||||
config.showTabs = e
|
||||
}
|
||||
|
||||
const toggleDevice = (e) => {
|
||||
if (e === 'mobile') {
|
||||
drawerSize.value = '100%'
|
||||
operateMinWith.value = '80'
|
||||
} else {
|
||||
drawerSize.value = '800'
|
||||
operateMinWith.value = '240'
|
||||
}
|
||||
device.value = e
|
||||
}
|
||||
|
||||
const toggleDarkMode = (e) => {
|
||||
config.darkMode = e
|
||||
}
|
||||
|
||||
// 监听系统主题变化
|
||||
watchEffect(() => {
|
||||
if (config.darkMode === 'auto') {
|
||||
isDark.value = preferredDark.value
|
||||
return
|
||||
}
|
||||
isDark.value = config.darkMode === 'dark'
|
||||
})
|
||||
|
||||
const toggleConfigSideWidth = (e) => {
|
||||
config.layout_side_width = e
|
||||
}
|
||||
|
||||
const toggleConfigSideCollapsedWidth = (e) => {
|
||||
config.layout_side_collapsed_width = e
|
||||
}
|
||||
|
||||
const toggleConfigSideItemHeight = (e) => {
|
||||
config.layout_side_item_height = e
|
||||
}
|
||||
|
||||
const toggleConfigWatermark = (e) => {
|
||||
config.show_watermark = e
|
||||
}
|
||||
|
||||
const toggleSideMode = (e) => {
|
||||
config.side_mode = e
|
||||
}
|
||||
|
||||
const toggleTransition = (e) => {
|
||||
config.transition_type = e
|
||||
}
|
||||
|
||||
const toggleGlobalSize = (e) => {
|
||||
config.global_size = e
|
||||
}
|
||||
|
||||
const baseCoinfg = {
|
||||
weakness: false,
|
||||
grey: false,
|
||||
primaryColor: '#3b82f6',
|
||||
showTabs: true,
|
||||
darkMode: 'auto',
|
||||
layout_side_width: 256,
|
||||
layout_side_collapsed_width: 80,
|
||||
layout_side_item_height: 48,
|
||||
show_watermark: true,
|
||||
side_mode: 'normal',
|
||||
// 页面过渡动画配置
|
||||
transition_type: 'slide',
|
||||
global_size: 'default'
|
||||
}
|
||||
|
||||
const resetConfig = () => {
|
||||
for (let baseCoinfgKey in baseCoinfg) {
|
||||
config[baseCoinfgKey] = baseCoinfg[baseCoinfgKey]
|
||||
}
|
||||
}
|
||||
|
||||
// 监听色弱模式和灰色模式
|
||||
watchEffect(() => {
|
||||
document.documentElement.classList.toggle('html-weakenss', config.weakness)
|
||||
document.documentElement.classList.toggle('html-grey', config.grey)
|
||||
})
|
||||
|
||||
// 监听主题色
|
||||
watchEffect(() => {
|
||||
setBodyPrimaryColor(config.primaryColor, isDark.value ? 'dark' : 'light')
|
||||
})
|
||||
|
||||
return {
|
||||
isDark,
|
||||
device,
|
||||
drawerSize,
|
||||
operateMinWith,
|
||||
config,
|
||||
toggleTheme,
|
||||
toggleDevice,
|
||||
toggleWeakness,
|
||||
toggleGrey,
|
||||
togglePrimaryColor,
|
||||
toggleTabs,
|
||||
toggleDarkMode,
|
||||
toggleConfigSideWidth,
|
||||
toggleConfigSideCollapsedWidth,
|
||||
toggleConfigSideItemHeight,
|
||||
toggleConfigWatermark,
|
||||
toggleSideMode,
|
||||
toggleTransition,
|
||||
resetConfig,
|
||||
toggleGlobalSize
|
||||
}
|
||||
})
|
||||
252
web/src/pinia/modules/dictionary.js
Normal file
252
web/src/pinia/modules/dictionary.js
Normal file
@@ -0,0 +1,252 @@
|
||||
import { findSysDictionary } from '@/api/sysDictionary'
|
||||
import { getDictionaryTreeListByType } from '@/api/sysDictionaryDetail'
|
||||
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useDictionaryStore = defineStore('dictionary', () => {
|
||||
const dictionaryMap = ref({})
|
||||
|
||||
const setDictionaryMap = (dictionaryRes) => {
|
||||
dictionaryMap.value = { ...dictionaryMap.value, ...dictionaryRes }
|
||||
}
|
||||
|
||||
// 过滤树形数据的深度
|
||||
const filterTreeByDepth = (items, currentDepth, targetDepth) => {
|
||||
if (targetDepth === 0) {
|
||||
// depth=0 返回全部数据
|
||||
return items
|
||||
}
|
||||
|
||||
if (currentDepth >= targetDepth) {
|
||||
// 达到目标深度，移除children
|
||||
return items.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend
|
||||
}))
|
||||
}
|
||||
|
||||
// 递归处理子项
|
||||
return items.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend,
|
||||
children: item.children
|
||||
? filterTreeByDepth(item.children, currentDepth + 1, targetDepth)
|
||||
: undefined
|
||||
}))
|
||||
}
|
||||
|
||||
// 将树形结构扁平化为数组（用于兼容原有的平铺格式）
|
||||
const flattenTree = (items) => {
|
||||
const result = []
|
||||
|
||||
const traverse = (nodes) => {
|
||||
nodes.forEach((item) => {
|
||||
result.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend
|
||||
})
|
||||
|
||||
if (item.children && item.children.length > 0) {
|
||||
traverse(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
traverse(items)
|
||||
return result
|
||||
}
|
||||
|
||||
// 标准化树形数据，确保每个节点都包含标准的字段格式
|
||||
const normalizeTreeData = (items) => {
|
||||
return items.map((item) => ({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend,
|
||||
children:
|
||||
item.children && item.children.length > 0
|
||||
? normalizeTreeData(item.children)
|
||||
: undefined
|
||||
}))
|
||||
}
|
||||
|
||||
// 根据value和depth查找指定节点并返回其children
|
||||
const findNodeByValue = (
|
||||
items,
|
||||
targetValue,
|
||||
currentDepth = 1,
|
||||
maxDepth = 0
|
||||
) => {
|
||||
for (const item of items) {
|
||||
// 如果找到目标value的节点
|
||||
if (item.value === targetValue) {
|
||||
// 如果maxDepth为0，返回所有children
|
||||
if (maxDepth === 0) {
|
||||
return item.children ? normalizeTreeData(item.children) : []
|
||||
}
|
||||
// 否则根据depth限制返回children
|
||||
if (item.children && item.children.length > 0) {
|
||||
return filterTreeByDepth(item.children, 1, maxDepth)
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
// 如果当前深度小于最大深度，继续在children中查找
|
||||
if (
|
||||
item.children &&
|
||||
item.children.length > 0 &&
|
||||
(maxDepth === 0 || currentDepth < maxDepth)
|
||||
) {
|
||||
const result = findNodeByValue(
|
||||
item.children,
|
||||
targetValue,
|
||||
currentDepth + 1,
|
||||
maxDepth
|
||||
)
|
||||
if (result !== null) {
|
||||
return result
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const getDictionary = async (type, depth = 0, value = null) => {
|
||||
// 如果传入了value参数，则查找指定节点的children
|
||||
if (value !== null) {
|
||||
// 构建缓存key，包含value和depth信息
|
||||
const cacheKey = `${type}_value_${value}_depth_${depth}`
|
||||
|
||||
if (
|
||||
dictionaryMap.value[cacheKey] &&
|
||||
dictionaryMap.value[cacheKey].length
|
||||
) {
|
||||
return dictionaryMap.value[cacheKey]
|
||||
}
|
||||
|
||||
try {
|
||||
// 获取完整的树形结构数据
|
||||
const treeRes = await getDictionaryTreeListByType({ type })
|
||||
if (
|
||||
treeRes.code === 0 &&
|
||||
treeRes.data &&
|
||||
treeRes.data.list &&
|
||||
treeRes.data.list.length > 0
|
||||
) {
|
||||
// 查找指定value的节点并返回其children
|
||||
const targetNodeChildren = findNodeByValue(
|
||||
treeRes.data.list,
|
||||
value,
|
||||
1,
|
||||
depth
|
||||
)
|
||||
|
||||
if (targetNodeChildren !== null) {
|
||||
let resultData
|
||||
if (depth === 0) {
|
||||
// depth=0 时返回完整的children树形结构
|
||||
resultData = targetNodeChildren
|
||||
} else {
|
||||
// 其他depth值：扁平化children数据
|
||||
resultData = flattenTree(targetNodeChildren)
|
||||
}
|
||||
|
||||
const dictionaryRes = {}
|
||||
dictionaryRes[cacheKey] = resultData
|
||||
setDictionaryMap(dictionaryRes)
|
||||
return dictionaryMap.value[cacheKey]
|
||||
} else {
|
||||
// 如果没找到指定value的节点，返回空数组
|
||||
return []
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('根据value获取字典数据失败:', error)
|
||||
return []
|
||||
}
|
||||
}
|
||||
|
||||
// 原有的逻辑：不传value参数时的处理
|
||||
// 构建缓存key，包含depth信息
|
||||
const cacheKey = depth === 0 ? `${type}_tree` : `${type}_depth_${depth}`
|
||||
|
||||
if (dictionaryMap.value[cacheKey] && dictionaryMap.value[cacheKey].length) {
|
||||
return dictionaryMap.value[cacheKey]
|
||||
} else {
|
||||
try {
|
||||
// 首先尝试获取树形结构数据
|
||||
const treeRes = await getDictionaryTreeListByType({ type })
|
||||
if (
|
||||
treeRes.code === 0 &&
|
||||
treeRes.data &&
|
||||
treeRes.data.list &&
|
||||
treeRes.data.list.length > 0
|
||||
) {
|
||||
// 使用树形结构数据
|
||||
const treeData = treeRes.data.list
|
||||
|
||||
let resultData
|
||||
if (depth === 0) {
|
||||
// depth=0 时返回完整的树形结构，但要确保字段格式标准化
|
||||
resultData = normalizeTreeData(treeData)
|
||||
} else {
|
||||
// 其他depth值：根据depth参数过滤数据，然后扁平化
|
||||
const filteredData = filterTreeByDepth(treeData, 1, depth)
|
||||
resultData = flattenTree(filteredData)
|
||||
}
|
||||
|
||||
const dictionaryRes = {}
|
||||
dictionaryRes[cacheKey] = resultData
|
||||
setDictionaryMap(dictionaryRes)
|
||||
return dictionaryMap.value[cacheKey]
|
||||
} else {
|
||||
// 如果没有树形数据，回退到原有的平铺方式
|
||||
const res = await findSysDictionary({ type })
|
||||
if (res.code === 0) {
|
||||
const dictionaryRes = {}
|
||||
const dict = []
|
||||
res.data.resysDictionary.sysDictionaryDetails &&
|
||||
res.data.resysDictionary.sysDictionaryDetails.forEach((item) => {
|
||||
dict.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend
|
||||
})
|
||||
})
|
||||
dictionaryRes[cacheKey] = dict
|
||||
setDictionaryMap(dictionaryRes)
|
||||
return dictionaryMap.value[cacheKey]
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取字典数据失败:', error)
|
||||
// 发生错误时回退到原有方式
|
||||
const res = await findSysDictionary({ type })
|
||||
if (res.code === 0) {
|
||||
const dictionaryRes = {}
|
||||
const dict = []
|
||||
res.data.resysDictionary.sysDictionaryDetails &&
|
||||
res.data.resysDictionary.sysDictionaryDetails.forEach((item) => {
|
||||
dict.push({
|
||||
label: item.label,
|
||||
value: item.value,
|
||||
extend: item.extend
|
||||
})
|
||||
})
|
||||
dictionaryRes[cacheKey] = dict
|
||||
setDictionaryMap(dictionaryRes)
|
||||
return dictionaryMap.value[cacheKey]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
dictionaryMap,
|
||||
setDictionaryMap,
|
||||
getDictionary
|
||||
}
|
||||
})
|
||||
31
web/src/pinia/modules/params.js
Normal file
31
web/src/pinia/modules/params.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import { getSysParam } from '@/api/sysParams'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref } from 'vue'
|
||||
|
||||
export const useParamsStore = defineStore('params', () => {
|
||||
const paramsMap = ref({})
|
||||
|
||||
const setParamsMap = (paramsRes) => {
|
||||
paramsMap.value = { ...paramsMap.value, ...paramsRes }
|
||||
}
|
||||
|
||||
const getParams = async(key) => {
|
||||
if (paramsMap.value[key] && paramsMap.value[key].length) {
|
||||
return paramsMap.value[key]
|
||||
} else {
|
||||
const res = await getSysParam({ key })
|
||||
if (res.code === 0) {
|
||||
const paramsRes = {}
|
||||
paramsRes[key] = res.data.value
|
||||
setParamsMap(paramsRes)
|
||||
return paramsMap.value[key]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
paramsMap,
|
||||
setParamsMap,
|
||||
getParams
|
||||
}
|
||||
})
|
||||
207
web/src/pinia/modules/router.js
Normal file
207
web/src/pinia/modules/router.js
Normal file
@@ -0,0 +1,207 @@
|
||||
import { asyncRouterHandle } from '@/utils/asyncRouter'
|
||||
import { emitter } from '@/utils/bus.js'
|
||||
import { asyncMenu } from '@/api/menu'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, watchEffect } from 'vue'
|
||||
import pathInfo from '@/pathInfo.json'
|
||||
import {useRoute} from "vue-router";
|
||||
import {config} from "@/core/config.js";
|
||||
|
||||
const notLayoutRouterArr = []
|
||||
const keepAliveRoutersArr = []
|
||||
const nameMap = {}
|
||||
|
||||
const formatRouter = (routes, routeMap, parent) => {
|
||||
routes &&
|
||||
routes.forEach((item) => {
|
||||
item.parent = parent
|
||||
item.meta.btns = item.btns
|
||||
item.meta.hidden = item.hidden
|
||||
if (item.meta.defaultMenu === true) {
|
||||
if (!parent) {
|
||||
item = { ...item, path: `/${item.path}` }
|
||||
notLayoutRouterArr.push(item)
|
||||
}
|
||||
}
|
||||
routeMap[item.name] = item
|
||||
if (item.children && item.children.length > 0) {
|
||||
formatRouter(item.children, routeMap, item)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const KeepAliveFilter = (routes) => {
|
||||
routes &&
|
||||
routes.forEach((item) => {
|
||||
// 子菜单中有 keep-alive 的，父菜单也必须 keep-alive，否则无效。这里将子菜单中有 keep-alive 的父菜单也加入。
|
||||
if (
|
||||
(item.children && item.children.some((ch) => ch.meta.keepAlive)) ||
|
||||
item.meta.keepAlive
|
||||
) {
|
||||
const path = item.meta.path
|
||||
keepAliveRoutersArr.push(pathInfo[path])
|
||||
nameMap[item.name] = pathInfo[path]
|
||||
}
|
||||
if (item.children && item.children.length > 0) {
|
||||
KeepAliveFilter(item.children)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const useRouterStore = defineStore('router', () => {
|
||||
const keepAliveRouters = ref([])
|
||||
const asyncRouterFlag = ref(0)
|
||||
const setKeepAliveRouters = (history) => {
|
||||
const keepArrTemp = []
|
||||
|
||||
// 1. 首先添加原有的keepAlive配置
|
||||
keepArrTemp.push(...keepAliveRoutersArr)
|
||||
if (config.keepAliveTabs) {
|
||||
history.forEach((item) => {
|
||||
// 2. 为所有history中的路由强制启用keep-alive
|
||||
// 通过routeMap获取路由信息，然后通过pathInfo获取组件名
|
||||
const routeInfo = routeMap[item.name]
|
||||
if (routeInfo && routeInfo.meta && routeInfo.meta.path) {
|
||||
const componentName = pathInfo[routeInfo.meta.path]
|
||||
if (componentName) {
|
||||
keepArrTemp.push(componentName)
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 如果子路由在tabs中打开，父路由也需要keepAlive
|
||||
if (nameMap[item.name]) {
|
||||
keepArrTemp.push(nameMap[item.name])
|
||||
}
|
||||
})
|
||||
}
|
||||
keepAliveRouters.value = Array.from(new Set(keepArrTemp))
|
||||
}
|
||||
|
||||
// 处理组件缓存
|
||||
const handleKeepAlive = async (to) => {
|
||||
if (!to.matched.some((item) => item.meta.keepAlive)) return
|
||||
|
||||
if (to.matched?.length > 2) {
|
||||
for (let i = 1; i < to.matched.length; i++) {
|
||||
const element = to.matched[i - 1]
|
||||
|
||||
if (element.name === 'layout') {
|
||||
to.matched.splice(i, 1)
|
||||
await handleKeepAlive(to)
|
||||
continue
|
||||
}
|
||||
|
||||
if (typeof element.components.default === 'function') {
|
||||
await element.components.default()
|
||||
await handleKeepAlive(to)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
emitter.on('setKeepAlive', setKeepAliveRouters)
|
||||
|
||||
const asyncRouters = ref([])
|
||||
|
||||
const topMenu = ref([])
|
||||
|
||||
const leftMenu = ref([])
|
||||
|
||||
const menuMap = {}
|
||||
|
||||
const topActive = ref('')
|
||||
|
||||
const setLeftMenu = (name) => {
|
||||
sessionStorage.setItem('topActive', name)
|
||||
topActive.value = name
|
||||
leftMenu.value = []
|
||||
if (menuMap[name]?.children) {
|
||||
leftMenu.value = menuMap[name].children
|
||||
}
|
||||
return menuMap[name]?.children
|
||||
}
|
||||
|
||||
const findTopActive = (menuMap, routeName) => {
|
||||
for (let topName in menuMap) {
|
||||
const topItem = menuMap[topName];
|
||||
if (topItem.children?.some(item => item.name === routeName)) {
|
||||
return topName;
|
||||
}
|
||||
const foundName = findTopActive(topItem.children || {}, routeName);
|
||||
if (foundName) {
|
||||
return topName;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
let topActive = sessionStorage.getItem('topActive')
|
||||
// 初始化菜单内容，防止重复添加
|
||||
topMenu.value = [];
|
||||
asyncRouters.value[0]?.children.forEach((item) => {
|
||||
if (item.hidden) return
|
||||
menuMap[item.name] = item
|
||||
topMenu.value.push({ ...item, children: [] })
|
||||
})
|
||||
if (!topActive || topActive === 'undefined' || topActive === 'null') {
|
||||
topActive = findTopActive(menuMap, route.name);
|
||||
}
|
||||
setLeftMenu(topActive)
|
||||
})
|
||||
|
||||
const routeMap = {}
|
||||
// 从后台获取动态路由
|
||||
const SetAsyncRouter = async () => {
|
||||
asyncRouterFlag.value++
|
||||
const baseRouter = [
|
||||
{
|
||||
path: '/layout',
|
||||
name: 'layout',
|
||||
component: 'view/layout/index.vue',
|
||||
meta: {
|
||||
title: '底层layout'
|
||||
},
|
||||
children: []
|
||||
}
|
||||
]
|
||||
const asyncRouterRes = await asyncMenu()
|
||||
const asyncRouter = asyncRouterRes.data.menus
|
||||
asyncRouter &&
|
||||
asyncRouter.push({
|
||||
path: 'reload',
|
||||
name: 'Reload',
|
||||
hidden: true,
|
||||
meta: {
|
||||
title: '',
|
||||
closeTab: true
|
||||
},
|
||||
component: 'view/error/reload.vue'
|
||||
})
|
||||
formatRouter(asyncRouter, routeMap)
|
||||
baseRouter[0].children = asyncRouter
|
||||
if (notLayoutRouterArr.length !== 0) {
|
||||
baseRouter.push(...notLayoutRouterArr)
|
||||
}
|
||||
asyncRouterHandle(baseRouter)
|
||||
KeepAliveFilter(asyncRouter)
|
||||
asyncRouters.value = baseRouter
|
||||
return true
|
||||
}
|
||||
|
||||
return {
|
||||
topActive,
|
||||
setLeftMenu,
|
||||
topMenu,
|
||||
leftMenu,
|
||||
asyncRouters,
|
||||
keepAliveRouters,
|
||||
asyncRouterFlag,
|
||||
SetAsyncRouter,
|
||||
routeMap,
|
||||
handleKeepAlive
|
||||
}
|
||||
})
|
||||
150
web/src/pinia/modules/user.js
Normal file
150
web/src/pinia/modules/user.js
Normal file
@@ -0,0 +1,150 @@
|
||||
import { login, getUserInfo } from '@/api/user'
|
||||
import { jsonInBlacklist } from '@/api/jwt'
|
||||
import router from '@/router/index'
|
||||
import { ElLoading, ElMessage } from 'element-plus'
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import { useRouterStore } from './router'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
import { useAppStore } from '@/pinia'
|
||||
|
||||
export const useUserStore = defineStore('user', () => {
|
||||
const appStore = useAppStore()
|
||||
const loadingInstance = ref(null)
|
||||
|
||||
const userInfo = ref({
|
||||
uuid: '',
|
||||
nickName: '',
|
||||
headerImg: '',
|
||||
authority: {}
|
||||
})
|
||||
const token = useStorage('token', '')
|
||||
const xToken = useCookies('x-token')
|
||||
const currentToken = computed(() => token.value || xToken.value || '')
|
||||
|
||||
const setUserInfo = (val) => {
|
||||
userInfo.value = val
|
||||
if (val.originSetting) {
|
||||
Object.keys(appStore.config).forEach((key) => {
|
||||
if (val.originSetting[key] !== undefined) {
|
||||
appStore.config[key] = val.originSetting[key]
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const setToken = (val) => {
|
||||
token.value = val
|
||||
xToken.value = val
|
||||
}
|
||||
|
||||
const NeedInit = async () => {
|
||||
await ClearStorage()
|
||||
await router.push({ name: 'Init', replace: true })
|
||||
}
|
||||
|
||||
const ResetUserInfo = (value = {}) => {
|
||||
userInfo.value = {
|
||||
...userInfo.value,
|
||||
...value
|
||||
}
|
||||
}
|
||||
/* 获取用户信息*/
|
||||
const GetUserInfo = async () => {
|
||||
const res = await getUserInfo()
|
||||
if (res.code === 0) {
|
||||
setUserInfo(res.data.userInfo)
|
||||
}
|
||||
return res
|
||||
}
|
||||
/* 登录*/
|
||||
const LoginIn = async (loginInfo) => {
|
||||
try {
|
||||
loadingInstance.value = ElLoading.service({
|
||||
fullscreen: true,
|
||||
text: '登录中，请稍候...'
|
||||
})
|
||||
|
||||
const res = await login(loginInfo)
|
||||
|
||||
if (res.code !== 0) {
|
||||
return false
|
||||
}
|
||||
// 登陆成功，设置用户信息和权限相关信息
|
||||
setUserInfo(res.data.user)
|
||||
setToken(res.data.token)
|
||||
|
||||
// 初始化路由信息
|
||||
const routerStore = useRouterStore()
|
||||
await routerStore.SetAsyncRouter()
|
||||
const asyncRouters = routerStore.asyncRouters
|
||||
|
||||
// 注册到路由表里
|
||||
asyncRouters.forEach((asyncRouter) => {
|
||||
router.addRoute(asyncRouter)
|
||||
})
|
||||
|
||||
if(router.currentRoute.value.query.redirect) {
|
||||
await router.replace(router.currentRoute.value.query.redirect)
|
||||
return true
|
||||
}
|
||||
|
||||
if (!router.hasRoute(userInfo.value.authority.defaultRouter)) {
|
||||
ElMessage.error('不存在可以登陆的首页，请联系管理员进行配置')
|
||||
} else {
|
||||
await router.replace({ name: userInfo.value.authority.defaultRouter })
|
||||
}
|
||||
|
||||
const isWindows = /windows/i.test(navigator.userAgent)
|
||||
window.localStorage.setItem('osType', isWindows ? 'WIN' : 'MAC')
|
||||
|
||||
// 全部操作均结束，关闭loading并返回
|
||||
return true
|
||||
} catch (error) {
|
||||
console.error('LoginIn error:', error)
|
||||
return false
|
||||
} finally {
|
||||
loadingInstance.value?.close()
|
||||
}
|
||||
}
|
||||
/* 登出*/
|
||||
const LoginOut = async () => {
|
||||
const res = await jsonInBlacklist()
|
||||
|
||||
// 登出失败
|
||||
if (res.code !== 0) {
|
||||
return
|
||||
}
|
||||
|
||||
await ClearStorage()
|
||||
|
||||
// 把路由定向到登录页，无需等待直接reload
|
||||
router.push({ name: 'Login', replace: true })
|
||||
window.location.reload()
|
||||
}
|
||||
/* 清理数据 */
|
||||
const ClearStorage = async () => {
|
||||
token.value = ''
|
||||
// 使用remove方法正确删除cookie
|
||||
xToken.remove()
|
||||
sessionStorage.clear()
|
||||
// 清理所有相关的localStorage项
|
||||
localStorage.removeItem('originSetting')
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
|
||||
return {
|
||||
userInfo,
|
||||
token: currentToken,
|
||||
NeedInit,
|
||||
ResetUserInfo,
|
||||
GetUserInfo,
|
||||
LoginIn,
|
||||
LoginOut,
|
||||
setToken,
|
||||
loadingInstance,
|
||||
ClearStorage
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user