@blueking/bk-query-component v2.0.1

DataQuery 组件化

基于Omi框架，使用JSX语法快速开发的Web Component，用以支持计算平台查询组件化需求，能够跨平台，不依赖运行时框架的组件。

版本更新

V1.2.1-beta.0

feature:

• 数据结果图表icon添加tooltips
• 数据结果表图表 x轴和 y轴字段互斥
• 折线图/面积图默认x轴选中 dtEventTime(如果有该字段的话)

fix:

• 没有SQL问题的提示文案改为 一切正常

V1.2.0 正式版

feature:

• 添加函数列表功能
• 添加can-save-query参数，支持关闭sql保存和历史查询功能
• 添加初始化上下栏比例配置 init-scale
• 添加 addNewTab 回调
• 添加 can-collapse 属性，默认为false，当为true时，支持面板的展开和收起
• 添加 custom-title 属性，默认为''， 新建查询名称默认则为未命名， 当传入值时，新建查询的名称则为传入的值，注意自定义传入需要自己实现国际化
• 添加 startQuery 方法，支持从外部直接调用执行查询方法
• 激活tab时，触发 activeTab 事件
• query-component-result组件添加 empty 插槽和 emptyslot属性，用于自定义空数据的UI

fix:

• 优化和修复can-save-query为false的场景和体验
• 修复下拉组件、collapse初始化无法展开的问题
• 修复已知体验问题

V1.2.0-beta.38

feature:

• 函数列表支持记忆，与tab实例绑定

V1.2.0-beta.35

fix:

• 更新collapse方法，修复collapse的无法折叠的问题;

feature:

• 激活tab时，触发 activeTab 事件

V1.2.0-beta.33

fix:

• 修改调用面板折叠方法icon和文字不更新的问题

feature:

• 添加 getResultData方法，用于获取查询结果之后的回调

V1.2.0-beta.31

fix:

• 修改折叠面板的方式

V1.2.0-beta.30

fix:

• 修复插入函数会清空原SQL的问题

V1.2.0-beta.29

fix:

• 去掉表格的边框，防止在展示时有两个边框

V1.2.0-beta.27

feature:

• 添加 can-collapse 属性，默认为false，当为true时，支持面板的展开和收起
• 添加 custom-title 属性，默认为''， 新建查询名称默认则为未命名， 当传入值时，新建查询的名称则为传入的值，注意自定义传入需要自己实现国际化
• 添加 startQuery 方法，支持从外部直接调用执行查询方法

V1.2.0-beta.26

feature:

• 添加 show-border 属性，默认是 false，当为 true 时添加左右边框，以适应不同的应用场景;

fix:

• 优化 can-save-query 为false的场景：
  • 修复新建tab时执行按钮为禁用但却可以执行的状态异常；
  • 删除Tab的小黄点以及tooltip；
  • 禁用 ctrl + s 保存查询的快捷键;
  • tab组件在点击时重新计算以消除漂移的问题;

V1.2.0-beta.24

feature:

• query-component-result组件添加 empty 插槽和 emptyslot属性，用于自定义空数据的UI

V1.2.0-beta.17

feature:

• 添加函数列表插入tooltip
• 添加函数列表搜索为空的交互和提示
• 添加初始化上下栏比例配置 init-scale
• 添加 addNewTab 回调

fix:

• 修复查询列表消失问题
• 修复国际化问题，修复collapse组件的初始化无法展开的问题
• 下拉列表组件优化
• 优化函数列表显示问题 & 修复tooltip在全屏下的展示问题

V1.2.0-beta.7

feature:

• 完善函数列表交互
• 更新函数列表接口格式
• 添加can-save-query参数，支持关闭sql保存和历史查询功能

V1.2.0-beta

feature:

• 新增函数列表

1.1.4-beta.9 （数据详情功能稳定版）

feature:

• 数据详情功能上线

fix:

• 修复结果为0不跳转问题
• 修复渲染两个结果表问题
• 修复提前跳转结果引起数据为渲染问题
• 修复结果数据在轮询时重新查询没有充值导致结果错乱的问题
• 修复结果刷新导致表格滚动的问题

1.1.4-beta.0

fix:

• 锁定omi等包版本，防止线上因依赖问题报错

v1.0.0 正式版

feature:

• 数据查询组件完成功能

开始

安装依赖

npm install

运行项目

npm run start

项目打包

npm run build

打包产物在dist中，其中main.js是页面级入口，如果只需要组件本身，引入dist/assets下，除了main.xxx.js之外的所有文件，即可使用<data-query></data-query>组件。

打包产物

注意：OMI组件可跨框架使用，但是由于web-compoennt组件属性不能像框架props一样直接传递Array、Object类型的参数。为此，需要在组件内使用static propTypes对其属性类型进行标记，在遇到Array、Object时，WeElement类会自动进行一次JSON.parse转换。 这就要求，使用static propTypes定义的组件，在框架内使用进行参数传递时，必须使用JSON.stringify(xxx)对数据进行转换传入，而不能直接传入。

为了能灵活复用组件，采用模块化开发，内部的模块也同样进行了整合和拆分。整体来讲，目前打包产物包含两个可直接使用的高整合组件：

• data-query.js 完整的查询组件
• query-table 查询结果中的表格组件
• query-result 查询结果组件

data-query 组件

属性

方法

reset

该方法通过销毁现有的组件状态并将 show、queries 和 querySets.queries 属性设置为初始状态来重置组件状态。

collapsePanel

该方法设置面板的折叠状态。它接受一个单一的布尔参数 action，如果 action 为true，则表示折叠面板，否则表示展开面板。

startQuery

该方法通过调用 topPanelRef 组件上的 queryClickHandle 方法来开始查询。这可能用于在数据库管理系统中启动查询。

setSQL

该方法设置查询编辑器中的SQL代码。它接受一个单一的字符串参数 sql，表示要设置在查询编辑器中的SQL代码。

query-table 组件说明

query-result 组件

组件有个slot=left插槽， 可在其左测自定义组件

属性

function-list 函数列表组件说明

组件有个header插槽， 可在其搜索header的右侧添加自定义组件

如何开发

快速开发组件

组件的开发依赖omi框架，语法与JSX相同，一个较为标准的组件，并支持TS提示语法的，应该为

import { h, WeElement, tag } from 'omi';
import styles from './index.scss';
import iconStyles from '@/common/icon/style.css' // 如果要使用bk-icon，必须引入样式

interface IDemoProps {
  href?: string,
  disabled?: boolean,
  type?: 'default' | 'primary' | 'danger',
  onClick?: (e: any) => void
}

const tagName = 'demo'

/** 声明，用以支持TS的自动补全 */
declare global {
  namespace JSX {
    interface IntrinsicElements {
      [tagName]: Omi.Props & IDemoProps
    }
  }
}

@tag(tagName)
export default class oButton extends WeElement<ButtonProps> {
  /**
   * static css
   *  方法，将定义组件的CSS样式
   */
  static css = `
    ${styles}
    ${iconStyles}
  `

  /**
   * static defaultProps
   *  方法给定Props的默认值
   */
  static defaultProps = {
    href: 'demo',
    disabled: false,
    type: 'default'
  }

  /**
   * static propTypes
   * 如果要使props在原声HTML中支持，务必写propTypes，并注意类型定义是String 而非 string。
   * 如果在omi内使用的组件，则不需要定义此静态变量
   */
  static propTypes = {
    href: String,
    disabled: Boolean,
    type: String
  }

  render(props: IDemoProps) {
    return (...)
  }

组件通讯

父子通讯

父子组件通讯，可以使用fire自定义事件，并用onXX在父级监听

//子组件
...
this.fire('change')
...

// 父组件
...
render() {
  return(
    <div>
      <child-ele onChange={this.changeHandle.bind(this)}></child-ele>
    </div>
  )
}

祖孙组件通讯

跨域多个层级向下传递 props 有时非常麻烦，这个时候可以使用 provide 和 Inject 跨组件层级传递

define(
  'parent-el',
  class extends WeElement {
    provide = {
      name: 'omi',
    };

    render() {
      return <child-el></child-el>;
    }
  },
);

//不仅仅是子，在任意子孙曾孙节点都可以使用 inject 来消费祖先节点的注入
define(
  'child-el',
  class extends WeElement {
    inject = ['name'];

    render() {
      //output: <div>omi</div>
      return <div>{this.injection.name}</div>;
    }
  },
);

兄弟组件通讯

兄弟组件通讯，通过使用mitt进行全局通讯通过provide/inject，注册emitter，并在全局中使用

import mitt from 'mitt'
define('parent-el', class extends WeElement {

  const emitter = mitt()

  provide = {
    emitter: emitter
  }

  changeHandle() {
    ...
  }

  install() {
    emitter.on('change', this.changeHandle())
  }

  render() {
    return <child-el></child-el>
  }
})

define('child-el', class extends WeElement {

  inject = ['emitter']

  emit() {
    this.injection.emitter.emit('change')
  }
})

更新Update

update 方法是内置的重要核心方法，用于更新组件自身。比如:

this.update();

举个场景，比如点击弹出层的 mask 关闭弹出，在 react 中需要传递给父组件，让父组件更新，而 Omi 推崇自更新，这样 diff 的区域更小。

onMaskClick = ()=> {
  //修改 props
  this.props.show = false
  //防止父组件更新 diff 不出结果
  this.prevProps.show = false
  //更新，并且在 html 模式下忽略 attributes
  this.forceUpdate()
  //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
  this.fire('close')
}

也可以使用 updateProps 达到同样的效果:

onMaskClick = ()=> {
  //修改 props 并强制更新
  this.updateProps({
    show: false
  })
  //触发事件，可以通过这个更改外部的状态变量来保持一致性，但是外面的组件不用再更新
  this.fire('close')
}

如果不需要更新子组件，可以使用updateSelf方法