@vxe-ui/plugin-render-antd 4.0.2 → 4.0.4

package/src/form/index.ts

@@ -0,0 +1,244 @@
+import { h, resolveComponent, ComponentOptions } from 'vue'
+import XEUtils from 'xe-utils'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, FormItemContentRenderParams } from 'vxe-pc-ui'
+
+/**
+ * 表单 - 渲染器
+ */
+export function defineFormRender (VxeUI: VxeUIExport) {
+  function isEmptyValue (cellValue: any) {
+    return cellValue === null || cellValue === undefined || cellValue === ''
+  }
+
+  function getOnName (type: string) {
+    return 'on' + type.substring(0, 1).toLocaleUpperCase() + type.substring(1)
+  }
+
+  function getModelProp (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    let prop = 'value'
+    switch (renderOpts.name) {
+      case 'ASwitch':
+        prop = 'checked'
+        break
+    }
+    return prop
+  }
+
+  function getModelEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    let type = 'update:value'
+    switch (renderOpts.name) {
+      case 'ASwitch':
+        type = 'update:checked'
+        break
+    }
+    return type
+  }
+
+  function getChangeEvent (renderOpts: VxeGlobalRendererHandles.RenderOptions) {
+    return 'change'
+  }
+
+  function getItemProps (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: FormItemContentRenderParams, value: any, defaultProps?: { [prop: string]: any }) {
+    return XEUtils.assign({}, defaultProps, renderOpts.props, { [getModelProp(renderOpts)]: value })
+  }
+
+  function formatText (cellValue: any) {
+    return '' + (isEmptyValue(cellValue) ? '' : cellValue)
+  }
+
+  function getOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderParams, inputFunc?: Function, changeFunc?: Function) {
+    const { events } = renderOpts
+    const modelEvent = getModelEvent(renderOpts)
+    const changeEvent = getChangeEvent(renderOpts)
+    const isSameEvent = changeEvent === modelEvent
+    const ons: { [type: string]: Function } = {}
+    XEUtils.objectEach(events, (func: Function, key: string) => {
+      ons[getOnName(key)] = function (...args: any[]) {
+        func(params, ...args)
+      }
+    })
+    if (inputFunc) {
+      ons[getOnName(modelEvent)] = function (targetEvnt: any) {
+        inputFunc(targetEvnt)
+        if (events && events[modelEvent]) {
+          events[modelEvent](params, targetEvnt)
+        }
+        if (isSameEvent && changeFunc) {
+          changeFunc(targetEvnt)
+        }
+      }
+    }
+    if (!isSameEvent && changeFunc) {
+      ons[getOnName(changeEvent)] = function (...args: any[]) {
+        changeFunc(...args)
+        if (events && events[changeEvent]) {
+          events[changeEvent](params, ...args)
+        }
+      }
+    }
+    return ons
+  }
+
+  function getItemOns (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: FormItemContentRenderParams) {
+    const { $form, data, field } = params
+    return getOns(renderOpts, params, (value: any) => {
+    // 处理 model 值双向绑定
+      XEUtils.set(data, field, value)
+    }, () => {
+    // 处理 change 事件相关逻辑
+      $form.updateStatus(params)
+    })
+  }
+
+  function cellText (cellValue: any): string[] {
+    return [formatText(cellValue)]
+  }
+
+  function createFormItemRender (defaultProps?: { [key: string]: any }) {
+    return function (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: FormItemContentRenderParams) {
+      const { data, field } = params
+      const { name } = renderOpts
+      const { attrs } = renderOpts
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(resolveComponent(name), {
+          ...attrs,
+          ...getItemProps(renderOpts, params, itemValue, defaultProps),
+          ...getItemOns(renderOpts, params)
+        })
+      ]
+    }
+  }
+
+  function defaultButtonItemRender (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: FormItemContentRenderParams) {
+    const { attrs } = renderOpts
+    const props = getItemProps(renderOpts, params, null)
+    return [
+      h(resolveComponent('a-button') as ComponentOptions, {
+        ...attrs,
+        ...props,
+        ...getItemOns(renderOpts, params)
+      }, {
+        default: () => cellText(renderOpts.content || props.content)
+      })
+    ]
+  }
+
+  function defaultButtonsItemRender (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions, params: FormItemContentRenderParams) {
+    const { children } = renderOpts
+    if (children) {
+      return children.map((childRenderOpts: VxeGlobalRendererHandles.RenderItemContentOptions) => defaultButtonItemRender(childRenderOpts, params)[0])
+    }
+    return []
+  }
+
+  function createFormItemRadioAndCheckboxRender () {
+    return function (renderOpts: VxeGlobalRendererHandles.RenderItemContentOptions & { name: string }, params: FormItemContentRenderParams) {
+      const { name, options = [], optionProps = {} } = renderOpts
+      const { data, field } = params
+      const { attrs } = renderOpts
+      const labelProp = optionProps.label || 'label'
+      const valueProp = optionProps.value || 'value'
+      const itemValue = XEUtils.get(data, field)
+      return [
+        h(resolveComponent(`${name}Group`) as ComponentOptions, {
+          ...attrs,
+          ...getItemProps(renderOpts, params, itemValue),
+          ...getItemOns(renderOpts, params)
+        }, {
+          default: () => {
+            return options.map((option, oIndex) => {
+              return h(resolveComponent(name) as ComponentOptions, {
+                key: oIndex,
+                value: option[valueProp],
+                disabled: option.disabled
+              }, {
+                default: () => cellText(option[labelProp])
+              })
+            })
+          }
+        })
+      ]
+    }
+  }
+
+  VxeUI.renderer.mixin({
+    AAutoComplete: {
+      renderFormItemContent: createFormItemRender()
+    },
+    AInput: {
+      renderFormItemContent: createFormItemRender()
+    },
+    AInputNumber: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ASelect: {
+      renderFormItemContent (renderOpts, params) {
+        const { options = [], optionGroups } = 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) {
+          return [
+            h(resolveComponent('a-select') as ComponentOptions, {
+              ...attrs,
+              ...props,
+              options: optionGroups,
+              ...ons
+            })
+          ]
+        }
+        return [
+          h(resolveComponent('a-select') as ComponentOptions, {
+            ...attrs,
+            ...props,
+            options: props.options || options,
+            ...ons
+          })
+        ]
+      }
+    },
+    ACascader: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ADatePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    AMonthPicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ARangePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    AWeekPicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ATimePicker: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ATreeSelect: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ARate: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ASwitch: {
+      renderFormItemContent: createFormItemRender()
+    },
+    ARadio: {
+      renderFormItemContent: createFormItemRadioAndCheckboxRender()
+    },
+    ACheckbox: {
+      renderFormItemContent: createFormItemRadioAndCheckboxRender()
+    },
+    AButton: {
+      renderFormItemContent: defaultButtonItemRender
+    },
+    AButtons: {
+      renderFormItemContent: defaultButtonsItemRender
+    }
+  })
+}

package/src/form-design/checkbox-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 WidgetACheckboxFormObjVO {
+  options: WidgetDataSourceOptionObjVO[]
+}
+
+export function createWidgetACheckbox (VxeUI: VxeUIExport) {
+  const getWidgetACheckboxConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetACheckboxFormObjVO> => {
+    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 as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetACheckboxFormObjVO>>,
+        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 WidgetACheckboxViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetACheckboxFormObjVO>>,
+        default: () => ({})
+      }
+    },
+    emits: [],
+    setup (props) {
+      const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('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.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-checkbox-group') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              options: checkboxOptions.value,
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetACheckboxConfig,
+    WidgetACheckboxFormComponent,
+    WidgetACheckboxViewComponent
+  }
+}

package/src/form-design/date-picker-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 WidgetADatePickerFormObjVO {
+  placeholder: string
+}
+
+export function createWidgetADatePicker (VxeUI: VxeUIExport) {
+  const getWidgetADatePickerConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetADatePickerFormObjVO> => {
+    return {
+      title: '日期',
+      icon: 'vxe-icon-input',
+      options: {
+        placeholder: ''
+      }
+    }
+  }
+
+  const WidgetADatePickerFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetADatePickerFormObjVO>>,
+        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: 'VxeInput' }
+              }),
+              h(VxeUIFormItemComponent, {
+                title: VxeUI.getI18n('vxe.formDesign.widgetProp.required')
+              }, {
+                default () {
+                  return h(VxeUISwitchComponent, {
+                    modelValue: widget.required,
+                    'onUpdate:modelValue' (val: any) {
+                      widget.required = val
+                    }
+                  })
+                }
+              })
+            ]
+          }
+        })
+      }
+    }
+  })
+
+  const WidgetADatePickerViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetADatePickerFormObjVO>>,
+        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-date-picker') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              placeholder: options.placeholder,
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetADatePickerConfig,
+    WidgetADatePickerFormComponent,
+    WidgetADatePickerViewComponent
+  }
+}

package/src/form-design/index.ts

@@ -0,0 +1,101 @@
+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'
+
+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({
+    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: 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 })
+      }
+    }
+  })
+}