── enniot-wan-conf
├── wan.vue
├── README.md
├── WAN.schema.json
├── WAN-default-value.json
└── package.json
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
ref | 用于父组件调用子组件的变量和方法 | string | InStation/OutStation | — |
data | 用于将后台读取以及手动输入的数据填入 form 组件;设置默认值; | object | — | — |
schema | table 新增以及编辑 form 框中的数据格式的渲染 | json | — | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
dhcp_enabled | 启用 DHCP | boolean | true/false | true |
ip | IP 地址 | string | — | — |
subnet_mask | 子网掩码 | string | — | — |
master_dns_ip | 主 DNS | string | — | — |
slave_dns_ip | 辅 DNS | string | — | — |
gateway_default | 默认网关 | string | — | — |
WAN在启用DHCP时只有主 DNS 和辅 DNS 两个属性;在未启用DHCP时有IP 地址、子网掩码、主 DNS、辅 DNS和默认网关五个配置属性。
<template>
<el-row
:gutter="20"
class="page-box"
>
<el-col>
<el-card class="grid-card">
<el-button
type="primary"
icon="el-icon-check"
style="float:right"
@click="onSubmit"
>
提交
</el-button>
<WAN :data="this.wanData" style="width: 40%" />
</el-card>
</el-col>
</el-row>
</template>
<script>
import baseUrl from '@/service/api';
import WAN from './wan.vue';
import wanDefaultValue from './WAN-default-value.json' // wanDefaultValue是form的默认值
export default {
components: {
WAN,
},
data() {
return {
wanData: {},
};
},
async created() {
await this.fetchData();
},
methods: {
// WAN的查询
async fetchWanData() {
const api = `${baseUrl}/api/wan`;
const res = await this.$api.get(api);
this.wanData = res;
},
// WAN的提交
async onSubmitWan() {
const isValid = await this.$refs.wanData.validate();
if (isValid) {
const api = `${baseUrl}/api/wan`;
await this.$api.post(api, this.wanData, {target: this.$refs.wanTab});
await this.fetchWanData();
}
},
},
};
</script>
其中 $api 中封装的有 get、post、patch、put、delete 五种请求。