senset/reCoreD-UI
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

delete domain modal done

Browse Source
This commit is contained in:
Sense T 2024-04-08 15:02:55 +08:00
parent 753e950fae
commit 36b0384319
13 changed files with 229 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
TODO
View File

@ -1,9 +1,8 @@
- [x] metrics - [x] metrics
- [] Web UI - [] Web UI
- [] i18n - [x] i18n
- [] modals
- [] swagger - [] swagger
- [] Nix Module - [] Nix Module
- [] RBAC - [] RBAC
- [] Audit - [] Audit

22
web/src/components/domains/DomainOps.vue
View File

@ -9,27 +9,27 @@
</template> </template>
</NButton> </NButton>
</template> </template>
查看/修改记录 {{ t('domains.dnsRecord') }}
</NTooltip> </NTooltip>
<NTooltip trigger="hover"> <NTooltip trigger="hover">
<template #trigger> <template #trigger>
<NButton size="tiny"> <NButton size="tiny">
<template #icon> <template #icon>
<NIcon :component="EditRegular" /> <NIcon :component="EditRegular" @click="editDomain" />
</template> </template>
</NButton> </NButton>
</template> </template>
修改 {{ t('common.edit') }}
</NTooltip> </NTooltip>
<NTooltip trigger="hover"> <NTooltip trigger="hover">
<template #trigger> <template #trigger>
<NButton type="error" size="tiny"> <NButton type="error" size="tiny">
<template #icon> <template #icon>
<NIcon :component="TrashAlt" /> <NIcon :component="TrashAlt" @click="removeDomain"/>
</template> </template>
</NButton> </NButton>
</template> </template>
删除 {{ t('common.delete') }}
</NTooltip> </NTooltip>
</NFlex> </NFlex>
</div> </div>
@ -40,12 +40,24 @@ import { NSpace, NButton, NIcon, NTooltip, NFlex } from 'naive-ui'
import { TrashAlt, EditRegular, Book } from '@vicons/fa' import { TrashAlt, EditRegular, Book } from '@vicons/fa'
import { type Domain } from "../../stores/domains" import { type Domain } from "../../stores/domains"
import router from '@/router'; import router from '@/router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n()
const props = defineProps<{ const props = defineProps<{
domain: Domain domain: Domain
}>() }>()
const emit = defineEmits(['remove-domain', 'edit-domain'])
function loadRecord() { function loadRecord() {
router.push(`/records/${props.domain.domain_name}`) router.push(`/records/${props.domain.domain_name}`)
} }
function removeDomain() {
emit('remove-domain', props.domain)
}
function editDomain() {
emit('edit-domain', props.domain)
}
</script> </script>

83
web/src/components/domains/DomainRemoveModal.vue
View File

@ -1,13 +1,88 @@
<template> <template>
<NModal :mask-closable="false" :show="show"> <NModal :mask-closable="false" :show="show">
<NCard size="huge" role="dialog" aria-modal="true" style="width: 600px">
<template #header>
<NIcon class="icon-down" color="red">
<QuestionCircle />
</NIcon>
{{ t('domains.delete') }} - {{ domain?.domain_name }}
</template>
<p>{{ t('common.deleteConfirm') }}</p>
<p>{{ t('domains.deleteHint') }}</p>
<p>{{ t('domains.confirm1') }} <b id="boldit">{{ domain?.domain_name }}</b> {{ t('domains.confirm2') }}</p>
<br />
<p>
<NInput v-model:value="domain_name" :placeholder="domain?.domain_name" />
</p>
<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="error" :disabled="domain_name !== domain?.domain_name"
@click="confirm">
<template #icon>
<NIcon>
<TrashAlt />
</NIcon>
</template>
{{ t('common.confirm') }}
</NButton>
</NSpin>
</NFlex>
</template>
</NCard>
</NModal> </NModal>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { NModal } from 'naive-ui' import { useDomainStore, type Domain } from '@/stores/domains';
import { NModal, NCard, NFlex, NButton, NIcon, NInput, NSpin, useNotification } from 'naive-ui'
import { Times, TrashAlt, QuestionCircle } from '@vicons/fa';
import { useI18n } from 'vue-i18n';
import { getErrorInfo } from '@/apis/api';
const { t } = useI18n()
const show = defineModel<boolean>('show', { default: false })
const domain_name = defineModel<string>('domain_name')
const loading = defineModel<boolean>('loading', { default: false })
const domainStore = useDomainStore()
const notification = useNotification()
const props = defineProps<{ const props = defineProps<{
show: boolean domain: Domain | undefined
}>() }>()
</script>
async function confirm() {
domain_name.value = '';
loading.value = true;
if (props.domain) {
try {
await domainStore.removeDomain(props.domain)
show.value = false;
} catch (e) {
const msg = getErrorInfo(e)
notification.error(msg)
}
}
loading.value = false;
}
</script>
<style scoped>
.icon-down {
transform: translateY(2px);
}
b#boldit {
font-weight: bold;
}
</style>

7
web/src/components/icons/IconCommunity.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
/>
</svg>
</template>

7
web/src/components/icons/IconDocumentation.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
<path
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
/>
</svg>
</template>

7
web/src/components/icons/IconEcosystem.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
<path
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
/>
</svg>
</template>

7
web/src/components/icons/IconSupport.vue
View File

@ -1,7 +0,0 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
<path
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
/>
</svg>
</template>

19
web/src/components/icons/IconTooling.vue
View File

@ -1,19 +0,0 @@
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
aria-hidden="true"
role="img"
class="iconify iconify--mdi"
width="24"
height="24"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 24 24"
>
<path
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
fill="currentColor"
></path>
</svg>
</template>

8
web/src/locale/en-US.ts
View File

@ -7,6 +7,8 @@ export default {
edit: 'Edit', edit: 'Edit',
add: 'New', add: 'New',
new: 'New', new: 'New',
cancel: 'Cancel',
confirm: 'OK',
}, },
api: { api: {
error400: { error400: {
@ -35,7 +37,11 @@ export default {
} }
}, },
domains: { domains: {
dnsRecord: 'DNS Record' dnsRecord: 'DNS Record',
delete: 'Remove Domain',
deleteHint: 'All records of this domain will be WIPED!',
confirm1: 'Please input',
confirm2: 'for comfirmation'
}, },
records: { records: {
name: 'Record Name', name: 'Record Name',

8
web/src/locale/zh-CN.ts
View File

@ -7,6 +7,8 @@ export default {
edit: '修改', edit: '修改',
add: '新增', add: '新增',
new: '新增', new: '新增',
cancel: '取消',
confirm: '确定',
}, },
api: { api: {
error400: { error400: {
@ -35,7 +37,11 @@ export default {
} }
}, },
domains: { domains: {
dnsRecord: 'DNS 记录' dnsRecord: 'DNS 记录',
delete: '删除域名',
deleteHint: '该域名所有记录将被删除！',
confirm1: '请输入',
confirm2: '以确认要删除的域名'
}, },
records: { records: {
name: '记录名', name: '记录名',

48
web/src/views/DomainsView.vue
View File

@ -1,16 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import { NSpin, NFlex, NCard, NButton, NIcon, useNotification } from 'naive-ui' import { NSpin, NFlex, NCard, NButton, NIcon, useNotification, NModalProvider } from 'naive-ui'
import { PlusSquare } from "@vicons/fa" import { PlusSquare } from "@vicons/fa"
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useDomainStore } from '@/stores/domains' import { type Domain, useDomainStore } from '@/stores/domains'
import { getErrorInfo } from '@/apis/api' import { getErrorInfo } from '@/apis/api'
import DomainInfo from '@/components/domains/DomainInfo.vue' import DomainInfo from '@/components/domains/DomainInfo.vue'
import DomainOps from '@/components/domains/DomainOps.vue' import DomainOps from '@/components/domains/DomainOps.vue'
import DomainRemoveModal from '@/components/domains/DomainRemoveModal.vue'
const loading = defineModel<boolean>({ default: true });
const domainStore = useDomainStore() const domainStore = useDomainStore()
const notification = useNotification() const notification = useNotification()
const loading = defineModel<boolean>('loading', { default: true });
const removeModalShow = defineModel<boolean>('removeModalShow', { default: false })
const operationDomain = defineModel<Domain|undefined>('operationDomain')
onMounted(() => { onMounted(() => {
try { try {
domainStore.loadDomains() domainStore.loadDomains()
@ -20,27 +24,35 @@ onMounted(() => {
notification.error(msg) notification.error(msg)
} }
}) })
function showRemoveModal(domain: Domain) {
operationDomain.value = domain
removeModalShow.value = true
}
</script> </script>
<template> <template>
<div> <div>
<NSpin size="large" v-if="loading" /> <NSpin size="large" v-if="loading" />
<NFlex v-else id="domains" vertical> <NModalProvider v-else>
<NCard v-for="domain in domainStore.domains" :title="domain.domain_name" v-bind:key="domain.id" size="large" <NFlex id="domains" vertical>
hoverable> <NCard v-for="domain in domainStore.domains" :title="domain.domain_name" v-bind:key="domain.id"
<DomainInfo :domain="domain" /> size="large" hoverable>
<template #action> <DomainInfo :domain="domain" />
<DomainOps :domain="domain" /> <template #action>
</template> <DomainOps :domain="domain" @remove-domain="showRemoveModal"/>
</NCard>
<NCard hoverable>
<NButton block quaternary size="large">
<template #icon>
<NIcon :component="PlusSquare" :depth="5" />
</template> </template>
</NButton> </NCard>
</NCard> <NCard hoverable>
</NFlex> <NButton block quaternary size="large">
<template #icon>
<NIcon :component="PlusSquare" :depth="5" />
</template>
</NButton>
</NCard>
</NFlex>
<DomainRemoveModal v-model:show="removeModalShow" :domain="operationDomain"/>
</NModalProvider>
</div> </div>
</template> </template>

2
web/src/views/HomeView.vue
View File

@ -2,3 +2,5 @@
import router from '@/router'; import router from '@/router';
router.push("/domains") router.push("/domains")
</script> </script>
<template></template>

164
web/src/views/RecordsView.vue
View File

@ -1,6 +1,11 @@
<script setup lang="tsx"> <script setup lang="tsx">
import { NSpin, NPageHeader, useNotification, NFlex, NButton, NIcon, NGrid, NGi, NStatistic, NDataTable, NInput } from 'naive-ui' import {
import type { DataTableColumns, DataTableFilterState } from 'naive-ui' NSpin, NPageHeader, useNotification,
NFlex, NButton, NIcon, NGrid, NGi,
NStatistic, NDataTable, NInput,
NModalProvider
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import { useRecordStore, type Record, type SOARecord, RecordTypes } from '@/stores/records' import { useRecordStore, type Record, type SOARecord, RecordTypes } from '@/stores/records'
import { getErrorInfo } from '@/apis/api' import { getErrorInfo } from '@/apis/api'
@ -17,7 +22,6 @@ const loading = defineModel<boolean>('loading', { default: true });
const records = defineModel<Record[]>('records'); const records = defineModel<Record[]>('records');
const soa = defineModel<SOARecord | undefined>('soa') const soa = defineModel<SOARecord | undefined>('soa')
const columns = defineModel<DataTableColumns<Record>>('columns') const columns = defineModel<DataTableColumns<Record>>('columns')
const table = ref<any>(null)
columns.value = [ columns.value = [
{ {
@ -49,7 +53,7 @@ columns.value = [
{ {
key: '', key: '',
render(row: Record) { render(row: Record) {
return <RecordOps record={ row } /> return <RecordOps record={row} />
} }
} }
] ]
@ -92,81 +96,83 @@ function searchRecord(value: string) {
<div id="records"> <div id="records">
<NSpin size="large" v-if="loading" /> <NSpin size="large" v-if="loading" />
<div v-else class="content"> <div v-else class="content">
<NPageHeader :title="t('domains.dnsRecord')" :subtitle="domain" @back="goBack"> <NModalProvider>
<template #extra> <NPageHeader :title="t('domains.dnsRecord')" :subtitle="domain" @back="goBack">
<NFlex :wrap="false" justify="end" inline> <template #extra>
<NButton type="primary"> <NFlex :wrap="false" justify="end" inline>
<template #icon> <NButton type="primary">
<NIcon> <template #icon>
<PlusSquare /> <NIcon>
</NIcon> <PlusSquare />
</template> </NIcon>
{{ t('common.add') }} </template>
</NButton> {{ t('common.add') }}
<NInput :placeholder="t('records.search')" @update:value="searchRecord" clearable> </NButton>
<template #prefix> <NInput :placeholder="t('records.search')" @update:value="searchRecord" clearable>
<NIcon :component="Search" /> <template #prefix>
</template> <NIcon :component="Search" />
</NInput> </template>
</NFlex> </NInput>
</template> </NFlex>
<NGrid :cols="4"> </template>
<NGi> <NGrid :cols="4">
<NStatistic :value="soa?.refresh"> <NGi>
<template #suffix> <NStatistic :value="soa?.refresh">
s <template #suffix>
</template> s
<template #label> </template>
<NIcon class="icon"> <template #label>
<RedoAlt /> <NIcon class="icon">
</NIcon> <RedoAlt />
{{ t('records.refresh') }} </NIcon>
</template> {{ t('records.refresh') }}
</NStatistic> </template>
</NGi> </NStatistic>
<NGi> </NGi>
<NStatistic :value="soa?.retry"> <NGi>
<template #suffix> <NStatistic :value="soa?.retry">
s <template #suffix>
</template> s
<template #label> </template>
<NIcon class="icon"> <template #label>
<CheckCircle /> <NIcon class="icon">
</NIcon> <CheckCircle />
{{ t('records.retry') }} </NIcon>
</template> {{ t('records.retry') }}
</NStatistic> </template>
</NGi> </NStatistic>
<NGi> </NGi>
<NStatistic :value="soa?.expire"> <NGi>
<template #suffix> <NStatistic :value="soa?.expire">
s <template #suffix>
</template> s
<template #label> </template>
<NIcon class="icon"> <template #label>
<Clock /> <NIcon class="icon">
</NIcon> <Clock />
{{ t('records.expire') }} </NIcon>
</template> {{ t('records.expire') }}
</NStatistic> </template>
</NGi> </NStatistic>
<NGi> </NGi>
<NStatistic :value="soa?.minttl"> <NGi>
<template #suffix> <NStatistic :value="soa?.minttl">
s <template #suffix>
</template> s
<template #label> </template>
<NIcon class="icon"> <template #label>
<Cogs /> <NIcon class="icon">
</NIcon> <Cogs />
{{ t('records.ttl') }} </NIcon>
</template> {{ t('records.ttl') }}
</NStatistic> </template>
</NGi> </NStatistic>
</NGrid> </NGi>
</NPageHeader> </NGrid>
<br /> </NPageHeader>
<NDataTable :data="records" :columns="columns" ref="table" :pagination="{ pageSize: 20 }" /> <br />
<NDataTable :data="records" :columns="columns" :pagination="{ pageSize: 20 }" />
</NModalProvider>
</div> </div>
</div> </div>
</template> </template>