feat: 完成redis插件连接的demo

README.md

@@ -19,12 +19,72 @@ yarn
 yarn start
 ```
 
-## 接口
+## 接口文档
 ### 增加数据连接类型
-使用`BI.config`,ConstantName名称为`bi.constant.database.conf.connect.list`，值为连接的名称
+使用`BI.config`,ConstantName名称为`dec.constant.database.conf.connect.list`，值为连接的名称
 
-### 数据连接表单
+例如增加`Redis`的连接：
-ConstantName名称为`bi.constant.database.conf.connect.form.${name.toLowerCase()}.edit`，值为组件shortcut的名称
 
-### 数据连接显示
+```js
-ConstantName名称为`bi.constant.database.conf.connect.form.${name.toLowerCase()}.show`，值为组件shortcut的名称
+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);
+```

src/app/app.component.ts

@@ -4,7 +4,8 @@ import appModel from './app.model';
 import title from './title/title.component';
 import linkSet from './link_set/link-set.component';
 import linkStatus from './link_status/link_status.component';
-import './app.plugin';
+import '../demo/plugin.redis.edit';
+import '../demo/plugin.redis.preview';
 import {fetchLinkList} from '../shared/crud/crud.request';
 import './app.component.scss';
 

src/app/app.plugin.ts

@@ -1,20 +0,0 @@
-import {Left, WidgetType, Label} from '@ui/index';
-const className = 'fr.plugin.text';
-const Widget: WidgetType = {
-  render() {
-    return {
-      type: Left,
-      cls: 'title',
-      items: [{
-        type: Label,
-        text:'123',
-      }],
-    };
-  },
-};
-BI.shortcut(className, BI.inherit(BI.Widget, Widget));
-
-export default className;
-
-BI.constant('bi.constant.database.conf.connect.form.redis.edit', className);
-BI.constant('bi.constant.database.conf.connect.form.redis.show', className);

src/app/link_set/link-set.model.ts

@@ -123,7 +123,7 @@ const Model: ModelType = {
       }
     },
     setNewLink(value: string) {
-      if (!databaseTyle.some(item => item.text === value) && !BI.Constants.getConstant(`bi.constant.database.conf.connect.form.${value.toLowerCase()}.edit`)) {
+      if (!databaseTyle.some(item => item.text === value) && !BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${value.toLowerCase()}.edit`)) {
         dialog.error('找不到该连接的配置信息');
         
         return;
@@ -158,6 +158,7 @@ const Model: ModelType = {
       this.model.linkUpdate = {
         ...data,
         connectionName:name,
+        text: value,
       };
     },
     setConnectionNameErr(err: string) {
@@ -167,9 +168,7 @@ const Model: ModelType = {
       if (this.model.linkSelected && this.model.linkSelected.isSelected) {
         dialog.confirm('当前设置尚未保存，是否保存？', (isConfirm: boolean) => {
           if (isConfirm) {
-            saveConnection(this.model.linkUpdate).then(() => {
+            this.saveLink();
-              this.setEdit(false);
-            });
           } else {
             this.setCancel();
           }
@@ -179,6 +178,16 @@ const Model: ModelType = {
         cb();
       }
     },
+    saveLink() {
+      const pluginData = this.model.linkUpdate.text ? BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${this.model.linkUpdate.text.toLowerCase()}.value`) : {};
+      const update = {
+        ...this.model.linkUpdate,
+        ...pluginData,
+      };
+      saveConnection(update).then(() => {
+        this.setEdit(false);
+      });
+    },
   },
 };
 BI.model(className, BI.inherit(Fix.Model, Model));

src/app/link_set/right/right_detail/right.detail.component.ts

@@ -10,9 +10,9 @@ let rightDetail: any = null;
 const renderEdit = (linkSelected: LinkType): void => {
   let typeEdit = linkSelected.databaseType === 'mysql' ? RightEditMysql : RightEdit;
   if (!linkSelected.driver) {
-    typeEdit = BI.Constants.getConstant(`bi.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`);
+    typeEdit = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`);
   }
-  const showPage = linkSelected.driver ? RightShow : BI.Constants.getConstant(`bi.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.show`);
+  const showPage = linkSelected.driver ? RightShow : BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.preview`);
   rightDetail.populate(BI.createItems([
     {
       type: Title,

src/app/link_set/right/right_title/right.title.component.ts

@@ -42,9 +42,7 @@ const Widget: WidgetType = {
             if (result) {
               that.store.setConnectionNameErr('数据连接名已存在');
             } else {
-              saveConnection(that.model.linkUpdate).then(() => {
+              that.store.saveLink();
-                that.store.setEdit(false);
-              });
             }
           },
         },

src/app/link_set/select/select.constant.ts

@@ -1,6 +1,5 @@
-export const ConstantName = 'bi.constant.database.conf.connect.list';
+export const ConstantName = 'dec.constant.database.conf.connect.list';
 BI.constant(ConstantName, [
   'APACHE KYLIN', 'DERBY', 'HP Vertica', 'IBM DB2', 'INFORMIX', 'Microsoft SQL Server', 'MySQL', 'Oracle', 'Privotal Greenplum Database', 'Postgresql', 'GaussDB 200',
 ]);
-BI.config(ConstantName, (datas: string[]) => [...datas, 'Redis']);
 export default ConstantName;

src/demo/plugin.redis.edit.ts

@@ -0,0 +1,97 @@
+import './style.scss';
+const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value';
+const form = {
+  url:'192.168.1.22',
+  port: 6379,
+  password: '123456',
+};
+
+const classNameEdit = 'fr.plugin.redis.edit';
+const Widget = BI.inherit(BI.Widget, {
+  render() {
+    return {
+      type: 'bi.vertical',
+      cls:'bi-plugin-redis',
+      bgap:10,
+      items: [
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '数据库地址：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.editor',
+              cls: 'bi-border',
+              watermark: '数据库地址',
+              value:form.url,
+              allowBlank: true,
+              width: 300,
+              height: 24,
+            }],
+        },
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '端口：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.editor',
+              cls: 'bi-border',
+              watermark: '端口',
+              allowBlank: true,
+              width: 300,
+              height: 24,
+              value: form.port,
+              errorText: '请输入有效的正整数',
+              validationChecker (v: string) {
+                if (/^\+?[1-9][0-9]*$/.test(v)) {
+                  return true;
+                }
+                    
+                return false;
+              },
+            }],
+        },
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '密码：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.editor',
+              cls: 'bi-border',
+              inputType:'password',
+              value: form.password,
+              allowBlank: true,
+              width: 300,
+              height: 24,
+            }],
+        },
+      ],
+    };
+  },
+});
+BI.shortcut(classNameEdit, Widget);
+export default classNameEdit;
+export const ConstantName = 'dec.constant.database.conf.connect.list';
+BI.config(ConstantName, (datas: string[]) => [...datas, 'Redis']);
+BI.constant(RedisConstantName, form);
+BI.constant('dec.constant.database.conf.connect.form.redis.edit', classNameEdit);

src/demo/plugin.redis.preview.ts

@@ -0,0 +1,69 @@
+const classNamePreview = 'fr.plugin.redis.preview';
+const RedisConstantName = 'dec.constant.database.conf.connect.form.redis.value';
+const form = BI.Constants.getConstant(RedisConstantName);
+console.log('%cform: ', 'color: MidnightBlue; background: Aquamarine;', form);
+
+const Widget = BI.inherit(BI.Widget, {
+  render() {
+    return {
+      type: 'bi.vertical',
+      cls:'bi-plugin-redis',
+      bgap:10,
+      items: [
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '数据库地址：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.label',
+              text:form.url,
+              height: 24,
+            }],
+        },
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '端口：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.label',
+              text:form.port,
+              height: 24,
+            }],
+        },
+        {
+          type: 'bi.left',
+          height: 30,
+          items: [
+            {
+              type: 'bi.label',
+              text: '密码：',
+              height: 24,
+              width: 115,
+              textAlign: 'left',
+            },
+            {
+              type: 'bi.label',
+              text:'********',
+              height: 24,
+            }],
+        },
+      ],
+    };
+  },
+});
+BI.shortcut(classNamePreview, Widget);
+BI.constant('dec.constant.database.conf.connect.form.redis.preview', classNamePreview);

src/demo/style.scss

@@ -0,0 +1,3 @@
+.bi-plugin-redis{
+  padding: 20px;
+}