From 0c6d8d845cda5893fc2b2a78d5a2ba73f57d5952 Mon Sep 17 00:00:00 2001 From: alan Date: Fri, 24 May 2019 14:59:12 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E4=BB=A5=E7=AC=A6=E5=90=88=E4=BB=A3=E7=A0=81=E8=A7=84?= =?UTF-8?q?=E8=8C=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app.model.ts | 13 ++++- src/app/app.ts | 9 +-- src/app/link_set/left/left.ts | 4 +- .../more/{ => item}/more_link_item.ts | 18 +++++- .../more/item/more_link_litem.model.ts | 6 ++ src/app/link_set/more/more_link.model.ts | 16 ++++++ src/app/link_set/more/more_link.ts | 31 ++++------ src/app/link_set/right/right.ts | 14 ++--- .../right/right_detail/right_detail.model.ts | 10 ++++ .../right_detail/right_detail.service.ts | 43 -------------- .../right/right_detail/right_detail.ts | 57 ++++++++++++++++--- .../right/right_edit/right_edit.model.ts | 20 +++++++ .../right/right_edit/right_edit_jndi.ts | 22 ++++--- src/app/link_status/left/left.ts | 4 +- src/app/link_status/right/right.ts | 4 +- src/less/resource/app.less | 3 + src/ui/fineui.ts | 2 + 17 files changed, 171 insertions(+), 105 deletions(-) rename src/app/link_set/more/{ => item}/more_link_item.ts (63%) create mode 100644 src/app/link_set/more/item/more_link_litem.model.ts create mode 100644 src/app/link_set/more/more_link.model.ts create mode 100644 src/app/link_set/right/right_detail/right_detail.model.ts delete mode 100644 src/app/link_set/right/right_detail/right_detail.service.ts create mode 100644 src/app/link_set/right/right_edit/right_edit.model.ts diff --git a/src/app/app.model.ts b/src/app/app.model.ts index 761035a..a71c953 100644 --- a/src/app/app.model.ts +++ b/src/app/app.model.ts @@ -1,13 +1,16 @@ const className = 'fr.model.main'; import {ModelType} from '@ui'; import {LinkType} from '@ui/type'; +import {fetchLinkList} from '../shared/crud/crud.request'; +import {TAB_LINK_SET} from '@private/constants'; + const linkList: LinkType[] = []; const Model: ModelType = { childContext: ['tab', 'linkList', 'linkSelected', 'linkUpdate', 'moreLinkSelected', 'statusSelected', 'connectionNameErr'], state () { return { - tab: BI.i18nText('Dec-Dcm_Connection_Management'), + tab: '', linkList, linkSelected: {}, linkUpdate: {}, @@ -17,12 +20,18 @@ const Model: ModelType = { }; }, computed: { - + }, actions: { setLinkList(value: LinkType[]) { this.model.linkList = value; + this.model.tab = TAB_LINK_SET; + }, + initData() { + fetchLinkList((linkList: LinkType[]) => { + this.setLinkList(linkList); + }); }, }, }; diff --git a/src/app/app.ts b/src/app/app.ts index ef48ad2..2a11d1c 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -1,10 +1,8 @@ import {Vtape} from '../ui/index'; -import {LinkType} from '@ui/type'; import appModel from './app.model'; import title from './title/title'; import linkSet from './link_set/link_set'; import linkStatus from './link_status/link_status'; -import {fetchLinkList} from '../shared/crud/crud.request'; import '../less/index.less'; const className = 'fr.main'; @@ -32,12 +30,7 @@ const Widget = BI.inherit(BI.Widget, { }; }, mounted() { - /** - * 获取数据连接列表 - */ - fetchLinkList((linkList: LinkType[]) => { - this.store.setLinkList(linkList); - }); + this.store.initData(); }, }); BI.shortcut(className, Widget); diff --git a/src/app/link_set/left/left.ts b/src/app/link_set/left/left.ts index dad09bd..03d726c 100644 --- a/src/app/link_set/left/left.ts +++ b/src/app/link_set/left/left.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical} from '@ui'; +import {WidgetType, ListView} from '@ui'; import Model from '../link_set.model'; import {LinkType} from '@ui/type'; import {getLinks} from './left.service'; @@ -15,7 +15,7 @@ const Widget: WidgetType = { }, render() { return { - type: Vertical, + type: ListView, ref(_ref: any) { leftContent = _ref; }, diff --git a/src/app/link_set/more/more_link_item.ts b/src/app/link_set/more/item/more_link_item.ts similarity index 63% rename from src/app/link_set/more/more_link_item.ts rename to src/app/link_set/more/item/more_link_item.ts index 1f5f187..9764053 100644 --- a/src/app/link_set/more/more_link_item.ts +++ b/src/app/link_set/more/item/more_link_item.ts @@ -1,8 +1,19 @@ import {WidgetType, Vertical, Img, Label, Layout} from '@ui/index'; +import ModelName from './more_link_litem.model'; + const className = 'fr.component.linkSet.morelink.item'; const Widget: WidgetType = { + _store() { + return BI.Models.getModel(ModelName); + }, + watch: { + otherSelected(otherSelected: string) { + const {text} = this.options; + this.selected.setVisible(text === otherSelected); + }, + }, render() { - const {text, name, selected} = this.options; + const {text, name} = this.options; return { type: Vertical, @@ -18,9 +29,12 @@ const Widget: WidgetType = { }, { type: Layout, cls: 'selected', - invisible: !selected, + invisible: true, width: 30, height: 30, + ref: _ref => { + this.selected = _ref; + }, }, { type: Label, cls: 'text', diff --git a/src/app/link_set/more/item/more_link_litem.model.ts b/src/app/link_set/more/item/more_link_litem.model.ts new file mode 100644 index 0000000..87203e6 --- /dev/null +++ b/src/app/link_set/more/item/more_link_litem.model.ts @@ -0,0 +1,6 @@ +const className = 'fr.model.link_set.more_link_item'; +export const Model = BI.inherit(Fix.Model, { + context: ['otherSelected'], +}); +BI.model(className, Model); +export default className; diff --git a/src/app/link_set/more/more_link.model.ts b/src/app/link_set/more/more_link.model.ts new file mode 100644 index 0000000..73e243b --- /dev/null +++ b/src/app/link_set/more/more_link.model.ts @@ -0,0 +1,16 @@ +const className = 'fr.model.link_set.more_link'; +export const Model = BI.inherit(Fix.Model, { + childContext: ['otherSelected'], + state() { + return { + otherSelected: '', + }; + }, + actions: { + setOtherSelected(name: string) { + this.model.otherSelected = name; + }, + }, +}); +BI.model(className, Model); +export default className; diff --git a/src/app/link_set/more/more_link.ts b/src/app/link_set/more/more_link.ts index 00715c2..2a9ff9b 100644 --- a/src/app/link_set/more/more_link.ts +++ b/src/app/link_set/more/more_link.ts @@ -1,9 +1,12 @@ import {WidgetType, Vertical, SearchEditor, Left, Vtape} from '@ui/index'; import {DATA_BASE_TYPE_OTHER} from '@private/constants'; -import MoreLinkItem from './more_link_item'; +import MoreLinkItem from './item/more_link_item'; +import ModelName from './more_link.model'; const className = 'fr.component.linkSet.morelink'; -let morkLinkItem: any = null; const Widget: WidgetType = { + _store() { + return BI.Models.getModel(ModelName); + }, render() { return { type: Vtape, @@ -23,33 +26,23 @@ const Widget: WidgetType = { { type: Left, cls: 'more-link-item', - ref(ref: any) { - morkLinkItem = ref; - }, + items: this._createItems(), }, ], }; }, - mounted() { - this._renderItems(); - }, - _renderItems(text = '') { - const databaseLink = DATA_BASE_TYPE_OTHER; - const items: any[] = []; - const that = this; - databaseLink.forEach(item => { - items.push({ + _createItems() { + return BI.map(DATA_BASE_TYPE_OTHER, (index: number, item) => { + return { type: MoreLinkItem, text: item.text, name: item.databaseType, - selected: text === item.text, handler: () => { - that._renderItems(item.text); - that.fireEvent('EVENT_SELECT', item.text); + this.store.setOtherSelected(item.text); + this.fireEvent('EVENT_SELECT', item.text); }, - }); + }; }); - morkLinkItem.populate(BI.createItems(items)); }, }; BI.shortcut(className, BI.inherit(BI.Widget, Widget)); diff --git a/src/app/link_set/right/right.ts b/src/app/link_set/right/right.ts index 3daed45..59429bf 100644 --- a/src/app/link_set/right/right.ts +++ b/src/app/link_set/right/right.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical} from '@ui'; +import {WidgetType, Vertical, ListView} from '@ui'; import {LinkType} from '@ui/type'; import Nothing from './nothing'; import RightDetail from './right_detail/right_detail'; @@ -20,19 +20,15 @@ const Widget: WidgetType = { }, render() { return { - type: Vertical, + type: ListView, cls: 'database-right', ref(_ref: any) { rightContent = _ref; }, - }; - }, - mounted() { - rightContent.populate(BI.createItems([ - { + items: [{ type: Nothing, - }, - ])); + }], + }; }, }; BI.shortcut(className, BI.inherit(BI.Widget, Widget)); diff --git a/src/app/link_set/right/right_detail/right_detail.model.ts b/src/app/link_set/right/right_detail/right_detail.model.ts new file mode 100644 index 0000000..67b4afe --- /dev/null +++ b/src/app/link_set/right/right_detail/right_detail.model.ts @@ -0,0 +1,10 @@ +const className = 'fr.model.link.set.right.detail'; +export const Model = BI.inherit(Fix.Model, { + + context: ['linkSelected'], + actions: { + + }, +}); +BI.model(className, Model); +export default className; diff --git a/src/app/link_set/right/right_detail/right_detail.service.ts b/src/app/link_set/right/right_detail/right_detail.service.ts deleted file mode 100644 index 392a317..0000000 --- a/src/app/link_set/right/right_detail/right_detail.service.ts +++ /dev/null @@ -1,43 +0,0 @@ -import Title from '../right_title/right_title'; -import RightShow from '../right_show/right_show'; -import RightShowJndi from '../right_show/right_show_jndi'; -import RightEdit from '../right_edit/right_edit'; -import RightEditMysql from '../right_edit/right_edit_mysql'; -import RightEditJndi from '../right_edit/right_edit_jndi'; -import {LinkType} from '@ui/type'; -import pluginListConstant from '../../../app.constant'; -import {MYSQL_CONNECT, JNDI_CONNECT} from '@private/constants'; - -export const renderEdit = (rightDetail, linkSelected: LinkType): void => { - const plugins: string[] = BI.Constants.getConstant(pluginListConstant); - const isPlugin = BI.some(plugins, (index: number, item: string) => item === linkSelected.text); - let editPage = null; - let showPage = null; - switch (linkSelected.text) { - case (MYSQL_CONNECT): - editPage = RightEditMysql; - showPage = RightShow; - break; - case (JNDI_CONNECT): - editPage = RightEditJndi; - showPage = RightShowJndi; - break; - default: - editPage = RightEdit; - showPage = RightShow; - } - if (isPlugin) { - editPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`); - showPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.preview`); - } - rightDetail.populate(BI.createItems([ - { - type: Title, - isEdit: linkSelected.isSelected, - linkSelected, - }, { - type: linkSelected.isSelected ? editPage : showPage, - linkSelected, - }, - ])); -}; diff --git a/src/app/link_set/right/right_detail/right_detail.ts b/src/app/link_set/right/right_detail/right_detail.ts index 66f546d..86e3d3c 100644 --- a/src/app/link_set/right/right_detail/right_detail.ts +++ b/src/app/link_set/right/right_detail/right_detail.ts @@ -1,7 +1,14 @@ -import {WidgetType, Vertical} from '@ui/index'; -import Model from '../../link_set.model'; -import {renderEdit} from './right_detail.service'; +import {WidgetType, ListView, Left} from '@ui/index'; +import Model from './right_detail.model'; import {LinkType} from '@ui/type'; +import Title from '../right_title/right_title'; +import RightShow from '../right_show/right_show'; +import RightShowJndi from '../right_show/right_show_jndi'; +import RightEdit from '../right_edit/right_edit'; +import RightEditMysql from '../right_edit/right_edit_mysql'; +import RightEditJndi from '../right_edit/right_edit_jndi'; +import pluginListConstant from '../../../app.constant'; +import {MYSQL_CONNECT, JNDI_CONNECT} from '@private/constants'; const className = 'fr.component.right.detail'; @@ -11,21 +18,55 @@ const Widget: WidgetType = { }, watch: { linkSelected(linkSelected: LinkType) { - renderEdit(this.rightDetail, linkSelected); + const showPage = this._createItems(linkSelected); + this.rightDetail.populate(BI.createItems(showPage)); }, }, render() { + const linkSelected = this.model.linkSelected; + return { - type: Vertical, + type: ListView, cls: 'right-content', ref: _ref => { this.rightDetail = _ref; }, + items: this._createItems(linkSelected), }; }, - mounted() { - const linkSelected: LinkType = this.model.linkSelected; - renderEdit(this.rightDetail, linkSelected); + _createItems(linkSelected: LinkType) { + const plugins: string[] = BI.Constants.getConstant(pluginListConstant); + const isPlugin = BI.some(plugins, (index: number, item: string) => item === linkSelected.text); + let editPage = null; + let showPage = null; + switch (linkSelected.text) { + case (MYSQL_CONNECT): + editPage = RightEditMysql; + showPage = RightShow; + break; + case (JNDI_CONNECT): + editPage = RightEditJndi; + showPage = RightShowJndi; + break; + default: + editPage = RightEdit; + showPage = RightShow; + } + if (isPlugin) { + editPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.edit`); + showPage = BI.Constants.getConstant(`dec.constant.database.conf.connect.form.${linkSelected.text.toLowerCase()}.preview`); + } + + return [ + { + type: Title, + isEdit: linkSelected.isSelected, + linkSelected, + }, { + type: linkSelected.isSelected ? editPage : showPage, + linkSelected, + }, + ]; }, }; BI.shortcut(className, BI.inherit(BI.Widget, Widget)); diff --git a/src/app/link_set/right/right_edit/right_edit.model.ts b/src/app/link_set/right/right_edit/right_edit.model.ts new file mode 100644 index 0000000..54e1f91 --- /dev/null +++ b/src/app/link_set/right/right_edit/right_edit.model.ts @@ -0,0 +1,20 @@ +export const className = 'report.model.components.right.edit'; +export const Model = BI.inherit(Fix.Model, { + state() { + return { + isCollapse: false, + }; + }, + + computed: { + + }, + + actions: { + setIsCollapse(status: boolean) { + this.model.isCollapse = status; + }, + }, +}); +BI.model(className, Model); +export default className; diff --git a/src/app/link_set/right/right_edit/right_edit_jndi.ts b/src/app/link_set/right/right_edit/right_edit_jndi.ts index cfb252b..68f7398 100644 --- a/src/app/link_set/right/right_edit/right_edit_jndi.ts +++ b/src/app/link_set/right/right_edit/right_edit_jndi.ts @@ -2,9 +2,22 @@ import {Vertical, Editor, TextValueCombo, TextButton, Label} from '@ui'; import FormItem from '@shared/components/form_item'; import {JNDI_FACTORYS, OTHER_ATTRIBUTES, CONNECT_CHARSET} from '@private/constants'; import {AttributeType} from '../right.typing'; +import ModelName from './right_edit.model'; const classNameEdit = 'fr.component.right.edit.jndi'; const Widget = BI.inherit(BI.Widget, { + _store() { + return BI.Models.getModel(ModelName); + }, + watch: { + isCollapse(isCollapse) { + const height = isCollapse ? 550 : 160; + const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); + this.jndiFormRef.setHeight(height); + this.collapseRef.setText(text); + this.otherAttributesRef.setVisible(isCollapse); + }, + }, render() { const {connectionName, url, factory, principal, credentials, originalCharsetName} = this.options; @@ -95,18 +108,11 @@ const Widget = BI.inherit(BI.Widget, { text: BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'), width: 300, textAlign: 'right', - value: true, ref: _ref => { this.collapseRef = _ref; }, handler: () => { - const isCollapse = this.collapseRef.getValue(); - const height = isCollapse ? 550 : 160; - const text = isCollapse ? BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Collapse-Attributes') : BI.i18nText('Dec-Dcm_Connection_Form_JNDI_Other_Attributes'); - this.jndiFormRef.setHeight(height); - this.collapseRef.setValue(!isCollapse); - this.collapseRef.setText(text); - this.otherAttributesRef.setVisible(isCollapse); + this.store.setIsCollapse(!this.model.isCollapse); }, }, }, diff --git a/src/app/link_status/left/left.ts b/src/app/link_status/left/left.ts index 0ce0fdf..39587ab 100644 --- a/src/app/link_status/left/left.ts +++ b/src/app/link_status/left/left.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical} from '@ui'; +import {WidgetType, ListView} from '@ui'; import Model from './left.model'; import {LinkType} from '@ui/type'; import {getLinks} from './left.service'; @@ -20,7 +20,7 @@ const Widget: WidgetType = { }, render() { return { - type: Vertical, + type: ListView, ref(_ref: any) { leftContent = _ref; }, diff --git a/src/app/link_status/right/right.ts b/src/app/link_status/right/right.ts index 22d73db..d4f50ee 100644 --- a/src/app/link_status/right/right.ts +++ b/src/app/link_status/right/right.ts @@ -1,4 +1,4 @@ -import {WidgetType, Vertical, Left, Label} from '@ui/index'; +import {WidgetType, Vertical, Left, Label, ListView} from '@ui/index'; import Model from './right.model'; import {info} from '@shared/crud/crud.request'; import RightCard from './right_card'; @@ -48,7 +48,7 @@ const Widget: WidgetType = { Title = ref; }, }, { - type: Vertical, + type: ListView, cls: 'right-status-body', ref(ref: any) { Group = ref; diff --git a/src/less/resource/app.less b/src/less/resource/app.less index 7610631..114a1ac 100644 --- a/src/less/resource/app.less +++ b/src/less/resource/app.less @@ -102,6 +102,9 @@ .database-right{ min-width: 400px; overflow: auto; + >.bi-vertical-layout{ + height: 100%; + } .bi-flex-center-adapt-layout{ height: 100%; .data-connection-background{ diff --git a/src/ui/fineui.ts b/src/ui/fineui.ts index b0b7cc3..2b2dcd5 100644 --- a/src/ui/fineui.ts +++ b/src/ui/fineui.ts @@ -35,6 +35,8 @@ 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 VertualGroup = 'bi.virtual_group'; +export const ListView = 'bi.list_view'; // 布局 export const VerticalAdapt = 'bi.vertical_adapt';