enniot-lan-conf

目录结构

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