intelligent-etmf-system-admin/src/views/project/management/detail/pages/centerMember.vue

<template>
  <div class="center-member-page">
    <div class="header-section">
      <h3>{{ t('project.management.detail.menu.centerMember') }}</h3>
    </div>
    <el-divider />

    <!-- 搜索表单 -->
    <el-form :model="queryParams" :inline="true" class="search-form">
      <el-form-item label="成员昵称">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入成员昵称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="中心">
        <el-input
          v-model="queryParams.center"
          placeholder="请输入中心名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表格 -->
    <el-card shadow="never">
      <el-table
        v-loading="loading"
        border
        :data="memberList"
        style="width: 100%"
      >
        <el-table-column label="序号" align="center" prop="id" width="80" />
        <el-table-column label="姓名" align="center" prop="name" width="120" />
        <el-table-column label="手机号" align="center" prop="phoneNumber" width="150" />
        <el-table-column label="部门" align="center" prop="dept" width="200" show-overflow-tooltip />
        <el-table-column label="中心" align="center" prop="centers" min-width="200" show-overflow-tooltip />
        <el-table-column label="时间" align="center" prop="time" width="180" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { inject, ref, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { queryCenterMember } from '@/api/project/management';
import { CenterMemberVO, CenterMemberQuery } from '@/api/project/management/types';

const { t } = useI18n();

// 接收从父组件传递的项目ID
const projectId = inject<any>('projectId');

// 列表数据
const memberList = ref<CenterMemberVO[]>([]);
const loading = ref(true);
const total = ref(0);

// 查询参数
const queryParams = ref<CenterMemberQuery>({
  pageNum: 1,
  pageSize: 10,
  projectId: projectId?.value || 0,
  name: '',
  center: ''
});

/** 查询中心成员列表 */
const getList = async () => {
  loading.value = true;
  try {
    queryParams.value.projectId = projectId?.value || 0;
    const res = await queryCenterMember(queryParams.value);
    memberList.value = res.rows;
    total.value = res.total;
  } catch (error) {
    console.error('Failed to fetch center members:', error);
  } finally {
    loading.value = false;
  }
};

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    projectId: projectId?.value || 0,
    name: '',
    center: ''
  };
  getList();
};

// 组件挂载时加载数据
onMounted(() => {
  getList();
});
</script>

<style scoped>
.center-member-page {
  height: 100%;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.search-form {
  margin-bottom: 16px;
}
</style>