vue项目按钮权限json文件自动生成枚举类型enum的js文件

359 阅读1分钟

背景:

最近vue3项目在做按钮权限控制,于是按钮权限的code值放在前端项目的page.json文件中,添加按钮权限时只能根据菜单从这份json中选择添加。由于按钮做权限时需要根据v-if判断是否存在这个code值,当在page.json文件添加按钮code时,需要在手动添加code枚举值,于是就写了一个vite的plugins插件脚本自动将page.json文件转为permission-enum.ts文件。

需求:

vue项目中将配置的json文件内容转化为枚举类型的ts文件
page.json: image.png

自动生成的permission-enum.ts文件: image.png

具体代码:

vite.config.ts

import { permissionBuilder } from './plugins/createPermission'
import { defineConfig, type UserConfigExport } from 'vite'

export default ({ mode }: { mode: string }): UserConfigExport =>
    defineConfig({
    plugins: [
        permissionBuilder('./src/permission/')
    ]
  })

plugins/createPermission.ts

import * as fs from 'fs'
import productJSON from '../src/permission/page.json'

export interface PermissionOptions {
  label: string
  value: string
}

export interface Permissions {
  title: string
  name: string
  permissions: PermissionOptions[]
}

const getOldPermissionCount = (filePath: string): number => {
  const oldFileStr = fs.readFileSync(filePath, 'utf8')
  return oldFileStr.split('=').length - 1
}

export function permissionBuilder (path: string) {
  return {
    name: 'permissionsEnum',
    buildStart () {
      const strArr: string[] = []
      let newPermissionCount = 0

      productJSON.forEach((item: Permissions) => {
        item.permissions.forEach(({ label, value }) => {
          strArr.push(`\t${value.toUpperCase()} = '${value}', // ${item.title} - ${label}`)
          newPermissionCount++
        })
      })

      const content = `/* eslint-disable @typescript-eslint/indent */\nexport enum PermissionEnum {
${strArr.join('\n')}
}\n`

      const filePath = path + 'permission-enum.ts'
      const oldPermissionCount = getOldPermissionCount(filePath)

      if (newPermissionCount !== oldPermissionCount) {
        fs.writeFileSync(filePath, content)
      }
    }
  }
}