目录结构

── enniot-lan-conf
    ├── lan.vue
    ├── README.md
    ├── lan-model.json
    ├── LanDefaultValue.json
    └── package.json

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------------------------------------------------ | ------ | ------- | ------- | | 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 五种请求。