refactor(ip-list): 优化 IP 列表页面和 Modal 组件

- 重构 deleteApi 函数，使用解构参数
- 添加 IP 列表的标签和归属地列
- 优化 IP列表的查询逻辑，使用 computed 属性
- 修复 IP Modal 组件的表单初始化问题- 优化 IP Modal 组件的

web/src/api/list/gateway-group-ip-list.js

@@ -13,6 +13,6 @@ export function updateApi(data) {
   return usePut('/v1/gatewayIp/edit', data)
 }
 
-export function deleteApi(params) {
-  return useDelete('/v1/gatewayIp/del', params)
+export function deleteApi(id) {
+  return useDelete('/v1/gatewayIp/del', { id })
 }

web/src/pages/menu/components/ip-list-modal.vue

@@ -11,8 +11,8 @@ const isEdit = computed(() => !!formState.id)
 const title = computed(() => isEdit.value ? '编辑IP' : '新增IP')
 
 const formState = reactive({
-  id: 0,
-  gatewayGroupId: 0,
+  id: undefined,
+  gatewayGroupId: undefined,
   ip: '',
   tag: '',
   originPlace: '',
@@ -27,6 +27,9 @@ function open(record) {
   visible.value = true
   if (record) {
     Object.assign(formState, record)
+    if (!record.id) {
+      formState.gatewayGroupId = record.gatewayGroupId
+    }
   }
 }
 
@@ -38,7 +41,7 @@ function close() {
 async function handleOk() {
   try {
     await validate()
-    const res = isEdit.value ? await updateApi(formState.id, formState) : await createApi(formState)
+    const res = isEdit.value ? await updateApi(formState) : await createApi(formState)
     if (res.code === 0) {
       Modal.success({
         title: '操作成功',

web/src/pages/menu/ip-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef } from 'vue'
+import { ref, shallowRef, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { PlusOutlined } from '@ant-design/icons-vue'
 import CrudTableModal from './components/ip-list-modal.vue'
@@ -8,13 +8,15 @@ import { useTableQuery } from '~@/composables/table-query'
 
 const route = useRoute()
 const message = useMessage()
-const gatewayGroupId = Number(route.query.id)
+const gatewayGroupId = computed(() => Number(route.query.id || 0))
 
 const columns = shallowRef([
   { title: 'ID', dataIndex: 'id', key: 'id' },
   { title: '网关组ID', dataIndex: 'gatewayGroupId', key: 'gatewayGroupId' },
   { title: '网关组名称', dataIndex: 'tag', key: 'tag' },
   { title: 'IP地址', dataIndex: 'ip', key: 'ip' },
+  { title: '标签', dataIndex: 'tag', key: 'tag' },
+  { title: '归属地', dataIndex: 'originPlace', key: 'originPlace' },
   { title: '备注', dataIndex: 'comment', key: 'comment' },
   { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
   { title: '更新时间', dataIndex: 'updatedAt', key: 'updatedAt' },
@@ -24,7 +26,7 @@ const columns = shallowRef([
 const { state, initQuery, resetQuery, query } = useTableQuery({
   queryApi: getListApi,
   queryParams: {
-    gatewayGroupId: gatewayGroupId,
+    gatewayGroupId: gatewayGroupId.value,
     ip: undefined,
   },
   afterQuery: (res) => {
@@ -53,7 +55,7 @@ async function handleDelete(record) {
 }
 
 function handleAdd() {
-  crudTableModal.value?.open({ gatewayGroupId: gatewayGroupId })
+  crudTableModal.value?.open({ gatewayGroupId: gatewayGroupId.value })
 }
 
 function handleEdit(record) {