ralfu/rustdesk-api-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add device group

Browse Source
This commit is contained in:
lejianwen
2025-02-23 21:34:56 +08:00
parent c20592620d
commit b1ebedefc6
6 changed files with 229 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/device_group.js
+38
View File
@@ -0,0 +1,38 @@
import request from '@/utils/request'
export function list (params) {
return request({
url: '/device_group/list',
params,
})
}
export function detail (id) {
return request({
url: `/device_group/detail/${id}`,
})
}
export function create (data) {
return request({
url: '/device_group/create',
method: 'post',
data,
})
}
export function update (data) {
return request({
url: '/device_group/update',
method: 'post',
data,
})
}
export function remove (data) {
return request({
url: '/device_group/delete',
method: 'post',
data,
})
}
src/router/index.js
+6
View File
@@ -118,6 +118,12 @@ export const asyncRoutes = [
meta: { title: 'GroupManage', icon: 'ChatRound' /*keepAlive: true*/ },
component: () => import('@/views/group/index.vue'),
},
{
path: 'deviceGroup',
name: 'DeviceGroup',
meta: { title: 'DeviceGroupManage', icon: 'ChatRound' /*keepAlive: true*/ },
component: () => import('@/views/group/deviceGroupList.vue'),
},
{
path: 'index',
name: 'UserList',
src/utils/i18n/en.json
+3
View File
@@ -504,5 +504,8 @@
},
"Result": {
"One": "Result"
},
"DeviceGroupManage": {
"One": "Device Group Manage"
}
}
src/utils/i18n/zh_CN.json
+3
View File
@@ -523,5 +523,8 @@
},
"Result": {
"One": "结果"
},
"DeviceGroupManage": {
"One": "设备组管理"
}
}
src/views/group/deviceGroupList.vue
+138
View File
@@ -0,0 +1,138 @@
<template>
<div>
<el-card class="list-query" shadow="hover">
<el-form inline label-width="80px">
<!-- <el-form-item label="名称">
<el-input v-model="listQuery.name"></el-input>
</el-form-item>-->
<el-form-item>
<el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
<el-button type="danger" @click="toAdd">{{ T('Add') }}</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>
<el-table-column prop="id" label="ID" align="center"></el-table-column>
<el-table-column prop="name" :label="T('Name')" align="center"/>
<el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
<el-table-column prop="updated_at" :label="T('UpdatedAt')" align="center"/>
<el-table-column :label="T('Actions')" align="center">
<template #default="{row}">
<el-button @click="toEdit(row)">{{ T('Edit') }}</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="!formData.id?T('Create'):T('Update')" width="800">
<el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
<el-form-item :label="T('Name')" prop="name" required>
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
<el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script setup>
import { onMounted, reactive, watch, ref, onActivated } from 'vue'
import { list, create, update, detail, remove } from '@/api/device_group'
import { ElMessage, ElMessageBox } from 'element-plus'
import { T } from '@/utils/i18n'
const listRes = reactive({
list: [], total: 0, loading: false,
})
const listQuery = reactive({
page: 1,
page_size: 10,
})
const getList = async () => {
listRes.loading = true
const res = await list(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({ id: 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({
id: 0,
name: '',
type: 1,
})
const toEdit = (row) => {
formVisible.value = true
formData.id = row.id
formData.name = row.name
formData.type = row.type
}
const toAdd = () => {
formVisible.value = true
formData.id = 0
formData.name = ''
formData.type = 1
}
const submit = async () => {
const api = formData.id ? update : create
const res = await api(formData).catch(_ => false)
if (res) {
ElMessage.success(T('OperationSuccess'))
formVisible.value = false
getList()
}
}
</script>
<style scoped lang="scss">
</style>
src/views/peer/index.vue
+41
View File
@@ -49,6 +49,12 @@
</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="group_id" :label="T('Group')" align="center" width="120">
<template #default="{row}">
<span v-if="row.group_id"> <el-tag>{{ groupListRes.list?.find(g => g.id === row.group_id)?.name }} </el-tag> </span>
<span v-else> - </span>
</template>
</el-table-column>
<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"/>
@@ -78,6 +84,16 @@
<el-form-item label="ID" prop="id" required>
<el-input v-model="formData.id"></el-input>
</el-form-item>
<el-form-item :label="T('Group')" prop="group_id">
<el-select v-model="formData.group_id">
<el-option
v-for="item in groupListRes.list"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item :label="T('Username')" prop="username">
<el-input v-model="formData.username"></el-input>
</el-form-item>
@@ -151,6 +167,7 @@
<script setup>
import { computed, onActivated, onMounted, reactive, ref, watch } from 'vue'
import { batchRemove, create, list, remove, update } from '@/api/peer'
import { list as groupList } from '@/api/device_group'
import { ElMessage, ElMessageBox } from 'element-plus'
import { toWebClientLink } from '@/utils/webclient'
import { T } from '@/utils/i18n'
@@ -166,6 +183,29 @@
import createABForm from '@/views/peer/createABForm.vue'
const appStore = useAppStore()
//group
const groupListRes = reactive({
list: [], total: 0, loading: false,
})
const groupListQuery = reactive({
page: 1,
page_size: 999,
})
const getGroupList = async () => {
groupListRes.loading = true
const res = await groupList(groupListQuery).catch(_ => false)
groupListRes.loading = false
if (res) {
groupListRes.list = res.data.list
groupListRes.total = res.data.total
}
}
onMounted(getGroupList)
//
const listRes = reactive({
list: [], total: 0, loading: false,
})
@@ -220,6 +260,7 @@
const formVisible = ref(false)
const formData = reactive({
row_id: 0,
group_id: null,
cpu: '',
hostname: '',
id: '',