蓝鲸 IPv6 选择器

使用

service.js

  export default {
    fetchTopologyWithCount: (params) => {
      return http.post('topology_width_count', { params })
    },
    fetchTopologyHost: (params) => {
      return http.post('topology_host', { params })
    },
    fetchTopologyHostIdsNodes: (params) => {
      return http.post('topology_host_ids_noodes', { params })
    },
    // ...
  }

创建组件

import vue from 'vue';
import createFactory from '@blueking/ip-selector';
import Service from './service'

// 初始化配置，创建组件
const IpSelector = createFactory({
  // 组件版本（改变版本重置用户自定义配置）
  version: '',
  // 需要支持的面板（'staticTopo', 'dynamicTopo', 'dynamicGroup', 'serviceTemplate', 'setTemplate', 'serviceInstance', 'manualInput'）
  panelList: ['staticTopo', 'dynamicTopo', 'dynamicGroup', 'manualInput'],
  // 面板选项的值是否唯一
  unqiuePanelValue: false,
  // 字段命名风格（'camelCase', 'kebabCase'）
  nameStyle: 'camelCase',
  // 主机列表全选模式，false: 本页全选；true: 跨页全选
  hostTableDefaultSelectAllMode: false,
  // 主机列表开启仅显示可用过滤
  hostOnlyValid: false,
  // 主机列表开启仅显示可用过滤时，手动输入 tab 判断主机可用的回调
  manualInputHostValidMethod: () => true,
  // 自定义主机列表列
  hostTableCustomColumnList: [
    // {
    //   key: 'collectStatus',
    //   index: 5,
    //   width: '100px',
    //   label: '采集状态',
    //   renderHead: h => h('span', '采集状态'),
    //   field: 'collect_status',
    //   renderCell: (h, row) => h('span', row.collect_status || '--'),
    // }
  ],
  nodeTableCustomColumnList: [],  // 自定义动态拓扑列表列 同上
  serviceTemplateTableCustomColumnList: [],  // 自定义服务模板列表列 同上
  setTemplateCustomColumnList: [],  // 自定义集群模板列表列 同上
  hostMemuExtends: [
    // {
    //   name: '复制采集状态异常',
    //   action: () => {
    //     console.log('复制成功');
    //   },
    // },
  ],
  // 主机预览字段显示
  hostViewFieldRender: (host, primaryField) => host.host_id,
  // 主机列表显示列（默认值：['ip', 'ipv6', 'alive', 'osName']），按配置顺序显示列
  // 内置所有列的 key ['ip', 'ipv6', 'cloudArea', 'alive', 'hostName', 'osName', 'coludVerdor', 'osType', 'hostId', 'agentId']
  hostTableRenderColumnList: [],

  // 创建时是否提示 service 信息
  serviceConfigError: false,

  // 需要的数据源配置（返回 Promise）
  // 主机拓扑
  fetchTopologyHostCount: Service.fetchTopologyWithCount,
  fetchTopologyHostsNodes: Service.fetchTopologyHost, // (params: Object, hostOnlyValid: boolean) => Promise<any[]>
  fetchTopologyHostIdsNodes: Service.fetchTopogyHostIdList, // (params: Object, hostOnlyValid: boolean) => Promise<any[]>
  fetchHostsDetails: Service.fetchHostInfoByHostId,
  fetchHostCheck: Service.fetchInputParseHostList,
  fetchNodesQueryPath: Service.fetchNodePath,
  fetchHostAgentStatisticsNodes: Service.fetchBatchNodeAgentStatistics,
  // 动态分组
  fetchDynamicGroups: Service.fetchDynamicGroup,
  fetchHostsDynamicGroup: Service.fetchDynamicGroupHost,
  fetchHostAgentStatisticsDynamicGroups: Service.fetchBatchGroupAgentStatistics,
  // 服务模板
  fetchServiceTemplates: Service.fetchServiceTemplates,
  fetchNodesServiceTemplate: Service.fetchNodesServiceTemplate,
  fetchHostServiceTemplate: Service.fetchHostServiceTemplate,
  fetchHostAgentStatisticsServiceTemplate: Service.fetchHostAgentStatisticsServiceTemplate,
  // 集群模板
  fetchSetTemplates: Service.fetchSetTemplates,
  fetchNodesSetTemplate: Service.fetchNodesSetTemplate,
  fetchHostSetTemplate: Service.fetchHostSetTemplate,
  fetchHostAgentStatisticsSetTemplate: Service.fetchHostAgentStatisticsSetTemplate,
  // 服务实例
  fetchSeriviceInstanceList: Service.fetchSeriviceInstanceList,
  fetchSeriviceInstanceDetails: Service.fetchSeriviceInstanceDetails,
  // DBM 白名单
  fetchDBMWhitelist: Service.fetchDBMWhitelist,
  // 自定义配置
  fetchCustomSettings: Service.fetchAll,
  updateCustomSettings: Service.update,
  // 系统相关配置
  fetchConfig: () => Promise.resolve()
    .then(() => ({
      // CMDB 动态分组链接
      bk_cmdb_dynamic_group_url: `http:xx.yy.zz.com/#/business/1/custom-query`,
      // CMDB 拓扑节点链接
      bk_cmdb_static_topo_url: `http:xx.yy.zz.com/#/business/1/custom-query`,
      // DBM 创建白名单链接
      bk_dbm_whitelist: `http:xx.yy.zz.com/#/business/1/custom-query`,
      // CMDB 服务模版链接
      bk_cmdb_service_template_url: `http:xx.yy.zz.com/#/business/1/custom-query`,
    })),
})

// 全局注册
vue.component('IpSelector', IpSelector)

组件 Props

组件 Events

实例方法