ApiServer-Web-admin_dashboard_pc/src/components/UserSelector/index.vue

<template>
  <el-dialog
    :model-value="visible"
    title="选择用户"
    width="800px"
    class="user-selector-dialog"
    append-to-body
    @update:model-value="handleVisibleChange"
  >
    <!-- 搜索栏 -->
    <div class="selector-search">
      <el-input
        v-model="searchParams.key"
        placeholder="搜索用户名或ID"
        clearable
        @keyup.enter="handleSearch"
        style="width: 300px; margin-right: 12px"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleSearch">
        <el-icon><Search /></el-icon>
        搜索
      </el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>

    <!-- 用户表格 -->
    <el-table
      v-loading="loading"
      :data="userList"
      highlight-current-row
      @current-change="handleCurrentChange"
      style="width: 100%; margin-top: 16px"
      :height="400"
    >
      <el-table-column type="index" label="序号" width="60" />
      <el-table-column prop="UserId" label="用户ID" width="100" />
      <el-table-column prop="UserName" label="用户名" min-width="150" />
      <el-table-column prop="Email" label="邮箱" min-width="180" />

    </el-table>

    <!-- 分页 -->
    <el-pagination
      v-model:current-page="searchParams.page"
      v-model:page-size="searchParams.count"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      background
      class="selector-pagination"
    />

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmSelection" :disabled="!selectedUser">
          确定选择
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { getUserList } from '@/api/admin/user'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'select'])

const loading = ref(false)
const userList = ref([])
const total = ref(0)
const selectedUser = ref(null)

const searchParams = reactive({
  key: '',
  page: 1,
  count: 10
})

// 监听 visible 变化，打开时加载数据
watch(() => props.visible, (newVal) => {
  if (newVal) {
    selectedUser.value = null
    if (userList.value.length === 0) {
      fetchUserList()
    }
  }
})

const handleVisibleChange = (val) => {
  emit('update:visible', val)
}

const closeDialog = () => {
  emit('update:visible', false)
}

const fetchUserList = async () => {
  loading.value = true
  try {
    const res = await getUserList(searchParams)
    if (res.data.code === 200) {
      userList.value = res.data.data?.data || []
      total.value = res.data.data?.all_count || 0
    }
  } catch (error) {
    console.error('获取用户列表失败:', error)
    ElMessage.error('获取用户列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  searchParams.page = 1
  fetchUserList()
}

const handleReset = () => {
  searchParams.key = ''
  searchParams.page = 1
  fetchUserList()
}

const handleCurrentChange = (row) => {
  selectedUser.value = row
}

const handleSizeChange = (size) => {
  searchParams.count = size
  fetchUserList()
}

const handlePageChange = (page) => {
  searchParams.page = page
  fetchUserList()
}

const confirmSelection = () => {
  if (!selectedUser.value) {
    ElMessage.warning('请选择一个用户')
    return
  }
  emit('select', selectedUser.value)
  closeDialog()
}
</script>

<style scoped>
.selector-search {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.selector-pagination {
  margin-top: 16px;
  justify-content: flex-end;
}

:deep(.el-table__row) {
  cursor: pointer;
}

:deep(.el-table__row):hover {
  background-color: #f5f7fa;
}

:deep(.current-row) {
  background-color: var(--el-color-primary-light-8) !important;
  color: var(--el-color-primary);
  font-weight: bold;
}
</style>