## 目录结构

```
── enniot-wan-conf
    ├── wan.vue
    ├── README.md
    ├── WAN.schema.json
    ├── WAN-default-value.json
    └── package.json
```

## Props

| 参数   | 说明                                                         | 类型   | 可选值               | 默认值 |
| ------ | ------------------------------------------------------------ | ------ | -------------------- | ------ |
| ref    | 用于父组件调用子组件的变量和方法                             | string | InStation/OutStation | —      |
| data   | 用于将后台读取以及手动输入的数据填入 form 组件；设置默认值； | object | —                    | —      |
| schema | table 新增以及编辑 form 框中的数据格式的渲染                 | json   | —                    | —      |

## Data

| 参数            | 说明      | 类型    | 可选值     | 默认值 |
| --------------- | --------- | ------- | ---------- | ------ |
| 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和默认网关五个配置属性。



## Usage

```vue
<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 五种请求。