229 lines
6.6 KiB
Vue
229 lines
6.6 KiB
Vue
<template>
|
||
<AppPage :show-footer="showFooter">
|
||
<header v-if="showHeader" mt-10 mb-20 min-h-45 flex items-center justify-between px-15>
|
||
<slot v-if="$slots.header" name="header" />
|
||
<template v-else>
|
||
<n-card style="margin-left: 1.65%; width: 97.25%">
|
||
<n-space justify="end">
|
||
<n-button size="small" style="float: right" type="info" @click="addClient">添加</n-button>
|
||
<n-button size="small" style="float: right" type="primary" @click="refreshList">刷新</n-button>
|
||
</n-space>
|
||
</n-card>
|
||
<slot name="action" />
|
||
</template>
|
||
</header>
|
||
|
||
<div>
|
||
<slot />
|
||
</div>
|
||
</AppPage>
|
||
<n-modal
|
||
style="width: 25%"
|
||
v-model:show="addModalShow"
|
||
preset="card"
|
||
title="添加"
|
||
header-style="margin-left: 40%"
|
||
>
|
||
<n-form
|
||
ref="addModalFormRef"
|
||
:rules="addModalFormRules"
|
||
:model="addModalForm"
|
||
label-placement="left"
|
||
label-width="auto"
|
||
label-align="left"
|
||
require-mark-placement="right"
|
||
>
|
||
<n-form-item label="名称" path="name">
|
||
<n-input v-model:value="addModalForm.name"/>
|
||
</n-form-item>
|
||
<n-form-item label="邮箱" path="email">
|
||
<n-input v-model:value="addModalForm.email"/>
|
||
</n-form-item>
|
||
<n-form-item label="IP" path="addModalForm.ipAllocation">
|
||
<n-select
|
||
v-model:value="addModalForm.ipAllocation"
|
||
filterable
|
||
multiple
|
||
tag
|
||
placeholder="输入,按回车确认"
|
||
:show-arrow="false"
|
||
:show="false"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="可访问IP" path="allowedIps">
|
||
<n-select
|
||
v-model:value="addModalForm.allowedIps"
|
||
filterable
|
||
multiple
|
||
tag
|
||
placeholder="输入,按回车确认"
|
||
:show-arrow="false"
|
||
:show="false"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="可访问IP(扩展)" path="extraAllowedIps">
|
||
<n-select
|
||
v-model:value="addModalForm.extraAllowedIps"
|
||
filterable
|
||
multiple
|
||
tag
|
||
placeholder="输入,按回车确认"
|
||
:show-arrow="false"
|
||
:show="false"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="服务端DNS" path="useServerDns">
|
||
<n-radio value="1" :checked="addModalForm.useServerDns === 1" @change="addModalForm.useServerDns = 1">是</n-radio>
|
||
<n-radio value="0" :checked="addModalForm.useServerDns === 0" @change="addModalForm.useServerDns = 0">否</n-radio>
|
||
</n-form-item>
|
||
<n-form-item label="公钥" path="keys.publicKey">
|
||
<n-input v-model:value="addModalForm.keys.publicKey"></n-input>
|
||
</n-form-item>
|
||
<n-form-item label="私钥" path="keys.privateKey">
|
||
<n-input v-model:value="addModalForm.keys.privateKey"></n-input>
|
||
</n-form-item>
|
||
<n-form-item label="共享密钥" path="keys.presharedKey">
|
||
<n-input v-model:value="addModalForm.keys.presharedKey"></n-input>
|
||
</n-form-item>
|
||
<n-form-item>
|
||
<n-button style="margin-left: 28%" size="small" type="info" @click="generateKeys">生成密钥对</n-button>
|
||
</n-form-item>
|
||
<n-form-item label="状态" path="editModalForm.enabled">
|
||
<n-radio-group :value="addModalForm.enabled">
|
||
<n-radio :value="1" :checked="addModalForm.enabled === 1" @change="addModalForm.enabled = 1">启用</n-radio>
|
||
<n-radio :value="0" :checked="addModalForm.enabled === 0" @change="addModalForm.enabled = 0">禁用</n-radio>
|
||
</n-radio-group>
|
||
</n-form-item>
|
||
<n-form-item label="离线监听" path="offlineMonitoring">
|
||
<n-radio-group :value="addModalForm.offlineMonitoring">
|
||
<n-radio :value="1" :checked="addModalForm.offlineMonitoring === 1" @change="addModalForm.offlineMonitoring = 1">启用</n-radio>
|
||
<n-radio :value="0" :checked="addModalForm.offlineMonitoring === 0" @change="addModalForm.offlineMonitoring = 0">禁用</n-radio>
|
||
</n-radio-group>
|
||
</n-form-item>
|
||
<n-button type="info" style="margin-left: 40%" @click="confirmAddClient()">确认</n-button>
|
||
</n-form>
|
||
</n-modal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import clientApi from '@/views/client/api'
|
||
import { NButton } from 'naive-ui'
|
||
import { debounce } from '@/utils'
|
||
defineProps({
|
||
showFooter: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
showHeader: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
title: {
|
||
type: String,
|
||
default: undefined,
|
||
},
|
||
})
|
||
const route = useRoute()
|
||
|
||
const addModalShow = ref(false)
|
||
|
||
|
||
// 添加模态框的form ref
|
||
const addModalFormRef = ref()
|
||
|
||
// 添加模态框的form rules
|
||
const addModalFormRules = {
|
||
name: [
|
||
{ required: true, message: '名称不能为空', trigger: 'blur' }
|
||
],
|
||
ipAllocation: [
|
||
{ required: true, message: '客户端IP不能为空', trigger: 'change' }
|
||
],
|
||
keys: {
|
||
privateKey: [
|
||
{ required: true, message: '密钥不能为空', trigger: 'blur' }
|
||
],
|
||
publicKey: [
|
||
{ required: true, message: '公钥不能为空', trigger: 'blur' }
|
||
],
|
||
presharedKey: [
|
||
{ required: true, message: '共享密钥不能为空', trigger: 'blur' }
|
||
],
|
||
},
|
||
enabled: [
|
||
{ required: true, message: '状态不能为空', trigger: 'change' }
|
||
]
|
||
}
|
||
|
||
// 添加模态框的数据集
|
||
const addModalForm = ref({
|
||
id: '',
|
||
name: '',
|
||
email: '',
|
||
ipAllocation: [],
|
||
allowedIps: [],
|
||
extraAllowedIps: [],
|
||
useServerDns: 0,
|
||
keys: {
|
||
privateKey: '',
|
||
publicKey: '',
|
||
presharedKey: ''
|
||
},
|
||
enabled: 1,
|
||
offlineMonitoring: 1
|
||
})
|
||
|
||
// 点击确认按钮
|
||
async function confirmAddClient() {
|
||
addModalFormRef.value.validate(async (valid) => {
|
||
if (valid) {
|
||
return valid
|
||
}
|
||
|
||
clientApi.saveClient(addModalForm.value).then((response) => {
|
||
if (response.data.code === 200) {
|
||
refreshList()
|
||
addModalShow.value = false
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
// 添加客户端
|
||
const addClient = debounce(() => {
|
||
generateClientIPS()
|
||
addModalShow.value = true
|
||
},300)
|
||
|
||
// 生成密钥对
|
||
function generateKeys() {
|
||
clientApi.generateClientKeys().then(res => {
|
||
if (res.data.code === 200) {
|
||
addModalForm.value.keys.privateKey = res.data.data.privateKey
|
||
addModalForm.value.keys.publicKey = res.data.data.publicKey
|
||
addModalForm.value.keys.presharedKey = res.data.data.presharedKey
|
||
}
|
||
})
|
||
}
|
||
|
||
// 生成客户端IP
|
||
function generateClientIPS() {
|
||
clientApi.generateClientIP().then(res => {
|
||
if (res.data.code === 200) {
|
||
addModalForm.value.ipAllocation = res.data.data.clientIPS
|
||
addModalForm.value.allowedIps = res.data.data.serverIPS
|
||
generateKeys()
|
||
}
|
||
})
|
||
}
|
||
|
||
// 刷新列表
|
||
function refreshList() {
|
||
clientApi.clientList({
|
||
current: 1,
|
||
size: 8
|
||
})
|
||
}
|
||
|
||
|
||
</script> |