From 21180e9e683522f16cff7792c54ab15c4856a063 Mon Sep 17 00:00:00 2001 From: alan Date: Sun, 5 May 2019 17:06:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=BA=93=E8=BF=9E=E6=8E=A5=E6=96=B0=E5=A2=9E=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.component.scss | 27 +++++++++++++- src/app/link_set/left/left.service.ts | 1 + .../left/left_item/left.item.component.ts | 5 +-- src/app/link_set/link-set.component.ts | 6 ++-- src/app/link_set/right/nothing.component.ts | 35 +++++++++++++++++++ src/app/link_set/right/right.component.ts | 35 +++++++++++++++++++ src/app/link_set/right/right.model.ts | 8 +++++ .../right_detail/right.detail.component.ts | 18 ++++++++++ .../right_title/right.title.component.ts | 25 +++++++++++++ src/ui/type.ts | 1 + 10 files changed, 154 insertions(+), 7 deletions(-) create mode 100644 src/app/link_set/right/nothing.component.ts create mode 100644 src/app/link_set/right/right.component.ts create mode 100644 src/app/link_set/right/right.model.ts create mode 100644 src/app/link_set/right/right_detail/right.detail.component.ts create mode 100644 src/app/link_set/right/right_title/right.title.component.ts diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e1c3f05..d133b53 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -68,12 +68,37 @@ } .left-item-selected{ background-color: rgba(54,133,242,.05); - .bi-text{ + .link-title{ color: #3685f2; } } } } +.database-right{ + .bi-flex-center-adapt-layout{ + height: 100%; + .data-connection-background{ + background: url(../img/resources.png) center center no-repeat; + background-size: contain; + } + } + .right-content{ + .right-title{ + border-bottom: 1px solid #e8eaed; + color: #3d4d66; + line-height: 40px; + padding-left: 10px; + .right-title-text{ + font-weight: 700; + } + .right-title-button{ + float: right !important; + margin-right: 10px; + margin-top: 8px; + } + } + } +} .link-font .b-font:before { content: "\e759"; diff --git a/src/app/link_set/left/left.service.ts b/src/app/link_set/left/left.service.ts index 6dc2946..dc7a01a 100644 --- a/src/app/link_set/left/left.service.ts +++ b/src/app/link_set/left/left.service.ts @@ -10,6 +10,7 @@ export const getLinks = (linkList: LinkType[]): any => { title: item.connectionName, id: item.connectionId, creator: item.creator, + text: item.databaseType.toLocaleUpperCase().replace(' ', '-'), }); }); diff --git a/src/app/link_set/left/left_item/left.item.component.ts b/src/app/link_set/left/left_item/left.item.component.ts index 837a07a..14a8e13 100644 --- a/src/app/link_set/left/left_item/left.item.component.ts +++ b/src/app/link_set/left/left_item/left.item.component.ts @@ -11,7 +11,7 @@ const Widget: WidgetType = { return BI.Models.getModel(LeftItemModel); }, render() { - const {title, extraCls} = this.options; + const {title, extraCls, creator, text} = this.options; return { type: Left, @@ -28,6 +28,7 @@ const Widget: WidgetType = { }, { type: Label, + cls:'link-title', textAlign: 'left', text: title, title, @@ -55,7 +56,7 @@ const Widget: WidgetType = { cls: 'info-font', height: 24, width: 26, - title: '提示', + title: `类型：${text === 'DESIGNER' ? '其他' : text} \r\n创建者：${creator}`, }, { type: Icon, diff --git a/src/app/link_set/link-set.component.ts b/src/app/link_set/link-set.component.ts index c99a345..9597ea3 100644 --- a/src/app/link_set/link-set.component.ts +++ b/src/app/link_set/link-set.component.ts @@ -2,6 +2,7 @@ import {Htape, WidgetType, Vtape, Left} from '@ui'; import LeftList from './left/left.component'; import linkSetModel from './link-set.model'; import Select from './select/select.component'; +import Right from './right/right.component'; const className = 'fr.linkset'; const Widget: WidgetType = { _store() { @@ -40,10 +41,7 @@ const Widget: WidgetType = { }, width: 280, }, { - type: 'bi.label', - cls: 'layout-bg2', - textAlign: 'left', - text: '宽度充满剩余空间', + type: Right, }], }; }, diff --git a/src/app/link_set/right/nothing.component.ts b/src/app/link_set/right/nothing.component.ts new file mode 100644 index 0000000..28f5c6d --- /dev/null +++ b/src/app/link_set/right/nothing.component.ts @@ -0,0 +1,35 @@ +import {WidgetType, CenterAdapt, Vertical, Layout, Label} from '@ui/index'; +const className = 'fr.component.right.nothing'; +const Widget: WidgetType = { + render() { + return { + type: CenterAdapt, + items: [{ + type: Vertical, + width: 260, + height: 180, + items:[ + { + type: Layout, + cls: 'data-connection-background', + width: 260, + height: 130, + }, + { + type:Label, + cls: 'bi-tips', + text:'请选择左侧数据连接或点击新建数据连接', + }, + { + type:Label, + cls: 'bi-tips', + text:'平台仅支持使用JDBC的数据连接的管理', + }, + ], + + }], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_set/right/right.component.ts b/src/app/link_set/right/right.component.ts new file mode 100644 index 0000000..186e838 --- /dev/null +++ b/src/app/link_set/right/right.component.ts @@ -0,0 +1,35 @@ +import {WidgetType, Vertical} from '@ui'; +import {LinkType} from '@ui/type'; +import Nothing from './nothing.component'; +import RightDetail from './right_detail/right.detail.component'; +import RightModel from './right.model'; +let rightContent: any = null; +const className = 'fr.component.right'; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(RightModel); + }, + watch:{ + linkSelected(linkSelected: LinkType) { + console.log('%clinkSelected: ', 'color: MidnightBlue; background: Aquamarine;', linkSelected); + }, + }, + render() { + return { + type:Vertical, + cls:'database-right', + ref(_ref: any) { + rightContent = _ref; + }, + }; + }, + mounted() { + rightContent.populate(BI.createItems([ + { + type: RightDetail, + }, + ])); + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_set/right/right.model.ts b/src/app/link_set/right/right.model.ts new file mode 100644 index 0000000..c1eba8d --- /dev/null +++ b/src/app/link_set/right/right.model.ts @@ -0,0 +1,8 @@ +const className = 'fr.model.linkSet.right'; +const Model = BI.inherit(Fix.Model, { + context: ['linkList', 'linkSelected'], + actions: { + }, +}); +BI.model(className, Model); +export default className; diff --git a/src/app/link_set/right/right_detail/right.detail.component.ts b/src/app/link_set/right/right_detail/right.detail.component.ts new file mode 100644 index 0000000..c6b6bba --- /dev/null +++ b/src/app/link_set/right/right_detail/right.detail.component.ts @@ -0,0 +1,18 @@ +import {WidgetType, Vertical, Left, Label, Button} from '@ui/index'; +import Title from '../right_title/right.title.component'; +const className = 'fr.component.right.detail'; +const Widget: WidgetType = { + render() { + return { + type: Vertical, + cls:'right-content', + items: [ + { + type: Title, + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_set/right/right_title/right.title.component.ts b/src/app/link_set/right/right_title/right.title.component.ts new file mode 100644 index 0000000..9dbf63f --- /dev/null +++ b/src/app/link_set/right/right_title/right.title.component.ts @@ -0,0 +1,25 @@ +import {WidgetType, Left, Label, Button} from '@ui/index'; +const className = 'fr.component.right.title'; +const Widget: WidgetType = { + render() { + return { + type: Left, + height: 40, + cls: 'right-title', + items: [ + { + type: Label, + cls: 'right-title-text', + text: '数据连接(APACHE KYLIN)', + }, + { + type: Button, + cls:'right-title-button', + text: '编辑', + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/ui/type.ts b/src/ui/type.ts index c62db8b..d682e8b 100644 --- a/src/ui/type.ts +++ b/src/ui/type.ts @@ -22,4 +22,5 @@ export interface LinkType{ databaseType?: string; privilegeDetailBeanList?: any; isSelected?: boolean; + text: string; }