目录结构

── enniot-wan-conf
    ├── Hotspot.vue
    ├── README.md
    ├── mobileHotspot.schema.json
    ├── mobileHotspotDefaultValue.json
    └── package.json

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------------------------------------------------------ | ------ | ------ | ------ | | data | 用于将后台读取以及手动输入的数据填入 form 组件；设置默认值； | object | — | — |

Data

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | -------- | ------ | ------ | ------ | | wifi_name | 网络名称 | string | — | — | | wifi_password | 网络密码 | string | — | — | | frequency_band | 网络频段 | string | — | — |

网络频段为固定的 select 下拉框，只有 2.4G 和 5G 这两个选项，目前是前端固定的显示字段，不参与与后端的数据交互。

Usage

<template>
  <el-row
    :gutter="20"
    class="page-box"
  >
    <el-col>
      <Breadcrumb
        :breadcrumbs="[{
          label: '移动热点',
        }]"
      />
    </el-col>
    <el-col>
      <el-card class="grid-card">
        <el-button
          type="primary"
          icon="el-icon-check"
          style="float:right"
          @click="onSubmit"
        >
          提交
        </el-button>
        <Hotspot :data="this.hotspotData" style="width: 40%" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import Breadcrumb from '@/component/breadcrumb.vue';
import baseUrl from '@/service/api';
import hotspotDefaultValue from './mobileHotspotDefaultValue.json'; 
import Hotspot from './Hotspot.vue'

export default {
  components: {
    Breadcrumb,
    Hotspot,
  },
  data() {
    return {
      hotspotData: hotspotDefaultValue,
    };
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    async onSubmit() {
      const api = `${baseUrl}/hotspot`;
      delete this.hotspotData.frequency_band;
      console.log("hospotData:", this.hotspotData)
      const res = await this.$api.post(api, this.hospotData);
    },
    async fetchData() {
      const api = `${baseUrl}/hotspot`;
      const res = await this.$api.get(api);
      this.hotspotData = res;
      this.hotspotData.frequency_band = '2.4G';
    },
  },
};
</script>

其中 $api 中封装的有 get、post、patch、put、delete 五种请求。