npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

99cloud-yl-cmdb-instance-selector

v0.1.10

Published

cmdb 实例选择器

Downloads

2

Readme

cmdb-instance-selector

cmdb 实例选择器

2个方法:confirm、 cancel。
2 个必传值:data、api。
6 个可选值:readonly、modal、multipleLimit,newAppCondition、selectorConfigAll

    <cmdb-instance-selector
      @confirm="confirm"
      @cancel='cancel'
      v-if="dialogVisible"
      :data="data"
      :api="api"
      :readonly="false"
      :multipleLimit="1"
      :modal="false"
    >
    </cmdb-instance-selector>

两个方法:confirm、 cancel。

confirm:res 就是点击确定返回的数据,有嵌入式弹出式两种情况。

function confirm(res) {}

cancel:在该方法中控制组件的显示隐藏

function cancel() {
  this.dialogVisible = false
},

6个可传值:readonly、modal、multipleLimit,newAppCondition、selectorConfigAll、onlySelectSameValuePropertyName


businessSystemRadio:只用来控制业务系统改项是否可以多选,true不可以多选,false可以多选,默认为true

multipleLimit:地图路径项列表多选时用户最多可以选择的项目数,  
              默认为 0,为`0`则不限制  
              为 1 时地图路径项最多只能选择一项,以此类推...。

readonly:默认`true`只读模式, `fasle`编辑模式

newAppCondition:'app需求,传入值有三个'
name:  '控制某个地图路径项不能选择'
mapPath:'控制地图路径项是否显示,也就是地图路径项的第一层, true 地图路径项隐藏。'
condition:'name控制不能选择的那一项的默认值'
newAppCondition:{
  name:'业务系统',
  mapPath:false,
  condition:[
    {
      label:'测试2',
      value:'测试id2',
    },
  ],
},
如果只需要隐藏地图路径项,而不设置默认值
newAppCondition:{
  name:'',
  mapPath:true,
  condition:[
    {
      label:'',
      value:'',
    },
  ],
},

modal:默认`true`弹出式, `false`普通块级元素嵌入页面。  
弹出式和嵌入式的区别在于`返回值`


弹出式:点击确定通过`confirm`接收数据

嵌入式:因为嵌入式不会显示组件的`确定`按钮,所以要动态接收组件的返回数据,也是通过`confirm`来接收,当`cmdb`实例的已选列表或者地图路径项更新时,会动态返回当前所选的数据。

selectorConfigAll:要传入所有业务系统的名称和tag,在调度计划选择业务系统时,多选的业务系统的执行器标签不能冲突。

例如:
selectorConfigAll:[
  {
    name:'xxx', //业务系统名称
    tag:'xxx' // 业务系统执行器标签
  },
  {
    name:'xxx',
    tag:'xxx'
  },
  {
    name:'xxx',
    tag:'xxx'
  }
]
onlySelectSameValuePropertyName:当传入该值时,该值对应的穿梭框的某列属性不同的item仅仅只能选择一个到右边

两个必须传值:api、data


api:传入组件的 api 接口函数共有四个,名称必须和下面的一致。

{
  getInstanceListByCriteria: null,
  getMapUrlListByModelName: null,
  getPkModelAttributeName: null,
  getInstanceListByMapUrl: null,
}

data:有两种情况,回显、新增。
1.回显时传入的数据格式,该数据后台返回

/**
 * 地图路径实例数据
 */
configItemModelAttributes:[
  {
    /**
     * 地图路径属性显示名称
     */
    "attributeDesc": string
    /**
     * 地图路径属性id
     */
    "attributeName": string,
    /**
     * 地图路径属性对应的值
     */
    "attributeValue": Array,
  }

  ...
]
/**
 * 地图路径查询显示名称
 */
"configItemModelDesc": string,
/**
 * 地图路径查询主体名称
 */
"configItemModelName": string,
/**
 * 地图路径项字符串
 */
"mapUrl": string,
/**
 * 地图路径项查询条件对应的值以及cmd实例属性
 */
"resourceKey": {
        /**
         * 查询主体
         */
        "mainModel": string,
        /**
         * 地图路径项列表
         */
        "mapUrlNameKeys": Array,
        /**
         * cmdb实例属性值
         */
        "returnedAttributes": Array,
        /**
         * 是否以树形形式展示,默认false
         */
        "treeify": Boolean,
        /**
         * 地图路径项已选列表数据 Array
         */
        "where": [
          {
            /**
             * 地图路径项名称
             */
            "key": string,
            /**
             * 判断符、默认值 in
             */
            "operator": string,
            /**
             * 地图路径已选项id
             */
            "value": Array,
          },

          ...
        ],
      },

例如:

      {
        "configItemModelAttributes": [
          {
            "attributeDesc": "主机名称",
            "attributeName": "hostname",
            "attributeValue": ["devopszj000003", "devopszj000001", "devopszj000004", "devopszj000002"],
          },
          {
            "attributeDesc": "管理IP地址",
            "attributeName": "mgt_ip",
            "attributeValue": ["172.20.150.02", "172.20.150.193", "172.20.150.90", "172.20.150.01"],
          },

          ...
        ],
        "configItemModelDesc": "主机",
        "configItemModelName": "host",
        "mapUrl": "1.2.3.4.5",
        "resourceKey": {
          "mainModel": "host",
          "mapUrlNameKeys": ['system.sub_system.set.layer.group.app.host'],
          "returnedAttributes": ['host.hostname'],
          "treeify": false,
          "where": [
            {
              "key": "system.id",
              "operator": "in",
              "value": ["0UqH3Zpth1VGHYr4-4jFPi"],
            },

            ...
          ],
        },
      }

2.新增时传入的数据格式

  {
        "configItemModelAttributes": [
          {
            "attributeDesc": "xxx",
            "attributeName": "xxx",
          },
          {
            "attributeDesc": "xxx",
            "attributeName": "xxx",
          },
          ...
        ],
        "configItemModelDesc": "xx",
        "configItemModelName": "xx",
  }