目录结构

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

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------ | ------------------------------------------------ | --------- | -------------------- | ------ | | ref | 用于父组件调用子组件的变量和方法 | string | InStation/OutStation | — | | model | table 有关 api 的组件 url 参数以及重写方法的传入 | dataModel | — | — | | schema | table 新增以及编辑 form 框中的数据格式的渲染 | json | — | — |

Fields

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ----------------- | ------- | -------------------------------- | ------ | | id | ID | int | 1 | 1 | | gateway_id | 网关 id（可去掉） | int | 1 | 1 | | enabled | 规则行为 | Boolean | true/false | — | | card | 模块型号 | string | "WAN"/"LAN" | — | | ip_address | IP 地址 | string | — | — | | server_type | 服务类型 | string | TELNET/SSH/TFTP/FTP/ICMP/TCP/UDP | — | | direction_type | 策略类型 | string | 入站/出站 | — |

Usage

<template>
  <el-row
    :gutter="2"
    style="margin-left: 20px;"
  >
    <StationTable
      ref="Station"
      :schema="firwallSchema"
      :model="StationModel"
    >
      <template v-slot:action="{ record }">
        <span>
          <el-switch
            v-model="record.enabled"
            @change="ruleSwitched(record)"
          />
        </span>
      </template>
    </StationTable>
  </el-row>
</template>

<script>
import StationTable from '@/component/table.vue';
import DataModel from '@/component/data-model';
import baseUrl from '@/service/api';
import firwallSchema from './firewall.schema.json';

export default {
  name: 'Firewall',
  components: {
    StationTable,
  },
  data() {
    const StationModel = new DataModel({
      createApi: `${baseUrl}/api/firewall`,
      deleteApi: `${baseUrl}/api/firewall/:id`,
      updateApi: `${baseUrl}/api/firewall/:id`,
      getListApi: `${baseUrl}/api/firewall`,
    });
    return {
      firwallSchema,
      StationModel,
    };
  },
  methods: {
    async ruleSwitched(rule) {
      const ruleApi = `${baseUrl}/api/firewall/${rule.id}/enabled`;
      const rulForm = { enabled: rule.enabled };
      await this.$api.put(ruleApi, rulForm);
    },
  },
};
</script>

其中 data-model 中封装的有多种 api 的请求方法，可以接受重写函数作为参数的传入。