enniot-wan-conf

目录结构

── 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

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