api permission config

src/api/api.ts

@@ -0,0 +1,11 @@
+import { axios } from '@/utils/request'
+import { ApiResourceGroup } from '@/types/modules/api'
+
+const PREFIX = '/apis'
+
+export function getApis() {
+  return axios.request<ApiResourceGroup>({
+    url: `${PREFIX}`,
+    method: 'GET'
+  })
+}

src/plugins/i18n/messages.en.json

@@ -120,8 +120,10 @@
     "role": {
       "removeConfirm": "Are you sure to remove?",
       "operation": "Operation",
-      "configApi": "API Permission",
-      "configMenu": "Menu Permission",
+      "config": {
+        "api": "API Permission",
+        "menu": "Menu Permission"
+      },
       "roleCode": "Role code",
       "roleCodePlaceholder": "Please input role code",
       "roleName": "Role name",

src/plugins/i18n/messages.zh-cn.json

@@ -121,8 +121,10 @@
     "role": {
       "removeConfirm": " 确认删除吗？将无法恢复",
       "operation": "操作",
-      "configApi": "配置API权限",
-      "configMenu": "配置菜单权限",
+      "config": {
+        "api": "配置API权限",
+        "menu": "配置菜单权限"
+      },
       "roleCode": "角色代码",
       "roleCodePlaceholder": "请输入角色代码",
       "roleName": "角色名称",

src/types/modules/api.ts

@@ -0,0 +1,10 @@
+export interface ApiResourceGroup {
+  name: string
+  list: ApiResource[]
+}
+
+export interface ApiResource {
+  name: string
+  path: string
+  method: string
+}

src/views/system/role/RoleApi.vue

@@ -0,0 +1,61 @@
+<template>
+  <n-card :segmented="{ content: true }" :bordered="false" size="small">
+    <template #header>
+      <n-button secondary type="primary" class="mr-2" @click="save">
+        <template #icon>
+          <n-icon><save-outlined /></n-icon>
+        </template>
+        {{ t('general.save') }}
+      </n-button>
+    </template>
+    <n-tree
+      block-line
+      cascade
+      checkable
+      :virtual-scroll="true"
+      :data="menus"
+      default-expand-all
+      :checked-keys="checkedKeys"
+      :render-label="renderLabel"
+      @update:checked-keys="onUpdateCheckedKeys"
+    />
+  </n-card>
+</template>
+
+<script setup lang="tsx">
+import { onMounted, ref } from 'vue'
+import { MenuTreeOptions } from '@/types/view/menu'
+import { updateRoleMenus } from '@/api/role'
+import { SaveOutlined } from '@vicons/antd'
+import { TreeOption, useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { getApis } from '@/api/api'
+
+interface Props {
+  id: number
+}
+
+const props = defineProps<Props>()
+const menus = ref<Array<MenuTreeOptions>>([])
+const checkedKeys = ref<Array<number>>([])
+const message = useMessage()
+const { t } = useI18n()
+
+onMounted(() => {
+  getApis()
+})
+
+function onUpdateCheckedKeys(keys: Array<number>) {
+  checkedKeys.value = keys
+}
+
+function save() {
+  updateRoleMenus(props.id, checkedKeys.value).then(() => {
+    message.success('保存成功')
+  })
+}
+
+function renderLabel(item: { option: TreeOption; checked: boolean; selected: boolean }) {
+  return <div>{t(item.option.label ?? '')}</div>
+}
+</script>

src/views/system/role/RoleList.vue

@@ -20,7 +20,8 @@
     </n-drawer>
     <n-drawer v-model:show="showDrawer" :width="500" placement="right" closable>
       <n-drawer-content :title="drawerTitle">
-        <role-menu v-if="assigningKey" :id="assigningKey" />
+        <role-menu v-if="selectingKey && configType === 'menu'" :id="selectingKey" />
+        <role-api v-if="selectingKey && configType === 'api'" :id="selectingKey" />
       </n-drawer-content>
     </n-drawer>
   </div>
@@ -41,6 +42,7 @@ import { PageRes } from '@/types/component/request'
 import { useI18n } from 'vue-i18n'
 import { Role } from '@/types/modules/role'
 import RoleMenu from '@/views/system/role/RoleMenu.vue'
+import RoleApi from '@/views/system/role/RoleApi.vue'
 
 const message = useMessage()
 const showEdit = ref(false)
@@ -49,7 +51,8 @@ const data = ref<PageRes<Role>>()
 const editId = ref<number | undefined>(undefined)
 const showDrawer = ref(false)
 const drawerTitle = ref('')
-const assigningKey = ref<number | undefined>(undefined)
+const selectingKey = ref<number | undefined>(undefined)
+const configType = ref<'menu' | 'api'>('menu')
 
 const columns: DataTableColumns<Role> = [
   {
@@ -113,15 +116,15 @@ function renderActions(row: AdminUserPageItem) {
         )
       }}
     </NPopconfirm>,
-    <NButton strong secondary size="small" class="mr-2" onClick={() => assignMenu(row)}>
+    <NButton strong secondary size="small" class="mr-2" onClick={() => configRole(row, 'api')}>
       {{
-        default: () => t('views.role.configApi'),
+        default: () => t('views.role.config.api'),
         icon: () => <NIcon>{{ default: () => <EditOutlined /> }}</NIcon>
       }}
     </NButton>,
-    <NButton strong secondary size="small" class="mr-2" onClick={() => assignMenu(row)}>
+    <NButton strong secondary size="small" class="mr-2" onClick={() => configRole(row, 'menu')}>
       {{
-        default: () => t('views.role.configMenu'),
+        default: () => t('views.role.config.menu'),
         icon: () => <NIcon>{{ default: () => <EditOutlined /> }}</NIcon>
       }}
     </NButton>
@@ -139,10 +142,11 @@ function add() {
   onEdit()
 }
 
-function assignMenu(row: Role) {
+function configRole(row: Role, type: 'menu' | 'api') {
+  configType.value = type
   showDrawer.value = true
-  drawerTitle.value = `【${row.name}】${t('views.role.configMenu')}`
-  assigningKey.value = row.id
+  drawerTitle.value = `【${row.name}】${t(`views.role.config.${type}`)}`
+  selectingKey.value = row.id
 }
 </script>