@vxe-ui/plugin-render-antd 4.0.3 → 4.0.5

package/src/form-design/index.ts

@@ -1,6 +1,12 @@
 import { h } from 'vue'
-import { createWidgetAInput } from './a-input'
-import { createWidgetADatePicker } from './a-date-picker'
+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'
 
 import type { VxeUIExport } from 'vxe-pc-ui'
 
@@ -9,10 +15,16 @@ import type { VxeUIExport } from 'vxe-pc-ui'
  */
 export function defineFormDesignRender (VxeUI: VxeUIExport) {
   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({
-    AInput: {
+    AInputWidget: {
       createFormDesignWidgetConfig: getWidgetAInputConfig,
       renderFormDesignWidgetView (renderOpts, renderParams) {
         return h(WidgetAInputViewComponent, { renderOpts, renderParams })
@@ -21,7 +33,25 @@ export function defineFormDesignRender (VxeUI: VxeUIExport) {
         return h(WidgetAInputFormComponent, { renderOpts, renderParams })
       }
     },
-    ADatePicker: {
+    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 })
@@ -29,6 +59,43 @@ export function defineFormDesignRender (VxeUI: VxeUIExport) {
       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: any, renderParams: any) {
+        return h(WidgetACheckboxViewComponent, { renderOpts, renderParams })
+      },
+      renderFormDesignWidgetFormView (renderOpts: any, renderParams: any) {
+        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/src/form-design/{a-input.ts → input-widget.ts}

@@ -1,6 +1,6 @@
 import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
 
-import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent } from 'vxe-pc-ui'
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
 
 interface WidgetAInputFormObjVO {
   placeholder: string
@@ -33,6 +33,7 @@ export function createWidgetAInput (VxeUI: VxeUIExport) {
       const VxeUIFormComponent = VxeUI.getComponent<VxeFormComponent>('VxeForm')
       const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
       const VxeUISwitchComponent = VxeUI.getComponent<VxeSwitchComponent>('VxeSwitch')
+      const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('VxeInput')
 
       return () => {
         const { renderParams } = props
@@ -53,7 +54,7 @@ export function createWidgetAInput (VxeUI: VxeUIExport) {
                 title: VxeUI.getI18n('vxe.formDesign.widgetProp.name')
               }, {
                 default () {
-                  return h(resolveComponent('a-input') as ComponentOptions, {
+                  return h(VxeUIInputComponent, {
                     modelValue: widget.title,
                     placeholder: options.placeholder,
                     'onUpdate:modelValue' (val: any) {
@@ -121,9 +122,9 @@ export function createWidgetAInput (VxeUI: VxeUIExport) {
         }, {
           default () {
             return h(resolveComponent('a-input') as ComponentOptions, {
-              modelValue: $formView ? $formView.getItemValue(widget) : null,
+              value: $formView ? $formView.getItemValue(widget) : null,
               onChange: changeEvent,
-              'onUpdate:modelValue' (val: any) {
+              'onUpdate:value' (val: any) {
                 if ($formView) {
                   $formView.setItemValue(widget, val)
                 }

package/src/form-design/number-input-widget.ts

@@ -0,0 +1,144 @@
+import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
+
+interface WidgetAInputNumberFormObjVO {
+  placeholder: string
+}
+
+export function createWidgetAInputNumber (VxeUI: VxeUIExport) {
+  const getWidgetAInputNumberConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetAInputNumberFormObjVO> => {
+    return {
+      title: '数字',
+      icon: 'vxe-icon-number',
+      options: {
+        placeholder: '请输入'
+      }
+    }
+  }
+
+  const WidgetAInputNumberFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetAInputNumberFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormComponent = VxeUI.getComponent<VxeFormComponent>('VxeForm')
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+      const VxeUISwitchComponent = VxeUI.getComponent<VxeSwitchComponent>('VxeSwitch')
+      const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('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: any) {
+                      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: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              })
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetAInputNumberViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetAInputNumberFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+
+      const changeEvent = () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        if ($formView) {
+          const itemValue = $formView ? $formView.getItemValue(widget) : null
+          $formView.updateItemStatus(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(resolveComponent('a-input-number') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              placeholder: options.placeholder,
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetAInputNumberConfig,
+    WidgetAInputNumberFormComponent,
+    WidgetAInputNumberViewComponent
+  }
+}

package/src/form-design/radio-widget.ts

@@ -0,0 +1,164 @@
+import { defineComponent, h, PropType, resolveComponent, ComponentOptions, computed } from 'vue'
+import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
+
+interface WidgetARadioFormObjVO {
+  options: WidgetDataSourceOptionObjVO[]
+}
+
+export function createWidgetARadio (VxeUI: VxeUIExport) {
+  const getWidgetARadioConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetARadioFormObjVO> => {
+    return {
+      title: '单选框',
+      icon: 'vxe-icon-radio-checked',
+      options: {
+        options: XEUtils.range(0, 3).map((v, i) => {
+          return {
+            value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
+          }
+        })
+      }
+    }
+  }
+
+  const WidgetARadioFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetARadioFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormComponent = VxeUI.getComponent<VxeFormComponent>('VxeForm')
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+      const VxeUISwitchComponent = VxeUI.getComponent<VxeSwitchComponent>('VxeSwitch')
+      const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('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: any) {
+                      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: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              }),
+              renderDataSourceFormItem()
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetARadioViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetARadioFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+
+      const radioOptions = 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.updateItemStatus(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(resolveComponent('a-radio-group') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              options: radioOptions.value,
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetARadioConfig,
+    WidgetARadioFormComponent,
+    WidgetARadioViewComponent
+  }
+}

package/src/form-design/select-widget.ts

@@ -0,0 +1,156 @@
+import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+import { useWidgetPropDataSource, WidgetDataSourceOptionObjVO } from './use'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
+
+interface WidgetASelectFormObjVO {
+  placeholder: string
+  options: WidgetDataSourceOptionObjVO[]
+}
+
+export function createWidgetASelect (VxeUI: VxeUIExport) {
+  const getWidgetASelectConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetASelectFormObjVO> => {
+    return {
+      title: '下拉框',
+      icon: 'vxe-icon-select',
+      options: {
+        placeholder: '请选择',
+        options: XEUtils.range(0, 3).map((v, i) => {
+          return {
+            value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [i + 1])
+          }
+        })
+      }
+    }
+  }
+
+  const WidgetASelectFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetASelectFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormComponent = VxeUI.getComponent<VxeFormComponent>('VxeForm')
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+      const VxeUISwitchComponent = VxeUI.getComponent<VxeSwitchComponent>('VxeSwitch')
+      const VxeUIInputComponent = VxeUI.getComponent<VxeInputComponent>('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: any) {
+                      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: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              }),
+              renderDataSourceFormItem()
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetASelectViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetASelectFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+
+      const changeEvent = () => {
+        const { renderParams } = props
+        const { widget, $formView } = renderParams
+        if ($formView) {
+          const itemValue = $formView ? $formView.getItemValue(widget) : null
+          $formView.updateItemStatus(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(resolveComponent('a-select') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              options: options.options,
+              placeholder: options.placeholder,
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetASelectConfig,
+    WidgetASelectFormComponent,
+    WidgetASelectViewComponent
+  }
+}