forked from fanruan/demo-tabledata-redis
40 changed files with 1336 additions and 140 deletions
@ -0,0 +1,6 @@
|
||||
import { RedisDataset } from './modules/app.dataset'; |
||||
|
||||
BI.createWidget({ |
||||
type: RedisDataset.xtype, |
||||
element: '#wrapper', |
||||
}); |
||||
@ -0,0 +1,6 @@
|
||||
import { RedisProgram } from './modules/app.program'; |
||||
|
||||
BI.createWidget({ |
||||
type: RedisProgram.xtype, |
||||
element: '#wrapper', |
||||
}); |
||||
@ -0,0 +1,2 @@
|
||||
@import "../../node_modules/fineui/src/less/image.less"; |
||||
@import "./lib/background.less"; |
||||
@ -0,0 +1,12 @@
|
||||
@import "../../node_modules/fineui/src/less/resource/font.less"; |
||||
@import "./lib/font.less"; |
||||
|
||||
.font(refresh-font, @font-refresh); |
||||
.font(input-string-font, @font-input-string); |
||||
.font(input-formula-font, @font-input-formula); |
||||
.font(input-date-font, @font-input-date); |
||||
.font(input-boolean-font, @font-input-boolean); |
||||
.font(input-int-font, @font-input-int); |
||||
.font(input-number-font, @font-input-number); |
||||
.font(site-font, @font-site); |
||||
.font(column-font, @font-column); |
||||
@ -0,0 +1,3 @@
|
||||
@import "background.less"; |
||||
@import "font.less"; |
||||
@import "utils.less"; |
||||
@ -0,0 +1,2 @@
|
||||
@imageUrl: '$imageUrl/'; //图片的基本地址 |
||||
@image2xUrl: '$image2xUrl/'; //2倍图片的基本地址 |
||||
@ -0,0 +1,13 @@
|
||||
@fontUrl: '$fontUrl/'; |
||||
@fontReportUrl: '$fontReportUrl/'; |
||||
@fontName: "report"; |
||||
|
||||
@font-refresh: "e6ef"; |
||||
@font-input-string: "e6e9"; |
||||
@font-input-formula: "e6c6"; |
||||
@font-input-date: "e733"; |
||||
@font-input-boolean: "e656"; |
||||
@font-input-int: "e7c2"; |
||||
@font-input-number: "e60b"; |
||||
@font-site: "e7c5"; |
||||
@font-column: "e76f"; |
||||
@ -0,0 +1 @@
|
||||
@import '../../node_modules/fineui/src/less/visual.less'; |
||||
@ -0,0 +1,116 @@
|
||||
import { shortcut } from '@core/core'; |
||||
import { VerticalXtype, TextEditorXtype, HtapeXtype, LabelXtype, IconComboXtype, TabXtype, CodeEditorXtype } from 'ui'; |
||||
import { Parameter } from './components/parameter/parameter'; |
||||
import { TableList } from './table_list/table_list'; |
||||
import '../less/index.less'; |
||||
|
||||
@shortcut() |
||||
export class RedisDataset extends BI.Widget { |
||||
static xtype = 'dec.dcm.connection.plugin.redis.dataset' |
||||
private textWidth = 100; |
||||
databaseNoTab: any; |
||||
iconCombo: any; |
||||
|
||||
render() { |
||||
return { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: TableList.xtype, |
||||
cls: 'bi-border-right', |
||||
}, |
||||
width: 300, |
||||
}, { |
||||
type: VerticalXtype, |
||||
hgap: 5, |
||||
vgap: 10, |
||||
items: [{ |
||||
type: HtapeXtype, |
||||
height: 22, |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_DB_Index'), |
||||
textAlign: 'left', |
||||
}, |
||||
width: this.textWidth, |
||||
}, { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: IconComboXtype, |
||||
height: 22, |
||||
width: 28, |
||||
value: 'int', |
||||
items: [{ |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Int'), |
||||
value: 'int', |
||||
iconCls: 'input-int-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Formula'), |
||||
value: 'formula', |
||||
iconCls: 'input-formula-font', |
||||
}], |
||||
ref: (_ref: any) => { |
||||
this.iconCombo = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: 'EVENT_CHANGE', |
||||
action: () => { |
||||
const typeValue = this.iconCombo.getValue()[0]; |
||||
this.databaseNoTab.setSelect(typeValue); |
||||
}, |
||||
}], |
||||
}, |
||||
width: 28, |
||||
}, { |
||||
type: TabXtype, |
||||
single: true, |
||||
showIndex: 'int', |
||||
ref: (_ref: any) => { |
||||
this.databaseNoTab = _ref; |
||||
}, |
||||
cardCreator: (index: 'int'|'formula') => { |
||||
if (index === 'int') { |
||||
return { |
||||
type: TextEditorXtype, |
||||
warningTitle: '', |
||||
value: 0, |
||||
validationChecker: (v: string) => this.checkInteger(v), |
||||
errorText: BI.i18nText('Plugin-Redis_Check_Integer'), |
||||
}; |
||||
} |
||||
|
||||
return { |
||||
type: TextEditorXtype, |
||||
allowBlank: true, |
||||
}; |
||||
}, |
||||
}], |
||||
}], |
||||
}, { |
||||
type: HtapeXtype, |
||||
height: 200, |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_Query_Condition'), |
||||
textAlign: 'left', |
||||
}, |
||||
width: this.textWidth, |
||||
}, { |
||||
type: CodeEditorXtype, |
||||
cls: 'bi-border', |
||||
height: 200, |
||||
}], |
||||
}, { |
||||
type: Parameter.xtype, |
||||
}], |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
private checkInteger(value: string) { |
||||
return /^[\d]+$/.test(value); |
||||
} |
||||
} |
||||
@ -0,0 +1,136 @@
|
||||
import { shortcut } from '@core/core'; |
||||
import { VerticalXtype, TextEditorXtype, HtapeXtype, LabelXtype, IconComboXtype, TabXtype, CodeEditorXtype, TextValueComboXtype } from 'ui'; |
||||
import { Parameter } from './components/parameter/parameter'; |
||||
import { TableList } from './table_list/table_list'; |
||||
import '../less/index.less'; |
||||
|
||||
@shortcut() |
||||
export class RedisProgram extends BI.Widget { |
||||
static xtype = 'dec.dcm.connection.plugin.redis.program' |
||||
private textWidth = 100; |
||||
databaseNoTab: any; |
||||
iconCombo: any; |
||||
|
||||
render() { |
||||
return { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: TableList.xtype, |
||||
cls: 'bi-border-right', |
||||
}, |
||||
width: 300, |
||||
}, { |
||||
type: VerticalXtype, |
||||
hgap: 5, |
||||
vgap: 10, |
||||
items: [{ |
||||
type: HtapeXtype, |
||||
height: 22, |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_DB_Index'), |
||||
textAlign: 'left', |
||||
}, |
||||
width: this.textWidth, |
||||
}, { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: IconComboXtype, |
||||
height: 22, |
||||
width: 28, |
||||
value: 'int', |
||||
items: [{ |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Int'), |
||||
value: 'int', |
||||
iconCls: 'input-int-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Formula'), |
||||
value: 'formula', |
||||
iconCls: 'input-formula-font', |
||||
}], |
||||
ref: (_ref: any) => { |
||||
this.iconCombo = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: 'EVENT_CHANGE', |
||||
action: () => { |
||||
const typeValue = this.iconCombo.getValue()[0]; |
||||
this.databaseNoTab.setSelect(typeValue); |
||||
}, |
||||
}], |
||||
}, |
||||
width: 28, |
||||
}, { |
||||
type: TabXtype, |
||||
single: true, |
||||
showIndex: 'int', |
||||
ref: (_ref: any) => { |
||||
this.databaseNoTab = _ref; |
||||
}, |
||||
cardCreator: (index: 'int'|'formula') => { |
||||
if (index === 'int') { |
||||
return { |
||||
type: TextEditorXtype, |
||||
warningTitle: '', |
||||
value: 0, |
||||
validationChecker: (v: string) => this.checkInteger(v), |
||||
errorText: BI.i18nText('Plugin-Redis_Check_Integer'), |
||||
}; |
||||
} |
||||
|
||||
return { |
||||
type: TextEditorXtype, |
||||
allowBlank: true, |
||||
}; |
||||
}, |
||||
}], |
||||
}], |
||||
}, { |
||||
type: HtapeXtype, |
||||
height: 22, |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_Script_Engine_Type'), |
||||
textAlign: 'left', |
||||
}, |
||||
width: this.textWidth, |
||||
}, { |
||||
type: TextValueComboXtype, |
||||
items: [{ |
||||
text: BI.i18nText('Plugin-Redis_Script_Engine_Type_Default'), |
||||
value: '', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Script_Engine_Type_V8'), |
||||
value: 'v8', |
||||
}], |
||||
}], |
||||
}, { |
||||
type: HtapeXtype, |
||||
height: 200, |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_Query_Condition'), |
||||
textAlign: 'left', |
||||
}, |
||||
width: this.textWidth, |
||||
}, { |
||||
type: CodeEditorXtype, |
||||
cls: 'bi-border', |
||||
height: 200, |
||||
}], |
||||
}, { |
||||
type: Parameter.xtype, |
||||
}], |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
private checkInteger(value: string) { |
||||
return /^[\d]+$/.test(value); |
||||
} |
||||
} |
||||
@ -0,0 +1,40 @@
|
||||
import { model, Model } from '../../core/core'; |
||||
import { ParametersType } from './parameter.typings'; |
||||
|
||||
@model() |
||||
export class ParameterModel extends Model { |
||||
static xtype = 'plugin.model.report.json.components.parameter'; |
||||
|
||||
childContext = <const>['selectedId', 'parameters']; |
||||
|
||||
state() { |
||||
return { |
||||
parameters: [] as ParametersType[], |
||||
selectedId: '', |
||||
}; |
||||
} |
||||
|
||||
actions = { |
||||
setParameters: (parameters: ParametersType[]) => { |
||||
this.model.parameters = parameters; |
||||
}, |
||||
removeSelectedParameter: () => { |
||||
this.setParameters(this.model.parameters.filter(item => item.id !== this.model.selectedId)); |
||||
}, |
||||
move: (type: 'up'|'down') => { |
||||
if (this.model.selectedId) { |
||||
const index = this.model.parameters.findIndex(item => item.id === this.model.selectedId); |
||||
if (type === 'up' && index > 0) { |
||||
const oldItem = this.model.parameters.splice(index, 1)[0]; |
||||
this.model.parameters.splice(index - 1, 0, oldItem); |
||||
} |
||||
if (type === 'down' && index < this.model.parameters.length - 1) { |
||||
const oldItem = this.model.parameters.splice(index, 1)[0]; |
||||
this.model.parameters.splice(index + 1, 0, oldItem); |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,172 @@
|
||||
import { shortcut, store } from '../../core/core'; |
||||
import { VtapeXtype, LabelXtype, HtapeXtype, LeftRightVerticalAdaptLayoutXtype, IconButtonXtype, ButtonGroupXtype, VerticalXtype } from 'ui'; |
||||
import { ParameterInput } from './parameter_input/parameter_input'; |
||||
import { ParameterModel } from './parameter.model'; |
||||
import { ParametersType } from './parameter.typings'; |
||||
|
||||
@shortcut() |
||||
@store(ParameterModel) |
||||
export class Parameter extends BI.Widget { |
||||
static xtype = 'plugin.report.redis.components.parameter'; |
||||
props = { |
||||
title: '', |
||||
showRefresh: true, |
||||
height: 200, |
||||
value: [] as ParametersType[], |
||||
} |
||||
|
||||
parameterInputs: any; |
||||
|
||||
model: ParameterModel['model'] |
||||
store: ParameterModel['store'] |
||||
|
||||
watch = { |
||||
parameters: () => { |
||||
this.parameterInputs.populate(this.renderParameterInputs()); |
||||
}, |
||||
selectedId: (id: string) => { |
||||
this.parameterInputs.setValue(id); |
||||
}, |
||||
} |
||||
|
||||
render() { |
||||
const { title, showRefresh } = this.options; |
||||
this.setDefalue(); |
||||
|
||||
return { |
||||
type: VtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: LeftRightVerticalAdaptLayoutXtype, |
||||
items: { |
||||
left: [{ |
||||
type: LabelXtype, |
||||
lgap: 2, |
||||
text: title, |
||||
textAlign: 'left', |
||||
}], |
||||
right: [{ |
||||
type: IconButtonXtype, |
||||
cls: 'text-add-tip-font', |
||||
width: 25, |
||||
title: BI.i18nText('Plugin-Redis_Parameter_Insert'), |
||||
handler: () => { |
||||
this.store.setParameters([{ |
||||
name: '', |
||||
value: '', |
||||
id: BI.UUID(), |
||||
type: 'string', |
||||
}, ...this.model.parameters]); |
||||
}, |
||||
}, { |
||||
type: IconButtonXtype, |
||||
cls: 'close-font bi-error', |
||||
width: 25, |
||||
title: BI.i18nText('Plugin-Redis_Parameter_Delete'), |
||||
handler: () => { |
||||
if (this.model.selectedId) { |
||||
BI.Msg.confirm(BI.i18nText('BI-Basic_Prompt'), BI.i18nText('Plugin-Redis_Parameter_Delete_Confirm'), (re: boolean) => { |
||||
if (re) { |
||||
this.store.removeSelectedParameter(); |
||||
} |
||||
}); |
||||
} else { |
||||
BI.Msg.alert(BI.i18nText('BI-Basic_Prompt'), BI.i18nText('Plugin-Redis_Parameter_Delete_Alert')); |
||||
} |
||||
}, |
||||
}, { |
||||
type: IconButtonXtype, |
||||
cls: 'add-up-font', |
||||
width: 25, |
||||
title: BI.i18nText('Plugin-Redis_Parameter_Move_Up'), |
||||
handler: () => { |
||||
this.store.move('up'); |
||||
}, |
||||
}, { |
||||
type: IconButtonXtype, |
||||
cls: 'minus-down-font', |
||||
width: 25, |
||||
title: BI.i18nText('Plugin-Redis_Parameter_Move_Down'), |
||||
handler: () => { |
||||
this.store.move('down'); |
||||
}, |
||||
}, showRefresh ? { |
||||
type: IconButtonXtype, |
||||
cls: 'refresh-font', |
||||
width: 25, |
||||
title: BI.i18nText('Plugin-Redis_Parameter_Refresh'), |
||||
handler: () => { |
||||
this.setDefalue(); |
||||
}, |
||||
} : null], |
||||
}, |
||||
|
||||
}, |
||||
height: 25, |
||||
}, { |
||||
el: { |
||||
type: HtapeXtype, |
||||
cls: 'bi-border', |
||||
items: [{ |
||||
el: { |
||||
type: LabelXtype, |
||||
text: BI.i18nText('Plugin-Redis_Dataset_Parameter_Name'), |
||||
}, |
||||
width: 0.5, |
||||
}, { |
||||
el: { |
||||
type: LabelXtype, |
||||
cls: 'bi-border-left', |
||||
text: BI.i18nText('Plugin-Redis_Dataset_Parameter_Value'), |
||||
}, |
||||
width: 0.5, |
||||
}], |
||||
}, |
||||
height: 25, |
||||
}, { |
||||
type: ButtonGroupXtype, |
||||
cls: 'bi-border', |
||||
layouts: [{ |
||||
type: VerticalXtype, |
||||
}], |
||||
items: this.renderParameterInputs(), |
||||
ref: (_ref: any) => { |
||||
this.parameterInputs = _ref; |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
public getValue() { |
||||
return this.model.parameters.map(item => { |
||||
return { |
||||
name: item.name, |
||||
value: item.value, |
||||
type: item.type, |
||||
}; |
||||
}); |
||||
} |
||||
|
||||
private setDefalue() { |
||||
const { value = [] } = this.options; |
||||
this.store.setParameters(value.map(item => { |
||||
return { |
||||
...item, |
||||
id: BI.UUID(), |
||||
}; |
||||
})); |
||||
} |
||||
|
||||
private renderParameterInputs() { |
||||
return this.model.parameters.map(item => { |
||||
return { |
||||
type: ParameterInput.xtype, |
||||
inputName: item.name, |
||||
inputValue: item.value, |
||||
id: item.id, |
||||
value: item.id, |
||||
selected: item.id === this.model.selectedId, |
||||
}; |
||||
}); |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@
|
||||
|
||||
export interface ParametersType { |
||||
name: string; |
||||
value: string; |
||||
id?: string; |
||||
type: inputTypes; |
||||
} |
||||
|
||||
export type inputTypes = 'string' | 'int' | 'number' | 'date' | 'boolean' | 'formula' |
||||
@ -0,0 +1,20 @@
|
||||
import { inputTypes } from '../../parameter.typings'; |
||||
|
||||
const inputs: { |
||||
[key: string]: any; |
||||
} = {}; |
||||
|
||||
export function input(key: inputTypes): ClassDecorator { |
||||
return (target: object) => { |
||||
inputs[key] = target; |
||||
}; |
||||
} |
||||
|
||||
export function getInput(type: inputTypes): string { |
||||
const inputWidget = inputs[type]; |
||||
if (BI.isNull(inputWidget)) { |
||||
throw new TypeError(); |
||||
} |
||||
|
||||
return inputWidget.xtype; |
||||
} |
||||
@ -0,0 +1,6 @@
|
||||
import './input_boolean'; |
||||
import './input_date'; |
||||
import './input_int'; |
||||
import './input_number'; |
||||
import './input_string'; |
||||
import './input_formula'; |
||||
@ -0,0 +1,41 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { MultiSelectItemXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('boolean') |
||||
export class InputBoolean extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.boolean' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: MultiSelectItemXtype, |
||||
width: 80, |
||||
selected: !!value, |
||||
text: 'true', |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { DynamicDateComboXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('date') |
||||
export class InputDate extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.date' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: DynamicDateComboXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value, |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
validationChecker: (v: string) => BI.isNumeric(v), |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,45 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { EditorXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('formula') |
||||
export class InputFormula extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.formula' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
mounted() { |
||||
|
||||
} |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: EditorXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value, |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { NumberEditorXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('int') |
||||
export class InputInt extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.int' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: NumberEditorXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value, |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
validationChecker: (v: string) => BI.isInteger(v), |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,42 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { EditorXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('number') |
||||
export class InputNumber extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.number' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: EditorXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value, |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
validationChecker: (v: string) => BI.isNumeric(v), |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,41 @@
|
||||
import { shortcut } from '../../../../core/core'; |
||||
import { EditorXtype } from 'ui'; |
||||
import { input } from './input.service'; |
||||
|
||||
@shortcut() |
||||
@input('string') |
||||
export class InputString extends BI.Widget { |
||||
static xtype = 'plugin.report.json.components.parameter_input.string' |
||||
|
||||
props = { |
||||
value: '', |
||||
} |
||||
|
||||
input: any; |
||||
|
||||
render() { |
||||
const { value } = this.options; |
||||
|
||||
return { |
||||
type: EditorXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value, |
||||
ref: (_ref: any) => { |
||||
this.input = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
const value = this.input.getValue(); |
||||
this.fireEvent('EVENT_CHANGE', value); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.fireEvent('EVENT_FOCUS'); |
||||
}, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@
|
||||
@import '../../../../less/index.less'; |
||||
|
||||
.plugin-report-json-parameter-input.active{ |
||||
background-color: @color-bi-light-blue-60; |
||||
} |
||||
@ -0,0 +1,40 @@
|
||||
import { model, Model } from '../../../core/core'; |
||||
import { ParameterModel } from '../parameter.model'; |
||||
import { inputTypes } from '../parameter.typings'; |
||||
|
||||
@model() |
||||
export class ParameterInputModel extends Model<{ |
||||
types: { |
||||
selectedId: ParameterModel['TYPE']['selectedId']; |
||||
parameters: ParameterModel['TYPE']['parameters']; |
||||
}, |
||||
context: ParameterInputModel['context']; |
||||
}> { |
||||
static xtype = 'plugin.model.report.json.components.parameter_input'; |
||||
|
||||
context = <const>['selectedId', 'parameters']; |
||||
|
||||
actions = { |
||||
setSelectedId: (id: string) => { |
||||
this.model.selectedId = id; |
||||
}, |
||||
setParameterName: (id: string, name: string) => { |
||||
const thisParameter = this.getParameter(id); |
||||
if (thisParameter) { |
||||
thisParameter.name = name; |
||||
} |
||||
}, |
||||
setParameterValue: (id: string, value: string, type: inputTypes) => { |
||||
const thisParameter = this.getParameter(id); |
||||
if (thisParameter) { |
||||
thisParameter.value = value; |
||||
thisParameter.type = type; |
||||
} |
||||
}, |
||||
} |
||||
private getParameter(id: string) { |
||||
return this.model.parameters.find(item => item.id === id); |
||||
} |
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,165 @@
|
||||
import { shortcut, store } from '../../../core/core'; |
||||
import { HtapeXtype, EditorXtype, TextButtonXtype, TabXtype, IconComboXtype } from 'ui'; |
||||
import { ParameterInputModel } from './parameter_input.model'; |
||||
import { inputTypes } from '../parameter.typings'; |
||||
import { getInput } from './input/input.service'; |
||||
import './input/input'; |
||||
import './parameter_input.less'; |
||||
|
||||
@shortcut() |
||||
@store(ParameterInputModel) |
||||
export class ParameterInput extends BI.BasicButton { |
||||
static xtype = 'plugin.report.json.components.parameter_input' |
||||
|
||||
props = { |
||||
inputName: '', |
||||
inputValue: '', |
||||
height: 22, |
||||
id: '', |
||||
baseCls: 'plugin-report-json-parameter-input', |
||||
} |
||||
|
||||
store: ParameterInputModel['store'] |
||||
model: ParameterInputModel['model'] |
||||
|
||||
tab: any; |
||||
parameterName: any; |
||||
parameterValue: any; |
||||
iconCombo: any; |
||||
|
||||
render() { |
||||
let { inputName, inputValue } = this.options; |
||||
const { id } = this.options; |
||||
|
||||
return { |
||||
type: HtapeXtype, |
||||
cls: 'bi-border', |
||||
items: [{ |
||||
el: { |
||||
type: EditorXtype, |
||||
height: 22, |
||||
allowBlank: true, |
||||
value: inputName, |
||||
ref: (_ref: any) => { |
||||
this.parameterName = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: BI.TextEditor.EVENT_CHANGE, |
||||
action: () => { |
||||
inputName = this.parameterName.getValue(); |
||||
this.tab.setSelect(inputName ? 'string' : 'tip'); |
||||
inputValue = inputName ? inputValue : ''; |
||||
this.store.setParameterName(id, inputName); |
||||
}, |
||||
}, { |
||||
eventName: BI.TextEditor.EVENT_FOCUS, |
||||
action: () => { |
||||
this.store.setSelectedId(id); |
||||
}, |
||||
}], |
||||
}, |
||||
width: 0.5, |
||||
}, { |
||||
el: { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
type: TabXtype, |
||||
single: true, |
||||
showIndex: inputName ? 'string' : 'tip', |
||||
ref: (_ref: any) => { |
||||
this.tab = _ref; |
||||
}, |
||||
cardCreator: (index: inputTypes | 'tip') => this.renderInputs(index), |
||||
}], |
||||
}, |
||||
width: 0.5, |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
private renderInputs(type: inputTypes | 'tip') { |
||||
const { inputValue, id } = this.options; |
||||
if (type === 'tip') { |
||||
return { |
||||
type: TextButtonXtype, |
||||
cls: 'bi-error bi-border-left', |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Please_Set_Parameter_Name'), |
||||
handler: () => { |
||||
this.parameterName.focus(); |
||||
}, |
||||
}; |
||||
} |
||||
const xtype = getInput(type); |
||||
|
||||
return { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: IconComboXtype, |
||||
cls: 'bi-border-left bi-border-right', |
||||
height: 22, |
||||
width: 25, |
||||
value: type, |
||||
items: this.renderDownList(), |
||||
ref: (_ref: any) => { |
||||
this.iconCombo = _ref; |
||||
}, |
||||
listeners: [{ |
||||
eventName: 'EVENT_CHANGE', |
||||
action: () => { |
||||
this.tab.setSelect('tip'); |
||||
const typeValue = this.iconCombo.getValue()[0]; |
||||
if (typeValue) { |
||||
this.tab.setSelect(typeValue); |
||||
} |
||||
}, |
||||
}], |
||||
}, |
||||
width: 25, |
||||
}, { |
||||
type: xtype, |
||||
value: inputValue, |
||||
listeners: [{ |
||||
eventName: 'EVENT_CHANGE', |
||||
action: (value: string) => { |
||||
const type = this.iconCombo.getValue()[0]; |
||||
this.store.setParameterValue(id, value, type); |
||||
}, |
||||
}, { |
||||
eventName: 'EVENT_FOCUS', |
||||
action: () => { |
||||
this.store.setSelectedId(id); |
||||
}, |
||||
}], |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
private renderDownList() { |
||||
return [{ |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_String'), |
||||
value: 'string', |
||||
iconCls: 'input-string-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Int'), |
||||
value: 'int', |
||||
iconCls: 'input-int-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Number'), |
||||
value: 'number', |
||||
iconCls: 'input-number-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Date'), |
||||
value: 'date', |
||||
iconCls: 'input-date-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Boolean'), |
||||
value: 'boolean', |
||||
iconCls: 'input-boolean-font', |
||||
}, { |
||||
text: BI.i18nText('Plugin-Redis_Parameter_Type_Formula'), |
||||
value: 'formula', |
||||
iconCls: 'input-formula-font', |
||||
}]; |
||||
} |
||||
} |
||||
@ -0,0 +1,29 @@
|
||||
import { shortcut } from '@core/core'; |
||||
import { HtapeXtype, IconLabelXtype, LabelXtype } from 'ui'; |
||||
@shortcut() |
||||
export class ListItem extends BI.BasicButton { |
||||
static xtype = 'dec.dcm.connection.plugin.redis.table_list.list_item' |
||||
props = { |
||||
text: '', |
||||
height: 20, |
||||
baseCls: 'bi-list-item-active', |
||||
} |
||||
render() { |
||||
const { text } = this.options; |
||||
|
||||
return { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: IconLabelXtype, |
||||
cls: 'column-font', |
||||
}, |
||||
width: 25, |
||||
}, { |
||||
type: LabelXtype, |
||||
textAlign: 'left', |
||||
text, |
||||
}], |
||||
}; |
||||
} |
||||
} |
||||
@ -0,0 +1,89 @@
|
||||
import { shortcut } from '@core/core'; |
||||
import { VtapeXtype, HtapeXtype, IconButtonXtype, TextValueComboXtype, ButtonXtype, TextEditorXtype, ButtonGroupXtype, VerticalXtype, MultiSelectItemXtype, LeftXtype } from 'ui'; |
||||
import { ListItem } from './list_item'; |
||||
@shortcut() |
||||
export class TableList extends BI.Widget { |
||||
static xtype = 'dec.dcm.connection.plugin.redis.table_list' |
||||
|
||||
render() { |
||||
return { |
||||
type: VtapeXtype, |
||||
items: [{ |
||||
el: { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
type: TextValueComboXtype, |
||||
items: [], |
||||
}, { |
||||
el: { |
||||
type: IconButtonXtype, |
||||
cls: 'site-font', |
||||
}, |
||||
width: 25, |
||||
}, { |
||||
el: { |
||||
type: IconButtonXtype, |
||||
cls: 'refresh-font', |
||||
}, |
||||
width: 25, |
||||
}], |
||||
}, |
||||
height: 25, |
||||
}, { |
||||
el: { |
||||
type: HtapeXtype, |
||||
items: [{ |
||||
type: TextEditorXtype, |
||||
height: 24, |
||||
watermark: BI.i18nText('Plugin-Redis_Keys_Pattern'), |
||||
}, { |
||||
el: { |
||||
type: ButtonXtype, |
||||
minWidth: 50, |
||||
text: BI.i18nText('Plugin-Redis_Keys_Pattern_Search'), |
||||
}, |
||||
width: 50, |
||||
}], |
||||
}, |
||||
height: 25, |
||||
}, { |
||||
type: VtapeXtype, |
||||
items: [{ |
||||
type: ButtonGroupXtype, |
||||
layouts: [{ |
||||
type: VerticalXtype, |
||||
}], |
||||
items: this.renderList(), |
||||
}, { |
||||
el: { |
||||
type: LeftXtype, |
||||
height: 25, |
||||
hgap: 40, |
||||
items: [{ |
||||
type: MultiSelectItemXtype, |
||||
width: 80, |
||||
selected: true, |
||||
text: BI.i18nText('Plugin-Redis_Table'), |
||||
}, { |
||||
type: MultiSelectItemXtype, |
||||
width: 80, |
||||
selected: true, |
||||
text: BI.i18nText('Plugin-Redis_View'), |
||||
}], |
||||
}, |
||||
height: 25, |
||||
}], |
||||
}], |
||||
}; |
||||
} |
||||
|
||||
private renderList() { |
||||
return ['demo1', 'demo2'].map(item => { |
||||
return { |
||||
type: ListItem.xtype, |
||||
text: item, |
||||
value: item, |
||||
}; |
||||
}); |
||||
} |
||||
} |
||||
@ -1,75 +1,77 @@
|
||||
export const Icon = 'bi.icon'; |
||||
export const IconTextItem = 'bi.icon_text_item'; |
||||
export const IconTextIconItem = 'bi.icon_text_icon_item'; |
||||
export const IconButton = 'bi.icon_button'; |
||||
export const IconChangeButton = 'bi.icon_change_button'; |
||||
export const TextButton = 'bi.text_button'; |
||||
export const DownListCombo = 'bi.down_list_combo'; |
||||
export const Label = 'bi.label'; |
||||
export const SmallTextEditor = 'bi.small_text_editor'; |
||||
export const MultiFileEditor = 'bi.multifile_editor'; |
||||
export const SignEditor = 'bi.sign_editor'; |
||||
export const Button = 'bi.button'; |
||||
export const TextEditor = 'bi.text_editor'; |
||||
export const MultiSelectInsertCombo = 'bi.multi_select_insert_combo'; |
||||
export const MultiSelectCombo = 'bi.multi_select_combo'; |
||||
export const ButtonGroup = 'bi.button_group'; |
||||
export const AllValueChooserCombo = 'bi.all_value_chooser_combo'; |
||||
export const TextAreaEditor = 'bi.textarea_editor'; |
||||
export const MultiSelectItem = 'bi.multi_select_item'; |
||||
export const BarPopOver = 'bi.bar_popover'; |
||||
export const DynamicDateCombo = 'bi.dynamic_date_combo'; |
||||
export const DynamicDateTimeCombo = 'bi.dynamic_date_time_combo'; |
||||
export const MultiTreeCombo = 'bi.multi_tree_combo'; |
||||
export const RichEditor = 'bi.rich_editor'; |
||||
export const NicEditor = 'bi.nic_editor'; |
||||
export const Editor = 'bi.editor'; |
||||
export const MultiTreePopupView = 'bi.multi_tree_popup_view'; |
||||
export const SingleSelectRadioItem = 'bi.single_select_radio_item'; |
||||
export const SingleSelectInsertCombo = 'bi.single_select_insert_combo'; |
||||
export const SingleSelectCombo = 'bi.single_select_combo'; |
||||
export const Tab = 'bi.tab'; |
||||
export const DynamicYearMonthCombo = 'bi.dynamic_year_month_combo'; |
||||
export const Text = 'bi.text'; |
||||
export const Combo = 'bi.combo'; |
||||
export const TimeCombo = 'bi.time_combo'; |
||||
export const IFrame = 'bi.iframe'; |
||||
export const MultiTreeInsertCombo = 'bi.multi_tree_insert_combo'; |
||||
export const MultiTreeListCombo = 'bi.multi_tree_list_combo'; |
||||
export const MultilayerSingleTreeCombo = 'bi.multilayer_single_tree_combo'; |
||||
export const MultilayerSelectTreeCombo = 'bi.multilayer_select_tree_combo'; |
||||
export const AsyncTree = 'bi.async_tree'; |
||||
export const ListAsyncTree = 'bi.list_async_tree'; |
||||
export const MultilayerSingleTreePopup = 'bi.multilayer_single_tree_popup'; |
||||
export const MultilayerSelectTreePopup = 'bi.multilayer_select_tree_popup'; |
||||
export const IconLabel = 'bi.icon_label'; |
||||
export const Radio = 'bi.radio'; |
||||
export const LinearSegment = 'bi.linear_segment'; |
||||
export const SearchEditor = 'bi.search_editor'; |
||||
export const Img = 'bi.img'; |
||||
export const BubbleCombo = 'bi.bubble_combo'; |
||||
export const TextBubblePopupBarView = 'bi.text_bubble_bar_popup_view'; |
||||
export const TextValueCombo = 'bi.text_value_combo'; |
||||
export const File = 'bi.file'; |
||||
|
||||
|
||||
export const IconXtype = 'bi.icon'; |
||||
export const IconTextItemXtype = 'bi.icon_text_item'; |
||||
export const IconTextIconItemXtype = 'bi.icon_text_icon_item'; |
||||
export const IconButtonXtype = 'bi.icon_button'; |
||||
export const IconChangeButtonXtype = 'bi.icon_change_button'; |
||||
export const TextButtonXtype = 'bi.text_button'; |
||||
export const DownListComboXtype = 'bi.down_list_combo'; |
||||
export const LabelXtype = 'bi.label'; |
||||
export const SmallTextEditorXtype = 'bi.small_text_editor'; |
||||
export const MultiFileEditorXtype = 'bi.multifile_editor'; |
||||
export const SignEditorXtype = 'bi.sign_editor'; |
||||
export const ButtonXtype = 'bi.button'; |
||||
export const TextEditorXtype = 'bi.text_editor'; |
||||
export const MultiSelectInsertComboXtype = 'bi.multi_select_insert_combo'; |
||||
export const MultiSelectComboXtype = 'bi.multi_select_combo'; |
||||
export const ButtonGroupXtype = 'bi.button_group'; |
||||
export const AllValueChooserComboXtype = 'bi.all_value_chooser_combo'; |
||||
export const TextAreaEditorXtype = 'bi.textarea_editor'; |
||||
export const MultiSelectItemXtype = 'bi.multi_select_item'; |
||||
export const BarPopOverXtype = 'bi.bar_popover'; |
||||
export const DynamicDateComboXtype = 'bi.dynamic_date_combo'; |
||||
export const DynamicDateTimeComboXtype = 'bi.dynamic_date_time_combo'; |
||||
export const MultiTreeComboXtype = 'bi.multi_tree_combo'; |
||||
export const RichEditorXtype = 'bi.rich_editor'; |
||||
export const NicEditorXtype = 'bi.nic_editor'; |
||||
export const EditorXtype = 'bi.editor'; |
||||
export const MultiTreePopupViewXtype = 'bi.multi_tree_popup_view'; |
||||
export const SingleSelectRadioItemXtype = 'bi.single_select_radio_item'; |
||||
export const SingleSelectInsertComboXtype = 'bi.single_select_insert_combo'; |
||||
export const SingleSelectComboXtype = 'bi.single_select_combo'; |
||||
export const TabXtype = 'bi.tab'; |
||||
export const DynamicYearMonthComboXtype = 'bi.dynamic_year_month_combo'; |
||||
export const TextXtype = 'bi.text'; |
||||
export const ComboXtype = 'bi.combo'; |
||||
export const TimeComboXtype = 'bi.time_combo'; |
||||
export const IFrameXtype = 'bi.iframe'; |
||||
export const MultiTreeInsertComboXtype = 'bi.multi_tree_insert_combo'; |
||||
export const MultiTreeListComboXtype = 'bi.multi_tree_list_combo'; |
||||
export const MultilayerSingleTreeComboXtype = 'bi.multilayer_single_tree_combo'; |
||||
export const MultilayerSelectTreeComboXtype = 'bi.multilayer_select_tree_combo'; |
||||
export const AsyncTreeXtype = 'bi.async_tree'; |
||||
export const ListAsyncTreeXtype = 'bi.list_async_tree'; |
||||
export const MultilayerSingleTreePopupXtype = 'bi.multilayer_single_tree_popup'; |
||||
export const MultilayerSelectTreePopupXtype = 'bi.multilayer_select_tree_popup'; |
||||
export const IconLabelXtype = 'bi.icon_label'; |
||||
export const RadioXtype = 'bi.radio'; |
||||
export const LinearSegmentXtype = 'bi.linear_segment'; |
||||
export const SearchEditorXtype = 'bi.search_editor'; |
||||
export const ImgXtype = 'bi.img'; |
||||
export const BubbleComboXtype = 'bi.bubble_combo'; |
||||
export const TextBubblePopupBarViewXtype = 'bi.text_bubble_bar_popup_view'; |
||||
export const TextValueComboXtype = 'bi.text_value_combo'; |
||||
export const FileXtype = 'bi.file'; |
||||
export const IconComboXtype = 'bi.icon_combo'; |
||||
export const NumberEditorXtype = 'bi.number_editor'; |
||||
export const CodeEditorXtype = 'bi.code_editor'; |
||||
// 布局
|
||||
export const VerticalAdapt = 'bi.vertical_adapt'; |
||||
export const Vtape = 'bi.vtape'; |
||||
export const CenterAdapt = 'bi.center_adapt'; |
||||
export const Htape = 'bi.htape'; |
||||
export const Layout = 'bi.layout'; |
||||
export const Absolute = 'bi.absolute'; |
||||
export const Vertical = 'bi.vertical'; |
||||
export const Left = 'bi.left'; |
||||
export const Right = 'bi.right'; |
||||
export const HorizontalAdapt = 'bi.horizontal_adapt'; |
||||
export const AbsoluteCenterAdapt = 'bi.absolute_center_adapt'; |
||||
export const TableAdapt = 'bi.table_adapt'; |
||||
export const RightVerticalAdapt = 'bi.right_vertical_adapt'; |
||||
export const LeftRightVerticalAdapt = 'bi.left_right_vertical_adapt'; |
||||
export const ListView = 'bi.list_view'; |
||||
export const VirtualGroup = 'bi.virtual_group'; |
||||
export const HorizotalAuto = 'bi.horizontal_auto'; |
||||
export const Horizotal = 'bi.horizontal'; |
||||
export const FloatCenter = 'bi.float_center'; |
||||
export const VerticalAdaptXtype = 'bi.vertical_adapt'; |
||||
export const VtapeXtype = 'bi.vtape'; |
||||
export const CenterAdaptXtype = 'bi.center_adapt'; |
||||
export const HtapeXtype = 'bi.htape'; |
||||
export const LayoutXtype = 'bi.layout'; |
||||
export const AbsoluteXtype = 'bi.absolute'; |
||||
export const VerticalXtype = 'bi.vertical'; |
||||
export const LeftXtype = 'bi.left'; |
||||
export const RightXtype = 'bi.right'; |
||||
export const HorizontalAdaptXtype = 'bi.horizontal_adapt'; |
||||
export const AbsoluteCenterAdaptXtype = 'bi.absolute_center_adapt'; |
||||
export const TableAdaptXtype = 'bi.table_adapt'; |
||||
export const RightVerticalAdaptXtype = 'bi.right_vertical_adapt'; |
||||
export const LeftRightVerticalAdaptXtype = 'bi.left_right_vertical_adapt'; |
||||
export const ListViewXtype = 'bi.list_view'; |
||||
export const VirtualGroupXtype = 'bi.virtual_group'; |
||||
export const HorizotalAutoXtype = 'bi.horizontal_auto'; |
||||
export const HorizotalXtype = 'bi.horizontal'; |
||||
export const FloatCenterXtype = 'bi.float_center'; |
||||
export const LeftRightVerticalAdaptLayoutXtype = 'bi.left_right_vertical_adapt'; |
||||
|
||||
Loading…
Reference in new issue