目录结构

── enniot-cloud-conf
    ├── NetworkServer.vue
    ├── README.md
    ├── NetworkServer.schema.json
    ├── NetworkServerDefault.json
    └── package.json

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ------------------------------------------------------------ | ------ | ------ | ------ | | data | 用于将后台读取以及手动输入的数据填入 form 组件；设置默认值； | object | — | — |

Data

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------------------- | ------------------- | ------ | --------------------------- | ------ | | heartbeat_judge | 心跳包失活判断 | int | — | — | | master_service_address | 主服务器地址 | string | "0.0.0.0"-"255.255.255.255" | — | | master_service_port | 端口号 | int | — | — | | protocol | 协议 | string | — | — | | keepalive_interval | 心跳包间隔/秒 | int | — | — | | stat_interval | 状态上报间隔/秒 | int | — | — | | push_timeout_ms | 服务器超时响应/毫秒 | int | — | — |

Usage

<template>
  <el-row
    :gutter="20"
    class="page-box"
  >
    <el-col>
      <el-card class="grid-card">
        <el-button
          type="primary"
          icon="el-icon-check"
          style="float:right"
          @click="onSubmit"
        >
          提交
        </el-button>
          <NetworkServer :data="this.networkData" style="width: 40%" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import baseUrl from '@/service/api';
import NetworkServer from './NetworkServer.vue';
import NetworkServerDefault from './NetworkServerDefault.json';

export default {
  components: {
    Breadcrumb,
    NetworkServer,
  },
  data() {
    return {
      networkData: {},
    };
  },
  async created() {
    await this.fetchData();
  },
  methods: {
    async fetchData() {
      const api = `${baseUrl}/cloud`;
      const res = await this.$api.get(api);
      this.networkData = res;
    },
    async onSubmit() {
      const api = `${baseUrl}/cloud`;
      delete this.networkData.protocol;
      console.log("networkData:", this.networkData)
      const res = await this.$api.post(api, this.networkData);
    },
  },
};
</script>

其中 $api 中封装的有 get、post、patch、put、delete 五种请求。