优化表单渲染

x-extends · Aug 20, 2024 · b9cf8ea · b9cf8ea
1 parent 441ef70
commit b9cf8ea
Show file tree

Hide file tree

Showing 18 changed files with 215 additions and 132 deletions.
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
   "style": "lib/style.css",
   "typings": "types/index.d.ts",
   "dependencies": {
-    "vxe-pc-ui": "^4.0.94"
+    "vxe-pc-ui": "^4.0.96"
   },
   "devDependencies": {
     "@types/resize-observer-browser": "^0.1.11",

diff --git a/packages/grid/src/grid.ts b/packages/grid/src/grid.ts
@@ -220,6 +220,14 @@ export default defineComponent({
       }
     }
 
+    const getFormData = () => {
+      const { proxyConfig } = props
+      const { formData } = reactData
+      const proxyOpts = computeProxyOpts.value
+      const formOpts = computeFormOpts.value
+      return proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form ? formData : formOpts.data
+    }
+
     const initPages = () => {
       const { tablePage } = reactData
       const { pagerConfig } = props
@@ -694,7 +702,7 @@ export default defineComponent({
       const formOpts = computeFormOpts.value
       if (proxyConfig && isEnableConf(proxyOpts)) {
         if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
-          const formData: any = {}
+          const fData: any = {}
           formOpts.items.forEach(item => {
             const { field, itemRender } = item
             if (field) {
@@ -707,10 +715,10 @@ export default defineComponent({
                   itemValue = defaultValue
                 }
               }
-              formData[field] = itemValue
+              fData[field] = itemValue
             }
           })
-          reactData.formData = formData
+          reactData.formData = fData
         }
         if (!proxyInited) {
           reactData.proxyInited = true
@@ -733,7 +741,7 @@ export default defineComponent({
        */
       commitProxy (proxyTarget: string | VxeToolbarPropTypes.ButtonConfig, ...args: any[]) {
         const { toolbarConfig, pagerConfig, editRules, validConfig } = props
-        const { tablePage, formData } = reactData
+        const { tablePage } = reactData
         const isActiveMsg = computeIsActiveMsg.value
         const isRespMsg = computeIsRespMsg.value
         const proxyOpts = computeProxyOpts.value
@@ -742,6 +750,7 @@ export default defineComponent({
         const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts
         const resConfigs = proxyOpts.response || proxyOpts.props || {}
         const $xeTable = refTable.value
+        const formData = getFormData()
         let button: VxeToolbarPropTypes.ButtonConfig | null = null
         let code: string | null = null
         if (XEUtils.isString(proxyTarget)) {
@@ -1055,6 +1064,7 @@ export default defineComponent({
       revert () {
         return handleZoom()
       },
+      getFormData,
       getFormItems (itemIndex?: number): any {
         const formOpts = computeFormOpts.value
         const { formConfig } = props
@@ -1072,7 +1082,7 @@ export default defineComponent({
           return {
             data: reactData.tableData,
             filter: reactData.filterData,
-            form: reactData.formData,
+            form: getFormData(),
             sort: sortData.length ? sortData[0] : {},
             sorts: sortData,
             pager: reactData.tablePage,
@@ -1231,12 +1241,13 @@ export default defineComponent({
 
     onMounted(() => {
       nextTick(() => {
-        const { data, columns, proxyConfig } = props
-        const proxyOpts = computeProxyOpts.value
-        const formOpts = computeFormOpts.value
-        if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
-          errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
-        }
+        const { columns } = props
+        // const { data, columns, proxyConfig } = props
+        // const proxyOpts = computeProxyOpts.value
+        // const formOpts = computeFormOpts.value
+        // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
+        //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
+        // }
 
         // if (process.env.VUE_APP_VXE_ENV === 'development') {
         //   if (proxyOpts.props) {

diff --git a/packages/locale/lang/en-US.ts b/packages/locale/lang/en-US.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: 'Re upload',
       uploadProgress: 'Uploading {0}%',
       uploadErr: 'Fail to upload',
-      uploadSuccess: 'Successfully upload'
+      uploadSuccess: 'Successfully upload',
+      moreBtnText: 'More ({0})',
+      viewItemTitle: 'click to view'
     },
     formDesign: {
       formName: 'Form name',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: 'Base control',
           layout: 'Layout control',
+          system: 'System control',
           advanced: 'Advanced control'
         },
         copyTitle: 'Copy_{0}',

diff --git a/packages/locale/lang/es-ES.ts b/packages/locale/lang/es-ES.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: 'Re upload',
       uploadProgress: 'Uploading {0}%',
       uploadErr: 'Fail to upload',
-      uploadSuccess: 'Successfully upload'
+      uploadSuccess: 'Successfully upload',
+      moreBtnText: 'More ({0})',
+      viewItemTitle: 'click to view'
     },
     formDesign: {
       formName: 'Form name',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: 'Base control',
           layout: 'Layout control',
+          system: 'System control',
           advanced: 'Advanced control'
         },
         copyTitle: 'Copy_{0}',

diff --git a/packages/locale/lang/hu-HU.ts b/packages/locale/lang/hu-HU.ts
@@ -305,7 +305,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '点击查看'
     },
     formDesign: {
       formName: '表单名称',
@@ -336,6 +338,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系统控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/locale/lang/ja-JP.ts b/packages/locale/lang/ja-JP.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: 'Re upload',
       uploadProgress: 'Uploading {0}%',
       uploadErr: 'Fail to upload',
-      uploadSuccess: 'Successfully upload'
+      uploadSuccess: 'Successfully upload',
+      moreBtnText: 'More ({0})',
+      viewItemTitle: 'click to view'
     },
     formDesign: {
       formName: 'Form name',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: 'Base control',
           layout: 'Layout control',
+          system: 'System control',
           advanced: 'Advanced control'
         },
         copyTitle: 'Copy_{0}',

diff --git a/packages/locale/lang/ko-KR.ts b/packages/locale/lang/ko-KR.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '点击查看'
     },
     formDesign: {
       formName: '表单名称',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系统控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/locale/lang/pt-BR.ts b/packages/locale/lang/pt-BR.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: 'Re upload',
       uploadProgress: 'Uploading {0}%',
       uploadErr: 'Fail to upload',
-      uploadSuccess: 'Successfully upload'
+      uploadSuccess: 'Successfully upload',
+      moreBtnText: 'More ({0})',
+      viewItemTitle: 'click to view'
     },
     formDesign: {
       formName: 'Form name',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: 'Base control',
           layout: 'Layout control',
+          system: 'System control',
           advanced: 'Advanced control'
         },
         copyTitle: 'Copy_{0}',

diff --git a/packages/locale/lang/ru-RU.ts b/packages/locale/lang/ru-RU.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '点击查看'
     },
     formDesign: {
       formName: '表单名称',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系统控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/locale/lang/vi-VN.ts b/packages/locale/lang/vi-VN.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '点击查看'
     },
     formDesign: {
       formName: '表单名称',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系统控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/locale/lang/zh-CN.ts b/packages/locale/lang/zh-CN.ts
@@ -306,7 +306,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '点击查看'
     },
     formDesign: {
       formName: '表单名称',
@@ -337,6 +339,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系统控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/locale/lang/zh-TC.ts b/packages/locale/lang/zh-TC.ts
@@ -304,7 +304,9 @@ export default {
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
-      uploadSuccess: '上传成功'
+      uploadSuccess: '上传成功',
+      moreBtnText: '更多（{0}）',
+      viewItemTitle: '點擊查看'
     },
     formDesign: {
       formName: '表單名稱',
@@ -335,6 +337,7 @@ export default {
         group: {
           base: '基础控件',
           layout: '布局控件',
+          system: '系統控件',
           advanced: '高级控件'
         },
         copyTitle: '副本_{0}',

diff --git a/packages/table/module/custom/panel.ts b/packages/table/module/custom/panel.ts
@@ -185,7 +185,7 @@ export default defineComponent({
     //   }
     // }
 
-    const allCustomEvent = () => {
+    const allOptionEvent = () => {
       const { customStore } = props
       const { customColumnList } = reactData
       const customOpts = computeCustomOpts.value
@@ -435,7 +435,7 @@ export default defineComponent({
                       'is--indeterminate': isAllIndeterminate
                     }],
                     title: getI18n('vxe.table.allTitle'),
-                    onClick: allCustomEvent
+                    onClick: allOptionEvent
                   }, [
                     h('span', {
                       class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
@@ -678,7 +678,7 @@ export default defineComponent({
                             'is--indeterminate': isAllIndeterminate
                           }],
                           title: getI18n('vxe.table.allTitle'),
-                          onClick: allCustomEvent
+                          onClick: allOptionEvent
                         }, [
                           h('span', {
                             class: ['vxe-checkbox--icon', isAllIndeterminate ? getIcon().TABLE_CHECKBOX_INDETERMINATE : (isAllChecked ? getIcon().TABLE_CHECKBOX_CHECKED : getIcon().TABLE_CHECKBOX_UNCHECKED)]
@@ -697,7 +697,8 @@ export default defineComponent({
                         VxeUITooltipComponent
                           ? h(VxeUITooltipComponent, {
                             enterable: true,
-                            content: getI18n('vxe.custom.setting.sortHelpTip')
+                            content: getI18n('vxe.custom.setting.sortHelpTip'),
+                            popupClassName: 'vxe-table--ignore-clear'
                           }, {
                             default: () => {
                               return h('i', {

diff --git a/packages/table/module/edit/hook.ts b/packages/table/module/edit/hook.ts
@@ -764,25 +764,26 @@ hooks.add('tableEditModule', {
         const { editRender } = column
         if (isEnableConf(editRender)) {
           const compRender = renderer.get(editRender.name)
-          let { autofocus, autoselect } = editRender
+          let autoFocus = editRender.autofocus || editRender.autoFocus
+          let autoSelect = editRender.autoSelect || editRender.autoselect
           let inputElem
-          if (!autofocus && compRender) {
-            autofocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus
+          if (!autoFocus && compRender) {
+            autoFocus = compRender.tableAutoFocus || compRender.tableAutofocus || compRender.autofocus
           }
-          if (!autoselect && compRender) {
-            autoselect = compRender.tableAutoSelect || compRender.autoselect
+          if (!autoSelect && compRender) {
+            autoSelect = compRender.tableAutoSelect || compRender.autoselect
           }
           // 如果指定了聚焦 class
-          if (XEUtils.isFunction(autofocus)) {
-            inputElem = autofocus(params)
-          } else if (autofocus) {
-            inputElem = cell.querySelector(autofocus)
+          if (XEUtils.isFunction(autoFocus)) {
+            inputElem = autoFocus(params)
+          } else if (autoFocus) {
+            inputElem = cell.querySelector(autoFocus)
             if (inputElem) {
               inputElem.focus()
             }
           }
           if (inputElem) {
-            if (autoselect) {
+            if (autoSelect) {
               inputElem.select()
             } else {
               // 保持一致行为，光标移到末端