releases 4.0.91

x-extends · Aug 7, 2024 · 5b50a00 · 5b50a00
1 parent 51f811a
commit 5b50a00
Show file tree

Hide file tree

Showing 40 changed files with 814 additions and 220 deletions.
diff --git a/examples/views/tabs/TabsTest.vue b/examples/views/tabs/TabsTest.vue
@@ -43,7 +43,7 @@
     </p>
 
     <p>
-      <vxe-tabs modelValue="3" type="round-card" :height="300" show-close padding>
+      <vxe-tabs v-model="val4" type="round-card" :height="300" show-close padding @tab-load="tabToadEvent">
         <vxe-tab-pane title="xxxf地方799991" name="1">xxxx</vxe-tab-pane>
         <vxe-tab-pane title="xxxf地方79999f地方7999956756765657557562" name="2" icon="vxe-icon-pc">cccc</vxe-tab-pane>
         <vxe-tab-pane title="xxx45f地方7999965475673" name="3" icon="vxe-icon-pc">vvvv</vxe-tab-pane>
@@ -67,6 +67,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from 'vue'
+
+const val4 = ref('3')
+const tabToadEvent = (p: any) => {
+  console.log(p)
+}
 </script>
 
 <style lang="scss" scoped>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.90",
+  "version": "4.0.91",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

diff --git a/packages/form-design/src/form-design.ts b/packages/form-design/src/form-design.ts
@@ -401,6 +401,7 @@ export default defineComponent({
 
     createSettingForm()
     updateWidgetConfigs()
+
     if (props.config) {
       loadConfig(props.config)
     }

diff --git a/packages/form-design/src/form-view.ts b/packages/form-design/src/form-view.ts
@@ -14,10 +14,7 @@ export default defineComponent({
   name: 'VxeFormView',
   props: {
     modelValue: Object as PropType<VxeFormViewPropTypes.ModelValue>,
-    config: {
-      type: Object as PropType<VxeFormViewPropTypes.Config>,
-      default: () => ({})
-    },
+    config: Object as PropType<VxeFormViewPropTypes.Config>,
     viewRender: Object as PropType<VxeFormViewPropTypes.ViewRender>,
     createFormConfig: Function as PropType<VxeFormViewPropTypes.CreateFormConfig>
   },
@@ -59,6 +56,13 @@ export default defineComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeFormViewConstructor & VxeFormViewPrivateMethods
 
+    const clearConfig = () => {
+      return loadConfig({
+        formConfig: {},
+        widgetData: []
+      })
+    }
+
     const loadConfig = (config: VxeFormDesignDefines.FormDesignConfig | null) => {
       if (config) {
         const { formConfig, widgetData } = config
@@ -68,45 +72,37 @@ export default defineComponent({
       return nextTick()
     }
 
-    const loadFormConfig = (formConfig: VxeFormProps) => {
-      const { viewRender } = props
-      const { createFormConfig } = props
-      const params: VxeFormViewDefines.CreateFormConfigParams = { viewRender, formConfig }
-      if (createFormConfig) {
-        reactData.formConfig = createFormConfig(params)
-      } else {
-        const { name } = viewRender || {}
-        const compConf = renderer.get(name) || {}
-        const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
-        reactData.formConfig = Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params))
+    const parseConfig = (config: VxeFormDesignDefines.FormDesignConfig | null) => {
+      const { formConfig, widgetData } = config || {}
+      const widgetObjList = parseWidgetData(widgetData || [])
+      return {
+        ...parseForm(widgetObjList),
+        formConfig: parseFormConfig(formConfig || {}),
+        widgetData: widgetObjList
       }
-      return nextTick()
     }
 
-    const loadWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
-      reactData.widgetObjList = (widgetData || []).map(item => configToWidget(item))
-      updateWidgetInfo()
-      return nextTick()
-    }
-
-    const getWidgetDefaultValue = (widget: VxeFormDesignDefines.WidgetObjItem) => {
-      switch (widget.name) {
-        case 'subtable':
-          return []
+    const parseFormConfig = (formConfig: VxeFormProps) => {
+      const { viewRender, createFormConfig } = props
+      const params: VxeFormViewDefines.CreateFormConfigParams = { viewRender, formConfig }
+      if (createFormConfig) {
+        return createFormConfig(params)
       }
-      return null
+      const { name } = viewRender || {}
+      const compConf = renderer.get(name) || {}
+      const createPCFormConfig = compConf ? compConf.createFormViewFormConfig : null
+      return Object.assign({}, createPCFormConfig ? createPCFormConfig(params) : createDefaultFormViewPCFormConfig(params))
     }
 
-    const getWidgetDefaultRule = () => {
-      return [
-        { required: true, content: '该填写该字段！' }
-      ]
+    const loadFormConfig = (formConfig: VxeFormProps) => {
+      reactData.formConfig = parseFormConfig(formConfig)
+      return nextTick()
     }
 
-    const updateWidgetInfo = () => {
+    const parseForm = (widgetObjList: VxeFormDesignDefines.WidgetObjItem[]) => {
       const formData: VxeFormPropTypes.Data = {}
       const formRules: VxeFormPropTypes.Rules = {}
-      XEUtils.eachTree(reactData.widgetObjList, widget => {
+      XEUtils.eachTree(widgetObjList, widget => {
         const { name, field, required } = widget
         const compConf = renderer.get(name) || {}
         const createWidgetFieldValue = compConf.createFormDesignWidgetFieldValue
@@ -121,8 +117,37 @@ export default defineComponent({
           formRules[field] = getWidgetDefaultRule()
         }
       }, { children: 'children' })
+      return {
+        formData,
+        formRules
+      }
+    }
+
+    const parseWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
+      return (widgetData || []).map(item => configToWidget(item))
+    }
+
+    const loadWidgetData = (widgetData: VxeFormDesignDefines.WidgetObjItem[]) => {
+      const widgetObjList = parseWidgetData(widgetData)
+      reactData.widgetObjList = widgetObjList
+      const { formData, formRules } = parseForm(widgetObjList)
       reactData.formRules = formRules
       emit('update:modelValue', Object.assign(formData, props.modelValue))
+      return nextTick()
+    }
+
+    const getWidgetDefaultValue = (widget: VxeFormDesignDefines.WidgetObjItem) => {
+      switch (widget.name) {
+        case 'subtable':
+          return []
+      }
+      return null
+    }
+
+    const getWidgetDefaultRule = () => {
+      return [
+        { required: true, content: '该填写该字段！' }
+      ]
     }
 
     const updateItemStatus = (widget: VxeFormDesignDefines.WidgetObjItem, value: any) => {
@@ -161,7 +186,9 @@ export default defineComponent({
 
     const formViewMethods: FormViewMethods = {
       dispatchEvent,
+      clearConfig,
       loadConfig,
+      parseConfig,
       loadFormConfig,
       loadWidgetData,
       updateItemStatus,
@@ -244,7 +271,9 @@ export default defineComponent({
                 })
               }),
               footerSlot
-                ? h(VxeFormItemComponent, {}, {
+                ? h(VxeFormGatherComponent, {
+                  span: 24
+                }, {
                   default () {
                     return footerSlot({})
                   }
@@ -258,11 +287,13 @@ export default defineComponent({
 
     $xeFormView.renderVN = renderVN
 
-    watch(() => props.config, () => {
-      loadConfig(props.config)
+    watch(() => props.config, (value) => {
+      loadConfig(value || {})
     })
 
-    loadConfig(props.config)
+    if (props.config) {
+      loadConfig(props.config)
+    }
 
     provide('$xeFormView', $xeFormView)
 

diff --git a/packages/form-design/widget-input/input-view.ts b/packages/form-design/widget-input/input-view.ts
@@ -41,7 +41,8 @@ export const WidgetInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h('input', {

diff --git a/packages/form-design/widget-select/select-view.ts b/packages/form-design/widget-select/select-view.ts
@@ -59,7 +59,8 @@ export const WidgetSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h('select', {

diff --git a/packages/form-design/widget-textarea/textarea-view.ts b/packages/form-design/widget-textarea/textarea-view.ts
@@ -41,7 +41,8 @@ export const WidgetTextareaViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h('textarea', {

diff --git a/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts b/packages/form-design/widget-vxe-checkbox-group/vxe-checkbox-group-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeCheckboxGroupViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeCheckboxGroupComponent, {

diff --git a/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts b/packages/form-design/widget-vxe-date-picker/vxe-date-picker-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeDatePickerViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeDatePickerComponent, {

diff --git a/packages/form-design/widget-vxe-input/vxe-input-view.ts b/packages/form-design/widget-vxe-input/vxe-input-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h(VxeInputComponent, {

diff --git a/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts b/packages/form-design/widget-vxe-number-input/vxe-number-input-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeNumberInputViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeNumberInputComponent, {

diff --git a/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts b/packages/form-design/widget-vxe-radio-group/vxe-radio-group-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeRadioGroupViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeRadioGroupComponent, {

diff --git a/packages/form-design/widget-vxe-select/vxe-select-view.ts b/packages/form-design/widget-vxe-select/vxe-select-view.ts
@@ -42,7 +42,8 @@ export const WidgetVxeSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeSelectComponent, {

diff --git a/packages/form-design/widget-vxe-switch/vxe-switch-view.ts b/packages/form-design/widget-vxe-switch/vxe-switch-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeSwitchViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         field: widget.field,
-        title: widget.title
+        title: widget.title,
+        itemRender: {}
       }, {
         default () {
           return h(VxeSwitchComponent, {

diff --git a/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts b/packages/form-design/widget-vxe-textarea/vxe-textarea-view.ts
@@ -40,7 +40,8 @@ export const WidgetVxeTextareaViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeTextareaComponent, {

diff --git a/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts b/packages/form-design/widget-vxe-tree-select/vxe-tree-select-view.ts
@@ -42,7 +42,8 @@ export const WidgetVxeTreeSelectViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeTreeSelectComponent, {

diff --git a/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts b/packages/form-design/widget-vxe-upload-file/vxe-upload-file-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeUploadFileViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeUploadComponent, {

diff --git a/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts b/packages/form-design/widget-vxe-upload-image/vxe-upload-image-view.ts
@@ -41,7 +41,8 @@ export const WidgetVxeUploadImageViewComponent = defineComponent({
       return h(VxeFormItemComponent, {
         class: ['vxe-form-design--widget-render-form-item', `widget-${kebabCaseName}`],
         title: widget.title,
-        field: widget.field
+        field: widget.field,
+        itemRender: {}
       }, {
         default () {
           return h(VxeUploadComponent, {

diff --git a/packages/form/src/render.ts b/packages/form/src/render.ts
@@ -1,4 +1,4 @@
-import { h } from 'vue'
+import { createCommentVNode, h, VNode } from 'vue'
 import { getIcon, renderer } from '../../ui'
 import { getFuncText, isEnableConf } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
@@ -37,8 +37,8 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
   const compConf = isEnableConf(itemRender) ? renderer.get(itemRender.name) : null
   const params = { data, readonly, disabled, field, property: field, item, $form: $xeForm, $grid: $xeForm.xegrid }
   const titleSlot = slots ? slots.title : null
-  const contVNs = []
-  const titVNs = []
+  const extraSlot = slots ? slots.extra : null
+  const titVNs: VNode[] = []
   if (titlePrefix) {
     titVNs.push(
       (titlePrefix.content || titlePrefix.message)
@@ -58,11 +58,6 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
       class: 'vxe-form--item-title-label'
     }, titleSlot ? $xeForm.callSlot(titleSlot, params) : (rftTitle ? getSlotVNs(rftTitle(itemRender, params)) : getFuncText(item.title)))
   )
-  contVNs.push(
-    h('div', {
-      class: 'vxe-form--item-title-content'
-    }, titVNs)
-  )
   const fixVNs = []
   if (titleSuffix) {
     fixVNs.push(
@@ -77,10 +72,17 @@ export function renderTitle ($xeForm: VxeFormConstructor & VxeFormPrivateMethods
         : renderSuffixIcon(titleSuffix)
     )
   }
-  contVNs.push(
+  return [
+    h('div', {
+      class: 'vxe-form--item-title-content'
+    }, titVNs),
     h('div', {
       class: 'vxe-form--item-title-postfix'
-    }, fixVNs)
-  )
-  return contVNs
+    }, fixVNs),
+    extraSlot
+      ? h('div', {
+        class: 'vxe-form--item-title-extra'
+      }, $xeForm.callSlot(extraSlot, params))
+      : createCommentVNode()
+  ]
 }