diff --git a/src/api/users.js b/src/api/users.js index ed985cf0d8e992640875ae4c53cb4d421618a139..69a8ee14b0e729b76ac9d0925440f29ddc1dfe9a 100644 --- a/src/api/users.js +++ b/src/api/users.js @@ -1,8 +1,8 @@ import request from '@/utils/request' -export async function fetchUsers(page = 1) { +export async function fetchUsers(page = 1, page_size) { return await request({ - url: `/api/pleroma/admin/users?page=${page}`, + url: `/api/pleroma/admin/users?page=${page}&page_size=${page_size}`, method: 'get' }) } @@ -14,9 +14,9 @@ export async function toggleUserActivation(nickname) { }) } -export async function searchUsers(query) { +export async function searchUsers(query, page = 1, page_size) { return await request({ - url: `/api/pleroma/admin/users/search?query=${query}`, + url: `/api/pleroma/admin/users/search?query=${query}&page=${page}&page_size=${page_size}`, method: 'get' }) } diff --git a/src/store/modules/user.js b/src/store/modules/user.js index 01dfb497b48a571962cf72fcbb75e16c09c96010..095e47f018341e49bfdf6144ee279f9ebe665e3b 100644 --- a/src/store/modules/user.js +++ b/src/store/modules/user.js @@ -4,6 +4,7 @@ import { getToken, setToken, removeToken } from '@/utils/auth' const user = { state: { user: '', + id: '', status: '', code: '', token: getToken(), @@ -40,6 +41,9 @@ const user = { }, SET_ROLES: (state, roles) => { state.roles = roles + }, + SET_ID: (state, id) => { + state.id = id } }, @@ -74,6 +78,7 @@ const user = { } commit('SET_NAME', data.name) + commit('SET_ID', data.id) commit('SET_AVATAR', data.profile_image_url) commit('SET_INTRODUCTION', '') resolve(response) @@ -129,6 +134,7 @@ const user = { const data = response.data commit('SET_ROLES', data.roles) commit('SET_NAME', data.name) + commit('SET_ID', data.id) commit('SET_AVATAR', data.avatar) commit('SET_INTRODUCTION', data.introduction) dispatch('GenerateRoutes', data) // 动æ€ä¿®æ”¹æƒé™åŽ é‡ç»˜ä¾§è¾¹èœå• diff --git a/src/store/modules/users.js b/src/store/modules/users.js index 69c27f7637d8aa54c8bc4e9caec683b35989c1bc..98dd98ae84e0582364b00144fa14122499c7568c 100644 --- a/src/store/modules/users.js +++ b/src/store/modules/users.js @@ -3,7 +3,10 @@ import { fetchUsers, toggleUserActivation, searchUsers } from '@/api/users' const user = { state: { fetchedUsers: [], - loading: true + loading: true, + searchQuery: '', + totalUsersCount: 0, + pageSize: 2 }, mutations: { SET_USERS: (state, users) => { @@ -26,31 +29,48 @@ const user = { }, SET_PAGE_SIZE: (state, pageSize) => { state.pageSize = pageSize + }, + SET_SEARCH_QUERY: (state, query) => { + state.searchQuery = query } }, actions: { - async FetchUsers({ commit }, page = 1) { - const response = await fetchUsers(page) + async FetchUsers({ commit }, { page, page_size }) { + const response = await fetchUsers(page, page_size) + + commit('SET_LOADING', true) - commit('SET_USERS', response.data.users) - commit('SET_COUNT', response.data.count) - commit('SET_PAGE_SIZE', response.data.page_size) - commit('SET_LOADING', false) + loadUsers(commit, response.data) }, async ToggleUserActivation({ commit }, nickname) { const response = await toggleUserActivation(nickname) commit('SWAP_USER', response.data) }, - async SearchUsers({ commit, dispatch }, searchValue) { - if (searchValue.length === 0) { - dispatch('FetchUsers') + async SearchUsers({ commit, dispatch }, { query, page, page_size }) { + if (query.length === 0) { + // console.log(page) + // console.log(query) + // console.log(page_size) + commit('SET_SEARCH_QUERY', query) + dispatch('FetchUsers', { page, page_size: 2 }) } else { - const response = await searchUsers(searchValue) - commit('SET_USERS', response.data.users) + commit('SET_LOADING', true) + commit('SET_SEARCH_QUERY', query) + + const response = await searchUsers(query, page, page_size) + + loadUsers(commit, response.data) } } } } +const loadUsers = (commit, { users, count, page_size }) => { + commit('SET_USERS', users) + commit('SET_COUNT', count) + commit('SET_PAGE_SIZE', page_size) + commit('SET_LOADING', false) +} + export default user diff --git a/src/views/users/index.vue b/src/views/users/index.vue index 62aba6b663800e82b171722b6b710d210d9478a7..e84d00888b3d148f5d0b60f426f22e8fc7cac7f9 100644 --- a/src/views/users/index.vue +++ b/src/views/users/index.vue @@ -3,7 +3,7 @@ <h1>Users</h1> <el-input placeholder="Search" class="search" @input="handleDebounceSearchInput"/> <el-table v-loading="loading" :data="users" style="width: 100%"> - <el-table-column prop="id" label="ID" width="100"/> + <el-table-column prop="id" label="ID" width="180"/> <el-table-column prop="nickname" label="Name"/> <el-table-column label="Status"> <template slot-scope="scope"> @@ -15,19 +15,18 @@ <el-table-column fixed="right" label="Actions"> <template slot-scope="scope"> <el-button - v-if="scope.row.deactivated" + v-if="showDeactivatedButton(scope.row.id)" type="text" size="small" @click="handleDeactivate(scope.row)" - >Activate</el-button> - <el-button v-else type="text" size="small" @click="handleDeactivate(scope.row)">Deactivate</el-button> + >{{ scope.row.deactivated ? 'Activate' : 'Deactivate' }}</el-button> </template> </el-table-column> </el-table> <div v-if="!loading" class="pagination"> <el-pagination :total="usersCount" - :page-size="pageSize" + :page-size.sync="pageSize" background layout="prev, pager, next" @current-change="handlePageChange" @@ -57,18 +56,28 @@ export default { }, created() { this.handleDebounceSearchInput = debounce((query) => { - this.$store.dispatch('SearchUsers', query) + this.$store.dispatch('SearchUsers', { query, page: 1, page_size: 2 }) }, 500) }, mounted: function() { - this.$store.dispatch('FetchUsers') + this.$store.dispatch('FetchUsers', { page: 1, page_size: 2 }) }, methods: { handleDeactivate({ nickname }) { this.$store.dispatch('ToggleUserActivation', nickname) }, handlePageChange(page) { - this.$store.dispatch('FetchUsers', page) + const searchQuery = this.$store.state.users.searchQuery + if (searchQuery === '') { + this.$store.dispatch('FetchUsers', { page, page_size: 2 }) + } else { + console.log(searchQuery) + console.log(page) + this.$store.dispatch('SearchUsers', { query: searchQuery, page, page_size: 2 }) + } + }, + showDeactivatedButton(id) { + return this.$store.state.user.id !== id } } } @@ -81,7 +90,7 @@ export default { } .pagination { - margin: 25px 0 0; + margin: 25px 0; text-align: center; }