UNPKG

enniot-hotspot-conf

Version:

"fix:修复一些校验问题"

98 lines (85 loc) 2.64 kB
## 目录结构 ``` ── 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 ```vue <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 五种请求。