last modal
This commit is contained in:
Sense T
parent
e884840b7d
commit
e72de14797
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<NModal :mask-closable="false" preset="card" style="width: 600px" role="dialog" aria-modal="true" :show="show">
|
||||
<template #header>
|
||||
<span v-if="!domain || domain.id < 1">{{ t('common.new') }}</span><span v-else>{{ t('common.edit') }}</span><span>{{
|
||||
t('domains._') }}</span>
|
||||
</template>
|
||||
|
||||
<NForm :model="domain" :rules="rules">
|
||||
<NFormItem :label="t('domains._')" path="domain_name">
|
||||
<NInput placeholder="example.com" v-model:value="domain?.domain_name" @update:value="easyInput" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('domains.form.mainDNS')" path="main_dns">
|
||||
<NInput placeholder="ns1.example.com" v-model:value="domain?.main_dns" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('domains.form.adminMail')" path="admin_email">
|
||||
<NInput placeholder="admin@example.com" v-model:value="domain?.admin_email" />
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('records.refesh')" path="refresh_interval">
|
||||
<NInputNumber v-model:value="domain?.refresh_interval">
|
||||
<template #suffix>
|
||||
{{ t('domains.form.unitForSecond') }}
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('records.retry')" path="retry_interval">
|
||||
<NInputNumber v-model:value="domain?.retry_interval">
|
||||
<template #suffix>
|
||||
{{ t('domains.form.unitForSecond') }}
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('records.expire')" path="expiry_period">
|
||||
<NInputNumber v-model:value="domain?.expiry_period">
|
||||
<template #suffix>
|
||||
{{ t('domains.form.unitForSecond') }}
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
<NFormItem :label="t('records.ttl')" path="negative_ttl">
|
||||
<NInputNumber v-model:value="domain?.negative_ttl">
|
||||
<template #suffix>
|
||||
{{ t('domains.form.unitForSecond') }}
|
||||
</template>
|
||||
</NInputNumber>
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
|
||||
<template #action>
|
||||
<NFlex justify="end">
|
||||
<NButton size="small" @click="show = false">
|
||||
<template #icon>
|
||||
<NIcon>
|
||||
<Times />
|
||||
</NIcon>
|
||||
</template>
|
||||
{{ t('common.cancel') }}
|
||||
</NButton>
|
||||
<NSpin :show="loading">
|
||||
<NButton size="small" type="primary" :disabled="loading || invalidData" @click="confirm">
|
||||
<template #icon>
|
||||
<NIcon>
|
||||
<Check />
|
||||
</NIcon>
|
||||
</template>
|
||||
{{ t('common.confirm') }}
|
||||
</NButton>
|
||||
</NSpin>
|
||||
</NFlex>
|
||||
</template>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDomainStore, type Domain } from '@/stores/domains';
|
||||
import { Check, Times } from '@vicons/fa';
|
||||
import {
|
||||
NModal,
|
||||
NForm,
|
||||
NFormItem,
|
||||
NButton,
|
||||
NInput,
|
||||
NInputNumber,
|
||||
useNotification,
|
||||
type FormRules,
|
||||
type FormItemRule
|
||||
} from 'naive-ui'
|
||||
import { useI18n } from 'vue-i18n';
|
||||
const { t } = useI18n()
|
||||
|
||||
const props = defineProps<{
|
||||
domain: Domain
|
||||
}>()
|
||||
|
||||
const show = defineModel<boolean>('show', { default: false })
|
||||
const loading = defineModel<boolean>('loading', { default: false })
|
||||
const invalidData = defineModel<boolean>('invalidData', { default: false })
|
||||
const rules = defineModel<FormRules>('rules')
|
||||
rules.value = {
|
||||
domain_name: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator(_rule: FormItemRule, value: string) {
|
||||
return validate(
|
||||
value,
|
||||
/([\w-]+\.)+[\w-]+/,
|
||||
'domains.errors.domainName'
|
||||
)
|
||||
}
|
||||
},
|
||||
main_dns: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator(_rule: FormItemRule, value: string) {
|
||||
return validate(
|
||||
value,
|
||||
/([\w-]+\.)+[\w-]+/,
|
||||
'domains.errors.domainName'
|
||||
)
|
||||
}
|
||||
},
|
||||
admin_email: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
validator(_rule: FormItemRule, value: string) {
|
||||
return validate(
|
||||
value,
|
||||
/[\w-.]+@([\w-]+\.)+[\w-]+/,
|
||||
'domains.errors.mail'
|
||||
)
|
||||
}
|
||||
},
|
||||
refresh_interval: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
type: 'number'
|
||||
},
|
||||
retry_interval: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
type: 'number'
|
||||
},
|
||||
expiry_period: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
type: 'number'
|
||||
},
|
||||
negative_ttl: {
|
||||
required: true,
|
||||
trigger: 'blur',
|
||||
type: 'number'
|
||||
}
|
||||
}
|
||||
|
||||
const domainStore = useDomainStore()
|
||||
const notification = useNotification()
|
||||
|
||||
async function confirm() {
|
||||
|
||||
}
|
||||
|
||||
function validate(value: string, reg: RegExp, msg: string) {
|
||||
invalidData.value = true
|
||||
if (!value) {
|
||||
return new Error(t('common.mandatory'))
|
||||
} else if (!reg.test(value)) {
|
||||
return new Error(t(msg))
|
||||
}
|
||||
invalidData.value = false
|
||||
return true
|
||||
}
|
||||
|
||||
function easyInput(domain: string) {
|
||||
props.domain.admin_email = `admin@${domain}`
|
||||
props.domain.main_dns = `ns1.${domain}`
|
||||
}
|
||||
</script>
|
||||
@ -25,7 +25,7 @@
|
||||
{{ t('common.cancel') }}
|
||||
</NButton>
|
||||
<NSpin :show="loading">
|
||||
<NButton size="small" type="error" :disabled="domain_name !== domain?.domain_name"
|
||||
<NButton size="small" type="error" :disabled="(domain_name !== domain?.domain_name) || loading"
|
||||
@click="confirm">
|
||||
<template #icon>
|
||||
<NIcon>
|
||||
@ -57,7 +57,7 @@ const domainStore = useDomainStore()
|
||||
const notification = useNotification()
|
||||
|
||||
const props = defineProps<{
|
||||
domain: Domain | undefined
|
||||
domain: Domain
|
||||
}>()
|
||||
|
||||
async function confirm() {
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
new: 'New',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'OK',
|
||||
mandatory: 'This field is mandatory'
|
||||
},
|
||||
api: {
|
||||
error400: {
|
||||
@ -37,13 +38,26 @@ export default {
|
||||
}
|
||||
},
|
||||
domains: {
|
||||
'_': 'Domain',
|
||||
dnsRecord: 'DNS Record',
|
||||
delete: 'Remove Domain',
|
||||
deleteHint: 'All records of this domain will be WIPED!',
|
||||
confirm1: 'Please input',
|
||||
confirm2: 'for comfirmation'
|
||||
confirm2: 'for comfirmation',
|
||||
|
||||
form: {
|
||||
adminMail: 'Admin Email',
|
||||
mainDNS: 'Main DNS',
|
||||
unitForSecond: 'Second(s)'
|
||||
},
|
||||
|
||||
errors: {
|
||||
domainName: 'Invalid domain name',
|
||||
mail: 'Invalid email',
|
||||
}
|
||||
},
|
||||
records: {
|
||||
'_': 'Record',
|
||||
name: 'Record Name',
|
||||
recordType: 'Type',
|
||||
content: 'Record',
|
||||
|
||||
@ -9,6 +9,7 @@ export default {
|
||||
new: '新增',
|
||||
cancel: '取消',
|
||||
confirm: '确定',
|
||||
mandatory: '此项必填'
|
||||
},
|
||||
api: {
|
||||
error400: {
|
||||
@ -37,13 +38,26 @@ export default {
|
||||
}
|
||||
},
|
||||
domains: {
|
||||
'_': '域名',
|
||||
dnsRecord: 'DNS 记录',
|
||||
delete: '删除域名',
|
||||
deleteHint: '该域名所有记录将被删除！',
|
||||
confirm1: '请输入',
|
||||
confirm2: '以确认要删除的域名'
|
||||
confirm2: '以确认要删除的域名',
|
||||
|
||||
form: {
|
||||
adminMail: '管理员邮箱',
|
||||
mainDNS: '主 DNS 服务器',
|
||||
unitForSecond: '秒'
|
||||
},
|
||||
|
||||
errors: {
|
||||
domainName: '这不是一个有效的域名',
|
||||
mail: '这不是一个有效的邮箱',
|
||||
}
|
||||
},
|
||||
records: {
|
||||
'_': '记录',
|
||||
name: '记录名',
|
||||
recordType: '类型',
|
||||
content: '记录值',
|
||||
|
||||
@ -7,13 +7,15 @@ import { getErrorInfo } from '@/apis/api'
|
||||
import DomainInfo from '@/components/domains/DomainInfo.vue'
|
||||
import DomainOps from '@/components/domains/DomainOps.vue'
|
||||
import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
|
||||
import DomainEditModal from '@/components/domains/DomainEditModal.vue'
|
||||
|
||||
const domainStore = useDomainStore()
|
||||
const notification = useNotification()
|
||||
|
||||
const loading = defineModel<boolean>('loading', { default: true });
|
||||
const removeModalShow = defineModel<boolean>('removeModalShow', { default: false })
|
||||
const operationDomain = defineModel<Domain|undefined>('operationDomain')
|
||||
const editModalShow = defineModel<boolean>('editModalShow', { default: false })
|
||||
const operationDomain = defineModel<Domain>('operationDomain', { default: {} as Domain })
|
||||
|
||||
onMounted(() => {
|
||||
try {
|
||||
@ -29,6 +31,16 @@ function showRemoveModal(domain: Domain) {
|
||||
operationDomain.value = domain
|
||||
removeModalShow.value = true
|
||||
}
|
||||
|
||||
function showEditModal(domain: Domain) {
|
||||
operationDomain.value = domain
|
||||
editModalShow.value = true
|
||||
}
|
||||
|
||||
function addDomain() {
|
||||
const domain = {} as Domain
|
||||
showEditModal(domain)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -40,11 +52,11 @@ function showRemoveModal(domain: Domain) {
|
||||
size="large" hoverable>
|
||||
<DomainInfo :domain="domain" />
|
||||
<template #action>
|
||||
<DomainOps :domain="domain" @remove-domain="showRemoveModal"/>
|
||||
<DomainOps :domain="domain" @remove-domain="showRemoveModal" @edit-domain="showEditModal" />
|
||||
</template>
|
||||
</NCard>
|
||||
<NCard hoverable>
|
||||
<NButton block quaternary size="large">
|
||||
<NButton block quaternary size="large" @click="addDomain">
|
||||
<template #icon>
|
||||
<NIcon :component="PlusSquare" :depth="5" />
|
||||
</template>
|
||||
@ -52,6 +64,7 @@ function showRemoveModal(domain: Domain) {
|
||||
</NCard>
|
||||
</NFlex>
|
||||
<DomainRemoveModal v-model:show="removeModalShow" :domain="operationDomain" />
|
||||
<DomainEditModal v-model:show="editModalShow" :domain="operationDomain" />
|
||||
</NModalProvider>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user