0.0.6 • Published 3 years ago
enniot-lan-conf v0.0.6
目录结构
── enniot-lan-conf
├── lan.vue
├── README.md
├── lan-model.json
├── LanDefaultValue.json
└── package.jsonProps
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| ref | 用于父组件调用子组件的变量和方法 | string | lanForm | lanForm |
| data | 用于将后台读取以及手动输入的数据填入 form 组件；设置默认值； | object | — | — |
| schema | table 新增以及编辑 form 框中的数据格式的渲染 | json | — | — |
Data
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| id | LAN 的 id （可去掉） | int | 1 | 1 |
| gateway_id | 网关 id（可去掉） | int | 1 | 1 |
| ip_address | ip 地址 | string | "0.0.0.0"-"255.255.255.255" | — |
| mask | 子网掩码 | string | "0.0.0.0"-"255.255.255.255" | — |
| primary_dns | 主 DNS | string | "0.0.0.0"-"255.255.255.255" | — |
| assist_dns | 辅 DNS | string | "0.0.0.0"-"255.255.255.255" | — |
| default_gateway | 缺省网关 | string | "0.0.0.0"-"255.255.255.255" | — |
Usage
<template>
<el-row
:gutter="20"
class="page-box"
>
<el-col>
<Breadcrumb
:breadcrumbs="[{
label: 'LAN',
}]"
/>
</el-col>
<el-col>
<el-tabs
v-model="lanActiveName"
:tab-position="tabPosition"
@tab-click="handleLanClick"
>
<el-tab-pane
v-for="index in lanNum"
:key="index"
:label="'LAN'+ index"
:name="String(index-1)"
>
<Lan
v-if="comType==='second'"
ref="lanData"
:data="lanForm"
style="width: 50%"
/>
<el-button
type="primary"
style="margin-left: 44%"
@click="onLanSubmit(index-1)"
>
保存
</el-button>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</template>
<script>
import Breadcrumb from '@/component/breadcrumb.vue';
import axios from 'axios';
import baseUrl from '@/service/api';
import LAN from './lan.vue';
import LanDefaultValue from './LanDefaultValue.json'; // wanDefaultValue是form的默认值
import deviceConf from '../../../../device-conf.js';
export default {
components: {
Breadcrumb,
LAN,
},
data() {
const {lan, serial} = deviceConf;
return {
lanNum: lan.num,
lanForm: {},
};
},
async created() {
await this.fetchData();
},
methods: {
// LAN的查询
async onGetLanForm(id) {
const api = `${baseUrl}/api/lan/${id}`;
const res = await this.$api.get(api);
this.lanForm = res;
},
// LAN的修改
async onLanSubmit(index) {
const isValid = await this.$refs.lanData[index].validate();
if (isValid) {
const api = `${baseUrl}/api/lan/${Number(index)}`;
await this.$api.post(api, this.lanForm);
await this.onGetLanForm(index);
}
},
},
};
</script>其中 $api 中封装的有 get、post、patch、put、delete 五种请求。