服务器开发

src/api/request.ts

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

src/api/server.ts

@@ -9,6 +9,14 @@ export default {
         });
     },
 
+    query(data) {
+        return request({
+            url: '/server/query',
+            method: 'post',
+            data
+        });
+    },
+
     update(data) {
         return request({
             url: '/server/update',
@@ -31,5 +39,13 @@ export default {
             method: 'delete',
             data
         });
+    },
+
+    deleteBatch(data) {
+        return request({
+            url: '/server/delete_batch',
+            method: 'delete',
+            data
+        });
     }
 }

src/components/Table/ServerPropTable/index.vue

@@ -9,6 +9,9 @@
             <template v-if="item.valueType === 'input'">
               <el-input v-model="formInline[item.name]" :placeholder="`请输入${item.label}`" />
             </template>
+            <template v-if="item.valueType === 'inputNumber'">
+              <el-input v-model="formInline[item.name]" type ="number" :placeholder="`请输入${item.label}`" />
+            </template>
             <template v-if="item.valueType === 'select'">
               <el-select
                   style="width: 100%"

src/routers/modules/operation.ts

@@ -47,20 +47,6 @@ const operationRouter = [{
             name: 'whitelist',
             meta: { title: '白名单', keepAlive: true , icon: 'User'}
         },
-<<<<<<< HEAD
-        // {
-        //     path: '/operation/sendmail',
-        //     component: () => import('@/views/operation/sendmail/index.vue'),
-        //     name: 'sendmail',
-        //     meta: { title: '发送邮件', keepAlive: true , icon: 'MenuIcon'}
-        // },
-        // {
-        //     path: '/operation/notice',
-        //     component: () => import('@/views/operation/notice/index.vue'),
-        //     name: 'notice',
-        //     meta: { title: '游戏公告', keepAlive: true  , icon: 'MenuIcon'}
-        // },
-=======
         {
             path: '/operation/gmmail',
             component: () => import('@/views/operation/gmmail/index.vue'),
@@ -79,7 +65,6 @@ const operationRouter = [{
           name: 'sendcmd',
           meta: { title: '发送命令', keepAlive: true  , icon: 'Monitor'}
       },
->>>>>>> 83777844e09988e24905ecf02745f7a18b021ade
     ]
 }]
 

src/views/server/chatTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container" ref="appContainer">
     <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
-      @onSubmit="onSubmit">
+      @onSubmit="onSubmit"  @onUpdate="onUpdate">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="danger" @click="batchDelete"><el-icon>
@@ -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,44 @@
   </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,
-    host: '0.0.0.0',
-    port: 3000 + i,
-    gatewayId: 1,
-    gameIds: '101,102',
-    state: i % 2 ? 1 : 0
+// const data = []
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     id: i + 1,
+//     host: '0.0.0.0',
+//     port: 3000 + i,
+//     gatewayId: 1,
+//     gameIds: '101,102',
+//     state: i % 2 ? 1 : 0
+//   })
+// }
+
+const data = ref([])
+const serverName = "gateway"
+
+onBeforeMount(() => {
+  loadServerInfo()
+})
+
+const loadServerInfo = () => {
+  serverApi.getAll(serverName).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: 'inputNumber', width: 80 },
   { name: 'host', label: '主机'},
   { name: 'port', label: 'UDP端口'},
   { name: 'gatewayId', label: '连接网关服'},
@@ -114,8 +131,21 @@ 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: serverName,
+            _id: ruleForm._id,
+            updateValue: ruleForm
+          })
+          serverApi.update(updateParams).then(res => {
+            if (res.data.code = 200) {
+              // item.state = ruleForm.state
+              loadServerInfo()
+              return ElMessage.success('修改成功')
+            } else {
+              return ElMessage.error('修改失败')
+            }
+          })
         }
       })
       dialogVisible.value = false
@@ -137,7 +167,18 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('模拟删除成功')
+      let selectServerIds = reactive([])
+      for (let value of selectObj.value) {
+        selectServerIds.push(value._id)
+      }
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverIds: selectServerIds
+      })
+      serverApi.deleteBatch(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('批量删除成功')
+      })
       list.value = list.value.concat([])
     })
     .catch(() => { })
@@ -149,7 +190,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,8 +203,15 @@ const del = (row) => {
     draggable: true,
   })
     .then(() => {
-      list.value = list.value.filter((item) => item.id !== row.id)
-      ElMessage.success('删除成功')
+      // list.value = list.value.filter((item) => item._id !== row._id)
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverId: row._id
+      })
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -173,16 +221,32 @@ const del = (row) => {
 }
 
 const reset = () => {
+  loadServerInfo()
   loading.value = true
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
+  if (!val._id && val.state == null) {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    serverName: serverName
+  })
+  if (val._id) {
+    queryParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    queryParams.state = val.state
+  }
+  serverApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false
@@ -190,8 +254,28 @@ const onSubmit = (val) => {
 }
 
 const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.state == null) {
+    ElMessage.warning('请输入编辑内容')
+    return
+  }
+  let updateParams = reactive({
+    serverName: serverName,
+    updateValue: reactive({})
+  })
+  if (val._id) {
+    updateParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    updateParams.updateValue.state = val.state
+  }
+  serverApi.updateBatch(updateParams).then(res => {
+    if (res.data.code = 200) {
+      loadServerInfo()
+      return ElMessage.success('修改成功')
+    } else {
+      return ElMessage.error('修改失败')
+    }
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false

src/views/server/crossTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container" ref="appContainer">
     <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
-      @onSubmit="onSubmit">
+      @onSubmit="onSubmit" @onUpdate="onUpdate">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="danger" @click="batchDelete"><el-icon>
@@ -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">
@@ -44,27 +44,44 @@
   </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,
-    name: i + 1 + '区',
-    gmAddr: '127.0.0.1:3002',
-    state: i % 2,
-    gatewayId: 1,
-    gameIds: '101,102'
+// const data = []
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     id: i + 1,
+//     name: i + 1 + '区',
+//     gmAddr: '127.0.0.1:3002',
+//     state: i % 2,
+//     gatewayId: 1,
+//     gameIds: '101,102'
+//   })
+// }
+
+const data = ref([])
+const serverName = "cross"
+
+onBeforeMount(() => {
+  loadServerInfo()
+})
+
+const loadServerInfo = () => {
+  serverApi.getAll(serverName).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: 'inputNumber', width: 80 },
   { name: 'name', label: '名称'},
   { name: 'gmAddr', label: 'GM地址'},
   { name: 'gatewayId', label: '连接网关服'},
@@ -116,8 +133,21 @@ 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: serverName,
+            _id: ruleForm._id,
+            updateValue: ruleForm
+          })
+          serverApi.update(updateParams).then(res => {
+            if (res.data.code = 200) {
+              // item.state = ruleForm.state
+              loadServerInfo()
+              return ElMessage.success('修改成功')
+            } else {
+              return ElMessage.error('修改失败')
+            }
+          })
         }
       })
       dialogVisible.value = false
@@ -139,7 +169,19 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('模拟删除成功')
+      let selectServerIds = reactive([])
+      for (let value of selectObj.value) {
+        selectServerIds.push(value._id)
+      }
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverIds: selectServerIds
+      })
+      serverApi.deleteBatch(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('批量删除成功')
+      })
+
       list.value = list.value.concat([])
     })
     .catch(() => { })
@@ -151,7 +193,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
 }
 
@@ -164,8 +206,15 @@ const del = (row) => {
     draggable: true,
   })
     .then(() => {
-      list.value = list.value.filter((item) => item.id !== row.id)
-      ElMessage.success('删除成功')
+      // list.value = list.value.filter((item) => item._id !== row._id)
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverId: row._id
+      })
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -175,16 +224,32 @@ const del = (row) => {
 }
 
 const reset = () => {
+  loadServerInfo()
   loading.value = true
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
+  if (!val._id && val.state == null) {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    serverName: serverName
+  })
+  if (val._id) {
+    queryParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    queryParams.state = val.state
+  }
+  serverApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false
@@ -192,8 +257,28 @@ const onSubmit = (val) => {
 }
 
 const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.state == null) {
+    ElMessage.warning('请输入编辑内容')
+    return
+  }
+  let updateParams = reactive({
+    serverName: serverName,
+    updateValue: reactive({})
+  })
+  if (val._id) {
+    updateParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    updateParams.updateValue.state = val.state
+  }
+  serverApi.updateBatch(updateParams).then(res => {
+    if (res.data.code = 200) {
+      loadServerInfo()
+      return ElMessage.success('修改成功')
+    } else {
+      return ElMessage.error('修改失败')
+    }
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false

src/views/server/gameTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container" ref="appContainer">
     <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
-      @onSubmit="onSubmit">
+      @onSubmit="onSubmit" @onUpdate="onUpdate">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="danger" @click="batchDelete"><el-icon>
@@ -10,6 +10,7 @@
         </div>
       </template>
       <template v-slot:state="scope">{{getStateLabel(scope.row.state)}}</template>
+      <template v-slot:openTime="scope">{{getDate(scope.row.openTime)}}</template>
       <template v-slot:operation="scope">
         <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
           编辑
@@ -58,7 +59,7 @@
   </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'
@@ -81,20 +82,37 @@ import ServerPropTable from '@/components/Table/ServerPropTable/index.vue'
 // }
 
 const data = ref([])
+const serverName = "game"
 
-onBeforeMount(()=> {
-    serverApi.getAll("game").then(res => {
+// 时间戳转日期
+const getDate = (val) => {
+  if (!val) {
+    return ""
+  }
+  let now = new Date(val),
+    y = now.getFullYear(),
+    m = now.getMonth() + 1,
+    d = now.getDate()
+  return y + "-" + (m < 10 ? "0" + m : m) + "-" + (d < 10 ? "0" + d : d) + " " + now.toTimeString().substr(0, 8);
+}
+
+onBeforeMount(() => {
+  loadServerInfo()
+})
+
+const loadServerInfo = () => {
+  serverApi.getAll(serverName).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: 'inputNumber', width: 80 },
   { name: 'name', label: '名称'},
   { name: 'gmAddr', label: 'GM地址'},
-  { name: 'weight', label: '推荐权重', inSearch: true, valueType: 'input'},
+  { name: 'weight', label: '推荐权重', inSearch: true, valueType: 'inputNumber'},
   { name: 'gatewayId', label: '连接网关服'},
   {
     name: 'state',
@@ -161,15 +179,16 @@ const handleClose = async (done: () => void) => {
     if (valid) {
       list.value.forEach((item) => {
           let updateParams = reactive({
-            serverName: "game",
-            serverId: ruleForm._id,
+            serverName: serverName,
+            _id: ruleForm._id,
             update: ruleForm
           })
           serverApi.update(updateParams).then(res=>{
-              if (res.data.result > 0) {
-                item.weight = ruleForm.weight
-                item.state = ruleForm.state
-                item.openTime = ruleForm.openTime
+            if (res.data.code = 200) {
+                // item.weight = ruleForm.weight
+                // item.state = ruleForm.state
+                // item.openTime = ruleForm.openTime
+                loadServerInfo()
                 return ElMessage.success('修改成功')
               } else {
                 return ElMessage.error('修改失败')
@@ -195,7 +214,18 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('批量删除成功')
+      let selectServerIds = reactive([])
+      for (let value of selectObj.value) {
+        selectServerIds.push(value._id)
+      }
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverIds: selectServerIds
+      })
+      serverApi.deleteBatch(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('批量删除成功')
+      })
       list.value = list.value.concat([])
     })
     .catch(() => { })
@@ -222,13 +252,15 @@ 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({
-        serverName: "game",
+        serverName: serverName,
         serverId: row._id
       })
-      serverApi.delete(deleteParams)
-      ElMessage.success('删除成功')
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -242,12 +274,30 @@ const reset = () => {
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
+  if (!val._id && val.state == null && !val.weight) {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    serverName: serverName
+  })
+  if (val._id) {
+    queryParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    queryParams.state = val.state
+  }
+  if (!val.weight) {
+    queryParams.weight = val.weight
+  }
+  serverApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false
@@ -255,8 +305,34 @@ const onSubmit = (val) => {
 }
 
 const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.state == null && !val.weight && !val.openTime) {
+    ElMessage.warning('请输入编辑内容')
+    return
+  }
+  let updateParams = reactive({
+    serverName: serverName,
+    updateValue: reactive({})
+  })
+  if (val._id) {
+    updateParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    updateParams.updateValue.state = val.stage
+  }
+  if (!val.weight) {
+    updateParams.updateValue.weight = val.weight
+  }
+  if (!val.openTime) {
+    updateParams.updateValue.openTime = val.openTime.getTime()
+  }
+  serverApi.updateBatch(updateParams).then(res => {
+    if (res.data.code = 200) {
+      loadServerInfo()
+      return ElMessage.success('修改成功')
+    } else {
+      return ElMessage.error('修改失败')
+    }
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false

src/views/server/gatewayTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container" ref="appContainer">
     <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
-      @onSubmit="onSubmit">
+      @onSubmit="onSubmit" @onUpdate="onUpdate">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="danger" @click="batchDelete"><el-icon>
@@ -52,36 +52,28 @@ import serverApi from '@/api/server'
 const loading = ref(true)
 const appContainer = ref(null)
 import ServerPropTable from '@/components/Table/ServerPropTable/index.vue'
-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([])
+const serverName = "gateway"
 
-onBeforeMount(()=> {
-    serverApi.getAll("gateway").then(res => {
+onBeforeMount(() => {
+  loadServerInfo()
+})
+
+const loadServerInfo = () => {
+  serverApi.getAll(serverName).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: 'f_host', label: '前端主机'},
-  { name: 'f_port', label: '前端端口'},
-  { name: 'b_host', label: '后端主机'},
-  { name: 'b_port', label: '后端端口'},
+  { name: '_id', label: 'ID', inSearch: true, valueType: 'inputNumber', width: 80 },
+  { name: 'f_host', label: '前端主机' },
+  { name: 'f_port', label: '前端端口' },
+  { name: 'b_host', label: '后端主机' },
+  { name: 'b_port', label: '后端端口' },
   {
     name: 'state',
     label: '状态',
@@ -130,17 +122,18 @@ const handleClose = async (done: () => void) => {
       list.value.forEach((item) => {
         if (item._id === rowObj.value._id) {
           let updateParams = reactive({
-            serverName: "gateway",
-            serverId: ruleForm._id,
-            update: ruleForm
+            serverName: serverName,
+            _id: ruleForm._id,
+            updateValue: ruleForm
           })
-          serverApi.update(updateParams).then(res=>{
-              if (res.data.result > 0) {
-                item.state = ruleForm.state
-                return ElMessage.success('修改成功')
-              } else {
-                return ElMessage.error('修改失败')
-              }
+          serverApi.update(updateParams).then(res => {
+            if (res.data.code = 200) {
+              // item.state = ruleForm.state
+              loadServerInfo()
+              return ElMessage.success('修改成功')
+            } else {
+              return ElMessage.error('修改失败')
+            }
           })
         }
       })
@@ -163,7 +156,19 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('批量删除成功')
+      let selectServerIds = reactive([])
+      for (let value of selectObj.value) {
+        selectServerIds.push(value._id)
+      }
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverIds: selectServerIds
+      })
+      serverApi.deleteBatch(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('批量删除成功')
+      })
+
       list.value = list.value.concat([])
     })
     .catch(() => { })
@@ -188,13 +193,15 @@ 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({
-        serverName: "gateway",
+        serverName: serverName,
         serverId: row._id
       })
-      serverApi.delete(deleteParams)
-      ElMessage.success('删除成功')
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -204,16 +211,32 @@ const del = (row) => {
 }
 
 const reset = () => {
+  loadServerInfo()
   loading.value = true
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
+  if (!val._id && val.state == null) {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    serverName: serverName
+  })
+  if (val._id) {
+    queryParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    queryParams.state = val.state
+  }
+  serverApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false
@@ -221,8 +244,28 @@ const onSubmit = (val) => {
 }
 
 const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.state == null) {
+    ElMessage.warning('请输入编辑内容')
+    return
+  }
+  let updateParams = reactive({
+    serverName: serverName,
+    updateValue: reactive({})
+  })
+  if (val._id) {
+    updateParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    updateParams.updateValue.state = val.state
+  }
+  serverApi.updateBatch(updateParams).then(res => {
+    if (res.data.code = 200) {
+      loadServerInfo()
+      return ElMessage.success('修改成功')
+    } else {
+      return ElMessage.error('修改失败')
+    }
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false

src/views/server/loginTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container" ref="appContainer">
     <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
-      @onSubmit="onSubmit">
+      @onSubmit="onSubmit" @onUpdate="onUpdate">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
           <el-button type="danger" @click="batchDelete"><el-icon>
@@ -23,6 +23,9 @@
     <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>
         <el-form-item label="状态" prop="state">
           <el-radio-group v-model="ruleForm.state">
             <el-radio :label="0">关闭</el-radio>
@@ -40,25 +43,43 @@
   </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 ServerPropTable from '@/components/Table/ServerPropTable/index.vue'
+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,
-    gatewayId: 1,
-    gameIds: '101,102',
-    state: i % 2 ? 1 : 0
+
+// const data = []
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     id: i + 1,
+//     gatewayId: 1,
+//     gameIds: '101,102',
+//     state: i % 2 ? 1 : 0
+//   })
+// }
+
+const data = ref([])
+const serverName = "login"
+
+onBeforeMount(() => {
+  loadServerInfo()
+})
+
+const loadServerInfo = () => {
+  serverApi.getAll(serverName).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: 'inputNumber', width: 80 },
   { name: 'gatewayId', label: '连接网关服'},
   { name: 'gameIds', label: '包含游戏服'},
   {
@@ -107,8 +128,21 @@ 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: serverName,
+            _id: ruleForm._id,
+            updateValue: ruleForm
+          })
+          serverApi.update(updateParams).then(res => {
+            if (res.data.code = 200) {
+              // item.state = ruleForm.state
+              loadServerInfo()
+              return ElMessage.success('修改成功')
+            } else {
+              return ElMessage.error('修改失败')
+            }
+          })
         }
       })
       dialogVisible.value = false
@@ -130,7 +164,18 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('模拟删除成功')
+      let selectServerIds = reactive([])
+      for (let value of selectObj.value) {
+        selectServerIds.push(value._id)
+      }
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverIds: selectServerIds
+      })
+      serverApi.deleteBatch(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('批量删除成功')
+      })
       list.value = list.value.concat([])
     })
     .catch(() => { })
@@ -142,6 +187,7 @@ const selectionChange = (val) => {
 const edit = (row) => {
   rowObj.value = row
   dialogVisible.value = true
+  ruleForm._id = row._id
   ruleForm.state = row.state
 }
 
@@ -154,8 +200,15 @@ const del = (row) => {
     draggable: true,
   })
     .then(() => {
-      list.value = list.value.filter((item) => item.id !== row.id)
-      ElMessage.success('删除成功')
+      // list.value = list.value.filter((item) => item._id !== row._id)
+      let deleteParams = reactive({
+        serverName: serverName,
+        serverId: row._id
+      })
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -165,16 +218,32 @@ const del = (row) => {
 }
 
 const reset = () => {
+  loadServerInfo()
   loading.value = true
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
+  if (!val._id && val.state == null) {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    serverName: serverName
+  })
+  if (val._id) {
+    queryParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    queryParams.state = val.state
+  }
+  serverApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false
@@ -182,8 +251,28 @@ const onSubmit = (val) => {
 }
 
 const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.state == null) {
+    ElMessage.warning('请输入编辑内容')
+    return
+  }
+  let updateParams = reactive({
+    serverName: serverName,
+    updateValue: reactive({})
+  })
+  if (val._id) {
+    updateParams._id = parseInt(val._id)
+  }
+  if (val.state != null) {
+    updateParams.updateValue.state = val.state
+  }
+  serverApi.updateBatch(updateParams).then(res => {
+    if (res.data.code = 200) {
+      loadServerInfo()
+      return ElMessage.success('修改成功')
+    } else {
+      return ElMessage.error('修改失败')
+    }
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false