服务器管理开发

src/api/request.ts

@@ -5,7 +5,8 @@ import { useUserStore } from "@/store/modules/user"
 const service = axios.create({
     // 默认请求地址，根据环境的不同可在.env 文件中进行修改
     // baseURL: import.meta.env.VUE_APP_BASE_
-    baseURL: "http://192.168.123.216:8001",
+    // baseURL: "http://192.168.123.216:8001",
+    baseURL: "http://localhost:8001",
     // 设置接口访问超时时间
     timeout: 3000000, // request timeout，
     // 跨域时候允许携带凭证

src/api/server.ts

@@ -0,0 +1,35 @@
+import request from './request'
+
+
+export default {
+    getAll(data) {
+        return request({
+            url: '/server/all/' + data,
+            method: 'get'
+        });
+    },
+
+    update(data) {
+        return request({
+            url: '/server/update',
+            method: 'put',
+            data
+        });
+    },
+
+    updateBatch(data) {
+        return request({
+            url: '/server/update_batch',
+            method: 'put',
+            data
+        });
+    },
+
+    delete(data) {
+        return request({
+            url: '/server/delete',
+            method: 'delete',
+            data
+        });
+    }
+}

src/views/server/gatewayTable/index.vue

@@ -23,8 +23,8 @@
     <el-dialog v-model="dialogVisible" :title='title' width="50%">
       <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
         :size="formSize">
-        <el-form-item label="ID" prop="id">
-          <el-input readonly :value="ruleForm.id" />
+        <el-form-item label="ID" prop="_id">
+          <el-input readonly :value="ruleForm._id" />
         </el-form-item>
         <el-form-item label="状态" prop="state">
           <el-radio-group v-model="ruleForm.state">
@@ -43,27 +43,41 @@
   </div>
 </template>
 <script lang="ts" setup name="comprehensive">
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick, onBeforeMount } from 'vue'
 import * as dayjs from 'dayjs'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { FormInstance } from 'element-plus'
+import serverApi from '@/api/server'
+
 const loading = ref(true)
 const appContainer = ref(null)
 import ServerPropTable from '@/components/Table/ServerPropTable/index.vue'
-const data = []
-for (let i = 0; i < 100; i++) {
-  data.push({
-    id: i + 1,
-    f_host: '0.0.0.0',
-    f_port: 2000 + i,
-    b_host: '127.0.0.1',
-    b_port: 3000 + i,
-    state: i % 2 ? 1 : 0
+import { da, el } from 'element-plus/es/locale'
+// const data = []
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     _id: i + 1,
+//     f_host: '0.0.0.0',
+//     f_port: 2000 + i,
+//     b_host: '127.0.0.1',
+//     b_port: 3000 + i,
+//     state: i % 2 ? 1 : 0
+//   })
+// }
+// console.log(data)
+
+const data = ref([])
+
+onBeforeMount(()=> {
+    serverApi.getAll("gateway").then(res => {
+    data.value = res.data.result;
+    console.log(data)
   })
-}
+})
+
 const column = [
   { type: 'selection', width: 60, fixed: 'left' },
-  { name: 'id', label: 'ID', inSearch: true, valueType: 'input', width: 80 },
+  { name: '_id', label: 'ID', inSearch: true, valueType: 'input', width: 80 },
   { name: 'f_host', label: '前端主机'},
   { name: 'f_port', label: '前端端口'},
   { name: 'b_host', label: '后端主机'},
@@ -114,8 +128,20 @@ const handleClose = async (done: () => void) => {
   await ruleFormRef.value.validate((valid, fields) => {
     if (valid) {
       list.value.forEach((item) => {
-        if (item.id === rowObj.value.id) {
-          item.state = ruleForm.state
+        if (item._id === rowObj.value._id) {
+          let updateParams = reactive({
+            serverName: "gateway",
+            serverId: ruleForm._id,
+            update: ruleForm
+          })
+          serverApi.update(updateParams).then(res=>{
+              if (res.data.result > 0) {
+                item.state = ruleForm.state
+                return ElMessage.success('修改成功')
+              } else {
+                return ElMessage.error('修改失败')
+              }
+          })
         }
       })
       dialogVisible.value = false
@@ -149,7 +175,7 @@ const selectionChange = (val) => {
 const edit = (row) => {
   rowObj.value = row
   dialogVisible.value = true
-  ruleForm.id = row.id
+  ruleForm._id = row._id
   ruleForm.state = row.state
 }
 
@@ -162,7 +188,11 @@ const del = (row) => {
     draggable: true,
   })
     .then(() => {
-      list.value = list.value.filter((item) => item.id !== row.id)
+      list.value = list.value.filter((item) => item._id !== row._id)
+      let deleteParams = reactive({
+        serverId: row._id
+      })
+      serverApi.delete(deleteParams)
       ElMessage.success('删除成功')
       loading.value = true
       setTimeout(() => {