42 lines
1.1 KiB
Vue
Executable File
42 lines
1.1 KiB
Vue
Executable File
<template>
|
|
<div class="admin-user-search">
|
|
<div class="search">
|
|
<input v-model="q" type="text" :placeholder="$t('admin.user.name')" @keyup.enter="search" />
|
|
<button @click="search">{{ $t('admin.user.search') }}</button>
|
|
</div>
|
|
<div v-if="results.length" class="results">
|
|
<ul>
|
|
<li v-for="u in results" :key="u.id" @click="$emit('select', u)">{{ u.username }}</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import apiClient from '@/utils/axios.js';
|
|
|
|
export default {
|
|
name: 'AdminUserSearch',
|
|
emits: ['select'],
|
|
data() {
|
|
return { q: '', results: [] };
|
|
},
|
|
methods: {
|
|
async search() {
|
|
const res = await apiClient.get('/api/admin/users/search', { params: { q: this.q } });
|
|
this.results = res.data || [];
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-user-search { display: grid; gap: 8px; }
|
|
.search { display: flex; gap: 8px; }
|
|
ul { list-style: none; padding: 0; margin: 0; }
|
|
li { padding: 6px 8px; border: 1px solid #ddd; margin-bottom: 6px; cursor: pointer; }
|
|
li:hover { background: #f5f5f5; }
|
|
</style>
|
|
|
|
|