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

yl-cmdb-instance-selector

v2.0.2

Published

2.0.2 穿梭框左边框中选定了的属性,其不同值不能再次在左边选定,同时隐藏了顶部全选框 2.0.1 穿梭框中已经选择了属性,不同的值不能再次选定

Downloads

3

Readme

版本说明

2.0系列,是yl二期2.1.6版本对应的组件

2.0.2 穿梭框左边框中选定了的属性,其不同值不能再次在左边选定,同时隐藏了顶部全选框 2.0.1 穿梭框中已经选择了属性,不同的值不能再次选定

3.0系列,是yl二期2.1.10之后对应的组件

cmdb-instance-selector

cmdb 实例选择器

该组件有两个方法:confirm、 cancel。
2 个必传值:data、api。
3 个可选值:readonly、modal、multipleLimit。

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

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

function confirm(res) {}

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

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

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

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

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

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

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

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

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

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",
  }

3.新增onlySelectSameValuePropertyName属性,传入该值,该值对应的穿越框属性仅能选择1个,在属性值不同时。