enniot-hotspot-conf

目录结构

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