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.
172 lines
6.2 KiB
172 lines
6.2 KiB
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: 'redis-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, |
|
}; |
|
}); |
|
} |
|
}
|
|
|