@blueking/ip-selector/dist/vue3.x.js

基于蓝鲸 Magicbox 和 Vue 的前端业务组件

import {
  h,
  onBeforeUnmount,
  onMounted,
  onUpdated,
  ref,
} from 'vue';

import {
  Component,
  merge,
  Vue2,
} from '@blueking/ip-selector/dist/vue2.6.x.esm';

export default (options) => {
  merge(options);

  return {
    name: 'bk-ip-selector',
    props: Object.assign({}, Component.props),
    emits: [...Component.emits],
    setup(props, context) {
      const rootRef = ref();

      let app = new Vue2({
        render: h => h(Component, {
          ref: 'componentRef',
          props,
        }),
      });

      onMounted(() => {
        app.$mount();
        rootRef.value.appendChild(app.$el);
        Component.emits.forEach((eventName) => {
          app.$refs.componentRef.$on(eventName, (...agrs) => {
            context.emit(eventName, ...agrs);
          });
        });
        onUpdated(() => {
          app.$forceUpdate();
        });
      });

      onBeforeUnmount(() => {
        app.$el.parentNode.removeChild(app.$el);
        app.$destroy();
        app = null;
      });

      context.expose({
        getHostList() {
          return app.$refs.componentRef.getHostList();
        },
        // 获取所有主机的 ipv4 列表
        getHostIpv4List() {
          return app.$refs.componentRef.getHostIpv4List();
        },
        // 获取所有主机的 ipv6 列表
        getHostIpv6List() {
          return app.$refs.componentRef.getHostIpv6List();
        },
        // 获取所有 agent 异常主机的 ipv4 列表
        getAbnormalHostIpv4List() {
          return app.$refs.componentRef.getAbnormalHostIpv4List();
        },
        // 获取所有 agent 异常主机的 ipv6 列表
        getAbnormalHostIpv6List() {
          return app.$refs.componentRef.getAbnormalHostIpv6List();
        },
        // 获取所有 ipv4 主机的列表
        getIpv4HostList() {
          return app.$refs.componentRef.getIpv4HostList();
        },
        // 获取所有 ipv6 主机的列表
        getIpv6HostList() {
          return app.$refs.componentRef.getIpv6HostList();
        },
        // 获取所有 agent 异常的 ipv4 主机列表
        getAbnormalIpv4HostList() {
          return app.$refs.componentRef.getAbnormalIpv4HostList();
        },
        // 获取所有 agent 异常的  ipv6  主机的列表
        getAbnormalIpv6HostList() {
          return app.$refs.componentRef.getAbnormalIpv6HostList();
        },
        resetValue() {
          app.$refs.componentRef.resetValue();
        },
        refresh() {
          app.$refs.componentRef.refresh();
        },
        collapseToggle(lastStatus) {
          app.$refs.componentRef.collapseToggle(lastStatus);
        },
        removeInvalidData() {
          app.$refs.componentRef.removeInvalidData();
        },
        showAllHostAgentStatistics() {
          app.$refs.componentRef.showAllHostAgentStatistics();
        },
      });

      return {
        rootRef,
        app,
      };
    },
    render() {
      return h('div', {
        role: 'bk-ip-selector',
        ref: 'rootRef',
        style: {
          height: 'inherit',
        },
      });
    },
  };
};