forked from fanruan/demo-tabledata-redis
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
6.2 KiB
173 lines
6.2 KiB
5 years ago
|
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,
|
||
|
};
|
||
|
});
|
||
|
}
|
||
|
}
|