decision-webui-dcm/README.md

# database-connection 数据连接设置页面
![start](https://img.shields.io/badge/start-2019%2F04%2F26-blue.svg) ![finui](https://img.shields.io/badge/lib-FinUi-blue.svg)

[KERNEL-493](http://www.finedevelop.com:2016/browse/KERNEL-493)
## 开始
下载代码

```
git clone ssh://git@cloud.finedevelop.com:7999/~alan/database-connection.git
```
安装依赖

```
yarn
```

开始开发
```
yarn start
```

## 接口文档
### 增加数据连接类型
使用`BI.config`,ConstantName名称为`dec.constant.database.conf.connect.list`，值为连接的名称

例如增加`Redis`的连接：

```js
BI.config(ConstantName, (datas: string[]) => [...datas, 'Redis']);
```

### 数据连接填写页面
ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.edit`，值为组件shortcut的名称

例如配置`Redis`的连接填写页面：

```js
const className = 'fr.plugin.redis.preview';
const RedisPreview = BI.inherit(BI.Widget, {
  render() {
    return {
      type: 'bi.left',
      cls: 'title',
      items: [{
        type: 'bi.editor',
        watermark:'这里是编辑页',
      }],
    };
  },
});
BI.shortcut(className, RedisPreview);
BI.constant('dec.constant.database.conf.connect.form.redis.edit', className);
```
### 数据连接预览页面
ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.show`，值为组件shortcut的名称

例如配置`Redis`的连接预览页面：

```js
const className = 'fr.plugin.redis.edit';
const RedisPreview = BI.inherit(BI.Widget, {
  render() {
    return {
      type: 'bi.left',
      cls: 'title',
      items: [{
        type: 'bi.label',
        text:'这里是预览页',
      }],
    };
  },
});
BI.shortcut(className, RedisPreview);
BI.constant('dec.constant.database.conf.connect.form.redis.edit', className);
```

### 插件配置表单值传递
ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.value`，值为插件数据结构

例如：

```js
const ConstantName = 'dec.constant.database.conf.connect.form.redis.value';
const form = {
  url:'192.168.1.22',
  port: 6379,
  password: '123456'
};
BI.config(ConstantName, (data: object) => form);
```

### 数据连接池页面
ConstantName名称为`dec.constant.database.conf.connect.form.${name.toLowerCase()}.pool`，值为组件shortcut的名称

例如配置`Redis`的连接预览页面：

```js
const classNamePool = 'fr.plugin.redis.pool';

const WidgetPool = BI.inherit(BI.Widget, {
  render() {
    const {maxActive, maxIdle, numActive, numIdle} = this.options;
    
    return {
      type: 'bi.left',
      items: [
        {
          type: 'bi.left',
          cls: 'right-status-item',
          items: [
            {
              type: 'bi.vertical',
              cls:'right-status-board',
              items: [
                {
                  type: 'bi.vertical',
                  cls:'right-status-board-item',
                  items: [
                    {
                      type: 'bi.label',
                      cls: 'right-status-text',
                      extraCls: 'card-font1',
                      text: numActive,
                    },
                    {
                      type: 'bi.label',
                      cls: 'right-status-text',
                      text: '/',
                    },
                    {
                      type: 'bi.label',
                      cls: 'right-status-text',
                      text: maxActive,
                    },
                  ],
                },
                {
                  type: 'bi.label',
                  text: 'Redis连接数',
                },
              ],
            },
          ],
        },
      ],
    };
  },
});
BI.shortcut(classNamePool, WidgetPool);
BI.constant('dec.constant.database.conf.connect.form.redis.pool', classNamePool);
```