import { shortcut, store } from '@core/core'; import { Filter } from './filter/filter'; import { DatebaseModel } from './database.model'; import { DATEBASE_FILTER_TYPE, OTHER_JDBC } from '@constants/constant'; import { connectionType } from '@constants/env'; import { DatebaseType } from './database_type/database_type'; import { getAllDatabaseTypes } from '../../app.service'; import { ButtonGroup, MultiSelectItem, SearchEditor } from '@fui/core'; import { ApiFactory } from 'src/modules/crud/apiFactory'; import './database.constant' const api = new ApiFactory().create(); @shortcut() @store(DatebaseModel) export class Datebase extends BI.Widget { static xtype = 'dec.dcm.datebase'; filter: ButtonGroup; search: SearchEditor; datebaseType: ButtonGroup; typeFilterWidget: any; internalWidget: MultiSelectItem; pluginWidget: MultiSelectItem; allDatabaseTypes = getAllDatabaseTypes(); store: DatebaseModel['store']; model: DatebaseModel['model']; watch = { search: (search: string) => { if (search) { this.store.setFilter(''); this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.text.toLowerCase().includes(search.toLowerCase()))); } else if (!this.model.filter) { this.store.setFilter(DATEBASE_FILTER_TYPE.COMMONLY); } this.search.setValue(search); }, filter: (filter: string) => { this.filter.setValue(filter); this.typeFilterWidget.setVisible(filter === DATEBASE_FILTER_TYPE.ALL); if (filter) { this.store.setSearch(''); this.filterDatebaseByType(filter); } this.store.setInternal(true); this.store.setPlugin(true); }, datebaseTypes: () => { this.datebaseType.populate(this.renderDatebaseType()); }, 'isInternal || isPlugin': () => { this.internalWidget.setSelected(this.model.isInternal); this.pluginWidget.setSelected(this.model.isPlugin); if (this.model.filter === DATEBASE_FILTER_TYPE.ALL) { let datebaseTypes = []; if (this.model.isInternal) { datebaseTypes = [...datebaseTypes, ...this.allDatabaseTypes.filter(item => item.internal)]; } if (this.model.isPlugin) { datebaseTypes = [...datebaseTypes, ...this.allDatabaseTypes.filter(item => !item.internal)]; } this.store.setDatebaseTypes(datebaseTypes.filter(item => item.type !== connectionType.JNDI && item.type !== OTHER_JDBC)); } }, } mounted() { this.store.setFilter(DATEBASE_FILTER_TYPE.COMMONLY); this.store.setDatebaseTypeSelected(''); this.getDatabaseTypeLimit(); } render() { return { type: BI.VTapeLayout.xtype, vgap: 10, hgap: 10, items: [ { el: { type: BI.VerticalLayout.xtype, items: [ { type: BI.FloatRightLayout.xtype, items: [ { type: BI.SearchEditor.xtype, $value: 'database-type', width: 300, watermark: BI.i18nText('BI-Basic_Search'), ref: (_ref: SearchEditor) => { this.search = _ref; }, listeners: [ { eventName: BI.SearchEditor.EVENT_CHANGE, action: () => { this.store.setSearch(this.search.getValue()); }, }, ], }, ], }, ], }, height: 25, }, { type: BI.HTapeLayout.xtype, items: [ { el: { type: BI.ButtonGroup.xtype, cls: 'bi-border-right', layouts: [{ type: BI.VerticalLayout.xtype, }], ref: (_ref: ButtonGroup) => { this.filter = _ref; }, items: () => BI.map(BI.Constants.getConstant('dec.constant.database.filter.type'), (_, value) => { return { type: Filter.xtype, ...value, } }), }, width: 200, }, { type: BI.VTapeLayout.xtype, items: [ { el: { type: BI.VerticalAdaptLayout.xtype, hgap: 20, invisible: true, items: [ { type: BI.Label.xtype, textAlign: 'left', text: BI.i18nText('Dec-Dcm_Connection_Type_Filter'), title: BI.i18nText('Dec-Dcm_Connection_Type_Filter'), }, { type: BI.MultiSelectItem.xtype, selected: this.model.isInternal, text: BI.i18nText('Dec-Dcm_Connection_Support_Inner'), title: BI.i18nText('Dec-Dcm_Connection_Support_Inner'), ref: (_ref: MultiSelectItem) => { this.internalWidget = _ref; }, handler: () => { this.store.setInternal(!this.model.isInternal); }, }, { type: BI.MultiSelectItem.xtype, selected: this.model.isPlugin, text: BI.i18nText('Dec-Dcm_Connection_Support_Plugin'), title: BI.i18nText('Dec-Dcm_Connection_Support_Plugin'), ref: (_ref: MultiSelectItem) => { this.pluginWidget = _ref; }, handler: () => { this.store.setPlugin(!this.model.isPlugin); }, }, { type: BI.Label.xtype, cls: 'bi-tips', textAlign: 'left', text: BI.i18nText('Dec-Dcm_Connection_Filter_Tip'), title: BI.i18nText('Dec-Dcm_Connection_Filter_Tip'), }, ], ref: (_ref: any) => { this.typeFilterWidget = _ref; }, }, height: 24, }, { type: BI.ButtonGroup.xtype, hgap: 15, layouts: [{ type: BI.FloatLeftLayout.xtype, scrolly: true, }], items: this.renderDatebaseType(), ref: (_ref: ButtonGroup) => { this.datebaseType = _ref; }, }, ], }, ], }, ], }; } private renderDatebaseType() { if (this.model.datebaseTypes.length === 0) { return this.renderNoResult(); } return this.model.datebaseTypes.map(item => { return { type: DatebaseType.xtype, text: item.text, value: item.databaseType, keyword: this.model.search, databaseType: item.databaseType, iconUrl: item.iconUrl, title: item.text, }; }); } private renderNoResult() { return [{ type: BI.CenterAdaptLayout.xtype, height: '100%', width: '100%', items: [{ type: BI.Label.xtype, cls: 'bi-tips', text: BI.i18nText('Dec-Dcm_Connection_No_Search_Result'), }], }]; } private filterDatebaseByType(filter: string) { switch (filter) { case DATEBASE_FILTER_TYPE.COMMONLY: this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.commonly)); break; case DATEBASE_FILTER_TYPE.OTHER: this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => this.model.otherDatabases.includes(item.type))); break; case DATEBASE_FILTER_TYPE.ALL: this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.type !== connectionType.JNDI && item.type !== OTHER_JDBC)); break; default: this.store.setDatebaseTypes(this.allDatabaseTypes.filter(item => item.marker && (item.marker === filter))); break; } } // 获取JNDI private async getDatabaseTypeLimit() { const result = await api.getJNDIDatabaseStatus(); this.store.setJNDILimit(result.data); } }