新增网络页面

src/components/menu.vue

@@ -71,7 +71,7 @@ export default {
                 {name:"证书", link:'/index/License', isDisabel: false},
                 {name:"鼠标的模式", link:'/index/mouse_mode', isDisabel: false},
                 {name:"NCSI", link:'/index/ncsi', isDisabel: false},
-                {name:"网络", link:'index/', isDisabel: false},
+                {name:"网络", link:'/index/network', isDisabel: false},
                 {name:"网络绑定", link:'index/', isDisabel: false},
                 {name:"网络连接", link:'index/', isDisabel: false},
                 {name:"NTP", link:'index/', isDisabel: false},

src/router/index.js

@@ -86,6 +86,13 @@ const router = new Router({
                     },
                     component: r => require.ensure([], () => r(require('../views/configuration/NCSI')), 'configuration'),
                 },
+                {
+                    path: 'network',
+                    meta: {
+                        title: '网络'
+                    },
+                    component: r => require.ensure([], () => r(require('../views/configuration/Network')), 'configuration'),
+                },
             ]
         },
         {

src/views/configuration/Network.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="dns">
+        <div class="configuration-title">Network Settings</div>
+        <div class="configuration-text">Manage network settings of the device.</div>
+        <Form :model="formServerSettings" label-position="left" :label-width="280">
+            <div class="configuration-subtitle"></div>
+            <div class="configuration-form-item">
+                <FormItem label="LAN Interface">
+                    <Select v-model="formServerSettings.LANInterface" style="width: 300px;">
+                        <Option value="0">eth0</Option>
+                        <Option value="1">eth1</Option>
+                    </Select>
+                </FormItem>
+                <FormItem label="LAN Settings">
+                    <Checkbox v-model="formServerSettings.LANSettings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="MAC Address">
+                    <Input v-model="formServerSettings.MACAddress" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">IPv4 Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="Obtain an IP address automatically">
+                    <Checkbox v-model="formServerSettings.UseDHCP1">Use DHCP</Checkbox>
+                </FormItem>
+                <FormItem label="IPv4 Address">
+                    <Input v-model="formServerSettings.IPv4Address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Subnet Mask">
+                    <Input v-model="formServerSettings.SubnetMask" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Default Gateway">
+                    <Input v-model="formServerSettings.DefaultGateway1" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">IPv6 Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="IPv6 Settings">
+                    <Checkbox v-model="formServerSettings.IPv6Settings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="Obtain an IP address automatically">
+                    <Checkbox v-model="formServerSettings.UseDHCP2">Use DHCP</Checkbox>
+                </FormItem>
+                <FormItem label="IPv6 Address">
+                    <Input v-model="formServerSettings.IPv6Address" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Subnet Prefix length">
+                    <Input v-model="formServerSettings.SubnetPrefixLength" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="Default Gateway">
+                    <Input v-model="formServerSettings.DefaultGateway2" style="width: 300px;"/>
+                </FormItem>
+            </div>
+            <div class="configuration-subtitle">VLAN Configuration</div>
+            <div class="configuration-form-item">
+                <FormItem label="VLAN Settings">
+                    <Checkbox v-model="formServerSettings.VLANSettings">Enable</Checkbox>
+                </FormItem>
+                <FormItem label="VLAN ID">
+                    <Input v-model="formServerSettings.VLANID" style="width: 300px;"/>
+                </FormItem>
+                <FormItem label="VLAN Priority">
+                    <Input v-model="formServerSettings.VLANPriority" 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: "Network",
+        data() {
+            return {
+                formServerSettings: {
+                    LANInterface: '0',
+                    LANSettings: true,
+                    MACAddress: '02:04:06:08:0A:8E',
+                    UseDHCP1: false,
+                    IPv4Address: '192.168.0.203',
+                    SubnetMask: '255.255.255.0',
+                    DefaultGateway1: '192.168.0.1',
+                    IPv6Settings: true,
+                    UseDHCP2: false,
+                    IPv6Address: '',
+                    SubnetPrefixLength: 0,
+                    DefaultGateway2: '',
+                    VLANSettings: false,
+                    VLANID: 0,
+                    VLANPriority: 0,
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .configuration-btn-right {
+        border-top: 1px solid #000;
+    }
+    .configuration-form-item  {
+        padding-left: 40px;
+    }
+</style>
+