# Database Connection Manager 用于决策平台和设计器中管理数据连接的通用管理器 ![fineui](https://img.shields.io/badge/lib-FineUI-blue.svg) ## 开始 安装依赖 ``` yarn ``` 开始开发 ``` yarn dev ``` ## 接口文档: ### 增加数据连接类型 使用`BI.config`,ConstantName名称为`dec.constant.database.conf.connect.types`,值为连接的名称 例如增加`Redis`的连接: ```js BI.config(ConstantPluginTyps, (datas: string[]) => [...datas, { text: 'Redis', databaseType: 'Redis', }]); ``` ### 数据连接填写页面 ConstantName名称为`dec.constant.database.conf.connect.form.${name}.edit`,值为组件shortcut的名称 ### 数据连接展示页面 ConstantName名称为`dec.constant.database.conf.connect.form.${name}.show`,值为组件shortcut的名称 ### 示例 ``` const ConstantRedisType = 'dec.constant.database.conf.connect.types'; const ConstantRedisShow = 'dec.constant.database.conf.connect.form.Redis.show'; const ConstantRedisEdit = 'dec.constant.database.conf.connect.form.Redis.edit'; BI.DOM.ready(() => { BI.config(ConstantRedisType, datas => [...datas, { text: 'Redis', databaseType: 'Redis', }]); const RedisShowName = 'dec.dcm.connection.plugin.redis.show'; const RedisShow = BI.inherit(BI.Widget, { props: { formData: { url: '', port: '6379', password: '', }, }, render() { const o = this.options; return { type: 'bi.vertical', hgap: 15, vgap: 10, items: [ { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '数据库地址', }, { type: 'bi.label', text: o.formData.url, }, ], }, { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '端口号', }, { type: 'bi.label', text: o.formData.port, }, ], }, { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '密码', }, { type: 'bi.label', text: o.formData.password, }, ], }, ], }; }, }); BI.shortcut(RedisShowName, RedisShow); BI.constant(ConstantRedisShow, RedisShowName); const RedisEditName = 'dec.dcm.connection.plugin.redis.edit'; const RedisEdit = BI.inherit(BI.Widget, { props: { formData: { url: '', port: '6379', password: '', }, }, render() { const o = this.options; return { type: 'bi.vertical', hgap: 15, vgap: 10, items: [ { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '数据库地址', }, { type: 'bi.text_editor', width: 300, allowBlank: true, ref: _ref => { this.url = _ref; }, text: o.formData.url, }, ], }, { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '端口号', }, { type: 'bi.text_editor', width: 300, allowBlank: true, ref: _ref => { this.port = _ref; }, text: o.formData.port, }, ], }, { type: 'bi.left', items: [ { type: 'bi.label', cls: 'bi-font-bold', width: 100, textAlign: 'left', text: '密码', }, { type: 'bi.text_editor', width: 300, allowBlank: true, inputType: 'password', ref: _ref => { this.password = _ref; }, text: o.formData.password, }, ], }, ], }; }, getSubmitValue() { return { url: this.url.getValue(), port: this.port.getValue(), password: this.password.getValue(), }; }, }); BI.shortcut(RedisEditName, RedisEdit); BI.constant(ConstantRedisEdit, RedisEditName); }); ```