feat: Add device group

src/api/device_group.js

@@ -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

@@ -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

@@ -504,5 +504,8 @@
   },
   "Result": {
     "One": "Result"
+  },
+  "DeviceGroupManage": {
+    "One": "Device Group Manage"
   }
 }

src/utils/i18n/zh_CN.json

@@ -523,5 +523,8 @@
   },
   "Result": {
     "One": "结果"
+  },
+  "DeviceGroupManage": {
+    "One": "设备组管理"
   }
 }

src/views/group/deviceGroupList.vue

@@ -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

@@ -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: '',