admin-web/src/views/InternalUsersView.vue

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, RotateCcw, Search } from '@lucide/vue'
import {
  createPlatformInternalUser,
  listPlatformInternalUsers,
  listPlatformRoles,
  type PlatformInternalUser,
  type PlatformRoleResource,
} 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 { useUnsavedWorkRegistration } from '@/composables/useUnsavedWorkRegistration'
import { useAccessPreviewStore } from '@/stores/accessPreview'

const access = useAccessPreviewStore()
const users = ref<PlatformInternalUser[]>([])
const roles = ref<PlatformRoleResource[]>([])
const loading = ref(false)
const saving = ref(false)
const loadError = ref<ApiErrorDetails | null>(null)
const editorOpen = ref(false)
const page = ref(1)
const pageSize = 10
const filters = reactive({ keyword: '', status: '' })
const emptyForm = () => ({ authUserId: '', userType: 'PLATFORM_STAFF', displayName: '', phone: '', email: '' })
const form = reactive(emptyForm())
const { captureBaseline } = useUnsavedWorkRegistration({
  key: 'internal-user-editor',
  label: computed(() => '新增内部用户'),
  isOpen: editorOpen,
  model: form,
  requiredPermission: computed(() => 'platform:user:create'),
})

const canCreate = computed(() => access.can('platform:user:create'))
const roleNames = computed(() => new Map(roles.value.map((role) => [String(role.id), role.roleName])))
const filteredRows = computed(() => users.value.filter((item) => {
  const keyword = filters.keyword.trim().toLowerCase()
  const matchesKeyword = !keyword || [item.displayName, item.username, item.memberNo ?? '', String(item.authUserId)]
    .some((value) => value.toLowerCase().includes(keyword))
  return matchesKeyword && (!filters.status || item.status === filters.status)
}))
const pagedRows = computed(() => filteredRows.value.slice((page.value - 1) * pageSize, page.value * pageSize))
const metrics = computed(() => [
  { label: '内部用户', value: users.value.length, note: 'IAM 返回的用户' },
  { label: '正常账号', value: users.value.filter((item) => item.status === 'ACTIVE').length, note: '当前有效' },
  { label: '停用账号', value: users.value.filter((item) => item.status !== 'ACTIVE').length, note: '只读展示' },
])

watch(filters, () => { page.value = 1 })

async function loadUsers() {
  loading.value = true
  loadError.value = null
  users.value = []
  try {
    const [userRecords, roleRecords] = await Promise.all([listPlatformInternalUsers(), listPlatformRoles()])
    users.value = userRecords
    roles.value = roleRecords
  } catch (error) {
    loadError.value = getApiErrorDetails(error, '内部用户列表加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

function resetFilters() { Object.assign(filters, { keyword: '', status: '' }) }
function roleLabel(roleId: number | string) { return roleNames.value.get(String(roleId)) ?? `角色 #${roleId}` }
function openCreate() { Object.assign(form, emptyForm()); captureBaseline(); editorOpen.value = true }

async function saveUser() {
  if (!form.authUserId.trim() || !form.displayName.trim() || !form.userType.trim()) {
    ElMessage.warning('请填写认证用户 ID、姓名和用户类型')
    return
  }
  saving.value = true
  try {
    await createPlatformInternalUser({ ...form, authUserId: form.authUserId.trim() })
    editorOpen.value = false
    ElMessage.success('内部用户已创建')
    await loadUsers()
  } catch (error) {
    ElMessage.error(getApiErrorMessage(error, '内部用户创建失败，请稍后重试'))
  } finally {
    saving.value = false
  }
}

onMounted(loadUsers)
</script>

<template>
  <div class="business-page">
    <MetricStrip :items="metrics" />
    <el-alert type="info" :closable="false" show-icon title="成员列表已返回当前角色关系；编辑、启停、重置密码及角色分配操作尚未接入本页面。" />
    <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="loadUsers">重新加载</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="登录账号、认证用户 ID、姓名或成员编号" aria-label="用户关键词"><template #prefix><Search :size="16" /></template></el-input>
        <el-select v-model="filters.status" clearable placeholder="全部状态" aria-label="用户状态"><el-option label="正常" value="ACTIVE" /><el-option label="停用" value="INACTIVE" /></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>
    <section class="surface-panel table-panel">
      <header class="panel-heading"><div><h2>内部用户</h2><p>数据来自平台 IAM，未开放的操作不会在前端模拟执行。</p></div></header>
      <el-table v-loading="loading" :data="pagedRows" row-key="membershipId" empty-text="没有符合条件的内部用户">
        <el-table-column label="操作" width="100" fixed="left"><template #default><span class="secondary-text">仅查看</span></template></el-table-column>
        <el-table-column prop="displayName" label="姓名" min-width="150" />
        <el-table-column prop="username" label="登录账号" min-width="150" />
        <el-table-column prop="authUserId" label="认证用户 ID" min-width="145" />
        <el-table-column prop="memberNo" label="成员编号" min-width="170" />
        <el-table-column prop="memberType" label="成员类型" min-width="130" />
        <el-table-column label="角色" min-width="190"><template #default="{ row }"><div class="tag-list"><el-tag v-for="roleId in row.roleIds" :key="roleId" effect="plain" size="small">{{ roleLabel(roleId) }}</el-tag><span v-if="row.roleIds.length === 0" class="secondary-text">未分配</span></div></template></el-table-column>
        <el-table-column label="状态" width="100"><template #default="{ row }"><StatusBadge :status="row.status === 'ACTIVE' ? '正常' : '停用'" /></template></el-table-column>
      </el-table>
      <footer class="table-footer"><span>显示 {{ pagedRows.length }} 条，共 {{ filteredRows.length }} 条</span><el-pagination v-model:current-page="page" :page-size="pageSize" :total="filteredRows.length" layout="prev, pager, next" /></footer>
    </section>
    <el-drawer v-model="editorOpen" title="新增内部用户" size="560px" 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="认证用户 ID" required><el-input v-model="form.authUserId" placeholder="已存在的认证账号 ID" /></el-form-item>
          <el-form-item label="姓名" required><el-input v-model="form.displayName" maxlength="64" /></el-form-item>
          <el-form-item label="用户类型" required><el-input v-model="form.userType" maxlength="32" /></el-form-item>
          <el-form-item label="手机号"><el-input v-model="form.phone" /></el-form-item>
          <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>
        </div></div>
      </el-form>
      <template #footer><div class="drawer-footer"><el-button :disabled="saving" @click="editorOpen = false">取消</el-button><el-button v-if="canCreate" type="primary" :loading="saving" @click="saveUser">创建用户</el-button></div></template>
    </el-drawer>
  </div>
</template>