@vxe-ui/plugin-render-antd 4.2.3 → 4.3.1

package/es/form-design/checkbox-widget.js

@@ -0,0 +1,148 @@
+import { defineComponent, h, computed } from 'vue';
+import { useWidgetPropDataSource } from './use';
+import { getCurrComponent } from '../util/comp';
+import XEUtils from 'xe-utils';
+export function createWidgetACheckbox(VxeUI) {
+    const getWidgetACheckboxConfig = (params) => {
+        return {
+            title: '复选框',
+            icon: 'vxe-icon-checkbox-checked',
+            options: {
+                options: XEUtils.range(0, 3).map((v, i) => {
+                    return {
+                        value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
+                    };
+                })
+            }
+        };
+    };
+    const WidgetACheckboxFormComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch');
+            const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
+            const { renderDataSourceFormItem } = useWidgetPropDataSource(VxeUI, props, false);
+            return () => {
+                const { renderParams } = props;
+                const { widget } = renderParams;
+                return h(VxeUIFormComponent, {
+                    class: 'vxe-form-design--widget-render-form-wrapper',
+                    vertical: true,
+                    span: 24,
+                    titleBold: true,
+                    titleOverflow: true,
+                    data: widget.options
+                }, {
+                    default() {
+                        return [
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+                            }, {
+                                default() {
+                                    return h(VxeUIInputComponent, {
+                                        modelValue: widget.title,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.title = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                                field: 'placeholder',
+                                itemRender: { name: 'ElInput' }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+                            }, {
+                                default() {
+                                    return h(VxeUISwitchComponent, {
+                                        modelValue: widget.required,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.required = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            renderDataSourceFormItem()
+                        ];
+                    }
+                });
+            };
+        }
+    });
+    const WidgetACheckboxViewComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const checkboxOptions = computed(() => {
+                const { renderParams } = props;
+                const { widget } = renderParams;
+                const { options } = widget;
+                return options.options.map(item => {
+                    return {
+                        label: item.value,
+                        value: item.value
+                    };
+                });
+            });
+            const changeEvent = () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                if ($formView) {
+                    const itemValue = $formView ? $formView.getItemValue(widget) : null;
+                    $formView.updateWidgetStatus(widget, itemValue);
+                }
+            };
+            return () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                return h(VxeUIFormItemComponent, {
+                    class: ['vxe-form-design--widget-render-form-item'],
+                    field: widget.field,
+                    title: widget.title
+                }, {
+                    default() {
+                        return h(getCurrComponent('a-checkbox-group'), {
+                            value: $formView ? $formView.getItemValue(widget) : null,
+                            options: checkboxOptions.value,
+                            onChange: changeEvent,
+                            'onUpdate:value'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetACheckboxConfig,
+        WidgetACheckboxFormComponent,
+        WidgetACheckboxViewComponent
+    };
+}

package/es/form-design/date-picker-widget.js

@@ -0,0 +1,130 @@
+import { defineComponent, h } from 'vue';
+import { getCurrComponent } from '../util/comp';
+export function createWidgetADatePicker(VxeUI) {
+    const getWidgetADatePickerConfig = (params) => {
+        return {
+            title: '日期',
+            icon: 'vxe-icon-input',
+            options: {
+                placeholder: ''
+            }
+        };
+    };
+    const WidgetADatePickerFormComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch');
+            const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
+            return () => {
+                const { renderParams } = props;
+                const { widget } = renderParams;
+                return h(VxeUIFormComponent, {
+                    class: 'vxe-form-design--widget-render-form-wrapper',
+                    vertical: true,
+                    span: 24,
+                    titleBold: true,
+                    titleOverflow: true,
+                    data: widget.options
+                }, {
+                    default() {
+                        return [
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+                            }, {
+                                default() {
+                                    return h(VxeUIInputComponent, {
+                                        modelValue: widget.title,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.title = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                                field: 'placeholder',
+                                itemRender: { name: 'VxeInput' }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+                            }, {
+                                default() {
+                                    return h(VxeUISwitchComponent, {
+                                        modelValue: widget.required,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.required = val;
+                                        }
+                                    });
+                                }
+                            })
+                        ];
+                    }
+                });
+            };
+        }
+    });
+    const WidgetADatePickerViewComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const changeEvent = () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                if ($formView) {
+                    const itemValue = $formView ? $formView.getItemValue(widget) : null;
+                    $formView.updateWidgetStatus(widget, itemValue);
+                }
+            };
+            return () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                const { options } = widget;
+                return h(VxeUIFormItemComponent, {
+                    class: ['vxe-form-design--widget-render-form-item'],
+                    field: widget.field,
+                    title: widget.title
+                }, {
+                    default() {
+                        return h(getCurrComponent('a-date-picker'), {
+                            value: $formView ? $formView.getItemValue(widget) : null,
+                            placeholder: options.placeholder,
+                            onChange: changeEvent,
+                            'onUpdate:value'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetADatePickerConfig,
+        WidgetADatePickerFormComponent,
+        WidgetADatePickerViewComponent
+    };
+}

package/es/form-design/index.js

@@ -0,0 +1,97 @@
+import { h } from 'vue';
+import { createWidgetAInput } from './input-widget';
+import { createWidgetATextarea } from './textarea-widget';
+import { createWidgetAInputNumber } from './number-input-widget';
+import { createWidgetADatePicker } from './date-picker-widget';
+import { createWidgetASelect } from './select-widget';
+import { createWidgetARadio } from './radio-widget';
+import { createWidgetACheckbox } from './checkbox-widget';
+import { createWidgetASwitch } from './switch-widget';
+/**
+ * 表单设计器 - 渲染器
+ */
+export function defineFormDesignRender(VxeUI) {
+    const { getWidgetAInputConfig, WidgetAInputViewComponent, WidgetAInputFormComponent } = createWidgetAInput(VxeUI);
+    const { getWidgetATextareaConfig, WidgetATextareaViewComponent, WidgetATextareaFormComponent } = createWidgetATextarea(VxeUI);
+    const { getWidgetAInputNumberConfig, WidgetAInputNumberViewComponent, WidgetAInputNumberFormComponent } = createWidgetAInputNumber(VxeUI);
+    const { getWidgetADatePickerConfig, WidgetADatePickerViewComponent, WidgetADatePickerFormComponent } = createWidgetADatePicker(VxeUI);
+    const { getWidgetASelectConfig, WidgetASelectViewComponent, WidgetASelectFormComponent } = createWidgetASelect(VxeUI);
+    const { getWidgetARadioConfig, WidgetARadioViewComponent, WidgetARadioFormComponent } = createWidgetARadio(VxeUI);
+    const { getWidgetACheckboxConfig, WidgetACheckboxViewComponent, WidgetACheckboxFormComponent } = createWidgetACheckbox(VxeUI);
+    const { getWidgetASwitchConfig, WidgetASwitchViewComponent, WidgetASwitchFormComponent } = createWidgetASwitch(VxeUI);
+    VxeUI.renderer.mixin({
+        AInputWidget: {
+            createFormDesignWidgetConfig: getWidgetAInputConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetAInputViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetAInputFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ATextareaWidget: {
+            createFormDesignWidgetConfig: getWidgetATextareaConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetATextareaViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetATextareaFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ANumberInputWidget: {
+            createFormDesignWidgetConfig: getWidgetAInputNumberConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetAInputNumberViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetAInputNumberFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ADatePickerWidget: {
+            createFormDesignWidgetConfig: getWidgetADatePickerConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetADatePickerViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetADatePickerFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ASelectWidget: {
+            createFormDesignWidgetConfig: getWidgetASelectConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetASelectViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetASelectFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ARadioWidget: {
+            createFormDesignWidgetConfig: getWidgetARadioConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetARadioViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetARadioFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ACheckboxWidget: {
+            createFormDesignWidgetConfig: getWidgetACheckboxConfig,
+            createFormDesignWidgetFieldValue: () => [],
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetACheckboxViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetACheckboxFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ASwitchWidget: {
+            createFormDesignWidgetConfig: getWidgetASwitchConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetASwitchViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetASwitchFormComponent, { renderOpts, renderParams });
+            }
+        }
+    });
+}

package/es/form-design/input-widget.js

@@ -0,0 +1,130 @@
+import { defineComponent, h } from 'vue';
+import { getCurrComponent } from '../util/comp';
+export function createWidgetAInput(VxeUI) {
+    const getWidgetAInputConfig = (params) => {
+        return {
+            title: '输入框',
+            icon: 'vxe-icon-input',
+            options: {
+                placeholder: ''
+            }
+        };
+    };
+    const WidgetAInputFormComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch');
+            const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
+            return () => {
+                const { renderParams } = props;
+                const { widget } = renderParams;
+                const { options } = widget;
+                return h(VxeUIFormComponent, {
+                    class: 'vxe-form-design--widget-render-form-wrapper',
+                    vertical: true,
+                    span: 24,
+                    titleBold: true,
+                    titleOverflow: true,
+                    data: options
+                }, {
+                    default() {
+                        return [
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+                            }, {
+                                default() {
+                                    return h(VxeUIInputComponent, {
+                                        modelValue: widget.title,
+                                        placeholder: options.placeholder,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.title = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                                field: 'placeholder',
+                                itemRender: { name: 'VxeInput' }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+                            }, {
+                                default() {
+                                    return h(VxeUISwitchComponent, {
+                                        modelValue: widget.required,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.required = val;
+                                        }
+                                    });
+                                }
+                            })
+                        ];
+                    }
+                });
+            };
+        }
+    });
+    const WidgetAInputViewComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const changeEvent = () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                if ($formView) {
+                    const itemValue = $formView ? $formView.getItemValue(widget) : null;
+                    $formView.updateWidgetStatus(widget, itemValue);
+                }
+            };
+            return () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                return h(VxeUIFormItemComponent, {
+                    class: ['vxe-form-design--widget-render-form-item'],
+                    field: widget.field,
+                    title: widget.title
+                }, {
+                    default() {
+                        return h(getCurrComponent('a-input'), {
+                            value: $formView ? $formView.getItemValue(widget) : null,
+                            onChange: changeEvent,
+                            'onUpdate:value'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetAInputConfig,
+        WidgetAInputFormComponent,
+        WidgetAInputViewComponent
+    };
+}

package/es/form-design/number-input-widget.js

@@ -0,0 +1,130 @@
+import { defineComponent, h } from 'vue';
+import { getCurrComponent } from '../util/comp';
+export function createWidgetAInputNumber(VxeUI) {
+    const getWidgetAInputNumberConfig = (params) => {
+        return {
+            title: '数字',
+            icon: 'vxe-icon-number',
+            options: {
+                placeholder: '请输入'
+            }
+        };
+    };
+    const WidgetAInputNumberFormComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormComponent = VxeUI.getComponent('VxeForm');
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const VxeUISwitchComponent = VxeUI.getComponent('VxeSwitch');
+            const VxeUIInputComponent = VxeUI.getComponent('VxeInput');
+            return () => {
+                const { renderParams } = props;
+                const { widget } = renderParams;
+                return h(VxeUIFormComponent, {
+                    class: 'vxe-form-design--widget-render-form-wrapper',
+                    vertical: true,
+                    span: 24,
+                    titleBold: true,
+                    titleOverflow: true,
+                    data: widget.options
+                }, {
+                    default() {
+                        return [
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
+                            }, {
+                                default() {
+                                    return h(VxeUIInputComponent, {
+                                        modelValue: widget.title,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.title = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                                field: 'placeholder',
+                                itemRender: { name: 'ElInput' }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+                            }, {
+                                default() {
+                                    return h(VxeUISwitchComponent, {
+                                        modelValue: widget.required,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.required = val;
+                                        }
+                                    });
+                                }
+                            })
+                        ];
+                    }
+                });
+            };
+        }
+    });
+    const WidgetAInputNumberViewComponent = defineComponent({
+        props: {
+            renderOpts: {
+                type: Object,
+                default: () => ({})
+            },
+            renderParams: {
+                type: Object,
+                default: () => ({})
+            }
+        },
+        emits: [],
+        setup(props) {
+            const VxeUIFormItemComponent = VxeUI.getComponent('VxeFormItem');
+            const changeEvent = () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                if ($formView) {
+                    const itemValue = $formView ? $formView.getItemValue(widget) : null;
+                    $formView.updateWidgetStatus(widget, itemValue);
+                }
+            };
+            return () => {
+                const { renderParams } = props;
+                const { widget, $formView } = renderParams;
+                const { options } = widget;
+                return h(VxeUIFormItemComponent, {
+                    class: ['vxe-form-design--widget-render-form-item'],
+                    field: widget.field,
+                    title: widget.title
+                }, {
+                    default() {
+                        return h(getCurrComponent('a-input-number'), {
+                            value: $formView ? $formView.getItemValue(widget) : null,
+                            placeholder: options.placeholder,
+                            onChange: changeEvent,
+                            'onUpdate:value'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetAInputNumberConfig,
+        WidgetAInputNumberFormComponent,
+        WidgetAInputNumberViewComponent
+    };
+}