bmcui/src/views/configuration/DNS.vue

<template>
    <div class="dns">
        <div class="configuration-title">DNS Server Settings</div>
        <div class="configuration-text">Manage DNS settings of the device.</div>
        <Form :model="formServerSettings" label-position="left" :label-width="200">
            <div class="configuration-subtitle">Host Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="Host Settings">
                    <Select v-model="formServerSettings.hostSettings" style="width: 300px;">
                        <Option value="0">Manual</Option>
                        <Option value="1">Automatic</Option>
                    </Select>
                </FormItem>
                <FormItem label="Host Name">
                    <Input v-model="formServerSettings.hostName" style="width: 300px;"/>
                </FormItem>
            </div>
            <div class="configuration-subtitle">Register BMC</div>
            <div class="configuration-form-item">
                <FormItem label="eth0">
                    <div>
                        <Checkbox v-model="formServerSettings.registerBMCEth0">Register BMC</Checkbox>
                    </div>
                    <div>
                        <RadioGroup v-model="formServerSettings.radioEth0">
                            <Radio label="0">Direct Dynamic DNS</Radio>
                            <Radio label="1">DHCP Client FQDN</Radio>
                        </RadioGroup>
                    </div>
                </FormItem>
                <FormItem label="eth1">
                    <div>
                        <Checkbox v-model="formServerSettings.registerBMCEth1">Register BMC</Checkbox>
                    </div>
                    <div>
                        <RadioGroup v-model="formServerSettings.radioEth1">
                            <Radio label="0">Direct Dynamic DNS</Radio>
                            <Radio label="1">DHCP Client FQDN</Radio>
                        </RadioGroup>
                    </div>
                </FormItem>
            </div>
            <div class="configuration-subtitle">TSIG Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="TSIG Authentication">
                    <Checkbox v-model="formServerSettings.TSIGAuthentication">Enable</Checkbox>
                </FormItem>
                <FormItem label="Current TSIG Private File">
                    <Input v-model="formServerSettings.currentFile" style="width: 300px;"/>
                </FormItem>
                <FormItem label="New TSIG Private File">
                    <Upload action="//jsonplaceholder.typicode.com/posts/">
                        <Button icon="ios-cloud-upload-outline">Upload files</Button>
                    </Upload>
                </FormItem>
            </div>
            <div class="configuration-subtitle">Domain Name Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="Domain Settings">
                    <Select v-model="formServerSettings.domainSettings" style="width: 300px;">
                        <Option value="Manual">Manual</Option>
                        <Option value="eth1_v6">eth1_v6</Option>
                    </Select>
                </FormItem>
                <FormItem label="Domain Name">
                    <Input v-model="formServerSettings.domainName" style="width: 300px;"/>
                </FormItem>
            </div>
            <div class="configuration-subtitle">Domain Name Server Configuration</div>
            <div class="configuration-form-item">
                <FormItem label="DNS Server Settings">
                    <Select v-model="formServerSettings.serverSettings" style="width: 300px;">
                        <Option value="0">Manual</Option>
                    </Select>
                </FormItem>
                <FormItem label="IP Priority">
                    <RadioGroup v-model="formServerSettings.iPPriority">
                        <Radio label="0">IPv4</Radio>
                        <Radio label="1">IPv6</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="DNS Server1">
                    <Input v-model="formServerSettings.DNSServer1" style="width: 300px;"/>
                </FormItem>
                <FormItem label="DNS Server2">
                    <Input v-model="formServerSettings.DNSServer2" style="width: 300px;"/>
                </FormItem>
                <FormItem label="DNS Server3">
                    <Input v-model="formServerSettings.DNSServer3" style="width: 300px;"/>
                </FormItem>
            </div>
        </Form>
        <div class="configuration-btn-right">
            <Button type="primary" style="margin-right: 10px;">Save</Button>
            <Button type="primary">Reset</Button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DNS",
        data() {
            return {
                formServerSettings: {
                    hostSettings: '',
                    hostName: '',
                    registerBMCEth0: false,
                    registerBMCEth1: false,
                    radioEth0: '',
                    radioEth1: '',
                    TSIGAuthentication: false,
                    currentFile: '',
                    domainSettings: '',
                    domainName: '',
                    serverSettings: '',
                    iPPriority: '',
                    DNSServer1: '',
                    DNSServer2: '',
                    DNSServer3: ''
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .configuration-btn-right {
        border-top: 1px solid #000;
    }
    .configuration-form-item  {
        padding-left: 40px;
    }
</style>