releases 4.0.24

x-extends · Jun 20, 2024 · d9c5fb2 · d9c5fb2
1 parent 68165e9
commit d9c5fb2
Show file tree

Hide file tree

Showing 13 changed files with 114 additions and 31 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.22",
+  "version": "4.0.24",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",
@@ -25,7 +25,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "@vxe-ui/core": "^1.0.7"
+    "@vxe-ui/core": "^1.0.8"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",
@@ -64,7 +64,7 @@
     "vue": "3.4.27",
     "vue-i18n": "^9.13.1",
     "vue-router": "^4.3.2",
-    "vxe-table": "^4.7.16"
+    "vxe-table": "^4.7.25"
   },
   "vetur": {
     "tags": "helper/vetur/tags.json",

diff --git a/packages/date-picker/src/date-picker.ts b/packages/date-picker/src/date-picker.ts
@@ -104,7 +104,7 @@ export default defineComponent({
     disabled: Boolean as PropType<VxeDatePickerPropTypes.Disabled>,
     placeholder: {
       type: String as PropType<VxeDatePickerPropTypes.Placeholder>,
-      default: () => XEUtils.eqNull(getConfig().input.placeholder) ? getI18n('vxe.base.pleaseDatePicker') : getConfig().input.placeholder
+      default: () => XEUtils.eqNull(getConfig().input.placeholder) ? getI18n('vxe.base.pleaseSelect') : getConfig().input.placeholder
     },
     maxlength: [String, Number] as PropType<VxeDatePickerPropTypes.Maxlength>,
     autocomplete: { type: String as PropType<VxeDatePickerPropTypes.Autocomplete>, default: 'off' },

diff --git a/packages/form-design/src/form-view.ts b/packages/form-design/src/form-view.ts
@@ -89,27 +89,39 @@ export default defineComponent({
       return nextTick()
     }
 
+    const getWidgetDefaultValue = (widget: VxeFormDesignDefines.WidgetObjItem) => {
+      switch (widget.name) {
+        case 'subtable':
+          return []
+      }
+      return null
+    }
+
+    const getWidgetDefaultRule = () => {
+      return [
+        { required: true, content: '该填写该字段！' }
+      ]
+    }
+
     const updateWidgetInfo = () => {
-      const formData: VxeFormPropTypes.Data = Object.assign({}, props.modelValue)
+      const formData: VxeFormPropTypes.Data = {}
       const formRules: VxeFormPropTypes.Rules = {}
       XEUtils.eachTree(reactData.widgetObjList, widget => {
         const { name, field, required } = widget
         const compConf = renderer.get(name) || {}
         const createWidgetViewRules = compConf.createFormDesignWidgetRules
-        formData[field] = null
+        formData[field] = getWidgetDefaultValue(widget)
         if (createWidgetViewRules) {
           const rules = createWidgetViewRules({ widget })
           if (rules && rules.length) {
             formRules[field] = rules
           }
         } else if (required) {
-          formRules[field] = [
-            { required: true, content: '该填写该字段！' }
-          ]
+          formRules[field] = getWidgetDefaultRule()
         }
       }, { children: 'children' })
       reactData.formRules = formRules
-      emit('update:modelValue', formData)
+      emit('update:modelValue', Object.assign(formData, props.modelValue))
     }
 
     const updateItemStatus = (widget: VxeFormDesignDefines.WidgetObjItem, value: any) => {
@@ -209,7 +221,7 @@ export default defineComponent({
                 const renderWidgetDesignPreview = compConf.renderFormDesignWidgetPreview
                 const renderWidgetDesignMobilePreview = compConf.renderFormDesignWidgetMobilePreview
                 const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget
-                const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: false, isViewMode: true }
+                const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: false, isViewMode: true, $formDesign: null, $formView: $xeFormView }
                 return h(VxeFormGatherComponent, {
                   key: widget.id
                 }, {

diff --git a/packages/form-design/src/layout-preview.ts b/packages/form-design/src/layout-preview.ts
@@ -65,7 +65,7 @@ export default defineComponent({
                         const compConf = renderer.get(name) || {}
                         const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView
                         const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget
-                        const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false }
+                        const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null }
                         return renderWidgetDesignView ? getSlotVNs(renderWidgetDesignView(renderOpts, params)) : []
                       }
                     })

diff --git a/packages/form-design/src/layout-setting.ts b/packages/form-design/src/layout-setting.ts
@@ -30,7 +30,7 @@ export default defineComponent({
         if (renderWidgetFormView) {
           return h('div', {
             class: 'vxe-form-design--custom-widget-form-view'
-          }, getSlotVNs(renderWidgetFormView(activeWidget, { widget: activeWidget })))
+          }, getSlotVNs(renderWidgetFormView(activeWidget, { widget: activeWidget, $formDesign: $xeFormDesign })))
         }
       }
       return createCommentVNode()

diff --git a/packages/form-design/src/layout-widget.ts b/packages/form-design/src/layout-widget.ts
@@ -68,7 +68,7 @@ export default defineComponent({
           const { name } = widget
           const configTitle = getWidgetConfigTitle(name, $xeFormDesign)
           const compConf = renderer.get(name) || {}
-          const renderFormDesignWidgetItem = compConf.renderFormDesignWidgetItem
+          const renderWidgetItem = compConf.renderFormDesignWidgetItem
           widgetVNs.push(
             h('div', {
               key: index,
@@ -83,8 +83,8 @@ export default defineComponent({
               onDblclick (evnt: KeyboardEvent) {
                 addNewWidget(evnt, name)
               }
-            }, renderFormDesignWidgetItem
-              ? getSlotVNs(renderFormDesignWidgetItem({}, {}))
+            }, renderWidgetItem
+              ? getSlotVNs(renderWidgetItem({}, { $formDesign: $xeFormDesign }))
               : [
                   h('i', {
                     class: ['vxe-form-design--widget-item-icon', getWidgetConfigIcon(name)]

diff --git a/packages/form-design/widget-row/row-view.ts b/packages/form-design/widget-row/row-view.ts
@@ -75,7 +75,7 @@ const ViewColItemComponent = defineComponent({
           const compConf = renderer.get(name) || {}
           const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView
           const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget || { name }
-          const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false }
+          const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null }
           const isActive = activeWidget && widget && activeWidget.id === widget.id
 
           return h('div', {
@@ -191,6 +191,8 @@ export const WidgetRowViewComponent = defineComponent({
   },
   emits: [],
   setup (props) {
+    const $xeFormDesign = inject<(VxeFormDesignConstructor & VxeFormDesignPrivateMethods) | null>('$xeFormDesign', null)
+
     const computedColObjList = computed(() => {
       const { renderParams } = props
       const { widget } = renderParams
@@ -222,7 +224,7 @@ export const WidgetRowViewComponent = defineComponent({
                   const compConf = renderer.get(name) || {}
                   const renderWidgetDesignView = compConf.renderFormDesignWidgetView
                   const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = subWidget
-                  const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget: subWidget, isEditMode: false, isViewMode: true }
+                  const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget: subWidget, isEditMode: false, isViewMode: true, $formDesign: $xeFormDesign, $formView: null }
                   if (renderWidgetDesignView) {
                     return getSlotVNs(renderWidgetDesignView(renderOpts, params))
                   }

diff --git a/packages/form-design/widget-subtable/subtable-view.ts b/packages/form-design/widget-subtable/subtable-view.ts
@@ -1,14 +1,15 @@
-import { PropType, defineComponent, inject, h, createCommentVNode, TransitionGroup } from 'vue'
+import { PropType, defineComponent, inject, h, createCommentVNode, TransitionGroup, computed } from 'vue'
 import { VxeUI, renderer, getIcon, getI18n } from '@vxe-ui/core'
 import XEUtils from 'xe-utils'
 import { hasFormDesignLayoutType } from '../src/util'
 import { WidgetSubtableFormObjVO } from './subtable-data'
 import { getSlotVNs } from '../../ui/src/vn'
+import { useKebabCaseName } from '../render/hooks'
 import VxeFormItemComponent from '../../form/src/form-item'
 import VxeButtonComponent from '../../button/src/button'
 import VxeCheckboxComponent from '../../checkbox/src/checkbox'
 
-import type { VxeGlobalRendererHandles, VxeFormDesignConstructor, VxeFormDesignDefines, VxeFormDesignPrivateMethods } from '../../../types'
+import type { VxeGlobalRendererHandles, VxeFormDesignConstructor, VxeFormDesignDefines, VxeFormDesignPrivateMethods, VxeFormViewConstructor, VxeFormViewPrivateMethods, VxeGridComponent, VxeGridPropTypes } from '../../../types'
 
 const ViewSubItemComponent = defineComponent({
   props: {
@@ -109,7 +110,7 @@ const ViewSubItemComponent = defineComponent({
       const compConf = renderer.get(name) || {}
       const renderWidgetDesignView = compConf.renderFormDesignWidgetEdit || compConf.renderFormDesignWidgetView
       const renderOpts: VxeGlobalRendererHandles.RenderFormDesignWidgetViewOptions = widget || { name }
-      const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false }
+      const params: VxeGlobalRendererHandles.RenderFormDesignWidgetViewParams = { widget, isEditMode: true, isViewMode: false, $formDesign: $xeFormDesign, $formView: null }
       const isActive = activeWidget && widget && activeWidget.id === widget.id
 
       return h('div', {
@@ -305,9 +306,64 @@ export const WidgetSubtableViewComponent = defineComponent({
     }
   },
   emits: [],
-  setup () {
+  setup (props) {
+    const VxeTableGridComponent = VxeUI.getComponent<VxeGridComponent>('VxeGrid')
+
+    const $xeFormView = inject<(VxeFormViewConstructor & VxeFormViewPrivateMethods) | null>('$xeFormView', null)
+
+    const computeKebabCaseName = useKebabCaseName(props)
+
+    const computeSubtableColumns = computed(() => {
+      const { renderParams } = props
+      const { widget } = renderParams
+      const { children, options } = widget
+      const columns: VxeGridPropTypes.Columns = []
+      if (options.showCheckbox) {
+        columns.push({
+          type: 'checkbox',
+          width: 60
+        })
+      }
+      columns.push({
+        type: 'seq',
+        width: 60
+      })
+      if (children) {
+        children.forEach(childWidget => {
+          columns.push({
+            field: childWidget.field,
+            title: childWidget.title
+          })
+        })
+      }
+      return columns
+    })
+
     return () => {
-      return h('div', 'eeee')
+      const { renderParams } = props
+      const { widget } = renderParams
+      const kebabCaseName = computeKebabCaseName.value
+      const subtableColumns = computeSubtableColumns.value
+
+      return h(VxeFormItemComponent, {
+        class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
+        title: widget.title,
+        field: widget.field,
+        span: 24
+      }, {
+        default () {
+          return VxeTableGridComponent
+            ? h(VxeTableGridComponent, {
+              border: true,
+              columnConfig: {
+                resizable: true
+              },
+              data: $xeFormView ? $xeFormView.getItemValue(widget) : null,
+              columns: subtableColumns
+            })
+            : createCommentVNode()
+        }
+      })
     }
   }
 })
diff --git a/styles/components/widget-item/prop-list.scss b/styles/components/widget-item/prop-list.scss
@@ -15,7 +15,7 @@
     & > span:first-child,
     .vxe-form-design--widget-form-item-prop-width,
     .vxe-form-design--widget-form-item-prop-unit { 
-      display: inline-block;
+      display: inline-flex;
       vertical-align: middle;
     }
     .vxe-form-design--widget-form-item-prop-width {

diff --git a/types/components/form-view.d.ts b/types/components/form-view.d.ts
@@ -1,6 +1,6 @@
 import { RenderFunction, SetupContext, Ref, ComponentPublicInstance, DefineComponent } from 'vue'
 import { defineVxeComponent, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf } from '@vxe-ui/core'
-import { VxeFormDesignDefines, VxeFormDesignPropTypes } from './form-design'
+import { VxeFormDesignDefines } from './form-design'
 import { VxeFormProps, VxeFormPropTypes } from './form'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */

diff --git a/types/components/password-input.d.ts b/types/components/password-input.d.ts
@@ -46,8 +46,8 @@ export type VxePasswordInputProps = {
   disabled?: VxePasswordInputPropTypes.Disabled
   placeholder?: VxePasswordInputPropTypes.Placeholder
   autocomplete?: VxePasswordInputPropTypes.Autocomplete
-  prefixIcon?: VxeInputPropTypes.PrefixIcon
-  suffixIcon?: VxeInputPropTypes.SuffixIcon
+  prefixIcon?: VxePasswordInputPropTypes.PrefixIcon
+  suffixIcon?: VxePasswordInputPropTypes.SuffixIcon
 }
 
 export interface PasswordInputPrivateComputed {

diff --git a/types/components/table.d.ts b/types/components/table.d.ts
@@ -2523,6 +2523,11 @@ export interface TableMethods<DT = any> {
    */
   getColumns(): VxeTableDefines.ColumnInfo<DT>[]
   getColumns(columnIndex?: number): VxeTableDefines.ColumnInfo<DT>
+  /**
+   * 根据列获取列的唯一主键
+   * @param fieldOrColumn
+   */
+  getColid(fieldOrColumn: VxeColumnPropTypes.Field | VxeTableDefines.ColumnInfo<any> | null): string | null
   /**
    * 根据列的唯一主键获取列
    * @param colid 列主键
@@ -2532,7 +2537,7 @@ export interface TableMethods<DT = any> {
    * 根据列的字段名获取列
    * @param field 字段名
    */
-  getColumnByField(field: string | null): VxeTableDefines.ColumnInfo<DT> | null
+  getColumnByField(field: VxeColumnPropTypes.Field | null): VxeTableDefines.ColumnInfo<DT> | null
   /**
    * 获取当前表格的列
    * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列

diff --git a/types/ui/renderer.d.ts b/types/ui/renderer.d.ts
@@ -6,7 +6,7 @@ import { VxeColumnPropTypes } from '../components/column'
 import { VxeToolbarPropTypes } from '../components/toolbar'
 import { VxeFormConstructor, VxeFormDefines, VxeFormProps } from '../components/form'
 import { VxeFormDesignDefines, VxeFormDesignConstructor } from '../components/form-design'
-import { VxeFormViewDefines } from '../components/form-view'
+import { VxeFormViewDefines, VxeFormViewConstructor } from '../components/form-view'
 
 /* eslint-disable no-use-before-define */
 
@@ -749,7 +749,9 @@ declare module '@vxe-ui/core' {
     }
 
     export interface RenderFormDesignWidgetItemOptions {}
-    export interface RenderFormDesignWidgetItemParams {}
+    export interface RenderFormDesignWidgetItemParams {
+      $formDesign: null | VxeFormDesignConstructor
+    }
 
     export interface RenderFormDesignWidgetPreviewOptions extends RenderFormDesignWidgetViewOptions {}
     export interface RenderFormDesignWidgetPreviewParams<D = any> extends RenderFormDesignWidgetViewParams<D> {}
@@ -761,6 +763,8 @@ declare module '@vxe-ui/core' {
       name: string
     }
     export interface RenderFormDesignWidgetViewParams<D = any> {
+      $formView: null | VxeFormViewConstructor
+      $formDesign: null | VxeFormDesignConstructor
       widget: VxeFormDesignDefines.WidgetObjItem<D>
       isEditMode: boolean
       isViewMode: boolean
@@ -773,14 +777,18 @@ declare module '@vxe-ui/core' {
       name: string
     }
     export interface RenderFormDesignWidgetFormViewParams<D = any> {
+      $formDesign: VxeFormDesignConstructor
       widget: VxeFormDesignDefines.WidgetObjItem<D>
     }
     export interface RenderFormDesignWidgetEditParams<D = any> extends RenderFormDesignWidgetViewParams<D> {}
     export interface RenderFormDesignSettingFormViewOptions {}
-    export interface RenderFormDesignSettingFormViewParams {}
+    export interface RenderFormDesignSettingFormViewParams {
+      $formDesign: VxeFormDesignConstructor
+    }
 
     export interface RenderFormDesignStyleFormViewOptions {}
     export interface RenderFormDesignStyleFormViewParams<D = any> extends VxeFormDesignDefines.FormDesignDefaultParams {
+      $formDesign: VxeFormDesignConstructor
       formConfig: D
     }