add MyPeer for user
This commit is contained in:
Tao Chen
@@ -75,6 +75,13 @@ export function myOauth () {
|
||||
})
|
||||
}
|
||||
|
||||
export function myPeer (params) {
|
||||
return request({
|
||||
url: '/user/myPeer',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function groupUsers (data) {
|
||||
return request({
|
||||
url: '/user/groupUsers',
|
||||
|
||||
+7
-1
@@ -58,9 +58,15 @@ export const asyncRoutes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'MyInfo',
|
||||
meta: { title: 'Info', icon: 'User' /*keepAlive: true*/ },
|
||||
meta: { title: 'Userinfo', icon: 'User' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/info.vue'),
|
||||
},
|
||||
{
|
||||
path: 'peer',
|
||||
name: 'MyPeer',
|
||||
meta: { title: 'MyPeer', icon: 'Monitor' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/peer/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'address_book_collection',
|
||||
name: 'MyAddressBookCollection',
|
||||
|
||||
@@ -460,5 +460,14 @@
|
||||
},
|
||||
"Email": {
|
||||
"One": "邮箱"
|
||||
},
|
||||
"MyPeer": {
|
||||
"One": "我的设备"
|
||||
},
|
||||
"View": {
|
||||
"One": "查看"
|
||||
},
|
||||
"Information": {
|
||||
"One": "信息"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,367 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="150px">
|
||||
<el-form-item label="ID">
|
||||
<el-input v-model="listQuery.id" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hostname')">
|
||||
<el-input v-model="listQuery.hostname" clearable/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('LastOnlineTime')">
|
||||
<el-select v-model="listQuery.time_ago" clearable>
|
||||
<el-option
|
||||
v-for="item in timeFilters"
|
||||
:key="item.value"
|
||||
:label="item.text"
|
||||
:value="item.value"
|
||||
:disabled="item.value === 0"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item >
|
||||
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
|
||||
<el-button type="success" @click="toExport">{{ T('Export') }}</el-button>
|
||||
<el-button type="danger" @click="toBatchDelete">{{ T('BatchDelete') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border size="small" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center"/>
|
||||
<el-table-column prop="id" label="ID" align="center" width="150">
|
||||
<template #default="{row}">
|
||||
<span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="cpu" label="CPU" align="center" width="100" show-overflow-tooltip/>
|
||||
<el-table-column prop="hostname" :label="T('Hostname')" align="center" width="120"/>
|
||||
<el-table-column prop="memory" :label="T('Memory')" align="center" width="120"/>
|
||||
<el-table-column prop="os" :label="T('Os')" align="center" width="120" show-overflow-tooltip/>
|
||||
<el-table-column prop="last_online_time" :label="T('LastOnlineTime')" align="center" min-width="120">
|
||||
<template #default="{row}">
|
||||
<div class="last_oline_time">
|
||||
<span> {{ row.last_online_time ? timeAgo(row.last_online_time * 1000) : '-' }}</span> <span class="dot" :class="{red: timeDis(row.last_online_time) >= 60, green: timeDis(row.last_online_time)< 60}"></span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="last_online_ip" :label="T('LastOnlineIp')" align="center" min-width="120"/>
|
||||
<el-table-column prop="username" :label="T('Username')" align="center" width="120"/>
|
||||
<el-table-column prop="uuid" :label="T('Uuid')" align="center" width="120" show-overflow-tooltip/>
|
||||
<el-table-column prop="version" :label="T('Version')" align="center" width="80"/>
|
||||
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center" width="150"/>
|
||||
<el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center" width="150"/>
|
||||
<el-table-column :label="T('Actions')" align="center" width="500" class-name="table-actions" fixed="right">
|
||||
<template #default="{row}">
|
||||
<el-button type="success" @click="connectByClient(row.id)">{{ T('Link') }}</el-button>
|
||||
<el-button v-if="appStore.setting.appConfig.web_client" type="success" @click="toWebClientLink(row)">Web Client</el-button>
|
||||
<el-button type="primary" @click="toAddressBook(row)">{{ T('AddToAddressBook') }}</el-button>
|
||||
<el-button @click="toView(row)">{{ T('View') }}</el-button>
|
||||
<el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" :title="T('Information')" width="800" :style="{ textAlign: 'center' }" >
|
||||
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
|
||||
<el-form-item label="ID" prop="id" >
|
||||
<el-input v-model="formData.id" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Username')" prop="username">
|
||||
<el-input v-model="formData.username" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hostname')" prop="hostname">
|
||||
<el-input v-model="formData.hostname" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="CPU" prop="cpu">
|
||||
<el-input v-model="formData.cpu" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Memory')" prop="memory">
|
||||
<el-input v-model="formData.memory" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Os')" prop="os">
|
||||
<el-input v-model="formData.os" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Uuid')" prop="uuid">
|
||||
<el-input v-model="formData.uuid" disabled></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Version')" prop="version">
|
||||
<el-input v-model="formData.version" disabled></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="ABFormVisible" width="800" :title="T('Create')">
|
||||
<el-form class="dialog-form" ref="form" :model="ABFormData" label-width="120px">
|
||||
<el-form-item :label="T('Owner')" prop="user_ids" required>
|
||||
<el-select v-model="ABFormData.user_ids" multiple>
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="ID" prop="id" required>
|
||||
<el-input v-model="ABFormData.id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Username')" prop="username">
|
||||
<el-input v-model="ABFormData.username"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Alias')" prop="alias">
|
||||
<el-input v-model="ABFormData.alias"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Hostname')" prop="hostname">
|
||||
<el-input v-model="ABFormData.hostname"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item :label="T('Platform')" prop="platform">
|
||||
<el-select v-model="ABFormData.platform">
|
||||
<el-option
|
||||
v-for="item in ABPlatformList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="T('Tags')" prop="tags">
|
||||
<el-select v-model="ABFormData.tags" multiple>
|
||||
<el-option
|
||||
v-for="item in tagList"
|
||||
:key="item.name"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="ABFormVisible = false">{{ T('Cancel') }}</el-button>
|
||||
<el-button @click="ABSubmit" type="primary">{{ T('Submit') }}</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
|
||||
import { batchRemove, remove } from '@/api/peer'
|
||||
import { myPeer } from '@/api/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { toWebClientLink } from '@/utils/webclient'
|
||||
import { T } from '@/utils/i18n'
|
||||
import { timeAgo } from '@/utils/time'
|
||||
import { jsonToCsv, downBlob } from '@/utils/file'
|
||||
import { useRepositories as useABRepositories } from '@/views/address_book/index'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { list as fetchTagList } from '@/api/tag'
|
||||
import { batchCreate } from '@/api/address_book'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { connectByClient } from '@/utils/peer'
|
||||
import { CopyDocument } from '@element-plus/icons'
|
||||
import { handleClipboard } from '@/utils/clipboard'
|
||||
|
||||
const appStore = useAppStore()
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
time_ago: null,
|
||||
id: '',
|
||||
hostname: '',
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await myPeer(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
|
||||
confirmButtonText: T('Confirm'),
|
||||
cancelButtonText: T('Cancel'),
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ row_id: row.row_id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
getList()
|
||||
}
|
||||
}
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
row_id: 0,
|
||||
cpu: '',
|
||||
hostname: '',
|
||||
id: '',
|
||||
memory: '',
|
||||
os: '',
|
||||
username: '',
|
||||
uuid: '',
|
||||
version: '',
|
||||
})
|
||||
|
||||
const toView = (row) => {
|
||||
formVisible.value = true
|
||||
//将row中的数据赋值给formData
|
||||
Object.keys(formData).forEach(key => {
|
||||
formData[key] = row[key]
|
||||
})
|
||||
}
|
||||
|
||||
const timeDis = (time) => {
|
||||
let now = new Date().getTime()
|
||||
let after = new Date(time * 1000).getTime()
|
||||
return (now - after) / 1000
|
||||
}
|
||||
|
||||
const timeFilters = computed(() => [
|
||||
{ text: T('MinutesLess', { param: 1 }, 1), value: -60 },
|
||||
{ text: T('HoursLess', { param: 1 }, 1), value: -3600 },
|
||||
{ text: T('DaysLess', { param: 1 }, 1), value: -86400 },
|
||||
{ text: '---------', value: 0 },
|
||||
{ text: T('MinutesAgo', { param: 1 }, 1), value: 60 },
|
||||
{ text: T('HoursAgo', { param: 1 }, 1), value: 3600 },
|
||||
{ text: T('DaysAgo', { param: 1 }, 1), value: 86400 },
|
||||
{ text: T('MonthsAgo', { param: 1 }, 1), value: 2592000 },
|
||||
// { text: T('YearsAgo', { param: 1 }, 1), value: 31536000 },
|
||||
])
|
||||
|
||||
const toExport = async () => {
|
||||
const q = { ...listQuery }
|
||||
q.page_size = 10000
|
||||
q.page = 1
|
||||
const res = await list(q).catch(_ => false)
|
||||
if (res) {
|
||||
const data = res.data.list.map(item => {
|
||||
item.last_online_time = item.last_online_time ? new Date(item.last_online_time * 1000).toLocaleString() : '-'
|
||||
delete item.user_id
|
||||
delete item.user
|
||||
return item
|
||||
})
|
||||
const csv = jsonToCsv(data)
|
||||
downBlob(csv, 'peers.csv')
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
platformList: ABPlatformList,
|
||||
formVisible: ABFormVisible,
|
||||
formData: ABFormData,
|
||||
} = useABRepositories()
|
||||
const toAddressBook = (peer) => {
|
||||
ABFormData.id = peer.id
|
||||
ABFormData.username = peer.username
|
||||
ABFormData.hostname = peer.hostname
|
||||
//匹配os
|
||||
if (peer.os.indexOf('windows') !== -1) {
|
||||
ABFormData.platform = ABPlatformList.find(item => item.label === 'Windows').value
|
||||
} else if (peer.os.indexOf('linux') !== -1) {
|
||||
ABFormData.platform = ABPlatformList.find(item => item.label === 'Linux').value
|
||||
} else if (peer.os.indexOf('android') !== -1) {
|
||||
ABFormData.platform = ABPlatformList.find(item => item.label === 'Android').value
|
||||
} else if (peer.os.indexOf('mac') !== -1) {
|
||||
ABFormData.platform = ABPlatformList.find(item => item.label === 'Mac OS').value
|
||||
}
|
||||
ABFormData.uuid = peer.uuid
|
||||
ABFormVisible.value = true
|
||||
|
||||
}
|
||||
const ABSubmit = async () => {
|
||||
const res = await batchCreate(ABFormData).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
ABFormVisible.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const multipleSelection = ref([])
|
||||
const handleSelectionChange = (val) => {
|
||||
multipleSelection.value = val
|
||||
}
|
||||
const toBatchDelete = async () => {
|
||||
if (!multipleSelection.value.length) {
|
||||
ElMessage.warning(T('PleaseSelectData'))
|
||||
return false
|
||||
}
|
||||
const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('BatchDelete') }), {
|
||||
confirmButtonText: T('Confirm'),
|
||||
cancelButtonText: T('Cancel'),
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await batchRemove({ row_ids: multipleSelection.value.map(i => i.row_id) }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success(T('OperationSuccess'))
|
||||
getList()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-query .el-select {
|
||||
--el-select-width: 180px;
|
||||
}
|
||||
|
||||
.last_oline_time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
display: block;
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
|
||||
&.red {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
&.green {
|
||||
background-color: green;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user