permission

2026-10-26 23:17:06 +08:00
parent c654b89647
commit d2dfb4069d
42 changed files with 3113 additions and 346 deletions
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+  import { Delete, Plus, Refresh, Search } from '@element-plus/icons-vue'
+  import { RoleAPI } from '@/api/system/role'
+  import { RBAC_STATUS_OPTIONS, RbacStatusEnum } from '@/enums/rbac'
+  import type { RoleQuery, RoleVO } from '@/types/system/rbac'
+  import RoleForm from './components/RoleForm.vue'
+  import RolePermissionDialog from './components/RolePermissionDialog.vue'
+
+  defineOptions({ name: 'RoleList' })
+
+  const formRef = ref<InstanceType<typeof RoleForm>>()
+  const permRef = ref<InstanceType<typeof RolePermissionDialog>>()
+
+  const loading = ref(false)
+  const total = ref(0)
+  const list = ref<RoleVO[]>([])
+
+  const queryParams = reactive<RoleQuery>({
+    page: 1,
+    size: 10,
+    keyword: '',
+    status: undefined,
+  })
+
+  watch([() => queryParams.page, () => queryParams.size], handleQuery)
+
+  async function handleQuery() {
+    loading.value = true
+    try {
+      const { list: rows, total: count } = await RoleAPI.query(queryParams)
+      list.value = rows
+      total.value = count
+    } finally {
+      loading.value = false
+    }
+  }
+
+  function handleReset() {
+    Object.assign(queryParams, { page: 1, size: 10, keyword: '', status: undefined })
+    handleQuery()
+  }
+
+  function openForm(row?: Partial<RoleVO>) {
+    formRef.value?.open(row?.id)
+  }
+
+  function openPermission(row: RoleVO) {
+    permRef.value?.open(row.id, row.name)
+  }
+
+  async function handleDelete(row: RoleVO) {
+    await ElMessageBox.confirm(`确认删除角色「${row.name}」吗？删除后不可恢复`, '提示', {
+      type: 'warning',
+    })
+    await RoleAPI.delete(row.id)
+    handlePageBack()
+    ElMessage.success('删除成功')
+    handleQuery()
+  }
+
+  function handlePageBack() {
+    const maxPage = Math.max(1, Math.ceil((total.value - 1) / queryParams.size))
+    queryParams.page = Math.min(queryParams.page, maxPage)
+  }
+
+  const statusLabel = (status: number) =>
+    status === RbacStatusEnum.ENABLED ? '启用' : '禁用'
+
+  onMounted(handleQuery)
+</script>
+
+<template>
+  <div class="app-container">
+    <!-- 搜索栏 -->
+    <el-form :model="queryParams" inline @submit.prevent="handleQuery">
+      <el-form-item label="关键字">
+        <el-input
+          v-model="queryParams.keyword"
+          placeholder="标识 / 名称"
+          clearable
+          style="width: 200px"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="状态">
+        <el-select v-model="queryParams.status" placeholder="全部" clearable style="width: 120px">
+          <el-option
+            v-for="option in RBAC_STATUS_OPTIONS"
+            :key="option.value"
+            :label="option.label"
+            :value="option.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" :icon="Search" @click="handleQuery">查询</el-button>
+        <el-button :icon="Refresh" @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <!-- 工具栏 -->
+    <div class="toolbar">
+      <el-button v-hasPerm="'role:manage'" type="primary" :icon="Plus" @click="openForm()">
+        新增
+      </el-button>
+    </div>
+
+    <!-- 表格 -->
+    <el-table v-loading="loading" :data="list" border>
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="code" label="标识" min-width="140" />
+      <el-table-column prop="name" label="名称" min-width="120" />
+      <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
+      <el-table-column label="状态" width="90" align="center">
+        <template #default="{ row }">
+          <el-tag :type="row.status === RbacStatusEnum.ENABLED ? 'success' : 'info'">
+            {{ statusLabel(row.status) }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="created_at" label="创建时间" min-width="180" />
+      <el-table-column label="操作" width="220" fixed="right" align="center">
+        <template #default="{ row }">
+          <el-button v-hasPerm="'role:manage'" link type="primary" @click="openForm(row)">
+            编辑
+          </el-button>
+          <el-button v-hasPerm="'role:manage'" link type="warning" @click="openPermission(row as RoleVO)">
+            分配权限
+          </el-button>
+          <el-button v-hasPerm="'role:manage'" link type="danger" :icon="Delete" @click="handleDelete(row as RoleVO)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-empty description="暂无数据" />
+      </template>
+    </el-table>
+
+    <!-- 分页 -->
+    <el-pagination
+      v-model:current-page="queryParams.page"
+      v-model:page-size="queryParams.size"
+      class="pagination"
+      :total="total"
+      :page-sizes="[10, 20, 50]"
+      layout="total, sizes, prev, pager, next, jumper"
+    />
+
+    <RoleForm ref="formRef" @success="handleQuery" />
+    <RolePermissionDialog ref="permRef" @success="handleQuery" />
+  </div>
+</template>
+
+<style scoped lang="scss">
+  .toolbar {
+    margin-bottom: 16px;
+  }
+
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 16px;
+  }
+</style>