|
| 1 | +<script lang="ts" setup> |
| 2 | +import { h, onMounted, reactive, ref } from 'vue' |
| 3 | +import { NButton, NDataTable, NTag, useDialog, useMessage } from 'naive-ui' |
| 4 | +import { Status } from './model' |
| 5 | +import { fetchGetUsers, fetchUpdateUserStatus } from '@/api' |
| 6 | +import { t } from '@/locales' |
| 7 | +
|
| 8 | +const ms = useMessage() |
| 9 | +const dialog = useDialog() |
| 10 | +const loading = ref(false) |
| 11 | +
|
| 12 | +const users = ref([]) |
| 13 | +const columns = [ |
| 14 | + { |
| 15 | + title: 'Email', |
| 16 | + key: 'email', |
| 17 | + resizable: true, |
| 18 | + width: 200, |
| 19 | + minWidth: 100, |
| 20 | + maxWidth: 200, |
| 21 | + }, |
| 22 | + { |
| 23 | + title: '注册时间', |
| 24 | + key: 'createTime', |
| 25 | + width: 220, |
| 26 | + }, |
| 27 | + { |
| 28 | + title: '验证时间', |
| 29 | + key: 'verifyTime', |
| 30 | + width: 220, |
| 31 | + }, |
| 32 | + { |
| 33 | + title: '管理员', |
| 34 | + key: 'status', |
| 35 | + width: 200, |
| 36 | + render(row: any) { |
| 37 | + if (row.root) { |
| 38 | + return h( |
| 39 | + NTag, |
| 40 | + { |
| 41 | + style: { |
| 42 | + marginRight: '6px', |
| 43 | + }, |
| 44 | + type: 'info', |
| 45 | + bordered: false, |
| 46 | + }, |
| 47 | + { |
| 48 | + default: () => 'Admin', |
| 49 | + }, |
| 50 | + ) |
| 51 | + } |
| 52 | + return '-' |
| 53 | + }, |
| 54 | + }, |
| 55 | + { |
| 56 | + title: '状态', |
| 57 | + key: 'status', |
| 58 | + width: 200, |
| 59 | + render(row: any) { |
| 60 | + return Status[row.status] |
| 61 | + }, |
| 62 | + }, |
| 63 | + { |
| 64 | + title: 'Action', |
| 65 | + key: '_id', |
| 66 | + width: 200, |
| 67 | + render(row: any) { |
| 68 | + const actions: any[] = [] |
| 69 | + if (row.root) |
| 70 | + return actions |
| 71 | +
|
| 72 | + if (row.status === Status.Normal) { |
| 73 | + actions.push(h( |
| 74 | + NButton, |
| 75 | + { |
| 76 | + size: 'small', |
| 77 | + type: 'error', |
| 78 | + onClick: () => handleUpdateUserStatus(row._id, Status.Deleted), |
| 79 | + }, |
| 80 | + { default: () => t('chat.deleteUser') }, |
| 81 | + )) |
| 82 | + } |
| 83 | + if (row.status === Status.PreVerify || row.status === Status.AdminVerify) { |
| 84 | + actions.push(h( |
| 85 | + NButton, |
| 86 | + { |
| 87 | + size: 'small', |
| 88 | + type: 'info', |
| 89 | + onClick: () => handleUpdateUserStatus(row._id, Status.Normal), |
| 90 | + }, |
| 91 | + { default: () => t('chat.verifiedUser') }, |
| 92 | + )) |
| 93 | + } |
| 94 | + return actions |
| 95 | + }, |
| 96 | + }, |
| 97 | +] |
| 98 | +const pagination = reactive ({ |
| 99 | + page: 1, |
| 100 | + pageSize: 25, |
| 101 | + pageCount: 1, |
| 102 | + itemCount: 1, |
| 103 | + prefix({ itemCount }: { itemCount: number | undefined }) { |
| 104 | + return `Total is ${itemCount}.` |
| 105 | + }, |
| 106 | + showSizePicker: true, |
| 107 | + pageSizes: [25, 50, 100], |
| 108 | + onChange: (page: number) => { |
| 109 | + pagination.page = page |
| 110 | + handleGetUsers(pagination.page) |
| 111 | + }, |
| 112 | + onUpdatePageSize: (pageSize: number) => { |
| 113 | + pagination.pageSize = pageSize |
| 114 | + pagination.page = 1 |
| 115 | + handleGetUsers(pagination.page) |
| 116 | + }, |
| 117 | +}) |
| 118 | +
|
| 119 | +async function handleGetUsers(page: number) { |
| 120 | + if (loading.value) |
| 121 | + return |
| 122 | + users.value.length = 0 |
| 123 | + loading.value = true |
| 124 | + const size = pagination.pageSize |
| 125 | + const data = (await fetchGetUsers(page, size)).data |
| 126 | + data.users.forEach((user: never) => { |
| 127 | + users.value.push(user) |
| 128 | + }) |
| 129 | + pagination.page = page |
| 130 | + pagination.pageCount = data.total / size + (data.total % size === 0 ? 0 : 1) |
| 131 | + pagination.itemCount = data.total |
| 132 | + loading.value = false |
| 133 | +} |
| 134 | +
|
| 135 | +async function handleUpdateUserStatus(userId: string, status: Status) { |
| 136 | + if (status === Status.Deleted) { |
| 137 | + dialog.warning({ |
| 138 | + title: t('chat.deleteUser'), |
| 139 | + content: t('chat.deleteUserConfirm'), |
| 140 | + positiveText: t('common.yes'), |
| 141 | + negativeText: t('common.no'), |
| 142 | + onPositiveClick: async () => { |
| 143 | + await fetchUpdateUserStatus(userId, status) |
| 144 | + ms.info('OK') |
| 145 | + await handleGetUsers(pagination.page) |
| 146 | + }, |
| 147 | + }) |
| 148 | + } |
| 149 | + else { |
| 150 | + await fetchUpdateUserStatus(userId, status) |
| 151 | + ms.info('OK') |
| 152 | + await handleGetUsers(pagination.page) |
| 153 | + } |
| 154 | +} |
| 155 | +
|
| 156 | +onMounted(async () => { |
| 157 | + await handleGetUsers(pagination.page) |
| 158 | +}) |
| 159 | +</script> |
| 160 | + |
| 161 | +<template> |
| 162 | + <div class="p-4 space-y-5 min-h-[200px]"> |
| 163 | + <div class="space-y-6"> |
| 164 | + <NDataTable |
| 165 | + ref="table" |
| 166 | + remote |
| 167 | + :loading="loading" |
| 168 | + :row-key="(rowData) => rowData._id" |
| 169 | + :columns="columns" |
| 170 | + :data="users" |
| 171 | + :pagination="pagination" |
| 172 | + :max-height="444" |
| 173 | + striped |
| 174 | + @update:page="handleGetUsers" |
| 175 | + /> |
| 176 | + </div> |
| 177 | + </div> |
| 178 | +</template> |
0 commit comments