2.菜单管理

点击菜单👉编辑

新增

删除

2-1 菜单路由

src/routes/access.ts

import Router from '@koa/router'
import {
  addAccessController,
  getAccessAllController,
  removeAccessController,
  updateAccessController,
  updateBulkAccessController
} from '../controller/access'
const router = new Router({
  prefix: '/api/access'
})
/**
* 添加菜单
* post /api/access/menu
*/
router.post('/menu', async (ctx) => {
  ctx.body = await addAccessController(ctx.request.body)
})
/**
* 获取菜单
* get /api/access/menu
*/
router.get('/menus', async (ctx) => {
  ctx.body = await getAccessAllController()
})
/**
* 删除某一个菜单
* delete /api/access/menu
*/
router.delete('/menu/:id', async (ctx) => {
  const { id } = ctx.params
  ctx.body = await removeAccessController(Number(id))
})
/**
* 编辑某一个菜单
* put /api/access/menu/:id
*/
router.put('/menu/:id', async (ctx) => {
  const { id } = ctx.params
  ctx.body = await updateAccessController(Number(id), ctx.request.body)
})
/**
* 批量更新
* patch /api/access/menu/update
*/
router.patch('/menu/update', async (ctx) => {
  const { access } = ctx.request.body
  ctx.body = await updateBulkAccessController(access)
})
export default router

2-2 菜单controller

src/controller/access.ts

import { createAccess, getAllAccess, removeAccessById, updateAccessById, updateBulkAccess } from '../services/access'
import { createErrorResponse, SuccessResponse } from '../utils/Response'
import errorInfo from '../constants/errorInfo'
import { AccessModelProps } from '../db/models/access'
const {
  addAccessFailInfo,
  getAccessAllFailInfo,
  removeAccessFailInfo,
  updateAccessFailInfo
} = errorInfo
export const addAccessController = async (params: AccessModelProps) => {
  if (params) {
    try {
      const result = await createAccess({
        ...params
      })
      return new SuccessResponse(result)
    } catch (error) {
      console.error(error.message)
      return createErrorResponse(addAccessFailInfo)
    }
  }
}
export const getAccessAllController = async () => {
  try {
    const result = await getAllAccess()
    return new SuccessResponse(result)
  } catch (error) {
    console.error(error.message)
    return createErrorResponse(getAccessAllFailInfo)
  }
}
export const removeAccessController = async (id: number) => {
  try {
    await removeAccessById(id)
    return new SuccessResponse(null, '删除成功!')
  } catch (error) {
    console.error(error.message)
    return createErrorResponse(removeAccessFailInfo)
  }
}
export const updateAccessController = async (id: number, data: AccessModelProps) => {
  try {
    await updateAccessById(id, data)
    return new SuccessResponse(null, '菜单更新成功!')
  } catch (error) {
    console.error(error.message)
    return createErrorResponse(updateAccessFailInfo)
  }
}
export const updateBulkAccessController = async (data: AccessModelProps[]) => {
  try {
    await updateBulkAccess(data)
    return new SuccessResponse(null, '菜单更新成功!')
  } catch (error) {
    console.error(error.message)
    return createErrorResponse(updateAccessFailInfo)
  }
}

2-3 菜单services

src/services/access.ts

import Sequelize from 'sequelize'
import AccessModel, { AccessModelProps } from '../db/models/access'
// Sequelize 操作对象 里面包含了 多条件操作 and or in get等
// 操作符参考文档
// https://www.sequelize.com.cn/core-concepts/model-querying-basics#%E5%BA%94%E7%94%A8-where-%E5%AD%90%E5%8F%A5
// https://www.sequelize.com.cn/core-concepts/model-querying-basics#%E6%93%8D%E4%BD%9C%E7%AC%A6
const OP = Sequelize.Op
// 创建菜单资源
export const createAccess = async (params: AccessModelProps) => {
  const result = await AccessModel.create({
    ...params
  })
  return result.toJSON()
}
// 获取所有菜单资源
export const getAllAccess = async () => {
  const result = await AccessModel.findAll({
    order: [
      ['sort_id', 'ASC']
    ]
  })
  return result
}
// 通过id删除菜单 包括parentId为该id的菜单
export const removeAccessById = async (id: number) => {
  const result = await AccessModel.destroy({
    where: {
      [OP.or]: [ // id=1 or parent_id=1
        { id },
        { parent_id: id }
      ]
    }
  })
  return result
}
// 编辑菜单
export const updateAccessById = async (id: number, data: AccessModelProps) => {
  const { title, name, path, icon } = data
  const result = await AccessModel.update({
    title,
    name,
    path,
    icon
  }, {
    where: {
      id
    }
  })
  return result
}
// 批量更新菜单
export const updateBulkAccess = async (data: AccessModelProps[]) => {
  console.log('data', data)
  const result = await AccessModel.bulkCreate(data, {
    updateOnDuplicate: ['sort_id']
  })
  return result
}

2-4 菜单model

src/db/models/access.ts

import { DataTypes, Model, Optional } from 'sequelize'
import seq from '../seq'
export interface AccessModelProps {
  id: number;
  type: number;
  title: string;
  path: string;
  icon: string;
  name: string;
  sort_id: number;
  parent_id: number | null;
  status: 0 | 1;
  description: string;
}
interface AccessCreationAttributes extends Optional<AccessModelProps, "id"> {}
interface AccessInstance
  extends Model<AccessModelProps, AccessCreationAttributes>,
    AccessModelProps {}
const AccessModel = seq.define<AccessInstance>('Access', {
  id: {
    primaryKey: true,
    type: DataTypes.INTEGER,
    autoIncrement: true
  },
  type: {
    type: DataTypes.INTEGER,
    defaultValue: 1,
    comment: '权限类型：菜单'
  },
  title: {
    type: DataTypes.STRING,
    allowNull: false,
    comment: '标题名称'
  },
  path: {
   type: DataTypes.STRING,
   comment: 'url地址'
  },
  icon: {
    type: DataTypes.STRING,
    comment: 'icon名称'
  },
  name: {
    type: DataTypes.STRING,
    comment: '路由name'
  },
  sort_id: {
    type: DataTypes.INTEGER,
    allowNull: false,
    comment: '排序权重'
  },
  parent_id: {
    type: DataTypes.INTEGER,
    comment: '父id'
  },
  status: {
    type: DataTypes.BOOLEAN,
    defaultValue: 1,
    comment: '状态 0禁止 1正常'
  },
  description: {
    type: DataTypes.TEXT,
    comment: '描述'
  }
})
export default AccessModel

导入models/index
src/db/models/index.ts

import UserModel from './user'
import AccessModel from './access'
export {
  UserModel,
  AccessModel
}

同步下model

npm run db

目前最新参考源码

https://gitee.com/brolly/vue3-admin-server