增加权限系统

2026-05-27 05:41:59 +08:00
parent a04327fd05
commit 1458fc279c
29 changed files with 2276 additions and 46 deletions
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { ref } from 'vue'
+
+import { fetchRoles, deleteRole, type Role } from '@/api/adminRoles'
+import { useAdminTable } from '@/composables/useAdminTable'
+
+import AssignPermissionsDialog from './components/AssignPermissionsDialog.vue'
+import RoleDialog from './components/RoleDialog.vue'
+
+const showDialog = ref(false)
+const editingRole = ref<Role | null>(null)
+const showPermsDialog = ref(false)
+const permsRole = ref<Role | null>(null)
+
+const { loading, data: roles, load: loadRoles } = useAdminTable<Role[]>({
+  fetchFn: fetchRoles,
+})
+
+function openCreate() {
+  editingRole.value = null
+  showDialog.value = true
+}
+
+function openEdit(row: Role) {
+  editingRole.value = row
+  showDialog.value = true
+}
+
+function openPerms(row: Role) {
+  permsRole.value = row
+  showPermsDialog.value = true
+}
+
+async function handleDelete(row: Role) {
+  try {
+    await ElMessageBox.confirm(`确定要删除角色「${row.name}」吗？已分配该角色的管理员将失去对应权限。`, '删除确认', {
+      confirmButtonText: '确认删除',
+      cancelButtonText: '取消',
+      type: 'warning',
+    })
+    await deleteRole(row.id)
+    ElMessage.success('角色已删除')
+    await loadRoles()
+  } catch {
+    // 用户取消
+  }
+}
+</script>
+
+<template>
+  <section class="page">
+    <div class="page-header-row">
+      <div class="page-header">
+        <p class="eyebrow">Roles</p>
+        <h1>角色管理</h1>
+        <p>管理系统角色及其权限配置。</p>
+      </div>
+      <div class="toolbar-actions">
+        <el-button @click="loadRoles">刷新</el-button>
+        <el-button type="primary" @click="openCreate">新建角色</el-button>
+      </div>
+    </div>
+
+    <el-table v-loading="loading" class="table-panel" :data="roles">
+      <el-table-column prop="id" label="ID" width="70" />
+      <el-table-column prop="code" label="编码" min-width="120" />
+      <el-table-column prop="name" label="名称" min-width="120" />
+      <el-table-column prop="description" label="描述" min-width="200" />
+      <el-table-column prop="perm_count" label="权限数" width="90" align="center" />
+      <el-table-column label="操作" width="240" fixed="right">
+        <template #default="{ row }">
+          <el-button size="small" @click="openEdit(row)">编辑</el-button>
+          <el-button size="small" type="primary" @click="openPerms(row)">权限</el-button>
+          <el-button
+            v-if="row.code !== 'super_admin'"
+            size="small"
+            type="danger"
+            @click="handleDelete(row)"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 新建/编辑对话框 -->
+    <RoleDialog
+      v-model="showDialog"
+      :role="editingRole"
+      @saved="loadRoles"
+    />
+
+    <!-- 权限分配对话框 -->
+    <AssignPermissionsDialog
+      v-model="showPermsDialog"
+      :role="permsRole"
+      @saved="loadRoles"
+    />
+  </section>
+</template>
+
+<style scoped>
+.toolbar-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>