初始化项目

src/pinia/modules/dictionary.js

@@ -0,0 +1,39 @@
+import { findSysDictionary } from '@/api/sysDictionary'
+
+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 getDictionary = async(type) => {
+    if (dictionaryMap.value[type] && dictionaryMap.value[type].length) {
+      return dictionaryMap.value[type]
+    } 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
+          })
+        })
+        dictionaryRes[res.data.resysDictionary.type] = dict
+        setDictionaryMap(dictionaryRes)
+        return dictionaryMap.value[type]
+      }
+    }
+  }
+
+  return {
+    dictionaryMap,
+    setDictionaryMap,
+    getDictionary
+  }
+})

src/pinia/modules/router.js

@@ -0,0 +1,121 @@
+import { asyncRouterHandle } from '@/utils/asyncRouter'
+import { emitter } from '@/utils/bus.js'
+import { asyncMenu } from '@/api/menu'
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+const routerListArr = []
+const notLayoutRouterArr = []
+const keepAliveRoutersArr = []
+const nameMap = {}
+
+const formatRouter = (routes, routeMap) => {
+  routes && routes.forEach(item => {
+    if ((!item.children || item.children.every(ch => ch.hidden)) && item.name !== '404' && !item.hidden) {
+      routerListArr.push({ label: item.meta.title, value: item.name })
+    }
+    item.meta.btns = item.btns
+    item.meta.hidden = item.hidden
+    if (item.meta.defaultMenu === true) {
+      notLayoutRouterArr.push({
+        ...item,
+        path: `/${item.path}`,
+      })
+    } else {
+      routeMap[item.name] = item
+      if (item.children && item.children.length > 0) {
+        formatRouter(item.children, routeMap)
+      }
+    }
+  })
+}
+
+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)) {
+      item.component && item.component().then(val => {
+        keepAliveRoutersArr.push(val.default.name)
+        nameMap[item.name] = val.default.name
+      })
+    }
+    if (item.children && item.children.length > 0) {
+      KeepAliveFilter(item.children)
+    }
+  })
+}
+
+export const useRouterStore = defineStore('router', () => {
+  const keepAliveRouters = ref([])
+  const setKeepAliveRouters = (history) => {
+    const keepArrTemp = []
+    history.forEach(item => {
+      if (nameMap[item.name]) {
+        keepArrTemp.push(nameMap[item.name])
+      }
+    })
+    keepAliveRouters.value = Array.from(new Set(keepArrTemp))
+  }
+  emitter.on('setKeepAlive', setKeepAliveRouters)
+
+  const asyncRouters = ref([])
+  const routerList = ref(routerListArr)
+  const routeMap = ({})
+  // 从后台获取动态路由
+  const SetAsyncRouter = async() => {
+    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: '404',
+      name: '404',
+      hidden: true,
+      meta: {
+        title: '迷路了*。*',
+        closeTab: true,
+      },
+      component: 'view/error/index.vue'
+    }, {
+      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)
+    }
+    baseRouter.push({
+      path: '/:catchAll(.*)',
+      redirect: '/layout/404'
+
+    })
+    asyncRouterHandle(baseRouter)
+    KeepAliveFilter(asyncRouter)
+    asyncRouters.value = baseRouter
+    routerList.value = routerListArr
+    return true
+  }
+
+  return {
+    asyncRouters,
+    routerList,
+    keepAliveRouters,
+    SetAsyncRouter,
+    routeMap
+  }
+})
+

src/pinia/modules/user.js

@@ -0,0 +1,153 @@
+import { login, getUserInfo, setSelfInfo } 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, watch } from 'vue'
+import { useRouterStore } from './router'
+
+export const useUserStore = defineStore('user', () => {
+  const loadingInstance = ref(null)
+
+  const userInfo = ref({
+    uuid: '',
+    nickName: '',
+    headerImg: '',
+    authority: {},
+    sideMode: 'dark',
+    activeColor: '#4D70FF',
+    baseColor: '#fff'
+  })
+  const token = ref(window.localStorage.getItem('token') || '')
+  const setUserInfo = (val) => {
+    userInfo.value = val
+  }
+
+  const setToken = (val) => {
+    token.value = val
+  }
+
+  const NeedInit = () => {
+    token.value = ''
+    window.localStorage.removeItem('token')
+    localStorage.clear()
+    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) => {
+    loadingInstance.value = ElLoading.service({
+      fullscreen: true,
+      text: '登录中，请稍候...',
+    })
+    try {
+      const res = await login(loginInfo)
+      if (res.code === 0) {
+        setUserInfo(res.data.user)
+        setToken(res.data.token)
+        const routerStore = useRouterStore()
+        await routerStore.SetAsyncRouter()
+        const asyncRouters = routerStore.asyncRouters
+        asyncRouters.forEach(asyncRouter => {
+          router.addRoute(asyncRouter)
+        })
+        await router.push({ name: userInfo.value.authority.defaultRouter })
+        loadingInstance.value.close()
+        return true
+      }
+    } catch (e) {
+      loadingInstance.value.close()
+    }
+    loadingInstance.value.close()
+  }
+  /* 登出*/
+  const LoginOut = async() => {
+    const res = await jsonInBlacklist()
+    if (res.code === 0) {
+      token.value = ''
+      sessionStorage.clear()
+      localStorage.clear()
+      router.push({ name: 'Login', replace: true })
+      window.location.reload()
+    }
+  }
+  /* 清理数据 */
+  const ClearStorage = async() => {
+    token.value = ''
+    sessionStorage.clear()
+    localStorage.clear()
+  }
+  /* 设置侧边栏模式*/
+  const changeSideMode = async(data) => {
+    const res = await setSelfInfo({ sideMode: data })
+    if (res.code === 0) {
+      userInfo.value.sideMode = data
+      ElMessage({
+        type: 'success',
+        message: '设置成功'
+      })
+    }
+  }
+
+  const mode = computed(() => userInfo.value.sideMode)
+  const sideMode = computed(() => {
+    if (userInfo.value.sideMode === 'dark') {
+      return '#191a23'
+    } else if (userInfo.value.sideMode === 'light') {
+      return '#fff'
+    } else {
+      return userInfo.value.sideMode
+    }
+  })
+  const baseColor = computed(() => {
+    if (userInfo.value.sideMode === 'dark') {
+      return '#fff'
+    } else if (userInfo.value.sideMode === 'light') {
+      return '#191a23'
+    } else {
+      return userInfo.value.baseColor
+    }
+  })
+  const activeColor = computed(() => {
+    if (userInfo.value.sideMode === 'dark' || userInfo.value.sideMode === 'light') {
+      return '#4D70FF'
+    }
+    return userInfo.activeColor
+  })
+
+  watch(() => token.value, () => {
+    window.localStorage.setItem('token', token.value)
+  })
+
+  return {
+    userInfo,
+    token,
+    NeedInit,
+    ResetUserInfo,
+    GetUserInfo,
+    LoginIn,
+    LoginOut,
+    changeSideMode,
+    mode,
+    sideMode,
+    setToken,
+    baseColor,
+    activeColor,
+    loadingInstance,
+    ClearStorage
+  }
+})