237c7802e5
Some checks failed
Deploy / deploy (push) Has been cancelled
Full-stack web application for Telegram management - Frontend: Vue 3 + Vben Admin - Backend: NestJS - Features: User management, group broadcast, statistics 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
111 lines
2.9 KiB
Vue
111 lines
2.9 KiB
Vue
<template>
|
|
<div class="accounts-page">
|
|
<el-card class="page-header">
|
|
<h1>{{ $t('accounts.title') }}</h1>
|
|
<p>{{ $t('accounts.subtitle') }}</p>
|
|
</el-card>
|
|
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-card>
|
|
<el-table :data="accounts" style="width: 100%" v-loading="loading">
|
|
<el-table-column prop="phoneNumber" :label="$t('accounts.phoneNumber')" />
|
|
<el-table-column prop="status" :label="$t('accounts.status')">
|
|
<template #default="{ row }">
|
|
<el-tag :type="getStatusType(row.status)">
|
|
{{ row.status }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="lastUsed" :label="$t('accounts.lastUsed')" />
|
|
<el-table-column prop="messagesSent" :label="$t('accounts.messagesSent')" />
|
|
<el-table-column :label="$t('accounts.actions')" width="200">
|
|
<template #default="{ row }">
|
|
<el-button size="small" @click="viewDetails(row)">
|
|
{{ $t('common.view') }}
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
:type="row.status === 'active' ? 'danger' : 'success'"
|
|
@click="toggleStatus(row)"
|
|
>
|
|
{{ row.status === 'active' ? $t('common.disable') : $t('common.enable') }}
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onMounted } from 'vue'
|
|
import { ElMessage } from 'element-plus'
|
|
import api from '@/api'
|
|
|
|
const loading = ref(false)
|
|
const accounts = ref([])
|
|
|
|
const loadAccounts = async () => {
|
|
loading.value = true
|
|
try {
|
|
const response = await api.accounts.getList()
|
|
accounts.value = response.data
|
|
} catch (error) {
|
|
ElMessage.error('Failed to load accounts')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const getStatusType = (status) => {
|
|
const types = {
|
|
active: 'success',
|
|
inactive: 'info',
|
|
banned: 'danger',
|
|
restricted: 'warning'
|
|
}
|
|
return types[status] || 'info'
|
|
}
|
|
|
|
const viewDetails = (account) => {
|
|
// Navigate to account details
|
|
}
|
|
|
|
const toggleStatus = async (account) => {
|
|
try {
|
|
const newStatus = account.status === 'active' ? 'inactive' : 'active'
|
|
await api.accounts.updateStatus(account.id, newStatus)
|
|
ElMessage.success('Account status updated')
|
|
loadAccounts()
|
|
} catch (error) {
|
|
ElMessage.error('Failed to update account status')
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadAccounts()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.accounts-page {
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 20px;
|
|
|
|
h1 {
|
|
margin: 0 0 10px 0;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: var(--el-text-color-regular);
|
|
}
|
|
}
|
|
</style> |