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

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/table/index.ts

@@ -132,12 +132,28 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     }
   }
 
-  function formatDatePicker (defaultFormat: string) {
+  function formatDatePicker (defaultFormat?: string) {
     return function (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams) {
       return getCellLabelVNs(renderOpts, params, getDatePickerCellValue(renderOpts, params, defaultFormat))
     }
   }
 
+  function formatTimePicker (defaultFormat?: string) {
+    return function (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams) {
+      const { props = {} } = renderOpts
+      const { row, column } = params
+      let cellValue = XEUtils.get(row, column.field)
+      try {
+        if (cellValue) {
+          if (!XEUtils.isString(cellValue)) {
+            cellValue = cellValue.format ? cellValue.format(props.format || props.valueFormat || defaultFormat) : XEUtils.toDateString(cellValue, dateFormatToVxeFormat(props.format || props.valueFormat || defaultFormat))
+          }
+        }
+      } catch (e) {}
+      return getCellLabelVNs(renderOpts, params, cellValue)
+    }
+  }
+
   function getSelectCellValue (renderOpts: VxeColumnPropTypes.EditRender, params: VxeGlobalRendererHandles.RenderCellParams) {
     const { options = [], optionGroups, props = {}, optionProps = {}, optionGroupProps = {} } = renderOpts
     const { row, column } = params
@@ -201,12 +217,30 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     return cellValue
   }
 
-  function getDatePickerCellValue (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams, defaultFormat: string) {
+  function getDatePickerCellValue (renderOpts: VxeGlobalRendererHandles.RenderOptions, params: VxeGlobalRendererHandles.RenderCellParams | VxeGlobalRendererHandles.ExportMethodParams, defaultFormat?: string) {
     const { props = {} } = renderOpts
     const { row, column } = params
     let cellValue = XEUtils.get(row, column.field)
     try {
       if (cellValue) {
+        if (!defaultFormat) {
+          if (renderOpts.name === 'ADatePicker') {
+            switch (props.picker) {
+              case 'week':
+                defaultFormat = 'YYYY-WW周'
+                break
+              case 'month':
+                defaultFormat = 'YYYY-MM'
+                break
+              case 'year':
+                defaultFormat = 'YYYY'
+                break
+              default:
+                defaultFormat = props.showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'
+                break
+            }
+          }
+        }
         cellValue = cellValue.format ? cellValue.format(props.format || defaultFormat) : XEUtils.toDateString(cellValue, dateFormatToVxeFormat(props.format || defaultFormat))
       }
     } catch (e) {}
@@ -302,7 +336,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     return [formatText(cellValue)]
   }
 
-  function createDatePickerExportMethod (defaultFormat: string) {
+  function createDatePickerExportMethod (defaultFormat?: string) {
     return function (params: VxeGlobalRendererHandles.ExportMethodParams) {
       const { row, column, options } = params
       return options && options.original ? XEUtils.get(row, column.field) : getDatePickerCellValue(column.editRender || column.cellRender, params, defaultFormat)
@@ -318,21 +352,21 @@ export function defineTableRender (VxeUI: VxeUIExport) {
 
   VxeUI.renderer.mixin({
     AAutoComplete: {
-      tableAutoFocus: 'input.ant-input',
+      tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
       renderTableFilter: createFilterRender(),
       tableFilterDefaultMethod: defaultExactFilterMethod
     },
     AInput: {
-      tableAutoFocus: 'input.ant-input',
+      tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
       renderTableFilter: createFilterRender(),
       tableFilterDefaultMethod: defaultFuzzyFilterMethod
     },
     AInputNumber: {
-      tableAutoFocus: 'input.ant-input-number-input',
+      tableAutoFocus: 'input',
       renderTableDefault: createEditRender(),
       renderTableEdit: createEditRender(),
       renderTableFilter: createFilterRender(),
@@ -433,8 +467,8 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     },
     ADatePicker: {
       renderTableEdit: createEditRender(),
-      renderTableCell: formatDatePicker('YYYY-MM-DD'),
-      tableExportMethod: createDatePickerExportMethod('YYYY-MM-DD')
+      renderTableCell: formatDatePicker(),
+      tableExportMethod: createDatePickerExportMethod()
     },
     AMonthPicker: {
       renderTableEdit: createEditRender(),
@@ -455,7 +489,7 @@ export function defineTableRender (VxeUI: VxeUIExport) {
     },
     ATimePicker: {
       renderTableEdit: createEditRender(),
-      renderTableCell: formatDatePicker('HH:mm:ss'),
+      renderTableCell: formatTimePicker('HH:mm:ss'),
       tableExportMethod: createDatePickerExportMethod('HH:mm:ss')
     },
     ATreeSelect: {