vxe-design
Version:
A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms
59 lines (58 loc) • 2.35 kB
JavaScript
import { h, inject } from 'vue';
import { defineVxeComponent } from '../../ui/src/comp';
import { VxeUI, getI18n } from '@vxe-ui/core';
import { useWidgetName } from '../../form-design/src/use';
export const WidgetVxeSelectViewComponent = defineVxeComponent({
props: {
renderOpts: {
type: Object,
default: () => ({})
},
renderParams: {
type: Object,
default: () => ({})
}
},
emits: [],
setup(props) {
const VxeUIFormItemComponent = VxeUI.getComponent('vxe-form-item');
const VxeUISelectComponent = VxeUI.getComponent('vxe-select');
const $xeFormView = inject('$xeFormView', null);
const { computeKebabCaseName } = useWidgetName(props);
const changeEvent = () => {
const { renderParams } = props;
const { widget } = renderParams;
if ($xeFormView) {
const itemValue = $xeFormView ? $xeFormView.getItemValue(widget) : null;
$xeFormView.updateWidgetStatus(widget, itemValue);
}
};
return () => {
const { renderParams } = props;
const { widget, isViewMode } = renderParams;
const { options } = widget;
const kebabCaseName = computeKebabCaseName.value;
return h(VxeUIFormItemComponent, {
class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
title: widget.title,
field: widget.field,
itemRender: {}
}, {
default() {
return h(VxeUISelectComponent, {
modelValue: $xeFormView ? $xeFormView.getItemValue(widget) : null,
placeholder: options.placeholder || getI18n('vxe.base.pleaseSelect'),
options: isViewMode ? options.options : [],
optionProps: { label: 'value', value: 'value' },
onChange: changeEvent,
'onUpdate:modelValue'(val) {
if ($xeFormView) {
$xeFormView.setItemValue(widget, val);
}
}
});
}
});
};
}
});