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

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

@@ -0,0 +1,140 @@
+import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
+
+interface WidgetASwitchFormObjVO {
+}
+
+export function createWidgetASwitch (VxeUI: VxeUIExport) {
+  const getWidgetASwitchConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetASwitchFormObjVO> => {
+    return {
+      title: '是/否',
+      icon: 'vxe-icon-switch',
+      options: {
+      }
+    }
+  }
+
+  const WidgetASwitchFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetASwitchFormObjVO>>,
+        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 WidgetASwitchViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetASwitchFormObjVO>>,
+        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
+
+        return h(VxeUIFormItemComponent, {
+          class: ['vxe-form-design--widget-render-form-item'],
+          field: widget.field,
+          title: widget.title
+        }, {
+          default () {
+            return h(resolveComponent('a-switch') as ComponentOptions, {
+              checked: $formView ? $formView.getItemValue(widget) : null,
+              onChange: changeEvent,
+              'onUpdate:checked' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetASwitchConfig,
+    WidgetASwitchFormComponent,
+    WidgetASwitchViewComponent
+  }
+}

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

@@ -0,0 +1,148 @@
+import { defineComponent, h, PropType, resolveComponent, ComponentOptions } from 'vue'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormComponent, VxeFormItemComponent, VxeSwitchComponent, VxeInputComponent } from 'vxe-pc-ui'
+
+interface WidgetATextareaFormObjVO {
+  placeholder: string
+}
+
+export function createWidgetATextarea (VxeUI: VxeUIExport) {
+  const getWidgetATextareaConfig = (params: VxeGlobalRendererHandles.CreateFormDesignWidgetConfigParams): VxeGlobalRendererHandles.CreateFormDesignWidgetConfigObj<WidgetATextareaFormObjVO> => {
+    return {
+      title: '文本域',
+      icon: 'vxe-icon-textarea',
+      options: {
+        placeholder: '请输入'
+      }
+    }
+  }
+
+  const WidgetATextareaFormComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<WidgetATextareaFormObjVO>>,
+        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 WidgetATextareaViewComponent = defineComponent({
+    props: {
+      renderOpts: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions>,
+        default: () => ({})
+      },
+      renderParams: {
+        type: Object as PropType<VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams<WidgetATextareaFormObjVO>>,
+        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-textarea') as ComponentOptions, {
+              value: $formView ? $formView.getItemValue(widget) : null,
+              placeholder: options.placeholder,
+              autoSize: {
+                minRows: 2,
+                maxRows: 4
+              },
+              onChange: changeEvent,
+              'onUpdate:value' (val: any) {
+                if ($formView) {
+                  $formView.setItemValue(widget, val)
+                }
+              }
+            })
+          }
+        })
+      }
+    }
+  })
+
+  return {
+    getWidgetATextareaConfig,
+    WidgetATextareaFormComponent,
+    WidgetATextareaViewComponent
+  }
+}

package/src/form-design/use.ts

@@ -0,0 +1,255 @@
+import { VNode, h, onMounted, ref, watch } from 'vue'
+
+import type { VxeUIExport, VxeGlobalRendererHandles, VxeFormItemComponent, VxeButtonComponent, VxeTextareaComponent, VxeTipComponent } from 'vxe-pc-ui'
+
+export interface WidgetDataSourceOptionSubObjVO {
+  value: string,
+}
+
+export interface WidgetDataSourceOptionObjVO {
+  value: string,
+  options?: WidgetDataSourceOptionSubObjVO[]
+}
+
+export function useWidgetPropDataSource (VxeUI: VxeUIExport, props: {
+  readonly renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewOptions;
+  readonly renderParams: VxeGlobalRendererHandles.RenderFormDesignWidgetFormViewParams<{
+    options: WidgetDataSourceOptionObjVO[]
+  }>;
+}, isSubOption: boolean) {
+  const VxeUIFormItemComponent = VxeUI.getComponent<VxeFormItemComponent>('VxeFormItem')
+  const VxeUIButtonComponent = VxeUI.getComponent<VxeButtonComponent>('VxeButton')
+  const VxeUITextareaComponent = VxeUI.getComponent<VxeTextareaComponent>('VxeTextarea')
+  const VxeUITipComponent = VxeUI.getComponent<VxeTipComponent>('VxeTip')
+
+  const optionsContent = ref('')
+  const expandIndexList = ref<number[]>([])
+
+  const addOptionEvent = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+    const options = widget.options.options || []
+    options.push({
+      value: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.defValue', [options.length + 1])
+    })
+    widget.options.options = [...options]
+  }
+
+  const subRE = /^(\s|\t)+/
+
+  const hasSubOption = (str: string) => {
+    return subRE.test(str)
+  }
+
+  const expandAllOption = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+    const options = widget.options.options || []
+    const indexList: number[] = []
+    options.forEach((group, gIndex) => {
+      const { options } = group
+      if (options && options.length) {
+        indexList.push(gIndex)
+      }
+    })
+    expandIndexList.value = indexList
+  }
+
+  const toggleExpandOption = (item: WidgetDataSourceOptionSubObjVO, gIndex: number) => {
+    if (expandIndexList.value.includes(gIndex)) {
+      expandIndexList.value = expandIndexList.value.filter(num => num !== gIndex)
+    } else {
+      expandIndexList.value.push(gIndex)
+    }
+  }
+
+  const confirmBatchAddOptionEvent = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+    const optList: WidgetDataSourceOptionSubObjVO[] = []
+    const rowList = optionsContent.value.split('\n')
+    let prevGroup: Required<WidgetDataSourceOptionObjVO> | null = null
+    if (isSubOption) {
+      rowList.forEach((str, index) => {
+        const nextStr = rowList[index + 1]
+        const value = str.trim()
+        if (!value) {
+          return
+        }
+        const item: WidgetDataSourceOptionSubObjVO = {
+          value
+        }
+        if (prevGroup) {
+          if (hasSubOption(str)) {
+            prevGroup.options.push(item)
+            return
+          }
+          prevGroup = null
+          optList.push(item)
+        } else {
+          optList.push(item)
+        }
+        if (nextStr) {
+          if (hasSubOption(nextStr)) {
+            prevGroup = Object.assign(item, { options: [] })
+          }
+        }
+      })
+    } else {
+      rowList.forEach((str) => {
+        optList.push({
+          value: str.trim()
+        })
+      })
+    }
+    widget.options.options = optList
+    expandAllOption()
+  }
+
+  const openPopupEditEvent = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+
+    const contList: string[] = []
+    widget.options.options?.forEach(group => {
+      contList.push(group.value)
+      group.options?.forEach(item => {
+        contList.push(`\t${item.value}`)
+      })
+    })
+
+    optionsContent.value = contList.join('\n')
+
+    VxeUI.modal.open({
+      title: `${widget.title} - ${VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption')}`,
+      width: 500,
+      height: '50vh ',
+      resize: true,
+      showFooter: true,
+      showCancelButton: true,
+      showConfirmButton: true,
+      confirmButtonText: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.buildOption'),
+      onConfirm: confirmBatchAddOptionEvent,
+      slots: {
+        default () {
+          return h('div', {
+            class: 'vxe-form-design--widget-form-item-data-source-popup'
+          }, [
+            h(VxeUITipComponent, {
+              status: 'primary',
+              title: '',
+              content: VxeUI.getI18n(`vxe.formDesign.widgetProp.dataSource.${isSubOption ? 'batchEditSubTip' : 'batchEditTip'}`)
+            }),
+            h(VxeUITextareaComponent, {
+              resize: 'none',
+              modelValue: optionsContent.value,
+              'onUpdate:modelValue' (val: any) {
+                optionsContent.value = val
+              }
+            })
+          ])
+        }
+      }
+    })
+  }
+
+  const renderOption = (item: WidgetDataSourceOptionSubObjVO, hasFirstLevel: boolean, isExpand: boolean, gIndex: number, hasSub: boolean, isFirst: boolean, isLast: boolean) => {
+    return h('div', {
+      class: ['vxe-form-design--widget-form-item-data-source-option', {
+        'is--first': isFirst,
+        'is--last': isLast
+      }]
+    }, [
+      h('div', {
+        class: 'vxe-form-design--widget-expand-btn'
+      }, hasFirstLevel && hasSub
+        ? [
+            h('i', {
+              class: isExpand ? VxeUI.getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_CLOSE : VxeUI.getIcon().FORM_DESIGN_WIDGET_OPTION_EXPAND_OPEN,
+              onClick () {
+                toggleExpandOption(item, gIndex)
+              }
+            })
+          ]
+        : []),
+      h('input', {
+        class: 'vxe-default-input',
+        value: item.value,
+        onInput (evnt: InputEvent & { target: HTMLInputElement }) {
+          item.value = evnt.target.value
+        }
+      }),
+      h(VxeUIButtonComponent, {
+        status: 'danger',
+        mode: 'text',
+        icon: VxeUI.getIcon().FORM_DESIGN_WIDGET_DELETE
+      })
+    ])
+  }
+
+  const renderOptions = () => {
+    const { renderParams } = props
+    const { widget } = renderParams
+    const { options } = widget
+    const groups = options.options
+    const optVNs: VNode[] = []
+    if (groups) {
+      groups.forEach((group, gIndex) => {
+        const { options } = group
+        const isExpand = expandIndexList.value.includes(gIndex)
+        if (options && options.length) {
+          optVNs.push(renderOption(group, true, isExpand, gIndex, true, gIndex === 0, gIndex === groups.length - 1))
+          if (isExpand) {
+            optVNs.push(
+              h('div', {
+                class: 'vxe-form-design--widget-form-item-data-source-sub-option'
+              }, options.map(item => renderOption(item, false, isExpand, 0, false, false, false)))
+            )
+          }
+        } else {
+          optVNs.push(renderOption(group, true, isExpand, gIndex, false, gIndex === 0, gIndex === groups.length - 1))
+        }
+      })
+    }
+    return optVNs
+  }
+
+  watch(() => props.renderParams.widget, () => {
+    expandAllOption()
+  })
+
+  onMounted(() => {
+    expandAllOption()
+  })
+
+  return {
+    renderDataSourceFormItem () {
+      return h(VxeUIFormItemComponent, {
+        title: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.name'),
+        field: 'options'
+      }, {
+        default () {
+          return [
+            h('div', {}, [
+              h(VxeUIButtonComponent, {
+                status: 'primary',
+                mode: 'text',
+                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.addOption'),
+                onClick: addOptionEvent
+              }),
+              h(VxeUIButtonComponent, {
+                status: 'primary',
+                mode: 'text',
+                content: VxeUI.getI18n('vxe.formDesign.widgetProp.dataSource.batchEditOption'),
+                onClick: openPopupEditEvent
+              })
+            ]),
+            h('div', {
+              class: 'vxe-form-design--widget-form-item-data-source'
+            }, renderOptions())
+          ]
+        }
+      })
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,71 @@
+import { defineTableRender } from './table'
+import { defineFormRender } from './form'
+import { defineFormDesignRender } from './form-design'
+
+import type { VxeUIPluginObject, VxeGlobalInterceptorHandles } from 'vxe-pc-ui'
+
+/**
+ * 检查触发源是否属于目标节点
+ */
+function getEventTargetNode (evnt: any, container: HTMLElement, className: string) {
+  let targetElem
+  let target = evnt.target
+  while (target && target.nodeType && target !== document) {
+    if (className && target.className && target.className.split && target.className.split(' ').indexOf(className) > -1) {
+      targetElem = target
+    } else if (target === container) {
+      return { flag: className ? !!targetElem : true, container, targetElem: targetElem }
+    }
+    target = target.parentNode
+  }
+  return { flag: false }
+}
+
+/**
+ * 事件兼容性处理
+ */
+function handleClearEvent (params: VxeGlobalInterceptorHandles.InterceptorClearFilterParams | VxeGlobalInterceptorHandles.InterceptorClearEditParams | VxeGlobalInterceptorHandles.InterceptorClearAreasParams) {
+  const { $event } = params
+  const bodyElem = document.body
+  if (
+    // 下拉框
+    getEventTargetNode($event, bodyElem, 'ant-select-dropdown').flag ||
+    // 级联
+    getEventTargetNode($event, bodyElem, 'ant-cascader-menus').flag ||
+    // 日期
+    getEventTargetNode($event, bodyElem, 'ant-picker-dropdown').flag ||
+    getEventTargetNode($event, bodyElem, 'ant-calendar-picker-container').flag ||
+    // 时间选择
+    getEventTargetNode($event, bodyElem, 'ant-time-picker-panel').flag
+  ) {
+    return false
+  }
+}
+
+export const VxeUIPluginRenderAntd: VxeUIPluginObject = {
+  install (VxeUI, options?: {
+    Antd?: any
+  }) {
+    // 检查版本
+    if (!/^(4)\./.test(VxeUI.uiVersion)) {
+      console.error('[plugin-render-antd 4.x] Version 4.x is required')
+    }
+
+    defineTableRender(VxeUI)
+    defineFormRender(VxeUI)
+    defineFormDesignRender(VxeUI)
+
+    VxeUI.interceptor.add('event.clearFilter', handleClearEvent)
+    VxeUI.interceptor.add('event.clearEdit', handleClearEvent)
+    VxeUI.interceptor.add('event.clearAreas', handleClearEvent)
+
+    // 兼容老版本
+    VxeUI.interceptor.add('event.clearActived', handleClearEvent)
+  }
+}
+
+if (typeof window !== 'undefined' && window.VxeUI && window.VxeUI.use) {
+  window.VxeUI.use(VxeUIPluginRenderAntd)
+}
+
+export default VxeUIPluginRenderAntd