enniot-dhcp-conf

目录结构

── 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);
              }
            },
    }