portal-mini-front/src/views/system/role/index.vue

<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>