目录结构

── enniot-dhcp-conf
    ├── dhcp.vue
    ├── README.md
    ├── dhcp.schema.json
    └── package.json

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------------------------------------------------ | ------ | ------ | ------ | | schema | 规定 form 格式的 json 文件 | json | — | — | | data | 用于将后台读取的数据填入 form 组件；以及获取 form 中数据，并将这些数据打包作为参数提交。 | object | — | — |

Data

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ----------------- | ------- | ---------- | ------ | | enable | 状态 | Boolean | true/false | — | | ip_start | 起始地址 | string | | — | | ip_end | 结束地址 | string | — | — | | lease_time | 有效期 (30-10080) | string | — | — | | device_eui | 设备编号 | string | — | — | | password | 密码 | string | — | — |

Usage

<template>
	<el-row>
       <!--DHCP界面-->
          <el-tab-pane
            label="DHCP"
            name="dhcp"
            ref="dhcpTab"
          >
            <el-card
              v-loading="loading"
              class="grid-card"
            >
              <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)"
                >
                  <DHCP
                    ref="dhcp"
                    :data="dhcpData"
                    style="width: 40%"
                  />
                  <el-button
                    type="primary"
                    icon="el-icon-check"
                    style="margin-left: 34%;"
                    @click="onSubmitDHCP(index)"
                  >
                    提交
                  </el-button>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-tab-pane>
     </el-tabs>
  </el-row>
</template>

<script>
	import baseUrl from "@/service/api";
    import IoTPlarform from '@/views/components/IoTPlatform/IoTPlatform.vue';
    export default {
        components: {
          IoTPlatform,  
        },
        data() {
            return {
      			iotForm: {
        			type: 'IoT',
      			},
            }
        },
        methods: {
            // DHCP的查询
            async fetchDHCPData(index) {
              const api = `${baseUrl}/api/dhcp/${index -1}`;
              const res = await this.$api.get(api);
              this.dhcpData = res;
            },
            // DHCP的提交
            async onSubmitDHCP(index) {
              const isValid = await this.$refs.dhcp[index - 1].validate();
              if (isValid) {
                const api = `${baseUrl}/api/dhcp/${index -1}`;
                await this.$api.post(api, this.dhcpData, {target: this.$refs.dhcpTab});
                await this.fetchDHCPData(index);
              }
            },
    }