DataQuery 组件化
基于Omi框架，使用JSX语法快速开发的Web Component，用以支持计算平台查询组件化需求，能够跨平台，不依赖运行时框架的组件。
版本更新
update: monaco editor注册bksql使用自定义 & 函数列表支持记忆
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 组件
属性
| 属性（Props） | 类型 | 说明 |
|---|---|---|
| ws-address | string | |
| project-id | string | |
| user-name | string | |
| base-url | string | |
| download-url | string | |
| get-coolections-url | string | |
| collect-add-url | string | |
| collect-clone-url | string | |
| query-history | string | |
| collect-update-url | string | |
| collect-clone-url | string | |
| project-type | string | |
| result-list | string | |
| query-url | string | |
| query-info | string | |
| query-list-name | string | |
| query-list-rt | string | |
| query-list-user | string | |
| get-query | string | |
| tag-list | string | |
| get-query-id | string | |
| delete-collect-url | string | |
| stage-url | string | |
| min-width | number | |
| lock-query | string | |
| open-storage | boolean | |
| init-sql | string | |
| save-tab-key | string | |
| export-mode | string | |
| on-type-format | boolean | |
| can-save-query | boolean | 是否可以开启保存查询的功能，可通过历史记录查看查询记录 |
| function-list | string | 获取函数列表url，当填入url，右上角工具lan会有函数面板 |
| help-url | string | 帮助文档url，当填入时，右上角会有帮助文档的icon，点击会跳转；为空时不显示icon |
| resize-min-height | number | 上下分割布局上部SQL编辑框的最小高度，传入数字，单位为px，默认为300 |
| resize-init-scale | number | 上下分割布局初始化比例，传入数字，单位为百分比，默认为50（即55开） |
| can-collapse | boolean | 是否支持面板折叠，默认为false
|
| custom-title | string | 自定义新建查询名称，不传入时默认为未命名
|
| show-border | string | 是否显示结果表右侧边框，默认为false不展示以在查询页面使用 |
方法
| 方法名称 | 描述 | 参数 |
|---|---|---|
| reset | 重置组件状态并在200ms后重新初始化。 | 无 |
| collapsePanel | 设置面板的折叠状态。 | action: 布尔值 |
| startQuery | 开始执行查询。 | 无 |
| setSQL | 设置查询编辑器中的SQL代码。 | sql: 字符串 |
reset
该方法通过销毁现有的组件状态并将 show、queries 和 querySets.queries 属性设置为初始状态来重置组件状态。
collapsePanel
该方法设置面板的折叠状态。它接受一个单一的布尔参数 action，如果 action 为true，则表示折叠面板，否则表示展开面板。
startQuery
该方法通过调用 topPanelRef 组件上的 queryClickHandle 方法来开始查询。这可能用于在数据库管理系统中启动查询。
setSQL
该方法设置查询编辑器中的SQL代码。它接受一个单一的字符串参数 sql，表示要设置在查询编辑器中的SQL代码。
query-table 组件说明
| 属性（Props） | 类型 | 说明 |
|---|---|---|
| mask | string[] | 表格title上需要添加mask图标的集合 |
| data | object[] | 表格数据，与查询组件结果集格式一致 |
| watermark | {text: string;fontSize: number} | 水印 |
query-result 组件
组件有个slot=left插槽， 可在其左测自定义组件
属性
| 属性（Props） | 类型 | 说明 |
|---|---|---|
| counts | string | 默认为空，如果传入字符串，则自定义右侧结果显示文字 |
| watermark | {text: string;fontSize: number} | 水印 |
| preActiveIndex | number | 默认激活的标签，默认为0 |
| preOptions | JSON.stringify(object) | 默认的图表配置项，可不填 |
| query | JSON.stringify(iobject) | 当前的query实例，不填默认为空 |
| data | JSON.stringify(iobject[]) | 表格数据 |
| kdata | string | 表格数据绑定在window下的key值，其value的格式为{data: object}
|
function-list 函数列表组件说明
组件有个header插槽， 可在其搜索header的右侧添加自定义组件
| 属性（Props） | 类型 | 说明 |
|---|---|---|
| data | object[] | 函数列表数据 |
| placement | string | tooltip的放置位置，可选值为left 、 right
|
| show-storage | boolean | 是否显示存储类型选择下拉框 |
| storage | string | 存储下拉默认选中的值 |
如何开发
快速开发组件
组件的开发依赖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方法