decorate/src/store/roles.ts

import { defineStore } from 'pinia'
import { routesMetas, RoutesName } from '@/router'
import { fetchRoleOptions, RoleOption } from '@/api'
import type { RoleOptions } from '@/api'

export type { RoleOptions, RoleOption } from '@/api'
export { fetchRoleOptions } from '@/api'

type MenuTree = { key: RoleOption['id']; title: string; children: MenuTree[] }
const transformMenuTree = (roleOptions: RoleOptions): MenuTree[] => {
  return roleOptions.map(role => ({
    title: routesMetas[role.path].title,
    key: role.id,
    children: role.children ? transformMenuTree(role.children) : []
  }))
}

export const useRoleStore = defineStore('role', {
  state: () => ({
    list: [] as RoleOptions
  }),
  getters: {
    getRole: state => (name: RoutesName) =>
      state.list.find(role => role.path === name)!,
    getRoles() {
      return (names: RoutesName[]) => names.map(name => this.getRole(name))
    },
    getRoleId() {
      return (name: RoutesName) => this.getRole(name).id
    },
    getRoleIds() {
      return (names: RoutesName[]) => names.map(name => this.getRoleId(name))
    },
    getName: state => (id: RoleOption['id']) =>
      state.list.find(role => role.id === id)!.path,
    getNames() {
      return (ids: RoleOption['id'][]) => ids.map(this.getName)
    },
    menuTree: state => {
      console.log(state.list)
      const tree = transformMenuTree(state.list)
      console.log(tree)
      return tree
    }
  },
  actions: {
    async fetch() {
      this.list = await fetchRoleOptions()
    }
  }
})