image.png
新增编辑
image.png
权限菜单
image.png
这里说明下 至于super_admin 这个角色 目前编辑菜单也不生效 因为默认 路由和菜单都是全部 其他角色会根据这里设置生效

2-1 角色管理页面

image.png
src/views/system/role/index.vue

  1. <template>
  2.   <div class="role-container">
  3.     <h2>角色管理</h2>
  4.     <div class="role-list">
  5.       <el-button
  6.         type="primary"
  7.         plain
  8.         icon="el-icon-plus"
  9.         @click="handleAddRole"
  10.       >添加角色</el-button>
  11.       <el-table
  12.         :data="roles"
  13.         max-height="400"
  14.       >
  15.         <el-table-column
  16.           prop="name"
  17.           label="角色名称"
  18.         >
  19.         </el-table-column>
  20.         <el-table-column
  21.           prop="description"
  22.           label="说明"
  23.         >
  24.         </el-table-column>
  25.         <el-table-column
  26.           prop="is_default"
  27.           label="是否默认角色"
  28.           :formatter="formatter"
  29.         >
  30.         </el-table-column>
  31.         <el-table-column
  32.           prop="createdAt"
  33.           label="创建时间"
  34.         >
  35.         </el-table-column>
  36.         <el-table-column
  37.           prop="updatedAt"
  38.           label="更新时间"
  39.         >
  40.         </el-table-column>
  41.         <el-table-column
  42.           label="操作"
  43.           fixed="right"
  44.           width="150px"
  45.         >
  46.           <template #default="scope">
  47.             <el-button
  48.               type="text"
  49.               size="mini"
  50.               @click="handleRoleMenu(scope.$index, scope.row)">
  51.               菜单权限
  52.             </el-button>
  53.             <el-button
  54.               type="text"
  55.               size="mini"
  56.               @click="handleEditRole(scope.$index, scope.row)">编辑</el-button>
  57.             <el-button
  58.               type="text"
  59.               size="mini"
  60.               @click="handleDeleteRole(scope.$index, scope.row)">删除</el-button>
  61.           </template>
  62.         </el-table-column>
  63.       </el-table>
  64.       <div class="role-pagination">
  65.         <el-pagination
  66.           @size-change="handleSizeChange"
  67.           @current-change="handleCurrentChange"
  68.           background
  69.           :total="total"
  70.           :page-sizes="[1, 5, 10, 20]"
  71.           :page-size="pageSize"
  72.           layout="total, prev, pager, next, sizes,jumper"
  73.         ></el-pagination>
  74.       </div>
  75.     </div>
  76.     <!-- 新增角色 编辑角色面板 -->
  77.     <right-panel v-model="panelVisible" :title="panelTitle" :size="330">
  78.       <editor-role
  79.         :type="editType"
  80.         :data="editData"
  81.         @submit="handleSubmitRole"
  82.       />
  83.     </right-panel>
  84.     <!-- 权限菜单树 -->
  85.     <role-menu
  86.       v-if="roleData && roleMenuVisible"
  87.       :role="roleData"
  88.       v-model="roleMenuVisible"
  89.     />
  90.   </div>
  91. </template>
  93. <script lang="ts">
  94. import { computed, defineComponent, ref, watchEffect, getCurrentInstance, onMounted } from 'vue'
  95. import { useStore } from '@/store'
  96. import { IRole } from '@/store/modules/role'
  97. import EditorRole from './components/editorRole.vue'
  98. import RightPanel from '@/components/RightPanel/index.vue'
  99. import RoleMenu from './components/roleMenu.vue'
  101. export default defineComponent({
  102.   name: 'Role',
  103.   components: {
  104.     EditorRole,
  105.     RightPanel,
  106.     RoleMenu
  107.   },
  108.   setup () {
  109.     const { proxy } = getCurrentInstance()!
  110.     const store = useStore()
  111.     // 角色列表
  112.     const roles = computed(() => store.state.role.roles)
  113.     // 总条数
  114.     const total = computed(() => store.state.role.count)
  115.     // 分页页码 条数 页码后端是从0开始 前端是从1开始
  116.     const pageNum = ref(0)
  117.     const pageSize = ref(1)
  118.     // 暂存新增和编辑数据
  119.     const editData = ref<IRole | undefined>(undefined)
  120.     // 编辑面板显示
  121.     const panelVisible = ref(false)
  122.     // 面板操作类型
  123.     const editType = ref(1) // 0编辑 1新增
  124.     // panel title
  125.     const panelTitle = computed(() => editType.value === 1 ? '新增角色' : '编辑角色')
  127.     // 获取角色列表
  128.     const getRoleList = () => {
  129.       store.dispatch('role/getRoles', {
  130.         pageNum: pageNum.value,
  131.         pageSize: pageSize.value
  132.       })
  133.     }
  135.     // 获取全部菜单
  136.     onMounted(() => {
  137.       store.dispatch('menu/getAllMenuList')
  138.     })
  139.     // 自动追踪相关依赖属性变动获取数据
  140.     watchEffect(() => {
  141.       getRoleList()
  142.     })
  144.     // 编辑角色处理
  145.     const handleEditRole = (index: number, row: IRole) => {
  146.       editType.value = 0
  147.       editData.value = { ...row }
  148.       panelVisible.value = true
  149.     }
  151.     // 添加角色处理
  152.     const handleAddRole = () => {
  153.       editType.value = 1
  154.       editData.value = {} as IRole
  155.       panelVisible.value = true
  156.     }
  158.     // 删除角色处理
  159.     const handleDeleteRole = (index: number, row: IRole) => {
  160.       proxy?.$confirm(`您确认要删除角色${row.name}吗？`, '删除确认', {
  161.         type: 'warning'
  162.       }).then(() => {
  163.         store.dispatch('role/removeRole', {
  164.           id: row.id,
  165.           pageSize: pageSize.value,
  166.           pageNum: pageNum.value
  167.         }).then(() => {
  168.           proxy?.$message.success('角色删除成功')
  169.         })
  170.       }).catch(() => {
  171.         proxy?.$message({
  172.           type: 'info',
  173.           message: '已取消删除'
  174.         })
  175.       })
  176.     }
  178.     // 新增编辑
  179.     const dispatchAction = (action: string, data: IRole, message: string) => {
  180.       store.dispatch(action, {
  181.         ...data,
  182.         pageSize: pageSize.value,
  183.         pageNum: pageNum.value
  184.       }).then(() => {
  185.         proxy?.$message.success(message)
  186.         panelVisible.value = false
  187.       })
  188.     }
  190.     // 新增角色
  191.     const addNewRole = (data: IRole) => {
  192.       dispatchAction('role/addRole', data, '角色添加成功')
  193.     }
  194.     // 编辑角色
  195.     const editRole = (data: IRole) => {
  196.       dispatchAction('role/editRole', data, '角色编辑成功')
  197.     }
  198.     // 提交角色信息
  199.     const handleSubmitRole = (data: IRole) => {
  200.       if (editType.value === 1) { // 新增
  201.         addNewRole(data)
  202.       } else if (editType.value === 0) { // 编辑
  203.         editRole(data)
  204.       }
  205.     }
  207.     // 权限菜单处理
  208.     const roleMenuVisible = ref(false)
  209.     const roleData = ref<IRole|null>(null)
  210.     const handleRoleMenu = (index: number, row: IRole) => {
  211.       roleMenuVisible.value = true
  212.       roleData.value = row
  213.     }
  215.     const formatter = (row: IRole) => {
  216.       return row.is_default ? '是' : '否'
  217.     }
  219.     // pageSize 改变
  220.     const handleSizeChange = (val: number) => {
  221.       pageSize.value = val
  222.     }
  223.     // pageNum 改变
  224.     const handleCurrentChange = (val: number) => {
  225.       pageNum.value = val - 1 // 页码后端是从0开始的
  226.     }
  228.     return {
  229.       roles,
  230.       handleEditRole,
  231.       handleAddRole,
  232.       handleDeleteRole,
  233.       handleRoleMenu,
  234.       formatter,
  235.       total,
  236.       handleSizeChange,
  237.       handleCurrentChange,
  238.       pageSize,
  239.       panelVisible,
  240.       editData,
  241.       editType,
  242.       panelTitle,
  243.       handleSubmitRole,
  244.       roleData,
  245.       roleMenuVisible
  246.     }
  247.   }
  248. })
  249. </script>
  251. <style lang="scss" scoped>
  252. .role-container {
  253.   padding: 30px;
  254.   .role-pagination {
  255.     margin-top: 10px;
  256.     text-align: right;
  257.   }
  258. }
  259. </style>

editorRole组件

src/views/system/role/components/editorRole.vue

  1. <template>
  2.   <div class="editor-container">
  3.     <el-form
  4.       ref="editFormRef"
  5.       :model="editData"
  6.       :rules="menuFormRules"
  7.       label-width="100px"
  8.     >
  9.       <el-form-item label="角色名称" prop="name">
  10.         <el-input
  11.           v-model="editData.name"
  12.           placeholder="请输入角色名称"
  13.         />
  14.       </el-form-item>
  15.       <el-form-item label="说明" prop="description">
  16.         <el-input
  17.           v-model="editData.description"
  18.           placeholder="请输入说明"
  19.         />
  20.       </el-form-item>
  21.       <el-form-item label="是否默认角色" prop="is_default">
  22.         <el-switch v-model="editData.is_default" />
  23.       </el-form-item>
  24.       <el-form-item>
  25.         <el-button
  26.           type="primary"
  27.           @click="submitMenuForm"
  28.           :loading="loading"
  29.         >提交</el-button>
  30.       </el-form-item>
  31.     </el-form>
  32.   </div>
  33. </template>
  35. <script lang="ts">
  36. import { defineComponent, PropType, ref, watchEffect } from 'vue'
  37. import { ElForm } from 'element-plus'
  38. import { IRole } from '@/store/modules/role'
  40. type FormInstance = InstanceType<typeof ElForm>
  42. export default defineComponent({
  43.   name: 'EditorMenu',
  44.   props: {
  45.     type: {
  46.       type: Number,
  47.       required: true
  48.     },
  49.     data: {
  50.       type: Object as PropType<IRole>
  51.     }
  52.   },
  53.   emits: ['submit'],
  54.   setup(props, { emit }) {
  55.     const loading = ref(false)
  56.     const editFormRef = ref<FormInstance|null>(null)
  57.     const editData = ref({
  58.       name: '',
  59.       description: '',
  60.       is_default: false
  61.     })
  63.     // 验证规则
  64.     const menuFormRules = {
  65.       name: {
  66.         required: true,
  67.         message: '请输入角色名称',
  68.         trigger: 'blur'
  69.       },
  70.       description: {
  71.         required: true,
  72.         message: '请输入说明',
  73.         trigger: 'blur'
  74.       }
  75.     }
  77.     const defaultProps = {
  78.       name: '',
  79.       description: '',
  80.       is_default: false
  81.     }
  83.     watchEffect(() => { // 利用watchEffect自动响应依赖变化
  84.       if (props.data) {
  85.         // 移除之前表单效验结果
  86.         editFormRef.value?.clearValidate()
  87.         editData.value = { ...defaultProps, ...props.data }
  88.       }
  89.     })
  91.     // 提交编辑菜单
  92.     const submitMenuForm = () => {
  93.       (editFormRef.value as FormInstance).validate(valid => {
  94.         if (valid) {
  95.           emit('submit', editData.value)
  96.         }
  97.       })
  98.     }
  100.     return {
  101.       editData,
  102.       submitMenuForm,
  103.       editFormRef,
  104.       menuFormRules,
  105.       loading
  106.     }
  107.   }
  108. })
  109. </script>
  111. <style>
  112.   .editor-container {
  113.     padding: 20px;
  114.   }
  115. </style>

权限菜单组件 roleMenu

src/views/system/role/components/roleMenu.vue

  1. <template>
  2.   <div v-if="modelValue">
  3.     <el-dialog
  4.       v-model="dialogVisible"
  5.       :title="dialogTitle"
  6.     >
  7.       <el-tree
  8.         :data="treeData"
  9.         show-checkbox
  10.         default-expand-all
  11.         node-key="id"
  12.         ref="menuTree"
  13.         highlight-current
  14.         :check-strictly="checkStrictly"
  15.         :props="defaultProps">
  16.       </el-tree>
  17.       <template #footer>
  18.         <span class="dialog-footer">
  19.           <el-button type="primary" plain @click="handleCheckAll">全部选择</el-button>
  20.           <el-button type="primary" @click="handleSubmit">提交</el-button>
  21.         </span>
  22.       </template>
  23.     </el-dialog>
  24.   </div>
  25. </template>
  27. <script lang="ts">
  28. import { computed, defineComponent, PropType, ref, watch, getCurrentInstance, onMounted, nextTick } from 'vue'
  29. import { IRole } from '@/store/modules/role'
  30. import { useStore } from '@/store'
  31. import { ElTree } from 'element-plus'
  32. import { allocRoleAccess, getRoleAccess } from '@/api/roleAccess'
  34. type ElTreeInstance = InstanceType<typeof ElTree>
  36. export default defineComponent({
  37.   name: 'RoleMenu',
  38.   props: {
  39.     modelValue: {
  40.       type: Boolean,
  41.       default: false
  42.     },
  43.     role: {
  44.       type: Object as PropType<IRole>,
  45.       required: true
  46.     }
  47.   },
  48.   emits: ['update:modelValue'],
  49.   setup(props, { emit }) {
  50.     const { proxy } = getCurrentInstance()!
  51.     const store = useStore()
  52.     const menuTree = ref<ElTreeInstance | null>(null)
  53.     const role = props.role as IRole
  54.     const dialogVisible = ref(true)
  55.     const defaultProps = ref({
  56.       children: 'children',
  57.       label: 'title'
  58.     })
  59.     // tree父节点与子节点是否强关联
  60.     const checkStrictly = ref(false) // false关联 true不关联
  61.     const dialogTitle = computed(() => `分配 ${role.name} 菜单权限`)
  62.     const treeData = computed(() => store.getters.menusTree)
  63.     watch(dialogVisible, (value) => {
  64.       emit('update:modelValue', value)
  65.     })
  67.     // 发送选中key与role id关联请求
  68.     const handleRoleWithMenu = (keys: number[], roleId: number) => {
  69.       // 发送关联请求
  70.       allocRoleAccess(roleId, keys).then(res => {
  71.         if (res.code === 0) {
  72.           proxy?.$message.success(res.message)
  73.           emit('update:modelValue', false)
  74.           reloadPage()
  75.         }
  76.       })
  77.     }
  79.     // 重新刷新整个系统
  80.     const reloadPage = () => {
  81.       proxy?.$confirm('菜单已发生改动，是否要立即刷新系统', '刷新确认', {
  82.         type: 'warning'
  83.       }).then(() => {
  84.         window.location.reload()
  85.       }).catch(() => {
  86.         proxy?.$message({
  87.           type: 'info',
  88.           message: '已取消刷新'
  89.         })
  90.       })
  91.     }
  93.     // 提交选择的菜单和当前角色做关联
  94.     const handleSubmit = () => {
  95.       const tree = (menuTree.value as ElTreeInstance)
  96.       // 获取所有checkbox全选节点key 这里key是菜单id
  97.       const keys = tree.getCheckedKeys(false)
  98.       // 获取所有半选中节点key 这里key是菜单id
  99.       const halfKeys = tree.getHalfCheckedKeys()
  100.       const selectedKeys = [...halfKeys, ...keys]
  101.       handleRoleWithMenu(selectedKeys as number[], role.id)
  102.     }
  104.     // 根据权限列表 设置权限选中
  105.     const setAccessTreeChecked = (access: number[]) => {
  106.       (menuTree.value as ElTreeInstance).setCheckedKeys(access, false)
  107.       nextTick(() => {
  108.         checkStrictly.value = false
  109.       })
  110.     }
  112.     // 获取当前角色 权限列表
  113.     const getRoleAccessList = () => {
  114.       checkStrictly.value = true
  115.       getRoleAccess(role.id).then(res => {
  116.         if (res.code === 0) {
  117.           const access = res.data.map(item => item.access_id)
  118.           // 设置选中权限
  119.           setAccessTreeChecked(access)
  120.         }
  121.       }).catch(() => {
  122.         checkStrictly.value = false
  123.       })
  124.     }
  126.     // tree 全部选中
  127.     const isCheckAll = ref(false)
  128.     const handleCheckAll = () => {
  129.       if (!isCheckAll.value) {
  130.         (menuTree.value as ElTreeInstance).setCheckedNodes(treeData.value, false)
  131.       } else {
  132.         (menuTree.value as ElTreeInstance).setCheckedNodes([], false)
  133.       }
  134.       isCheckAll.value = !isCheckAll.value
  135.     }
  137.     onMounted(() => {
  138.       getRoleAccessList()
  139.     })
  141.     return {
  142.       dialogVisible,
  143.       dialogTitle,
  144.       treeData,
  145.       defaultProps,
  146.       handleSubmit,
  147.       menuTree,
  148.       checkStrictly,
  149.       handleCheckAll
  150.     }
  151.   }
  152. })
  153. </script>

2-2 角色相关store

src/store/modules/role.ts

  1. /* eslint-disable camelcase */
  2. import { Module, MutationTree, ActionTree } from 'vuex'
  3. import { IRootState } from '../index'
  4. import { addRole, getRoles, removeRole, RoleParams, updateRole } from '../../api/role'
  6. export interface IRoleAccess {
  7.   id: number;
  8.   role_id: number;
  9.   access_id: number;
  10. }
  12. export type IRoleAccessList = IRoleAccess[]
  14. export interface IRole {
  15.   id: number;
  16.   name: string;
  17.   description: string;
  18.   is_default: boolean;
  19.   createdAt: string;
  20.   updatedAt: string;
  21. }
  23. // 定义state类型
  24. export interface IRoleState {
  25.   roles: IRole[];
  26.   count: number;
  27. }
  29. // mutations类型
  30. type IMutations = MutationTree<IRoleState>
  32. // actions类型
  33. type IActions = ActionTree<IRoleState, IRootState>
  35. // 定义state
  36. const state: IRoleState = {
  37.   roles: [],
  38.   count: 0
  39. }
  41. // 定义mutation
  42. const mutations: IMutations = {
  43.   SET_ROLES(state, data: IRoleState['roles']) {
  44.     state.roles = data
  45.   },
  46.   SET_COUNT(state, count: number) {
  47.     state.count = count
  48.   }
  49. }
  50. type ActionRoleParams = IRole & {
  51.   pageSize: number;
  52.   pageNum: number;
  53. }
  54. // 定义actions
  55. const actions: IActions = {
  56.   getRoles({ commit }, params: RoleParams) {
  57.     return new Promise<void>((resolve, reject) => {
  58.       getRoles(params).then(res => {
  59.         const { data } = res
  60.         commit('SET_ROLES', data.roles)
  61.         commit('SET_COUNT', data.count)
  62.         resolve()
  63.       }).catch(reject)
  64.     })
  65.   },
  66.   // 添加角色
  67.   addRole({ dispatch }, data: ActionRoleParams) {
  68.     return new Promise<void>((resolve, reject) => {
  69.       const { pageSize, pageNum, ...params } = data
  70.       addRole(params).then(res => {
  71.         if (res.code === 0) {
  72.           dispatch('getRoles', {
  73.             pageSize,
  74.             pageNum
  75.           })
  76.         }
  77.         resolve()
  78.       }).catch(reject)
  79.     })
  80.   },
  81.   // 编辑角色
  82.   editRole({ dispatch }, data: ActionRoleParams) {
  83.     return new Promise<void>((resolve, reject) => {
  84.       const { pageSize, pageNum, ...params } = data
  85.       updateRole(params.id, params).then(res => {
  86.         if (res.code === 0) {
  87.           dispatch('getRoles', {
  88.             pageSize,
  89.             pageNum
  90.           })
  91.         }
  92.         resolve()
  93.       }).catch(reject)
  94.     })
  95.   },
  96.   // 移除角色
  97.   removeRole({ dispatch }, data: ActionRoleParams) {
  98.     return new Promise<void>((resolve, reject) => {
  99.       const { pageSize, pageNum, id } = data
  100.       removeRole(id).then(res => {
  101.         if (res.code === 0) {
  102.           dispatch('getRoles', {
  103.             pageSize,
  104.             pageNum
  105.           })
  106.         }
  107.         resolve()
  108.       }).catch(reject)
  109.     })
  110.   }
  111. }
  113. // 定义menu module
  114. const role: Module<IRoleState, IRootState> = {
  115.   namespaced: true,
  116.   state,
  117.   mutations,
  118.   actions
  119. }
  121. export default role

getters

src/store/getters.ts

  1. import { GetterTree } from 'vuex'
  2. import { IRootState } from './index'
  4. // 定义全局getters
  5. const getters: GetterTree<IRootState, IRootState> = {
  6.   sidebar: (state) => state.app.sidebar,
  7.   size: state => state.app.size,
  8.   themeColor: state => state.settings.theme,
  9.   menusTree: state => state.menu.menuTreeData,
  10.   roles: state => state.user.roles,
  11.   roleIds: state => (state.user.roles || []).map(role => role.id),
  12.   roleNames: state => (state.user.roles || []).map(role => role.name)
  13. }
  15. export default getters

store.ts

src/store/index.ts

  1. import { InjectionKey } from 'vue'
  2. import { createStore, Store, useStore as baseUseStore } from 'vuex'
  3. import createPersistedState from 'vuex-persistedstate'
  4. import app, { IAppState } from '@/store/modules/app'
  5. import tagsView, { ITagsViewState } from '@/store/modules/tagsView'
  6. import settings, { ISettingsState } from '@/store/modules/settings'
  7. import user, { IUserState } from '@/store/modules/user'
  8. import getters from './getters'
  9. import menu, { IMenusState } from './modules/menu'
  10. import role, { IRoleState } from './modules/role'
  11. import permission, { IPermissionState } from './modules/permission'
  13. // 模块声明在根状态下
  14. export interface IRootState {
  15.   app: IAppState;
  16.   user: IUserState;
  17.   menu: IMenusState;
  18.   role: IRoleState;
  19.   tagsView: ITagsViewState;
  20.   settings: ISettingsState;
  21.   permission: IPermissionState;
  22. }
  24. // 通过下面方式使用 TypeScript 定义 store 能正确地为 store 提供类型声明。
  25. // https://next.vuex.vuejs.org/guide/typescript-support.html#simplifying-usestore-usage
  26. // eslint-disable-next-line symbol-description
  27. export const key: InjectionKey<Store<IRootState>> = Symbol()
  29. // 对于getters在组件使用时没有类型提示
  30. // 有人提交了pr #1896 为getters创建泛型 应该还未发布
  31. // https://github.com/vuejs/vuex/pull/1896
  32. // 代码pr内容详情
  33. // https://github.com/vuejs/vuex/pull/1896/files#diff-093ad82a25aee498b11febf1cdcb6546e4d223ffcb49ed69cc275ac27ce0ccce
  35. // vuex store持久化 默认使用localstorage持久化
  36. const persisteAppState = createPersistedState({
  37.   storage: window.sessionStorage, // 指定storage 也可自定义
  38.   key: 'vuex_app', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  39.   // paths: ['app'] // 针对app这个模块持久化
  40.   // 只针对app模块下sidebar.opened状态持久化
  41.   paths: ['app.sidebar.opened', 'app.size'] // 通过点连接符指定state路径
  42. })
  44. const persisteSettingsState = createPersistedState({
  45.   storage: window.sessionStorage, // 指定storage 也可自定义
  46.   key: 'vuex_setting', // 存储名 默认都是vuex 多个模块需要指定 否则会覆盖
  47.   // paths: ['app'] // 针对app这个模块持久化
  48.   // 只针对app模块下sidebar.opened状态持久化
  49.   paths: ['settings.theme', 'settings.originalStyle', 'settings.tagsView', 'settings.sidebarLogo'] // 通过点连接符指定state路径
  50. })
  52. export default createStore<IRootState>({
  53.   plugins: [
  54.     persisteAppState,
  55.     persisteSettingsState
  56.   ],
  57.   getters,
  58.   modules: {
  59.     app,
  60.     user,
  61.     tagsView,
  62.     settings,
  63.     menu,
  64.     role,
  65.     permission
  66.   }
  67. })
  69. // 定义自己的 `useStore` 组合式函数
  70. // https://next.vuex.vuejs.org/zh/guide/typescript-support.html#%E7%AE%80%E5%8C%96-usestore-%E7%94%A8%E6%B3%95
  71. // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
  72. export function useStore () {
  73.   return baseUseStore(key)
  74. }
  76. // vuex持久化 vuex-persistedstate文档说明
  77. // https://www.npmjs.com/package/vuex-persistedstate

2-3 角色api

src/api/role.ts

  2. import request from '@/api/config/request'
  3. import { IRole, IRoleState } from '@/store/modules/role'
  4. import { ApiResponse } from './type'
  6. // 获取角色
  7. export interface RoleParams {
  8.   pageNum: number;
  9.   pageSize: number;
  10. }
  12. export const getRoles = (params = { pageNum: 0, pageSize: 10 }): Promise<ApiResponse<IRoleState>> => {
  13.   return request.get('/role', {
  14.     params
  15.   })
  16. }
  18. // 删除角色
  19. export const removeRole = (id: number): Promise<ApiResponse> => {
  20.   return request.delete(`/role/${id}`)
  21. }
  23. // 添加角色
  24. export const addRole = (data: IRole): Promise<ApiResponse> => {
  25.   return request.post('/role', data)
  26. }
  28. // 编辑角色
  29. export const updateRole = (id: number, data: IRole): Promise<ApiResponse> => {
  30.   return request.put(`/role/${id}`, data)
  31. }