DEV-MERGE-LEGACY-PC-FRONTEND-2026/src/views/org/member/list.vue

<script setup lang="ts">
/**
 * 成员/班级列表页（views/org/member/list.vue）—— useListPage + ListPage（菜单「成员/班级」）。
 * 作用域纪律：institutionId/campusId 只从 useScope().toQuery() 取。
 */
import { listMembers, type MemberDTO } from '@/api/org/member';
import ListPage from '@/components/ListPage.vue';
import type { ListColumn } from '@/components/list-column';
import { useListPage } from '@/composables/use-list-page';
import { useScope } from '@/store/scope';
import { formatDateTime, formatStatus } from '@/utils/format';

const scope = useScope();

/** 关键字筛选（页面级状态） */
const keyword = ref('');
/** 人员类型筛选：'all' 哨兵（el-segmented）；'staff'/'student'/'parent' 对齐 MemberDTO.personType */
const personTypeSeg = ref<string>('all');

/** 列表状态（useListPage 收口；fetcher 并入作用域） */
const { rows, total, page, pageSize, loading, error, fetchList } = useListPage<MemberDTO>({
  fetcher: (p, ps) =>
    listMembers({
      ...scope.toQuery(),
      keyword: keyword.value || undefined,
      personType: personTypeSeg.value === 'all' ? undefined : (personTypeSeg.value as 'staff' | 'student' | 'parent'),
      page: p,
      pageSize: ps,
    }),
});

/** 人员类型中文映射 */
const personTypeText: Record<string, string> = { staff: '教职工', student: '学生', parent: '家长' };

/** 列定义 */
const columns: ListColumn<MemberDTO>[] = [
  { prop: 'realName', label: '姓名', minWidth: 120 },
  { prop: 'personType', label: '类型', minWidth: 90, formatter: (row) => personTypeText[row.personType] ?? row.personType },
  { prop: 'phone', label: '手机号', minWidth: 130 },
  { prop: 'role', label: '角色', minWidth: 120 },
  { prop: 'campusId', label: '校区', minWidth: 80, formatter: (row) => (row.campusId > 0 ? `#${row.campusId}` : '机构级') },
  { prop: 'status', label: '状态', minWidth: 90, formatter: (row) => formatStatus(row.status) },
  { prop: 'createdAt', label: '创建时间', minWidth: 150, formatter: (row) => formatDateTime(row.createdAt) },
];

function onSearch(): void {
  page.value = 1;
  void fetchList();
}

onMounted(() => {
  void fetchList();
});
</script>

<template>
  <div class="member-list">
    <ListPage
      v-model:page="page"
      v-model:page-size="pageSize"
      :rows="rows"
      :total="total"
      :loading="loading"
      :error="error"
      :columns="columns"
      @search="onSearch"
    >
      <template #toolbar>
        <el-input v-model="keyword" placeholder="搜索姓名" clearable class="toolbar-input" />
        <el-segmented
          v-model="personTypeSeg"
          :options="[{ label: '全部', value: 'all' }, { label: '教职工', value: 'staff' }, { label: '学生', value: 'student' }, { label: '家长', value: 'parent' }]"
        />
      </template>
    </ListPage>
  </div>
</template>

<style scoped>
.member-list {
  width: 100%;
}
</style>