297 lines
8.1 KiB
Vue
297 lines
8.1 KiB
Vue
<template>
|
|
<q-dialog
|
|
persistent
|
|
v-model="show_dialog"
|
|
@before-hide="resetData"
|
|
@keydown="
|
|
(evt) => {
|
|
if (evt.keyCode == 27) {
|
|
show_dialog = false;
|
|
}
|
|
}
|
|
"
|
|
>
|
|
<q-card class="overflow-hidden" style="max-width: 45vw">
|
|
<q-form @submit="onSubmit">
|
|
<q-card-section class="q-ma-none q-pa-sm">
|
|
<div class="row">
|
|
<div class="col-auto text-h6">
|
|
{{ $t("ip address") }}
|
|
</div>
|
|
<q-space />
|
|
<div>
|
|
<q-btn
|
|
flat
|
|
round
|
|
icon="close"
|
|
:disable="loading"
|
|
color="red"
|
|
v-close-popup
|
|
>
|
|
<q-tooltip>
|
|
{{ $t("close") }}
|
|
</q-tooltip>
|
|
</q-btn>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section
|
|
class="scroll q-pa-xs q-ma-none"
|
|
style="width: 45vw; max-height: 55vh"
|
|
>
|
|
<q-list>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("ip address") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="ip_address"
|
|
autofocus
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) || $t('Please type something'),
|
|
(val) =>
|
|
isIpAddress(val) || $t('Please input vaild ip address'),
|
|
(val) => checkFilterListIp(val),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("gateway") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="gateway"
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) || $t('Please type something'),
|
|
(val) =>
|
|
isIpAddress(val) || $t('Please input vaild ip address'),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item>
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("netmask") }}
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="netmask"
|
|
:rules="[
|
|
(val) =>
|
|
(val && val.length > 0) || $t('Please type something'),
|
|
(val) =>
|
|
isIpAddress(val) || $t('Please input vaild ip address'),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="$props.showDns">
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("dns server") }}1
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="dns1"
|
|
:rules="[
|
|
(val) =>
|
|
isIpAddress(val) ||
|
|
val.length == 0 ||
|
|
$t('Please input vaild ip address'),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="$props.showDns">
|
|
<q-item-section avatar class="header_label">
|
|
{{ $t("dns server") }}2
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-input
|
|
v-model="dns2"
|
|
:rules="[
|
|
(val) =>
|
|
isIpAddress(val) ||
|
|
val.length == 0 ||
|
|
$t('Please input vaild ip address'),
|
|
]"
|
|
lazy-rules
|
|
/>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card-section>
|
|
|
|
<q-separator />
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn
|
|
flat
|
|
:label="$t('Cancel')"
|
|
no-caps
|
|
color="primary"
|
|
v-close-popup
|
|
/>
|
|
<q-btn
|
|
ref="accept"
|
|
flat
|
|
no-caps
|
|
:label="$t('Accept')"
|
|
type="submit"
|
|
color="primary"
|
|
/>
|
|
</q-card-actions>
|
|
</q-form>
|
|
</q-card>
|
|
</q-dialog>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header_label {
|
|
width: 20%;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, Ref, reactive } from "vue";
|
|
import { useStore } from "src/store";
|
|
import { useQuasar, copyToClipboard, uid } from "quasar";
|
|
import { useI18n } from "vue-i18n";
|
|
import GlobalData from "src/common/GlobalData";
|
|
import { AdvancedIpAddressEntity } from "src/entities/AdvancedIpAddressEntity";
|
|
|
|
export default defineComponent({
|
|
name: "ComponentSystenSettingAdvancedNetworkDialog",
|
|
components: {},
|
|
props: {
|
|
showDns: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
},
|
|
setup() {
|
|
let $store = useStore();
|
|
let $q = useQuasar();
|
|
let $t = useI18n();
|
|
|
|
let show_dialog = ref(false);
|
|
|
|
const status = ref("add");
|
|
|
|
const ip_address = ref("192.168.1.1");
|
|
const gateway = ref("192.168.1.1");
|
|
const netmask = ref("255.255.255.0");
|
|
const dns1 = ref("");
|
|
const dns2 = ref("");
|
|
|
|
let _resolove: any = null;
|
|
let ip_filter_list: any[] = [];
|
|
|
|
return {
|
|
show_dialog,
|
|
status,
|
|
ip_address,
|
|
gateway,
|
|
netmask,
|
|
dns1,
|
|
dns2,
|
|
loga(a: any) {
|
|
console.log(a);
|
|
},
|
|
async showDialogAsync(
|
|
_status: string,
|
|
data: AdvancedIpAddressEntity,
|
|
_ip_filter_list: any[]
|
|
) {
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
return new Promise((resolove) => {
|
|
_resolove = resolove;
|
|
status.value = _status;
|
|
if (data) {
|
|
ip_address.value = data.ip_address || "192.168.1.1";
|
|
gateway.value = data.gateway || "192.168.1.1";
|
|
netmask.value = data.netmask || "255.255.255.0";
|
|
dns1.value = data.dns1 || "";
|
|
dns2.value = data.dns2 || "";
|
|
}
|
|
ip_filter_list = _ip_filter_list;
|
|
if (Array.isArray(ip_filter_list) && data && data.ip_address) {
|
|
ip_filter_list = ip_filter_list.filter(
|
|
(element) => element != data.ip_address
|
|
);
|
|
}
|
|
show_dialog.value = true;
|
|
});
|
|
},
|
|
resetData() {
|
|
if (_resolove) {
|
|
_resolove();
|
|
_resolove = null;
|
|
}
|
|
status.value = "add";
|
|
ip_address.value = "192.168.1.1";
|
|
gateway.value = "192.168.1.1";
|
|
netmask.value = "255.255.255.0";
|
|
dns1.value = "";
|
|
dns2.value = "";
|
|
},
|
|
|
|
async onSubmit() {
|
|
try {
|
|
if (_resolove) {
|
|
try {
|
|
const data = new AdvancedIpAddressEntity();
|
|
data.ip_address = ip_address.value;
|
|
data.gateway = gateway.value;
|
|
data.netmask = netmask.value;
|
|
data.dns1 = dns1.value;
|
|
data.dns2 = dns2.value;
|
|
_resolove(data);
|
|
} catch {
|
|
_resolove(null);
|
|
}
|
|
}
|
|
show_dialog.value = false;
|
|
} catch {}
|
|
},
|
|
isIpAddress(str: string) {
|
|
return (
|
|
str == "localhost" ||
|
|
/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
|
|
str
|
|
)
|
|
);
|
|
},
|
|
checkFilterListIp(str: string) {
|
|
if (Array.isArray(ip_filter_list)) {
|
|
const index = ip_filter_list.findIndex((e) => e == str);
|
|
if (index != -1) {
|
|
return (
|
|
$t.t("ip address") +
|
|
" " +
|
|
str +
|
|
" " +
|
|
$t.t("already existed") +
|
|
"!"
|
|
);
|
|
}
|
|
}
|
|
return true;
|
|
},
|
|
};
|
|
},
|
|
});
|
|
</script>
|