## 蓝鲸 IPv6 选择器 #### 使用 ##### service.js ```javascript 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 }) }, // ... } ``` ##### 创建组件 ``` javascript 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 fetchTopologyHostIdsNodes: Service.fetchTopogyHostIdList, // (params: Object, hostOnlyValid: boolean) => Promise 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
属性名 说明 类型 可选值 默认值 必填
mode IP 选择的交互模式 String dialog | section dialog true
showDialog mode 为 dialog 时弹出 dialog Boolean true | false false true
showView IP 选择完成后是否显示结果 Boolean true | false false true
value 默认结果 Object -- 

{
  hostList: [],
  nodeList: [],
  dynamicGroupList: [],
  serviceTemplateList: [],
  setTemplateList: []
}
false
originalValue 编辑状态的初始值，用于和最新选择的值进行对比 Object -- 

{
  hostList: [],
  nodeList: [],
  dynamicGroupList: [],
  serviceTemplateList: [],
  setTemplateList: []
}
false
showViewDiff 是否在选择结果面板显示数据对比 Boolean true | false false false
viewSearchKey 在选择结果面板搜索主机 String -- -- false
defaultOutputFieldList 蓝鲸监控场景下的默认主机输出字段 Array -- ['ip', 'ipv6'] --
outputFieldOptionalHostTableColumn 蓝鲸监控场景下主机输出备选字段列表 （为空则可选所有主机字段，值为主机 column 的 key） Array -- -- --
outputFieldList

蓝鲸监控场景下的配置主机输出字段

（如果要开启该功能则值不能为空）

 Array -- -- --
readonly 只读 Boolean true | false -- false
singleHostSelect 静态拓扑主机单选 Boolean true | false -- false
disableDialogSubmitMethod 
Dialog 确定按钮是否禁用
返回 Boolean 表示禁用状态，返回 String 表示禁用状态的 Tips
 Function -- -- false
disableHostMethod 
静态拓扑主机是否禁用
params: (hostData, hostList)
返回 Boolean 表示禁用状态，返回 String 表示禁用状态的 Tips
 Function -- -- false
allowHostListMissHostId 允许 hostList 中缺少 hostId，通过 ip + cloudArea.id 回填选中主机 Boolean -- -- false
allowHostListOnlyIpv4 允许 hostList 中缺少 hostId，通过 ip 回填选中主机 Boolean -- -- false
keepHostFieldOutput change 事件回调时输出完整的主机字段 Boolean -- -- false
completeHostList change 事件回调时输出完整的主机字段 Boolean -- -- false
service 覆盖组件初始的数据源配置 Object 

{
  fetchTopologyHostCount:
  () => Promise.resolve([]),
  fetchTopologyHostsNodes:
  () => Promise.resolve([]),
  fetchTopologyHostIdsNodes:
  () => Promise.resolve([]),
}
-- false
config 覆盖组件初始的基础配置 Object 

{
  panelList: [
  'staticTopo',
  'dynamicTopo',
  'dynamicGroup',
  'manualInput'
  ],
  unqiuePanelValue: true,
  nameStyle: 'camelCase',
}
-- false
#### 组件 Events
事件名 说明 参数
change 选择完成 

// 根据配置的 panelList 返回关联结果字段
{
  hostList: [
    {
      hostId: 1111,
      ip: 'x.x.x.x',
      cloudArea: {
        id: 2222,
        name: 'default area',
      }
    }
  ],
  nodeList: [
    {
      objectId: 'module',
      instanceId: 3333
    }
  ],
  dynamicGroupList: [
    {
      id: 4444
    }
  ],
  serviceTemplateList: [
    {
      id: 5555
    }
  ],
  setTemplateList: [
    {
      id: 666
    }
  ]
}
close-dialog 关闭 dialog --
panel-change 面板切换 --
output-field-change 输出字段更改 ['ip', 'ipv6']
#### 实例方法
方法名 说明 参数 返回值
getHostList 获取选择结果的主机列表 -- 

  Promise.resolve([
    {
      host_id: 1,
      ip: '1.1.1.1',
      ...
    }
  ])
getHostIpv4List 
获取选择结果的主机 IPv4 列表
 -- 

[
  1.1.1.1,
  ...
]
getHostIpv6List 获取选择结果的主机 IPv6 列表 -- 

[
  ee.fff.ddd.111,
  ...
]
getAbnormalHostIpv4List 获取选择结果的异常主机 IPv4 列表 -- 

[
  2.2.2.2,
  ...
]
getAbnormalHostIpv6List 获取选择结果的异常主机 IPv6 列表 -- 

[
  ee.fff.ddd.222,
  ...
]
resetValue 重置选择结果 -- --
refresh 刷新结果展示面板的主机状态 -- --
collapseToggle 切换结果展示面板的折叠状态 

true // 展开所有
false // 收起所有
[ // 展开指定
  'host',
  'node',
  'dynamicGroup',
  'setTemplate',
  'serviceTemplate'
]
--
removeInvalidData 移除 view 面板无效数据 -- --