feat: 完成后台联调与通用列表组件

src/views/RolesView.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage, ElMessageBox } from 'element-plus'
-import { Pencil, Plus, RotateCcw, Search, ShieldCheck, Trash2 } from '@lucide/vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
+import { Pencil, Plus, ShieldCheck, Trash2 } from '@lucide/vue'
 import {
   changePlatformRoleStatus,
   createPlatformRole,
@@ -15,8 +15,9 @@ import {
 } from '@/api/platformIam'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/api/http'
 import ApiErrorMeta from '@/components/ApiErrorMeta.vue'
-import MetricStrip from '@/components/MetricStrip.vue'
 import StatusBadge from '@/components/StatusBadge.vue'
+import DataTable, { type DataTableColumn } from '@/components/common/DataTable.vue'
+import QueryToolbar, { type QueryField, type QueryModel } from '@/components/common/QueryToolbar.vue'
 import { useUnsavedWorkRegistration } from '@/composables/useUnsavedWorkRegistration'
 import { useAccessPreviewStore } from '@/stores/accessPreview'
 import type { Permission, Role } from '@/types/admin'
@@ -31,17 +32,29 @@ interface TreeController {
 
 const access = useAccessPreviewStore()
 const editorOpen = ref(false)
+const formRef = ref<FormInstance>()
 const treeRef = ref<TreeController | null>(null)
 const serverRoles = ref<Role[]>([])
 const serverPermissions = ref<Permission[]>([])
-const assignedMemberCount = ref(0)
 const loading = ref(false)
 const saving = ref(false)
 const rowActionId = ref('')
 const loadError = ref<ApiErrorDetails | null>(null)
-const filters = reactive({ keyword: '', status: '', dataScope: '' })
+const page = ref(1)
+const pageSize = ref(10)
+type RoleFilters = QueryModel & { keyword: string; status: string }
+const filters = ref<RoleFilters>({ keyword: '', status: '' })
+const appliedFilters = ref<RoleFilters>({ ...filters.value })
+const queryFields: QueryField[] = [
+  { key: 'keyword', type: 'input', placeholder: '角色名称、编码或描述' },
+  { key: 'status', type: 'select', placeholder: '全部状态', options: [{ label: '启用', value: '启用' }, { label: '停用', value: '停用' }] },
+]
 const emptyForm = (): Omit<Role, 'userCount'> => ({ id: '', name: '', code: '', description: '', dataScope: '本部门数据', status: '启用', permissionIds: [], builtIn: false })
 const form = reactive(emptyForm())
+const formRules: FormRules = {
+  name: [{ required: true, whitespace: true, message: '请输入角色名称', trigger: 'blur' }],
+  code: [{ required: true, whitespace: true, message: '请输入角色编码', trigger: 'blur' }],
+}
 const editorLabel = computed(() => form.id ? '配置角色' : '新增角色')
 const canEdit = computed(() => access.can('platform:role:edit'))
 const canGrant = computed(() => access.can('platform:role:grant'))
@@ -56,21 +69,27 @@ const { captureBaseline } = useUnsavedWorkRegistration({
 const roles = computed(() => serverRoles.value)
 const canCreate = computed(() => access.can('platform:role:create'))
 const filteredRows = computed(() => roles.value.filter((item) => {
-  const keyword = filters.keyword.trim().toLowerCase()
-  return (!keyword || [item.name, item.code, item.description].some((value) => value.toLowerCase().includes(keyword))) && (!filters.status || item.status === filters.status) && (!filters.dataScope || item.dataScope === filters.dataScope)
+  const keyword = appliedFilters.value.keyword.trim().toLowerCase()
+  return (!keyword || [item.name, item.code, item.description].some((value) => value.toLowerCase().includes(keyword))) && (!appliedFilters.value.status || item.status === appliedFilters.value.status)
 }))
-const metrics = computed(() => [
-  { label: '角色总数', value: roles.value.length, note: 'IAM 返回的角色' },
-  { label: '启用角色', value: roles.value.filter((item) => item.status === '启用').length, note: '当前可分配' },
-  { label: '授权用户', value: assignedMemberCount.value, note: '已分配角色成员' },
-  { label: '权限资源', value: serverPermissions.value.length, note: '菜单与按钮' },
-])
+const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize.value, page.value * pageSize.value))
+const roleColumns: DataTableColumn[] = [
+  { key: 'actions', label: '操作', width: 235, fixed: 'left', slotName: 'actions' },
+  { key: 'role', label: '角色', minWidth: 210, slotName: 'role' },
+  { prop: 'description', label: '说明', minWidth: 240, showOverflowTooltip: true },
+  { key: 'permissionSummary', label: '授权范围', minWidth: 170, slotName: 'permissionSummary' },
+  { prop: 'userCount', label: '用户数', width: 86, align: 'right' },
+  { key: 'roleType', label: '类型', width: 95, slotName: 'roleType' },
+  { key: 'status', label: '状态', width: 88, slotName: 'status' },
+]
 const availablePermissions = computed(() => serverPermissions.value)
 const permissionTree = computed(() => buildPermissionTree(availablePermissions.value))
 
-watch(() => form.dataScope, () => undefined)
-
-function resetFilters() { Object.assign(filters, { keyword: '', status: '', dataScope: '' }) }
+function applyFilters() {
+  appliedFilters.value = { ...filters.value }
+  page.value = 1
+  void loadRoles()
+}
 
 function mapPlatformRole(role: PlatformRoleResource, userCount = 0): Role {
   return {
@@ -91,7 +110,6 @@ async function loadRoles() {
   loadError.value = null
   serverRoles.value = []
   serverPermissions.value = []
-  assignedMemberCount.value = 0
   try {
     const [roleRecords, permissionRecords, memberRecords] = await Promise.all([
       listPlatformRoles(),
@@ -107,7 +125,6 @@ async function loadRoles() {
     }
     serverPermissions.value = permissionRecords.map(mapPlatformPermission)
     serverRoles.value = roleRecords.map((role) => mapPlatformRole(role, roleMemberCounts.get(String(role.id)) ?? 0))
-    assignedMemberCount.value = memberRecords.filter((member) => member.roleIds.length > 0).length
   } catch (error) {
     loadError.value = getApiErrorDetails(error, '平台角色列表加载失败，请稍后重试')
   } finally {
@@ -119,14 +136,14 @@ function openCreate() {
   Object.assign(form, emptyForm())
   captureBaseline()
   editorOpen.value = true
-  nextTick(() => treeRef.value?.setCheckedKeys([]))
+  nextTick(() => { formRef.value?.clearValidate(); treeRef.value?.setCheckedKeys([]) })
 }
 function openEdit(row: Role) {
   if (!canEdit.value && !canGrant.value) return
   Object.assign(form, { ...row, permissionIds: [...row.permissionIds] })
   captureBaseline()
   editorOpen.value = true
-  nextTick(() => treeRef.value?.setCheckedKeys([...row.permissionIds]))
+  nextTick(() => { formRef.value?.clearValidate(); treeRef.value?.setCheckedKeys([...row.permissionIds]) })
 }
 
 function selectedPermissionIds() {
@@ -140,7 +157,8 @@ function syncPermissionIds() {
 }
 
 async function saveRole() {
-  if (!form.name.trim() || !form.code.trim()) { ElMessage.warning('请填写角色名称和角色编码'); return }
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid) return
   const normalizedCode = form.code.trim().toUpperCase()
   const duplicate = roles.value.some((item) => item.code.toLowerCase() === normalizedCode.toLowerCase() && item.id !== form.id)
   if (duplicate) { ElMessage.error('角色编码已经存在'); return }
@@ -214,30 +232,23 @@ onMounted(loadRoles)
 
 <template>
   <div class="business-page">
-    <MetricStrip :items="metrics" />
-    <el-alert type="success" :closable="false" show-icon title="角色查询、新增、编辑、启停、删除及权限分配均使用 IAM 真实接口；系统内置角色继续由服务端保护。" />
     <el-alert v-if="loadError" type="error" :closable="false" show-icon role="alert"><template #title><div class="api-error-alert-title"><span>{{ loadError.message }}</span><ApiErrorMeta :details="loadError" /></div><el-button link type="danger" @click="loadRoles">重新加载</el-button></template></el-alert>
-    <section class="surface-panel filter-panel" aria-label="角色筛选">
-      <div class="filter-fields"><el-input v-model="filters.keyword" clearable placeholder="角色名称、编码或描述" aria-label="角色关键词"><template #prefix><Search :size="16" /></template></el-input><el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="角色状态"><el-option label="启用" value="启用" /><el-option label="停用" value="停用" /></el-select></div>
-      <div class="filter-actions"><el-button @click="resetFilters"><RotateCcw :size="16" />重置</el-button><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增角色</el-button></div>
-    </section>
+    <QueryToolbar v-model="filters" class="surface-panel" ariaLabel="角色筛选" :fields="queryFields" @search="applyFilters"><template #actions><el-button v-if="canCreate" type="primary" @click="openCreate"><Plus :size="16" />新增角色</el-button></template></QueryToolbar>
 
     <section class="surface-panel table-panel">
       <header class="panel-heading"><div><h2>角色与授权</h2><p>角色负责聚合菜单、操作和数据范围，内部用户可分配多个角色。</p></div></header>
-      <el-table v-loading="loading" :data="filteredRows" row-key="id" empty-text="没有符合条件的角色">
-        <el-table-column label="操作" width="235" fixed="left"><template #default="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions"><el-button v-if="canEdit || canGrant" link type="primary" :disabled="rowActionId === row.id || row.builtIn" @click="openEdit(row as Role)"><Pencil :size="15" />配置</el-button><el-button v-if="access.can('platform:role:status')" link :type="row.status === '启用' ? 'danger' : 'success'" :loading="rowActionId === row.id" :disabled="row.builtIn" @click="toggleStatus(row as Role)">{{ row.status === '启用' ? '停用' : '启用' }}</el-button><el-button v-if="access.can('platform:role:delete')" link type="danger" :disabled="row.builtIn || row.userCount > 0 || rowActionId === row.id" @click="removeRole(row as Role)"><Trash2 :size="15" />删除</el-button></div><span v-else class="secondary-text">仅查看</span></template></el-table-column>
-        <el-table-column label="角色" min-width="210"><template #default="{ row }"><div class="role-cell"><span><ShieldCheck :size="18" /></span><div><strong>{{ row.name }}</strong><small>{{ row.code }}</small></div></div></template></el-table-column>
-        <el-table-column prop="description" label="说明" min-width="240" show-overflow-tooltip />
-        <el-table-column label="授权范围" min-width="170"><template #default="{ row }"><div class="primary-cell"><strong>{{ permissionSummary(row as Role) }}</strong><span>平台 IAM 权限</span></div></template></el-table-column>
-        <el-table-column prop="userCount" label="用户数" width="86" align="right" />
-        <el-table-column label="类型" width="95"><template #default="{ row }"><el-tag :type="row.builtIn ? 'warning' : 'info'" effect="plain" size="small">{{ row.builtIn ? '系统内置' : '自定义' }}</el-tag></template></el-table-column>
-        <el-table-column label="状态" width="88"><template #default="{ row }"><StatusBadge :status="row.status" /></template></el-table-column>
-      </el-table>
+      <DataTable v-model:page="page" v-model:page-size="pageSize" :data="pagedRows" :columns="roleColumns" :loading="loading" :total="filteredRows.length" row-key="id" empty-text="没有符合条件的角色">
+        <template #actions="{ row }"><div v-if="canEdit || canGrant || access.can('platform:role:status') || access.can('platform:role:delete')" class="table-actions"><el-button v-if="canEdit || canGrant" link type="primary" :disabled="rowActionId === (row as Role).id || (row as Role).builtIn" @click="openEdit(row as Role)"><Pencil :size="15" />配置</el-button><el-button v-if="access.can('platform:role:status')" link :type="(row as Role).status === '启用' ? 'danger' : 'success'" :loading="rowActionId === (row as Role).id" :disabled="(row as Role).builtIn" @click="toggleStatus(row as Role)">{{ (row as Role).status === '启用' ? '停用' : '启用' }}</el-button><el-button v-if="access.can('platform:role:delete')" link type="danger" :disabled="(row as Role).builtIn || (row as Role).userCount > 0 || rowActionId === (row as Role).id" @click="removeRole(row as Role)"><Trash2 :size="15" />删除</el-button></div><span v-else class="secondary-text">仅查看</span></template>
+        <template #role="{ row }"><div class="role-cell"><span><ShieldCheck :size="18" /></span><div><strong>{{ (row as Role).name }}</strong><small>{{ (row as Role).code }}</small></div></div></template>
+        <template #permissionSummary="{ row }"><div class="primary-cell"><strong>{{ permissionSummary(row as Role) }}</strong><span>平台 IAM 权限</span></div></template>
+        <template #roleType="{ row }"><el-tag :type="(row as Role).builtIn ? 'warning' : 'info'" effect="plain" size="small">{{ (row as Role).builtIn ? '系统内置' : '自定义' }}</el-tag></template>
+        <template #status="{ row }"><StatusBadge :status="(row as Role).status" /></template>
+      </DataTable>
     </section>
 
     <el-drawer v-model="editorOpen" :title="form.id ? '配置角色' : '新增角色'" size="760px" class="business-drawer editor-drawer" :modal="false" :close-on-click-modal="false">
-      <el-form label-position="top" class="drawer-form">
-        <div class="form-section"><h3>基本信息</h3><div class="form-grid two-cols"><el-form-item label="角色名称" required><el-input v-model="form.name" :disabled="Boolean(form.id) && !canEdit" maxlength="64" /></el-form-item><el-form-item label="角色编码" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如 OPS_MANAGER" maxlength="64" /></el-form-item></div><el-form-item label="角色说明"><el-input v-model="form.description" :disabled="Boolean(form.id) && !canEdit" type="textarea" :rows="2" maxlength="200" show-word-limit /></el-form-item></div>
+      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top" class="drawer-form">
+        <div class="form-section"><h3>基本信息</h3><div class="form-grid two-cols"><el-form-item label="角色名称" prop="name" required><el-input v-model="form.name" :disabled="Boolean(form.id) && !canEdit" placeholder="如：订单运营专员" maxlength="64" /></el-form-item><el-form-item label="角色编码" prop="code" required><el-input v-model="form.code" :disabled="Boolean(form.id)" placeholder="如：ORDER_OPERATOR" maxlength="64" /></el-form-item></div><el-form-item label="角色说明"><el-input v-model="form.description" :disabled="Boolean(form.id) && !canEdit" type="textarea" :rows="2" placeholder="说明该角色的工作范围" maxlength="200" show-word-limit /></el-form-item></div>
         <div v-if="canGrant" class="form-section permission-section"><div class="section-heading-row"><div><h3>菜单与操作权限</h3><p>保存时按后端契约全量替换当前角色权限；未勾选表示清空授权。</p></div><span>{{ form.permissionIds.length }} 项原有授权</span></div><el-tree ref="treeRef" class="permission-tree" :data="permissionTree" node-key="id" show-checkbox check-strictly default-expand-all :props="{ label: 'name', children: 'children' }" @check="syncPermissionIds"><template #default="{ data }"><div class="permission-node"><span>{{ data.name }}</span><code>{{ data.code }}</code></div></template></el-tree></div>
       </el-form>
       <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button v-if="form.id ? canEdit || canGrant : canCreate" type="primary" :loading="saving" @click="saveRole">保存角色</el-button></div></template>