diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 7d17420..41b7f5a 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -45,6 +45,11 @@ } } } + .status-title{ + font-weight: 700; + margin-left: 12px; + margin-top: 12px; + } } .left-list{ margin: 10px; @@ -80,6 +85,8 @@ } } .database-right{ + min-width: 400px; + overflow: auto; .bi-flex-center-adapt-layout{ height: 100%; .data-connection-background{ @@ -87,6 +94,54 @@ background-size: contain; } } + .right-status-title{ + border-bottom: 1px solid #e8eaed; + color: #3d4d66; + line-height: 40px; + padding-left: 10px; + font-weight: 700; + } + .right-status-body{ + margin: 10px 30px 0px 30px; + height: 50%; + .right-status-item{ + height: 150px; + width: 50%; + top: 0; left: 0; + position: absolute !important; + .right-status-board { margin-left: 25px; position: relative !important; left: -25px;} + } + .right-status-right{ + height: 150px; + width: 50%; + top: 0; right:0; + position: absolute !important; + .right-status-board { margin-right: 25px; position: relative !important; left: 25px; } + } + .right-status-board{ + background-color: #f7f8fa; + color: #3d4d66; + width: 100%; + height: 100%; + .right-status-board-item{ + text-align: center; + margin-top: 35px; + margin-bottom: 6px; + .right-status-text{ + display: inline-block; + } + .card-font1{ + color: #13CD66; + font-size: 32px; + } + .card-font2{ + color: #3685F2; + font-size: 32px; + } + } + + } + } .right-content{ height: 100%; .right-title{ diff --git a/src/app/app.model.ts b/src/app/app.model.ts index 26acb2e..2b57da2 100644 --- a/src/app/app.model.ts +++ b/src/app/app.model.ts @@ -4,7 +4,7 @@ import {LinkType} from '@ui/type'; const linkList: LinkType[] = []; const Model: ModelType = { - childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected'], + childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected', 'statusSelected', 'connectionNameErr'], state () { return { tab: '数据连接管理', @@ -12,6 +12,8 @@ const Model: ModelType = { linkSelected: {}, linkUpdate: {}, moreLinkSelected:'', + statusSelected:'', + connectionNameErr:'', }; }, computed: { diff --git a/src/app/link_set/link-set.model.ts b/src/app/link_set/link-set.model.ts index f57287a..92581d5 100644 --- a/src/app/link_set/link-set.model.ts +++ b/src/app/link_set/link-set.model.ts @@ -7,7 +7,7 @@ import {saveConnection} from './link-set.service'; const className = 'fr.model.linkset'; const Model: ModelType = { - context: ['tab', 'linkList', 'linkSelected', 'linkUpdate'], + context: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'connectionNameErr'], actions: { /** * 左侧点击链接选中 @@ -161,7 +161,9 @@ const Model: ModelType = { connectionName:name, }; }, - + setConnectionNameErr(err: string) { + this.model.connectionNameErr = err; + }, }, }; BI.model(className, BI.inherit(Fix.Model, Model)); diff --git a/src/app/link_set/right/right_edit/right.edit.component.ts b/src/app/link_set/right/right_edit/right.edit.component.ts index a0bad35..52dc0a8 100644 --- a/src/app/link_set/right/right_edit/right.edit.component.ts +++ b/src/app/link_set/right/right_edit/right.edit.component.ts @@ -5,11 +5,23 @@ import Model from '../../link-set.model'; import FormItem from '@shared/components/form.item.component'; import Title from '@shared/components/title.component'; import {getDrivers} from './right.edit.service'; +let ConnectionName: any = null; const className = 'fr.component.right.edit'; const Widget: WidgetType = { _store() { return BI.Models.getModel(Model); }, + watch:{ + connectionNameErr(msg: string) { + if (msg) { + BI.Bubbles.show('singleBubble', msg, ConnectionName, { + level: 'error', + }); + } else { + BI.Bubbles.hide('singleBubble'); + } + }, + }, render() { const linkSelected: LinkType = this.model.linkSelected; const that = this; @@ -27,6 +39,9 @@ const Widget: WidgetType = { cls: 'bi-border', width: 300, value: linkSelected.connectionName, + ref(ref: any) { + ConnectionName = ref; + }, listeners: [{ eventName: BI.Editor.EVENT_CHANGE, action() { @@ -35,6 +50,11 @@ const Widget: WidgetType = { connectionName: this.getValue(), }); }, + }, { + eventName: BI.Editor.EVENT_FOCUS, + action() { + that.store.setConnectionNameErr(''); + }, }], }, }, diff --git a/src/app/link_set/right/right_edit/right.edit.service.ts b/src/app/link_set/right/right_edit/right.edit.service.ts index 195ee09..8d9fb89 100644 --- a/src/app/link_set/right/right_edit/right.edit.service.ts +++ b/src/app/link_set/right/right_edit/right.edit.service.ts @@ -2,7 +2,7 @@ import {LinkType} from '@ui/type'; export function getDrivers(linkSelected: LinkType): {text: string; value: string}[] { const drivers: {text: string; value: string}[] = []; - if (linkSelected.drivers.length > 0) { + if (linkSelected.drivers && linkSelected.drivers.length > 0) { linkSelected.drivers.forEach(item => { drivers.push({ text: item, 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 index 9c3e300..1764f69 100644 --- a/src/app/link_set/right/right_title/right.title.component.ts +++ b/src/app/link_set/right/right_title/right.title.component.ts @@ -9,6 +9,7 @@ const Widget: WidgetType = { }, render() { const linkSelected: LinkType = this.model.linkSelected; + const linkList: LinkType[] = this.model.linkList; const that = this; const {isEdit} = this.options; @@ -37,9 +38,14 @@ const Widget: WidgetType = { invisible: !isEdit, text: '保存', handler() { - saveConnection(that.model.linkUpdate).then(() => { - that.store.setEdit(false); - }); + const result = BI.find(linkList, (idx: number, value: LinkType) => that.model.linkUpdate.connectionName === value.connectionName && value.connectionId !== that.model.linkUpdate.connectionId); + if (result) { + that.store.setConnectionNameErr('数据链接名已存在'); + } else { + saveConnection(that.model.linkUpdate).then(() => { + that.store.setEdit(false); + }); + } }, }, { diff --git a/src/app/link_status/left/left.component.ts b/src/app/link_status/left/left.component.ts new file mode 100644 index 0000000..4068b29 --- /dev/null +++ b/src/app/link_status/left/left.component.ts @@ -0,0 +1,31 @@ +import {WidgetType, Vertical} from '@ui'; +import Model from './left.model'; +import {LinkType} from '@ui/type'; +import {getLinks} from './left.service'; +const className = 'fr.component.linkStatus.left'; +let leftContent: any = null; +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch:{ + linkList(linkList: LinkType[]) { + const title = linkList.length > 0 ? linkList[0].connectionName : ''; + this.store.setStatusSelected(title); + }, + statusSelected(title: string) { + const linkList = this.model.linkList; + leftContent.populate(BI.createItems(getLinks(linkList, title))); + }, + }, + render() { + return { + type: Vertical, + ref(_ref: any) { + leftContent = _ref; + }, + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_status/left/left.item.component.ts b/src/app/link_status/left/left.item.component.ts new file mode 100644 index 0000000..59b1150 --- /dev/null +++ b/src/app/link_status/left/left.item.component.ts @@ -0,0 +1,39 @@ +import {WidgetType, Left, Label} from '@ui'; +import Model from './left.model'; +const className = 'fr.component.linkStatus.left.item'; +const Widget: WidgetType = { + props: { + title:'', + id:'', + creator: '', + }, + _store() { + return BI.Models.getModel(Model); + }, + render() { + const {title, extraCls, creator, text, id} = this.options; + + return { + type: Left, + cls: 'left-item', + extraCls, + items: [ + { + type: Label, + cls:'link-title', + textAlign: 'left', + text: title, + title, + }, + ], + }; + }, + mounted() { + const {title} = this.options; + this.element.on('click', () => { + this.store.setStatusSelected(title); + }); + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_status/left/left.model.ts b/src/app/link_status/left/left.model.ts new file mode 100644 index 0000000..37419a9 --- /dev/null +++ b/src/app/link_status/left/left.model.ts @@ -0,0 +1,17 @@ +import {ModelType} from '@ui'; +const className = 'fr.model.linkstatus.left'; +const Model: ModelType = { + context: ['tab', 'linkList', 'statusSelected'], + state () { + return { + selected:'', + }; + }, + actions: { + setStatusSelected(title: string) { + this.model.statusSelected = title; + }, + }, +}; +BI.model(className, BI.inherit(Fix.Model, Model)); +export default className; diff --git a/src/app/link_status/left/left.service.ts b/src/app/link_status/left/left.service.ts new file mode 100644 index 0000000..7df380c --- /dev/null +++ b/src/app/link_status/left/left.service.ts @@ -0,0 +1,18 @@ +import {LinkType} from '@ui/type'; +import LeftItem from './left.item.component'; + +export const getLinks = (linkList: LinkType[], selectTitle = ''): any => { + const links: any[] = []; + linkList.forEach((item: LinkType) => { + links.push({ + type: LeftItem, + extraCls: item.connectionName === selectTitle ? 'left-item-selected' : '', + title: item.connectionName, + id: item.connectionId, + creator: item.creator, + text: item.text ? item.text : '默认', + }); + }); + + return links; +}; diff --git a/src/app/link_status/link_status.component.ts b/src/app/link_status/link_status.component.ts index b1d725a..196174d 100644 --- a/src/app/link_status/link_status.component.ts +++ b/src/app/link_status/link_status.component.ts @@ -1,5 +1,7 @@ -import {WidgetType, Htape} from '@ui'; +import {WidgetType, Htape, Vtape, Left, Label} from '@ui'; import linkStatusModel from './link_status.model'; +import LeftList from './left/left.component'; +import Right from './right/right.component'; const className = 'fr.linkstatus'; const Widget: WidgetType = { @@ -17,17 +19,31 @@ const Widget: WidgetType = { cls: 'linkStatus', items: [{ el: { - type: 'bi.label', - cls: 'layout-bg2', - textAlign: 'left', - text: '222', + type: Vtape, + cls: 'database-left', + items: [ + { + el: { + type: Left, + cls:'select-group', + items:[ + { + type: Label, + cls:'status-title', + text: '数据连接', + }, + ], + }, + height: 40, + }, { + type: LeftList, + cls: 'left-list', + }, + ], }, width: 280, }, { - type: 'bi.label', - cls: 'layout-bg2', - textAlign: 'left', - text: '宽度充满剩余空间', + type: Right, }], }; }, diff --git a/src/app/link_status/link_status.model.ts b/src/app/link_status/link_status.model.ts index 5735838..ecdda3c 100644 --- a/src/app/link_status/link_status.model.ts +++ b/src/app/link_status/link_status.model.ts @@ -1,9 +1,8 @@ import {ModelType} from '@ui'; const className = 'fr.model.linkstatus'; const Model: ModelType = { - context: ['tab'], + context: ['tab', 'linkList'], actions: { - }, }; BI.model(className, BI.inherit(Fix.Model, Model)); diff --git a/src/app/link_status/right/right.card.component.ts b/src/app/link_status/right/right.card.component.ts new file mode 100644 index 0000000..dc236e6 --- /dev/null +++ b/src/app/link_status/right/right.card.component.ts @@ -0,0 +1,89 @@ +import {WidgetType, Left, Label, Vertical} from '@ui/index'; +const className = 'fr.component.linkStatus.right.card'; +const Widget: WidgetType = { + render() { + return { + type: Left, + items: [ + { + type: Left, + cls: 'right-status-item', + items: [ + { + type: Vertical, + cls:'right-status-board', + items: [ + { + type: Vertical, + cls:'right-status-board-item', + items: [ + { + type: Label, + cls: 'right-status-text', + extraCls: 'card-font1', + text: '0', + }, + { + type: Label, + cls: 'right-status-text', + text: '/', + }, + { + type: Label, + cls: 'right-status-text', + text: '50', + }, + ], + }, + { + type: Label, + text: '活动连接数', + }, + ], + }, + ], + }, + { + type: Left, + cls: 'right-status-right', + items: [ + { + type: Vertical, + cls:'right-status-board', + items: [ + { + type: Vertical, + cls:'right-status-board-item', + items: [ + { + type: Label, + cls: 'right-status-text', + extraCls: 'card-font2', + text: '0', + }, + { + type: Label, + cls: 'right-status-text', + text: '/', + }, + { + type: Label, + cls: 'right-status-text', + text: '50', + }, + ], + }, + { + type: Label, + text: '空闲连接数', + }, + ], + }, + ], + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_status/right/right.component.ts b/src/app/link_status/right/right.component.ts new file mode 100644 index 0000000..01cb170 --- /dev/null +++ b/src/app/link_status/right/right.component.ts @@ -0,0 +1,48 @@ +import {WidgetType, Vertical, Left, Label} from '@ui/index'; +import Model from './right.model'; +import RightCard from './right.card.component'; +const className = 'fr.component.linkStatus.right'; +let Title: any = null; + +const Widget: WidgetType = { + _store() { + return BI.Models.getModel(Model); + }, + watch:{ + statusSelected(title: string) { + Title.setText(`数据连接(${title})`); + }, + }, + render() { + return { + type:Vertical, + cls:'database-right', + items:[ + { + type: Left, + height: 40, + cls: 'right-status-title', + items:[ + { + type: Label, + text:'数据连接', + }, + ], + ref(ref: any) { + Title = ref; + }, + }, { + type: Vertical, + cls: 'right-status-body', + items: [ + { + type: RightCard, + }, + ], + }, + ], + }; + }, +}; +BI.shortcut(className, BI.inherit(BI.Widget, Widget)); +export default className; diff --git a/src/app/link_status/right/right.model.ts b/src/app/link_status/right/right.model.ts new file mode 100644 index 0000000..aa49c71 --- /dev/null +++ b/src/app/link_status/right/right.model.ts @@ -0,0 +1,14 @@ +import {ModelType} from '@ui'; +const className = 'fr.model.linkstatus.right'; +const Model: ModelType = { + context: ['linkList', 'statusSelected'], + state () { + return { + selected:'', + }; + }, + actions: { + }, +}; +BI.model(className, BI.inherit(Fix.Model, Model)); +export default className; diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts index f00d3b2..b0b7cc3 100644 --- a/src/ui/fineui.ts +++ b/src/ui/fineui.ts @@ -34,6 +34,7 @@ export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view'; export const BubbleCombo = 'bi.bubble_combo'; export const SearchEditor = 'bi.search_editor'; export const Img = 'bi.img'; +export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt'; // 布局 export const VerticalAdapt = 'bi.vertical_adapt';