Merge branch 'master' of http://192.168.123.2:3000/fort23/010GMClient

# Conflicts:
#	src/api/request.ts
#	src/common/date.js
#	src/routers/modules/operation.ts

src/api/giftCode.ts

@@ -0,0 +1,46 @@
+import request from './request'
+
+
+export default {
+
+    fixGenerate(data) {
+        return request({
+            url: '/gift_code/fix_generate',
+            method: 'post',
+            data
+        });
+    },
+
+    batchGenerate(data) {
+        return request({
+            url: '/gift_code/batch_generate',
+            method: 'post',
+            data
+        });
+    },
+
+    query(data) {
+        return request({
+            url: '/gift_code/query',
+            method: 'get',
+            data
+        });
+    },
+
+    update(data) {
+        return request({
+            url: '/gift_code/update',
+            method: 'put',
+            data
+        });
+    },
+
+    delete(data) {
+        return request({
+            url: '/gift_code/delete',
+            method: 'delete',
+            data
+        });
+    },
+
+}

src/api/gmMail.ts

@@ -0,0 +1,46 @@
+import request from './request'
+
+
+export default {
+
+    send(data) {
+        return request({
+            url: '/gm_mail/send',
+            method: 'post',
+            data
+        });
+    },
+
+    query(data) {
+        return request({
+            url: '/gm_mail/query',
+            method: 'post',
+            data
+        });
+    },
+
+    update(data) {
+        return request({
+            url: '/gm_mail/update',
+            method: 'put',
+            data
+        });
+    },
+
+    delete(data) {
+        return request({
+            url: '/gm_mail/delete',
+            method: 'delete',
+            data
+        });
+    },
+
+    deleteBatch(data) {
+        return request({
+            url: '/gm_mail/delete_batch',
+            method: 'delete',  
+            data
+        });
+    }
+
+}

src/api/request.ts

@@ -5,10 +5,8 @@ import { useUserStore } from "@/store/modules/user"
 const service = axios.create({
     // 默认请求地址，根据环境的不同可在.env 文件中进行修改
     // baseURL: import.meta.env.VUE_APP_BASE_
-
-    baseURL: "http://127.0.0.1:8001",
     // baseURL: "http://192.168.123.216:8001",
-    // baseURL: "http://localhost:8001",
+    baseURL: "http://localhost:8001",
     // 设置接口访问超时时间
     timeout: 3000000, // request timeout，
     // 跨域时候允许携带凭证
@@ -25,7 +23,6 @@ service.interceptors.request.use((config: AxiosRequestConfig) => {
     const token: string = userStore.token;
     // 自定义请求头
     if (token) { config.headers['Authorization'] = token }
-    
     return config
 }, (error: AxiosError) => {
     // 请求错误，这里可以用全局提示框进行提示

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/common/date.js

@@ -17,19 +17,6 @@ export function formatDate(date, fmt) {
     }
     return fmt;
 };
-
-
 function padLeftZero(str) {
     return ('00' + str).substr(str.length);
-};
-
-export function dformatTime(time) {
-    const date = new Date(time);
-    const formattedDate = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
-    return formattedDate;
-}
-
-export const getRandom = (min, max) => {
-    console.log(min);
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
+};

src/common/dateUtils.ts

@@ -0,0 +1,14 @@
+
+export default {
+   // 时间戳转日期
+    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);
+    }
+}

src/components/Table/PropTable/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%"
@@ -21,6 +24,24 @@
                 />
               </el-select>
             </template>
+            <template v-if="item.valueType === 'date'">
+                <el-date-picker
+                    v-model="formInline[item.name]"
+                    type="date"
+                    value-format="YYYY-MM-DD"
+                    clearable
+                    :placeholder="`请选择${item.label}`"
+                />
+            </template>
+            <template v-if="item.valueType === 'datetime'">
+                <el-date-picker
+                    v-model="formInline[item.name]"
+                    type="datetime"
+                    value-format="YYYY-MM-DD HH:mm:ss"
+                    clearable
+                    :placeholder="`请选择${item.label}`"
+                />
+            </template>
           </el-form-item>
         </template>
       </el-form>

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

@@ -17,8 +17,8 @@ const operationRouter = [{
             path: '/operation/giftcode',
             component: () => import('@/views/operation/giftcode/index.vue'),
             name: 'giftcode',
-            meta: { title: '礼包码', icon: 'Present' },
-            alwaysShow: true,
+            meta: { title: '礼包码', icon: 'Present'},
+            alwaysShow:true,
             redirect: '/views/operation/giftcode/fixedGeneration',
             children: [
                 // {
@@ -31,53 +31,40 @@ const operationRouter = [{
                     path: '/views/operation/giftcode/batchGeneration',
                     component: () => import('@/views/operation/giftcode/batchGeneration/index.vue'),
                     name: 'batchGeneration',
-                    meta: { title: '批量生成', icon: 'CirclePlus' }
-                },
-                {
+                    meta: { title: '批量生成', icon: 'CirclePlus'}
+                  },
+                  {
                     path: '/views/operation/giftcode/listTable',
                     component: () => import('@/views/operation/giftcode/listTable/index.vue'),
                     name: 'listTable',
-                    meta: { title: '礼包码列表', icon: 'List' }
-                },
+                    meta: { title: '礼包码列表', icon: 'List'}
+                  },
             ]
         },
         {
             path: '/operation/whitelist',
             component: () => import('@/views/operation/whitelist/index.vue'),
             name: 'whitelist',
-            meta: { title: '白名单', keepAlive: true, icon: 'User' }
+            meta: { title: '白名单', keepAlive: true , icon: 'User'}
         },
-
-        // {
-        //     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'),
             name: 'gmmail',
-            meta: { title: 'GM邮件', keepAlive: true, icon: 'Message' }
+            meta: { title: 'GM邮件', keepAlive: true , icon: 'Message'}
         },
         {
             path: '/operation/announcement',
             component: () => import('@/views/operation/announcement/index.vue'),
             name: 'announcement',
-            meta: { title: '游戏公告', keepAlive: true, icon: 'Notification' }
+            meta: { title: '游戏公告', keepAlive: true  , icon: 'Notification'}
         },
         {
-            path: '/operation/sendcmd',
-            component: () => import('@/views/operation/sendcmd/index.vue'),
-            name: 'sendcmd',
-            meta: { title: '发送命令', keepAlive: true, icon: 'Monitor' }
-        },
+          path: '/operation/sendcmd',
+          component: () => import('@/views/operation/sendcmd/index.vue'),
+          name: 'sendcmd',
+          meta: { title: '发送命令', keepAlive: true  , icon: 'Monitor'}
+      },
     ]
 }]
 

src/views/operation/gmmail/index.vue

@@ -1,30 +1,36 @@
 <template>
   <div class="app-container" ref="appContainer">
-    <ServerPropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
+    <PropTable :loading="loading" @selection-change="selectionChange" :columns="column" :data="list" @reset="reset"
       @onSubmit="onSubmit">
       <template v-slot:btn>
         <div style="display: flex; justify-content: flex-end">
-          <el-button type="primary" @click="add"
-          ><el-icon><plus /></el-icon> 添加</el-button>
+          <el-button type="primary" @click="add"><el-icon>
+              <plus />
+            </el-icon> 添加</el-button>
           <el-button type="danger" @click="batchDelete"><el-icon>
               <delete />
             </el-icon>删除</el-button>
         </div>
       </template>
+      <template v-slot:validTime="scope">{{ dateUtils.getDate(scope.row.validTime) }}</template>
+      <template v-slot:invalidTime="scope">{{ dateUtils.getDate(scope.row.invalidTime) }}</template>
+      <template v-slot:state="scope">{{ getStateLabel(scope.row) }}</template>
+      <template v-slot:createTime="scope">{{ dateUtils.getDate(scope.row.createTime) }}</template>
+      <template v-slot:items="scope">{{ getItemsLabel(scope.row.items) }}</template>
       <template v-slot:operation="scope">
-        <el-button type="primary" size="small" icon="Edit" @click="edit(scope.row)">
-          编辑
+        <el-button type="primary" size="small" icon="More" @click="more(scope.row)">
+          详情
         </el-button>
         <el-button @click="del(scope.row)" type="danger" size="small" icon="Delete">
           删除
         </el-button>
       </template>
-    </ServerPropTable>
+    </PropTable>
 
     <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-form-item label="ID" prop="id" v-show="isIdShow">
           <el-input readonly v-model="ruleForm.id" />
         </el-form-item>
         <el-form-item label="收件人服务器ID" prop="toServerIds">
@@ -46,12 +52,8 @@
         <el-form-item label="收件人角色创建">
           <el-col :span="11">
             <el-form-item prop="roleCreateTimeStart">
-              <el-date-picker
-                  v-model="ruleForm.roleCreateTimeStart"
-                  type="datetime"
-                  placeholder="选择起始时间"
-                  style="width: 100%"
-              />
+              <el-date-picker v-model="ruleForm.roleCreateTimeStart" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择起始时间" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col class="text-center" :span="2" style="text-align: center">
@@ -59,7 +61,8 @@
           </el-col>
           <el-col :span="11">
             <el-form-item prop="roleCreateTimeEnd">
-              <el-date-picker v-model="ruleForm.roleCreateTimeEnd"  type="datetime" placeholder="选择截止时间" style="width: 100%" />
+              <el-date-picker v-model="ruleForm.roleCreateTimeEnd" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择截止时间" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-form-item>
@@ -69,18 +72,14 @@
         <el-form-item label="发送者名称" prop="sendName">
           <el-input v-model="ruleForm.sendName" />
         </el-form-item>
-        <el-form-item label="邮件道具" prop="itemInfo">
-          <el-input v-model="ruleForm.itemInfo" />
+        <el-form-item label="邮件道具" prop="items">
+          <el-input v-model="ruleForm.items" />
         </el-form-item>
         <el-form-item label="邮件生效时间" required>
           <el-col :span="11">
             <el-form-item prop="validTime">
-              <el-date-picker
-                  v-model="ruleForm.validTime"
-                  type="datetime"
-                  placeholder="选择开始时间"
-                  style="width: 100%"
-              />
+              <el-date-picker v-model="ruleForm.validTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择起始时间" style="width: 100%" />
             </el-form-item>
           </el-col>
           <el-col class="text-center" :span="2" style="text-align: center">
@@ -88,7 +87,8 @@
           </el-col>
           <el-col :span="11">
             <el-form-item prop="invalidTime">
-              <el-date-picker v-model="ruleForm.invalidTime"  type="datetime" placeholder="选择结束时间" style="width: 100%" />
+              <el-date-picker v-model="ruleForm.invalidTime" type="datetime" value-format="YYYY-MM-DD HH:mm:ss"
+                placeholder="选择截止时间" style="width: 100%" />
             </el-form-item>
           </el-col>
         </el-form-item>
@@ -106,104 +106,96 @@
   </div>
 </template>
 <script lang="ts" setup name="comprehensive">
-import { ref, reactive, onMounted, nextTick } from 'vue'
+import { ref, reactive, onMounted, nextTick, onBeforeMount } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import type { FormInstance } from 'element-plus'
+import gmMailApi from '@/api/gmMail'
+import dateUtils from '@/common/dateUtils'
+
 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,
-    title: 'GM邮件' + (i+1),
-    validTime: '2023-08-21 10:00:00',
-    invalidTime: '2023-09-21 10:00:00',
-    itemInfo: '1002-100,1001-200',
-    sendName: '深渊联盟',
-    toServerIds: '1,2,3,4,5',
-    toPlayerIds: '10000001, 10000001',
+import PropTable from '@/components/Table/PropTable/index.vue'
+
+const data = ref([])
+let currPageNum = 1;
+const pageSize = 10;
+onBeforeMount(() => {
+  loadGmMailInfo()
+})
+
+const loadGmMailInfo = () => {
+  let queryParams = reactive({
+    pageNum: currPageNum,
+    pageSize: pageSize
+  })
+  gmMailApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data)
   })
 }
+
 const column = [
   { type: 'selection', width: 60, fixed: 'left' },
   { name: 'id', label: 'ID', width: 80 },
   { name: 'title', label: '邮件标题', inSearch: true, valueType: 'input' },
-  { name: 'validTime', label: '邮件生效时间'},
-  { name: 'invalidTime', label: '邮件失效时间'},
-  { name: 'itemInfo', label: '邮件道具'},
-  { name: 'sendName', label: '发送者名称'},
-  { name: 'toServerIds', label: '收件人服务器ID'},
-  { name: 'toPlayerIds', label: '收件人玩家ID'},
+  { name: 'validTime', label: '邮件生效时间', slot: true, valueType: 'datetime' },
+  { name: 'invalidTime', label: '邮件失效时间', slot: true, valueType: 'datetime' },
+  { name: 'state', label: '邮件状态', slot: true },
+  { name: 'items', label: '邮件道具', slot: true },
+  { name: 'createTime', label: '邮件创建时间', slot: true },
   { name: 'operation', slot: true, fixed: 'right', width: 200, label: '操作' },
 ]
 
+const getStateLabel = (val) => {
+  // 取得当前时间，单位：秒
+  const timestamp: number = Date.parse(new Date().toString());
+  if (timestamp < val.validTime) {
+    return '未发送'
+  } else if (timestamp >= val.validTime && timestamp <= val.invalidTime) {
+    return '发送中'
+  } else {
+    return '已送达'
+  }
+}
+
+const getItemsLabel = (val) => {
+  console.log("val:", val)
+  if (val != null) {
+    let label = ""
+    val.forEach((v, i) => {
+      label += v["itId"] + '-' + v["itCnt"]
+      if (i < val.length - 1) {
+        label += ","
+      }
+    });
+    return label;
+  }
+}
+
 const list = ref(data)
 
 const formSize = ref('default')
 const ruleFormRef = ref<FormInstance>()
+
 const ruleForm = reactive({
-    id: null,
-    title: null,
-    validTime: null,
-    invalidTime: null,
-    itemInfo: null,
-    sendName: '深渊联盟',
-    toServerIds: '0',
-    toPlayerIds: '0',
-    levelCondition: null,
-    itemCondition: null,
-    heroCondition: null,
-    roleCreateTimeStart: null,
-    roleCreateTimeEnd: null,
-    content: null,
+  id: null,
+  title: null,
+  validTime: null,
+  invalidTime: null,
+  items: null,
+  sendName: '深渊联盟',
+  toServerIds: null,
+  toPlayerIds: null,
+  levelCondition: null,
+  itemCondition: null,
+  heroCondition: null,
+  roleCreateTimeStart: null,
+  roleCreateTimeEnd: null,
+  content: null,
+  createTime: null
 })
 
 const rules = reactive({
-  toServerIds: [
-    {
-      message: '请输入收件人服务器ID',
-      trigger: 'change',
-    }
-  ],
-  toPlayerIds: [
-    {
-      message: '请输入收件人角色ID',
-      trigger: 'change',
-    },
-  ],
-  levelCondition: [
-    {
-      message: '请输入收件人等级条件',
-      trigger: 'change',
-    },
-  ],
-  itemCondition: [
-    {
-      message: '请输入收件人道具条件',
-      trigger: 'change',
-    },
-  ],
-  heroCondition: [
-    {
-      message: '请输入收件人英雄条件',
-      trigger: 'change',
-    },
-  ],
-  roleCreateTimeStart: [
-    {
-      type: 'date',
-      message: '请输入收件人角色创建起始时间',
-      trigger: 'change',
-    },
-  ],
-  roleCreateTimeEnd: [
-    {
-      type: 'date',
-      message: '请输入收件人角色创建截至时间',
-      trigger: 'change',
-    },
-  ],
   title: [
     {
       required: true,
@@ -218,14 +210,14 @@ const rules = reactive({
       trigger: 'change',
     },
   ],
-  itemInfo: [
+  items: [
     {
       required: true,
       message: '请输入邮件道具',
       trigger: 'change',
     },
   ],
-  validTime : [
+  validTime: [
     {
       required: true,
       type: 'date',
@@ -254,35 +246,62 @@ const rules = reactive({
 const dialogVisible = ref(false)
 const rowObj = ref({})
 const selectObj = ref([])
-const title = ref('编辑')
+const title = ref('详情')
+const isIdShow = ref(true)
 
 const add = () => {
   title.value = '新增'
+  isIdShow.value = false
   dialogVisible.value = true
+  ruleForm.id = null
+  ruleForm.toServerIds = null
+  ruleForm.toPlayerIds = null
+  ruleForm.levelCondition = null
+  ruleForm.itemCondition = null
+  ruleForm.heroCondition = null
+  ruleForm.roleCreateTimeStart = null
+  ruleForm.roleCreateTimeEnd = null
+  ruleForm.title = null
+  ruleForm.sendName = '深渊联盟'
+  ruleForm.items = null
+  ruleForm.validTime = null
+  ruleForm.invalidTime = null
+  ruleForm.content = null
 }
 
 const handleClose = async (done: () => void) => {
   await ruleFormRef.value.validate((valid, fields) => {
     if (valid) {
-      list.value.forEach((item) => {
-        if (item.id === rowObj.value.id) {
-          item.toServerIds = ruleForm.toServerIds
-          item.toPlayerIds = ruleForm.toPlayerIds
-          item.levelCondition = ruleForm.levelCondition
-          item.itemCondition = ruleForm.itemCondition
-          item.heroCondition = ruleForm.heroCondition
-          item.roleCreateTimeStart = ruleForm.roleCreateTimeStart
-          item.roleCreateTimeEnd = ruleForm.roleCreateTimeEnd
-          item.title = ruleForm.title
-          item.sendName = ruleForm.sendName
-          item.itemInfo = ruleForm.itemInfo
-          item.validTime = ruleForm.validTime
-          item.invalidTime = ruleForm.invalidTime
-          item.content = ruleForm.content
-        }
-      })
-      dialogVisible.value = false
-      console.log('submit!', ruleForm.title)
+      if (title.value == '新增') {
+        gmMailApi.send(ruleForm).then(res => {
+          console.log('result', res)
+          if (res.data.code = 200) {
+            loadGmMailInfo()
+            dialogVisible.value = false
+            return ElMessage.success(res.data.msg)
+          } else {
+            return ElMessage.error(res.data.msg)
+          }
+        })
+        console.log('add submit!')
+      } else {
+        // let updateParams = reactive({
+        //   id: rowObj.value.id,
+        //   updateValue: ruleForm
+        // })
+        // gmMailApi.update(updateParams).then(res => {
+        //   if (res.data.code = 200) {
+        //     // item.state = ruleForm.state
+        //     loadGmMailInfo()
+        //     dialogVisible.value = false
+        //     return ElMessage.success('修改成功')
+        //   } else {
+        //     return ElMessage.error('修改失败')
+        //   }
+        // })
+        // console.log('update submit!')
+      }
+      console.log('submit!', ruleForm)
     } else {
       console.log('error submit!', fields)
     }
@@ -300,17 +319,33 @@ const batchDelete = () => {
     draggable: true,
   })
     .then(() => {
-      ElMessage.success('模拟删除成功')
+      let selectGmMaliIds = reactive([])
+      for (let value of selectObj.value) {
+        selectGmMaliIds.push(value.id)
+      }
+      let deleteParams = reactive({
+        gmMaliIds: selectGmMaliIds
+      })
+      gmMailApi.deleteBatch(deleteParams).then(res => {
+        loadGmMailInfo()
+        ElMessage.success('批量删除成功')
+      })
+
       list.value = list.value.concat([])
     })
     .catch(() => { })
 }
+
+
 const selectionChange = (val) => {
   selectObj.value = val
 }
 
-const edit = (row) => {
+const more = (row) => {
+  title.value = '详情'
+  isIdShow.value = true
   rowObj.value = row
+  console.log(row)
   dialogVisible.value = true
   ruleForm.id = row.id
   ruleForm.toServerIds = row.toServerIds
@@ -318,14 +353,15 @@ const edit = (row) => {
   ruleForm.levelCondition = row.levelCondition
   ruleForm.itemCondition = row.itemCondition
   ruleForm.heroCondition = row.heroCondition
-  ruleForm.roleCreateTimeStart = row.roleCreateTimeStart
-  ruleForm.roleCreateTimeEnd = row.roleCreateTimeEnd
+  ruleForm.roleCreateTimeStart = dateUtils.getDate(row.roleCreateTimeStart)
+  ruleForm.roleCreateTimeEnd = dateUtils.getDate(row.roleCreateTimeEnd)
   ruleForm.title = row.title
   ruleForm.sendName = row.sendName
-  ruleForm.itemInfo = row.itemInfo
-  ruleForm.validTime = row.validTime
-  ruleForm.invalidTime = row.invalidTime
+  ruleForm.items = getItemsLabel(row.items)
+  ruleForm.validTime = dateUtils.getDate(row.validTime)
+  ruleForm.invalidTime = dateUtils.getDate(row.invalidTime)
   ruleForm.content = row.content
+  console.log(ruleForm)
 }
 
 const del = (row) => {
@@ -337,8 +373,13 @@ const del = (row) => {
     draggable: true,
   })
     .then(() => {
-      list.value = list.value.filter((item) => item.id !== row.id)
-      ElMessage.success('删除成功')
+      let deleteParams = reactive({
+        id: row.id
+      })
+      gmMailApi.delete(deleteParams).then(res => {
+        loadGmMailInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -348,25 +389,28 @@ const del = (row) => {
 }
 
 const reset = () => {
+  loadGmMailInfo()
   loading.value = true
   setTimeout(() => {
     loading.value = false
   }, 500)
-  ElMessage.success('触发重置方法')
+  ElMessage.success('重置成功')
 }
 
 const onSubmit = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发查询方法')
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-  }, 500)
-}
-
-const onUpdate = (val) => {
-  console.log('val===', val)
-  ElMessage.success('触发修改方法')
+  if (val.title == null || val.title == "") {
+    ElMessage.warning('请输入查询条件')
+    return
+  }
+  let queryParams = reactive({
+    pageNum: 1,
+    pageSize: pageSize,
+    condition: val
+  })
+  gmMailApi.query(queryParams).then(res => {
+    data.value = res.data.result;
+    console.log(data.value)
+  })
   loading.value = true
   setTimeout(() => {
     loading.value = false

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)">
           编辑
@@ -23,8 +24,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="weight">
           <el-input v-model="ruleForm.weight" />
@@ -58,31 +59,60 @@
   </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: 'S' + i,
-    gmAddr: '127.0.0.1:2002',
-    weight: 100 + i,
-    gatewayId: 1,
-    state: i % 3,
-    openTime: '2023-08-17 10:00:00'
+// const data = []
+// for (let i = 0; i < 100; i++) {
+//   data.push({
+//     _id: i + 1,
+//     name: 'S' + i,
+//     gmAddr: '127.0.0.1:2002',
+//     weight: 100 + i,
+//     gatewayId: 1,
+//     state: i % 3,
+//     openTime: '2023-08-17 10:00:00'
+//   })
+// }
+
+const data = ref([])
+const serverName = "game"
+
+// 时间戳转日期
+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',
@@ -124,6 +154,7 @@ const list = ref(data)
 const formSize = ref('default')
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive({
+  _id:null,
   weight: 0,
   state: null,
   openTime: null
@@ -148,11 +179,19 @@ const handleClose = async (done: () => void) => {
   await ruleFormRef.value.validate((valid, fields) => {
     if (valid) {
       list.value.forEach((item) => {
-        if (item.id === rowObj.value.id) {
-          item.weight = ruleForm.weight
-          item.state = ruleForm.state
-          item.openTime = ruleForm.openTime
-        }
+          let updateParams = reactive({
+            serverName: serverName,
+            _id: ruleForm._id,
+            updateValue: ruleForm
+          })
+          serverApi.update(updateParams).then(res=>{
+            if (res.data.code = 200) {
+                loadServerInfo()
+                return ElMessage.success('修改成功')
+              } else {
+                return ElMessage.error('修改失败')
+              }
+          })
       })
       dialogVisible.value = false
       console.log('submit!', ruleForm.weight, ruleForm.state)
@@ -173,7 +212,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(() => { })
@@ -185,10 +235,10 @@ const selectionChange = (val) => {
 const edit = (row) => {
   rowObj.value = row
   dialogVisible.value = true
-  ruleForm.id = row.id
+  ruleForm._id = row._id
   ruleForm.weight = row.weight
   ruleForm.state = row.state
-  ruleForm.openTime = row.openTime
+  ruleForm.openTime = getDate(row.openTime)
 }
 
 const del = (row) => {
@@ -200,8 +250,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
@@ -215,12 +272,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
@@ -228,8 +303,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,12 +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: serverName,
         serverId: row._id
       })
-      serverApi.delete(deleteParams)
-      ElMessage.success('删除成功')
+      serverApi.delete(deleteParams).then(res => {
+        loadServerInfo()
+        ElMessage.success('删除成功')
+      })
       loading.value = true
       setTimeout(() => {
         loading.value = false
@@ -203,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
@@ -220,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