@blueking/ip-selector

蓝鲸 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: [],
// 选择完成后结果展示时是否统计主机总数（支持 dynamicTopo，dynamicGroup 两种类型的主机统计）
showViewFinalHostTotalCount: false,

// 创建时是否提示 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,
// 人员选择器组件 HOST
bk_user_selector_host: http://xx.yy.com
})),
})

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

#### 组件 Props

{
  hostList: [],
  nodeList: [],
  dynamicGroupList: [],
  serviceTemplateList: [],
  setTemplateList: []
}

{
  hostList: [],
  nodeList: [],
  dynamicGroupList: [],
  serviceTemplateList: [],
  setTemplateList: []
}

Dialog 确定按钮是否禁用

返回 Boolean 表示禁用状态，返回 String 表示禁用状态的 Tips

静态拓扑主机是否禁用

params: (hostData, hostList)

返回 Boolean 表示禁用状态，返回 String 表示禁用状态的 Tips

function(h, params: {data: HostInfo, source: 'select'|'selectPreview'|'view'}) {
  return h('bk-tag', '主机')
}

function(h, params: {data: NodeInfo, source: 'select'|'selectPreview'|'view'}) {
  return h('bk-tag', ' 节点')
}

{
  fetchTopologyHostCount:
  () => Promise.resolve([]),
  fetchTopologyHostsNodes:
  () => Promise.resolve([]),
  fetchTopologyHostIdsNodes:
  () => Promise.resolve([]),
}

{
  panelList: [
  'staticTopo',
  'dynamicTopo',
  'dynamicGroup',
  'manualInput'
  ],
  unqiuePanelValue: true,
  nameStyle: 'camelCase',
}

#### 组件 Events

// 根据配置的 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
    }
  ]
}

#### 实例方法

  Promise.resolve([
    {
      host_id: 1,
      ip: '1.1.1.1',
      ...
    }
  ])

获取选择结果的主机 IPv4 列表

[
  1.1.1.1,
  ...
]

[
  ee.fff.ddd.111,
  ...
]

[
  2.2.2.2,
  ...
]

[
  ee.fff.ddd.222,
  ...
]

true // 展开所有
false // 收起所有
[ // 展开指定
  'host',
  'node',
  'dynamicGroup',
  'setTemplate',
  'serviceTemplate'
]