@vxe-ui/plugin-render-element 4.2.3 → 4.3.0

package/es/form/index.js

@@ -0,0 +1,279 @@
+import { h } from 'vue';
+import { getCurrComponent } from '../util/comp';
+import XEUtils from 'xe-utils';
+/**
+ * 表单 - 渲染器
+ */
+export function defineFormRender(VxeUI) {
+    function isEmptyValue(cellValue) {
+        return cellValue === null || cellValue === undefined || cellValue === '';
+    }
+    function getOnName(type) {
+        return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1);
+    }
+    function getModelProp(renderOpts) {
+        return 'modelValue';
+    }
+    function getModelEvent(renderOpts) {
+        return 'update:modelValue';
+    }
+    function getChangeEvent(renderOpts) {
+        let type = 'change';
+        switch (renderOpts.name) {
+            case 'ElAutocomplete':
+                type = 'select';
+                break;
+            case 'ElInput':
+            case 'ElInputNumber':
+                type = 'input';
+                break;
+        }
+        return type;
+    }
+    function getItemProps(renderOpts, params, value, defaultProps) {
+        return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value });
+    }
+    function formatText(cellValue) {
+        return '' + (isEmptyValue(cellValue) ? '' : cellValue);
+    }
+    function getOns(renderOpts, params, inputFunc, changeFunc) {
+        const { events } = renderOpts;
+        const modelEvent = getModelEvent(renderOpts);
+        const changeEvent = getChangeEvent(renderOpts);
+        const isSameEvent = changeEvent === modelEvent;
+        const ons = {};
+        XEUtils.objectEach(events, (func, key) => {
+            ons[getOnName(key)] = function (...args) {
+                func(params, ...args);
+            };
+        });
+        if (inputFunc) {
+            ons[getOnName(modelEvent)] = function (targetEvnt) {
+                inputFunc(targetEvnt);
+                if (events && events[modelEvent]) {
+                    events[modelEvent](params, targetEvnt);
+                }
+                if (isSameEvent && changeFunc) {
+                    changeFunc(targetEvnt);
+                }
+            };
+        }
+        if (!isSameEvent && changeFunc) {
+            ons[getOnName(changeEvent)] = function (...args) {
+                changeFunc(...args);
+                if (events && events[changeEvent]) {
+                    events[changeEvent](params, ...args);
+                }
+            };
+        }
+        return ons;
+    }
+    function getItemOns(renderOpts, params) {
+        const { $form, data, field } = params;
+        return getOns(renderOpts, params, (value) => {
+            // 处理 model 值双向绑定
+            XEUtils.set(data, field, value);
+        }, () => {
+            // 处理 change 事件相关逻辑
+            $form.updateStatus(params);
+            if (renderOpts.changeToSubmit) {
+                $form.handleSubmitEvent(new Event('change'));
+            }
+        });
+    }
+    function renderOptions(options, optionProps) {
+        const labelProp = optionProps.label || 'label';
+        const valueProp = optionProps.value || 'value';
+        return XEUtils.map(options, (item, oIndex) => {
+            return h(getCurrComponent('el-option'), {
+                key: oIndex,
+                value: item[valueProp],
+                label: item[labelProp],
+                disabled: item.disabled
+            });
+        });
+    }
+    function cellText(cellValue) {
+        return [formatText(cellValue)];
+    }
+    function createFormItemRender(defaultProps) {
+        return function (renderOpts, params) {
+            const { data, field } = params;
+            const { name } = renderOpts;
+            const { attrs } = renderOpts;
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getCurrComponent(name), Object.assign(Object.assign(Object.assign({}, attrs), getItemProps(renderOpts, params, itemValue, defaultProps)), getItemOns(renderOpts, params)))
+            ];
+        };
+    }
+    function defaultButtonItemRender(renderOpts, params) {
+        const { attrs } = renderOpts;
+        const props = getItemProps(renderOpts, params, null);
+        return [
+            h(getCurrComponent('el-button'), Object.assign(Object.assign(Object.assign({}, attrs), props), getOns(renderOpts, params)), {
+                default: () => cellText(renderOpts.content || props.content)
+            })
+        ];
+    }
+    function defaultButtonsItemRender(renderOpts, params) {
+        const { children } = renderOpts;
+        if (children) {
+            return children.map((childRenderOpts) => defaultButtonItemRender(childRenderOpts, params)[0]);
+        }
+        return [];
+    }
+    /**
+     * 已废弃
+     * @deprecated
+     */
+    function createOldFormItemRadioAndCheckboxRender() {
+        return function (renderOpts, params) {
+            const { name, options = [], optionProps = {}, attrs } = renderOpts;
+            const { data, field } = params;
+            const labelProp = optionProps.label || 'label';
+            const valueProp = optionProps.value || 'value';
+            const itemValue = XEUtils.get(data, field);
+            return [
+                h(getCurrComponent(`${name}Group`), Object.assign(Object.assign(Object.assign({}, attrs), getItemProps(renderOpts, params, itemValue)), getItemOns(renderOpts, params)), {
+                    default: () => {
+                        return options.map((option, oIndex) => {
+                            return h(getCurrComponent(name), {
+                                key: oIndex,
+                                label: option[valueProp],
+                                disabled: option.disabled
+                            }, {
+                                default: () => cellText(option[labelProp])
+                            });
+                        });
+                    }
+                })
+            ];
+        };
+    }
+    VxeUI.renderer.mixin({
+        ElAutocomplete: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElInput: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElInputNumber: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElSelect: {
+            renderFormItemContent(renderOpts, params) {
+                const { options = [], optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts;
+                const { data, field } = params;
+                const { attrs } = renderOpts;
+                const itemValue = XEUtils.get(data, field);
+                const props = getItemProps(renderOpts, params, itemValue);
+                const ons = getItemOns(renderOpts, params);
+                if (optionGroups) {
+                    const groupOptions = optionGroupProps.options || 'options';
+                    const groupLabel = optionGroupProps.label || 'label';
+                    return [
+                        h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({}, attrs), props), ons), {
+                            default: () => {
+                                return XEUtils.map(optionGroups, (group, gIndex) => {
+                                    return h(getCurrComponent('el-option-group'), {
+                                        label: group[groupLabel],
+                                        key: gIndex
+                                    }, {
+                                        default: () => renderOptions(group[groupOptions], optionProps)
+                                    });
+                                });
+                            }
+                        })
+                    ];
+                }
+                return [
+                    h(getCurrComponent('el-select'), Object.assign(Object.assign(Object.assign({}, attrs), props), ons), {
+                        default: () => renderOptions(options, optionProps)
+                    })
+                ];
+            }
+        },
+        ElCascader: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElDatePicker: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElTimePicker: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElTimeSelect: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElRate: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElSwitch: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElSlider: {
+            renderFormItemContent: createFormItemRender()
+        },
+        ElRadioGroup: {
+            renderFormItemContent(renderOpts, params) {
+                const { options = [], optionProps = {}, attrs } = renderOpts;
+                const { data, field } = params;
+                const labelProp = optionProps.label || 'label';
+                const valueProp = optionProps.value || 'value';
+                const itemValue = XEUtils.get(data, field);
+                return [
+                    h(getCurrComponent('el-radio-group'), Object.assign(Object.assign(Object.assign({}, attrs), getItemProps(renderOpts, params, itemValue)), getItemOns(renderOpts, params)), {
+                        default: () => {
+                            return options.map((option, oIndex) => {
+                                return h(getCurrComponent('el-radio'), {
+                                    key: oIndex,
+                                    value: option[valueProp],
+                                    disabled: option.disabled
+                                }, {
+                                    default: () => cellText(option[labelProp])
+                                });
+                            });
+                        }
+                    })
+                ];
+            }
+        },
+        ElCheckboxGroup: {
+            renderFormItemContent(renderOpts, params) {
+                const { options = [], optionProps = {}, attrs } = renderOpts;
+                const { data, field } = params;
+                const labelProp = optionProps.label || 'label';
+                const valueProp = optionProps.value || 'value';
+                const itemValue = XEUtils.get(data, field);
+                return [
+                    h(getCurrComponent('el-checkbox-group'), Object.assign(Object.assign(Object.assign({}, attrs), getItemProps(renderOpts, params, itemValue)), getItemOns(renderOpts, params)), {
+                        default: () => {
+                            return options.map((option, oIndex) => {
+                                return h(getCurrComponent('el-checkbox'), {
+                                    key: oIndex,
+                                    value: option[valueProp],
+                                    label: option[labelProp],
+                                    disabled: option.disabled
+                                });
+                            });
+                        }
+                    })
+                ];
+            }
+        },
+        ElButton: {
+            renderFormItemContent: defaultButtonItemRender
+        },
+        // 已废弃
+        ElRadio: {
+            renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+        },
+        ElCheckbox: {
+            renderFormItemContent: createOldFormItemRadioAndCheckboxRender()
+        },
+        ElButtons: {
+            renderFormItemContent: defaultButtonsItemRender
+        }
+    });
+}

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

@@ -0,0 +1,151 @@
+import { defineComponent, h } from 'vue';
+import { useWidgetPropDataSource } from './use';
+import { getCurrComponent } from '../util/comp';
+import XEUtils from 'xe-utils';
+export function createWidgetElCheckbox(VxeUI) {
+    const getWidgetElCheckboxConfig = (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 WidgetElCheckboxFormComponent = 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 { 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(getCurrComponent('el-input'), {
+                                        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 WidgetElCheckboxViewComponent = 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('el-checkbox-group'), {
+                            modelValue: $formView ? $formView.getItemValue(widget) : null,
+                            onChange: changeEvent,
+                            'onUpdate:modelValue'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        }, {
+                            default: () => {
+                                return options.options
+                                    ? options.options.map((item, index) => {
+                                        return h(getCurrComponent('el-checkbox'), {
+                                            key: index,
+                                            value: item.value
+                                        }, {
+                                            default() {
+                                                return `${item.value}`;
+                                            }
+                                        });
+                                    })
+                                    : [];
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetElCheckboxConfig,
+        WidgetElCheckboxFormComponent,
+        WidgetElCheckboxViewComponent
+    };
+}

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

@@ -0,0 +1,129 @@
+import { defineComponent, h } from 'vue';
+import { getCurrComponent } from '../util/comp';
+export function createWidgetElDatePicker(VxeUI) {
+    const getWidgetElDatePickerConfig = (params) => {
+        return {
+            title: '日期',
+            icon: 'vxe-icon-input',
+            options: {
+                placeholder: '请选择'
+            }
+        };
+    };
+    const WidgetElDatePickerFormComponent = 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');
+            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(getCurrComponent('el-input'), {
+                                        modelValue: widget.title,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.title = val;
+                                        }
+                                    });
+                                }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.placeholder'),
+                                field: 'placeholder',
+                                itemRender: { name: 'ElDatePicker' }
+                            }),
+                            h(VxeUIFormItemComponent, {
+                                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+                            }, {
+                                default() {
+                                    return h(VxeUISwitchComponent, {
+                                        modelValue: widget.required,
+                                        'onUpdate:modelValue'(val) {
+                                            widget.required = val;
+                                        }
+                                    });
+                                }
+                            })
+                        ];
+                    }
+                });
+            };
+        }
+    });
+    const WidgetElDatePickerViewComponent = 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('el-date-picker'), {
+                            modelValue: $formView ? $formView.getItemValue(widget) : null,
+                            placeholder: options.placeholder,
+                            onChange: changeEvent,
+                            'onUpdate:modelValue'(val) {
+                                if ($formView) {
+                                    $formView.setItemValue(widget, val);
+                                }
+                            }
+                        });
+                    }
+                });
+            };
+        }
+    });
+    return {
+        getWidgetElDatePickerConfig,
+        WidgetElDatePickerFormComponent,
+        WidgetElDatePickerViewComponent
+    };
+}

package/es/form-design/index.js

@@ -0,0 +1,97 @@
+import { h } from 'vue';
+import { createWidgetElInput } from './input-widget';
+import { createWidgetElTextarea } from './textarea-widget';
+import { createWidgetElInputNumber } from './number-input-widget';
+import { createWidgetElDatePicker } from './date-picker-widget';
+import { createWidgetElSelect } from './select-widget';
+import { createWidgetElRadio } from './radio-widget';
+import { createWidgetElCheckbox } from './checkbox-widget';
+import { createWidgetElSwitch } from './switch-widget';
+/**
+ * 表单设计器 - 渲染器
+ */
+export function defineFormDesignRender(VxeUI) {
+    const { getWidgetElInputConfig, WidgetElInputViewComponent, WidgetElInputFormComponent } = createWidgetElInput(VxeUI);
+    const { getWidgetElTextareaConfig, WidgetElTextareaViewComponent, WidgetElTextareaFormComponent } = createWidgetElTextarea(VxeUI);
+    const { getWidgetElInputNumberConfig, WidgetElInputNumberViewComponent, WidgetElInputNumberFormComponent } = createWidgetElInputNumber(VxeUI);
+    const { getWidgetElDatePickerConfig, WidgetElDatePickerViewComponent, WidgetElDatePickerFormComponent } = createWidgetElDatePicker(VxeUI);
+    const { getWidgetElSelectConfig, WidgetElSelectViewComponent, WidgetElSelectFormComponent } = createWidgetElSelect(VxeUI);
+    const { getWidgetElRadioConfig, WidgetElRadioViewComponent, WidgetElRadioFormComponent } = createWidgetElRadio(VxeUI);
+    const { getWidgetElCheckboxConfig, WidgetElCheckboxViewComponent, WidgetElCheckboxFormComponent } = createWidgetElCheckbox(VxeUI);
+    const { getWidgetElSwitchConfig, WidgetElSwitchViewComponent, WidgetElSwitchFormComponent } = createWidgetElSwitch(VxeUI);
+    VxeUI.renderer.mixin({
+        ElInputWidget: {
+            createFormDesignWidgetConfig: getWidgetElInputConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElInputViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElInputFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElTextareaWidget: {
+            createFormDesignWidgetConfig: getWidgetElTextareaConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElTextareaViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElTextareaFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElNumberInputWidget: {
+            createFormDesignWidgetConfig: getWidgetElInputNumberConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElInputNumberViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElInputNumberFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElDatePickerWidget: {
+            createFormDesignWidgetConfig: getWidgetElDatePickerConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElDatePickerViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElDatePickerFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElSelectWidget: {
+            createFormDesignWidgetConfig: getWidgetElSelectConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElSelectViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElSelectFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElRadioWidget: {
+            createFormDesignWidgetConfig: getWidgetElRadioConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElRadioViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElRadioFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElCheckboxWidget: {
+            createFormDesignWidgetConfig: getWidgetElCheckboxConfig,
+            createFormDesignWidgetFieldValue: () => [],
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElCheckboxViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElCheckboxFormComponent, { renderOpts, renderParams });
+            }
+        },
+        ElSwitchWidget: {
+            createFormDesignWidgetConfig: getWidgetElSwitchConfig,
+            renderFormDesignWidgetView(renderOpts, renderParams) {
+                return h(WidgetElSwitchViewComponent, { renderOpts, renderParams });
+            },
+            renderFormDesignWidgetFormView(renderOpts, renderParams) {
+                return h(WidgetElSwitchFormComponent, { renderOpts, renderParams });
+            }
+        }
+    });
+}