|
|
@@ -1,98 +1,150 @@
|
|
|
<script setup>
|
|
|
+import { computed, ref, shallowRef } from 'vue'
|
|
|
import { PlusOutlined } from '@ant-design/icons-vue'
|
|
|
+import { Modal } from 'ant-design-vue'
|
|
|
+import dayjs from 'dayjs'
|
|
|
import CrudTableModal from './components/crud-table-modal.vue'
|
|
|
-import { deleteApi, getListApi } from '~@/api/list/gateway-list.js'
|
|
|
+import IpListModal from './components/IpListModal.vue'
|
|
|
+import { deleteApi, deleteApiList, getListApi } from '~@/api/list/gateway-list.js'
|
|
|
import { useTableQuery } from '~@/composables/table-query'
|
|
|
-import { useRouter } from 'vue-router'
|
|
|
|
|
|
const message = useMessage()
|
|
|
const columns = shallowRef([
|
|
|
{
|
|
|
title: 'ID',
|
|
|
- dataIndex: 'id', // JSON 属性名是 'id'
|
|
|
- key: 'id', // 加上 key 是好习惯
|
|
|
+ dataIndex: 'id',
|
|
|
+ key: 'id',
|
|
|
+ width: 80,
|
|
|
},
|
|
|
{
|
|
|
title: '订单ID',
|
|
|
- dataIndex: 'hostId', // Go 的 host_id -> JSON 的 hostId
|
|
|
+ dataIndex: 'hostId',
|
|
|
key: 'hostId',
|
|
|
- },
|
|
|
- {
|
|
|
- title: '规则ID',
|
|
|
- dataIndex: 'ruleId',
|
|
|
- key: 'ruleId',
|
|
|
+ width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '名称',
|
|
|
dataIndex: 'name',
|
|
|
key: 'name',
|
|
|
+ width: 150,
|
|
|
+ ellipsis: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: 'IP',
|
|
|
+ dataIndex: 'ip',
|
|
|
+ key: 'ip',
|
|
|
+ width: 150,
|
|
|
},
|
|
|
{
|
|
|
title: '备注',
|
|
|
- dataIndex: 'comment', // Go 的 comment -> JSON 的 comment
|
|
|
+ dataIndex: 'comment',
|
|
|
key: 'comment',
|
|
|
+ width: 200,
|
|
|
+ ellipsis: true,
|
|
|
},
|
|
|
{
|
|
|
title: '运营商',
|
|
|
dataIndex: 'operator',
|
|
|
key: 'operator',
|
|
|
+ width: 100,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '区域',
|
|
|
+ dataIndex: 'nodeArea',
|
|
|
+ key: 'nodeArea',
|
|
|
+ width: 100,
|
|
|
},
|
|
|
{
|
|
|
title: '是否封禁UDP',
|
|
|
- dataIndex: 'banUdp', // Go 的 ban_udp -> JSON 的 banUdp
|
|
|
+ dataIndex: 'banUdp',
|
|
|
key: 'banUdp',
|
|
|
+ width: 120,
|
|
|
},
|
|
|
{
|
|
|
title: '是否封海外',
|
|
|
- dataIndex: 'banOverseas', // Go 的 ban_udp -> JSON 的 banUdp
|
|
|
+ dataIndex: 'banOverseas',
|
|
|
key: 'banOverseas',
|
|
|
+ width: 120,
|
|
|
},
|
|
|
-
|
|
|
{
|
|
|
title: '创建时间',
|
|
|
- dataIndex: 'createdAt', // Go 的 created_at -> JSON 的 createdAt
|
|
|
+ dataIndex: 'createdAt',
|
|
|
key: 'createdAt',
|
|
|
+ width: 180,
|
|
|
+ customRender: ({ text }) => text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '',
|
|
|
},
|
|
|
{
|
|
|
title: '更新时间',
|
|
|
dataIndex: 'updatedAt',
|
|
|
key: 'updatedAt',
|
|
|
+ width: 180,
|
|
|
+ customRender: ({ text }) => text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '',
|
|
|
},
|
|
|
{
|
|
|
title: '操作',
|
|
|
dataIndex: 'action',
|
|
|
key: 'action',
|
|
|
+ width: 240,
|
|
|
+ fixed: 'right',
|
|
|
},
|
|
|
])
|
|
|
const { state, initQuery, resetQuery, query } = useTableQuery({
|
|
|
queryApi: getListApi,
|
|
|
queryParams: {
|
|
|
- id:undefined,
|
|
|
name: undefined,
|
|
|
+ comment: undefined,
|
|
|
},
|
|
|
afterQuery: (res) => {
|
|
|
if (!res || !Array.isArray(res.records)) {
|
|
|
- // 如果数据格式不正确，返回一个空状态，防止程序崩溃
|
|
|
return { list: [], total: 0 }
|
|
|
}
|
|
|
return res
|
|
|
},
|
|
|
})
|
|
|
const crudTableModal = ref()
|
|
|
+const selectedRowKeys = ref([])
|
|
|
+
|
|
|
+const rowSelection = computed(() => {
|
|
|
+ return {
|
|
|
+ selectedRowKeys: selectedRowKeys.value,
|
|
|
+ onChange: (keys) => {
|
|
|
+ selectedRowKeys.value = keys
|
|
|
+ },
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+async function handleBatchDelete() {
|
|
|
+ Modal.confirm({
|
|
|
+ title: '确定删除选中的数据吗?',
|
|
|
+ content: `即将删除 ${selectedRowKeys.value.length} 条数据。`,
|
|
|
+ okText: '确定',
|
|
|
+ cancelText: '取消',
|
|
|
+ onOk: async () => {
|
|
|
+ try {
|
|
|
+ const res = await deleteApiList({ ids: selectedRowKeys.value })
|
|
|
+ if (res.code === 0) {
|
|
|
+ await query()
|
|
|
+ selectedRowKeys.value = []
|
|
|
+ message.success('删除成功')
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
async function handleDelete(record) {
|
|
|
- if (!record.id)
|
|
|
- return message.error('id 不能为空')
|
|
|
+ if (!record.id) return message.error('id 不能为空')
|
|
|
try {
|
|
|
const res = await deleteApi(record.id)
|
|
|
- if (res.code === 0)
|
|
|
+ if (res.code === 0) {
|
|
|
await query()
|
|
|
message.success('删除成功')
|
|
|
-
|
|
|
- }
|
|
|
- catch (e) {
|
|
|
+ }
|
|
|
+ } catch (e) {
|
|
|
console.log(e)
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
function handleAdd() {
|
|
|
crudTableModal.value?.open()
|
|
|
@@ -101,34 +153,28 @@ function handleEdit(record) {
|
|
|
crudTableModal.value?.open(record)
|
|
|
}
|
|
|
|
|
|
-const router = useRouter()
|
|
|
+const ipListModal = ref()
|
|
|
function handleViewIpList(record) {
|
|
|
- router.push(`/menu/ip-list?id=${record.id}`)
|
|
|
+ ipListModal.value?.open(record)
|
|
|
}
|
|
|
-
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
<page-container>
|
|
|
- <a-card mb-4>
|
|
|
+ <a-card class="mb-4">
|
|
|
<a-form class="system-crud-wrapper" :label-col="{ span: 7 }" :model="state.queryParams">
|
|
|
<a-row :gutter="[15, 0]">
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item name="name" label="名">
|
|
|
- <a-input v-model:value="state.queryParams.name" placeholder="请输入名" />
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
+ <a-form-item name="name" label="名称">
|
|
|
+ <a-input v-model:value="state.queryParams.name" placeholder="请输入名称" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item name="value" label="值">
|
|
|
- <a-input v-model:value="state.queryParams.value" placeholder="请输入值" />
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
+ <a-form-item name="comment" label="备注">
|
|
|
+ <a-input v-model:value="state.queryParams.comment" placeholder="请输入备注" />
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="6">
|
|
|
- <a-form-item name="remark" label="备注">
|
|
|
- <a-input v-model:value="state.queryParams.remark" placeholder="请输入备注" />
|
|
|
- </a-form-item>
|
|
|
- </a-col>
|
|
|
- <a-col :span="6">
|
|
|
+ <a-col :xs="24" :sm="12" :md="8" :lg="6">
|
|
|
<a-space flex justify-end w-full>
|
|
|
<a-button :loading="state.loading" type="primary" @click="initQuery">
|
|
|
查询
|
|
|
@@ -151,25 +197,35 @@ function handleViewIpList(record) {
|
|
|
</template>
|
|
|
新增
|
|
|
</a-button>
|
|
|
+ <a-button type="primary" danger :disabled="!selectedRowKeys || selectedRowKeys.length === 0" @click="handleBatchDelete">
|
|
|
+ 批量删除
|
|
|
+ </a-button>
|
|
|
</a-space>
|
|
|
</template>
|
|
|
<a-table
|
|
|
- row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
|
|
|
- :data-source="state.dataSource" :pagination="state.pagination"
|
|
|
+ row-key="id"
|
|
|
+ :row-selection="rowSelection"
|
|
|
+ :loading="state.loading"
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="state.dataSource"
|
|
|
+ :pagination="state.pagination"
|
|
|
+ bordered
|
|
|
+ striped
|
|
|
+ :scroll="{ x: 1820 }"
|
|
|
>
|
|
|
<template #bodyCell="scope">
|
|
|
<template v-if="scope?.column?.dataIndex === 'action'">
|
|
|
- <div flex gap-2>
|
|
|
- <a-button type="link" @click="handleEdit(scope?.record)">
|
|
|
+ <div class="flex items-center justify-start gap-x-1">
|
|
|
+ <a-button type="link" class="!pl-0" @click="handleEdit(scope?.record)">
|
|
|
编辑
|
|
|
</a-button>
|
|
|
<a-popconfirm
|
|
|
- title="确定删除该条数据？" ok-text="确定" cancel-text="取消"
|
|
|
- @confirm="handleDelete(scope?.record)"
|
|
|
+ title="确定删除该条数据吗?"
|
|
|
+ ok-text="确定"
|
|
|
+ cancel-text="取消"
|
|
|
+ @confirm="handleDelete(scope?.record)"
|
|
|
>
|
|
|
- <a-button type="link">
|
|
|
- 删除
|
|
|
- </a-button>
|
|
|
+ <a-button type="link"> 删除 </a-button>
|
|
|
</a-popconfirm>
|
|
|
<a-button type="link" @click="handleViewIpList(scope?.record)">
|
|
|
查看IP列表
|
|
|
@@ -178,37 +234,57 @@ function handleViewIpList(record) {
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="scope?.column?.dataIndex === 'operator'">
|
|
|
- <!-- 直接在这里用 v-if 判断 -->
|
|
|
- <span v-if="scope?.text === 1">电信</span>
|
|
|
- <span v-else-if="scope?.text === 2">BGP</span>
|
|
|
- <span v-else>未知</span>
|
|
|
+ <a-tag v-if="scope?.text === 1" color="blue">
|
|
|
+ 电信
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else-if="scope?.text === 2" color="purple">
|
|
|
+ BGP
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else>
|
|
|
+ 未知
|
|
|
+ </a-tag>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="scope?.column?.dataIndex === 'banUdp'">
|
|
|
- <!-- 直接在这里用 v-if 判断 -->
|
|
|
- <span v-if="scope?.text === 0">否</span>
|
|
|
- <span v-else-if="scope?.text === 1">是</span>
|
|
|
- <span v-else>未知</span>
|
|
|
+ <a-tag v-if="scope?.text === 1" color="red">
|
|
|
+ 是
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else-if="scope?.text === 0" color="green">
|
|
|
+ 否
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else>
|
|
|
+ 未知
|
|
|
+ </a-tag>
|
|
|
</template>
|
|
|
|
|
|
<template v-else-if="scope?.column?.dataIndex === 'banOverseas'">
|
|
|
- <!-- 直接在这里用 v-if 判断 -->
|
|
|
- <span v-if="scope?.text === 0">否</span>
|
|
|
- <span v-else-if="scope?.text === 1">是</span>
|
|
|
- <span v-else>未知</span>
|
|
|
+ <a-tag v-if="scope?.text === 1" color="red">
|
|
|
+ 是
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else-if="scope?.text === 0" color="green">
|
|
|
+ 否
|
|
|
+ </a-tag>
|
|
|
+ <a-tag v-else>
|
|
|
+ 未知
|
|
|
+ </a-tag>
|
|
|
</template>
|
|
|
</template>
|
|
|
</a-table>
|
|
|
</a-card>
|
|
|
|
|
|
<CrudTableModal ref="crudTableModal" @ok="query" />
|
|
|
+ <IpListModal ref="ipListModal" />
|
|
|
</page-container>
|
|
|
</template>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.system-crud-wrapper{
|
|
|
- .ant-form-item{
|
|
|
+.system-crud-wrapper {
|
|
|
+ .ant-form-item {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+:deep(.ant-table-tbody > tr > td) {
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
</style>
|
