resolver-egretimp-plus 0.1.110 → 0.1.112

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.110",
+  "version": "0.1.112",
   "description": "交付体验渲染",
   "main": "./dist/web/index.js",
   "module": "./dist/web/index.js",

package/src/components/helper/FormPolyfill.jsx

@@ -0,0 +1,25 @@
+import { formContextKey } from "element-plus"
+import { inject } from "vue"
+
+export default {
+  name: 'FormPolyfill',
+  props: {
+    form: Object
+  },
+  setup(props, { slots }) {
+    const formContext = inject(formContextKey, undefined)
+    formContext.removeField = (field) => {
+      const fields = props.form?.fields
+      if (field.prop && fields) {
+        const idx = fields.indexOf(field)
+        if (idx !== -1) {
+          fields.splice(idx, 1)
+        }
+      }
+    }
+
+    return () => {
+      return slots?.default?.() || null
+    }
+  }
+}

package/src/components/helper/table.jsx

@@ -27,44 +27,70 @@ export async function tableValidate({
   lang,
   rootValue,
   dynamicMapComp,
-  messageInstance
+  messageInstance,
+  isFrontPage,
+  page
 }) {
+  // 如果没有开启前端分页功能，不需进行表格校验处理
+  if (!isFrontPage) {
+    return true
+  }
   const multiPmPageMetaList = props.config.multiPmPageMetaList || []
   const list = (data || [])
+  const currentStart = (page.pageNum - 1) * page.pageSize
+  const currentEnd = page.pageNum * page.pageSize
   for (let index = 0; index < list.length; index++) {
-    const row = list[index];
-    const configColumns = multiPmPageMetaList[index]
-    const rowScope = {row, $index: index}
-    for (let j = 0; j < configColumns.length; j++) {
-      const columnConfig = configColumns[j];
-      const renderProps = getItemRenderProps(columnConfig, props, rowScope)
-      const params = {
-        lang,
-        rootValue,
-        dynamicMapComp,
-        props: renderProps,
-        messageInstance
-      }
-      const compProps = {
-        disabled: calcDisable(columnConfig, props.mode)
+    if (index < currentStart || index >= currentEnd) {
+      const row = list[index];
+      const configColumns = multiPmPageMetaList[index] || multiPmPageMetaList[index % page.pageSize]
+      const rowScope = {row, $index: index}
+      for (let j = 0; j < configColumns.length; j++) {
+        const columnConfig = configColumns[j];
+        const renderProps = getItemRenderProps(columnConfig, props, rowScope)
+        const params = {
+          lang,
+          rootValue,
+          dynamicMapComp,
+          props: renderProps,
+          messageInstance
+        }
+        const compProps = {
+          disabled: calcDisable(columnConfig, props.mode)
+        }
+        const rules = getFormItemRule(columnConfig, lang, params, compProps, true)
+        const validator = new AsyncValidator({
+          [columnConfig.dynamicHireRelat]: rules
+        })
+        
+        async function toValidate() {
+          try {
+            await validator.validate({[columnConfig.dynamicHireRelat]: row[columnConfig.metaCode]})
+          } catch (error) {
+            return new Promise((resolve, inject) => {
+              setTimeout(() => {
+                let failPageNum = 0
+                if (index) {
+                  failPageNum = parseInt((index + 1) / page.pageSize)
+                  if ((index + 1) % page.pageSize) {
+                    failPageNum ++
+                  }
+                }
+                page.pageNum = failPageNum
+                inject({})
+              });
+            })
+          }
+          return true
+        }
+        await toValidate()
       }
-      const rules = getFormItemRule(columnConfig, lang, params, compProps)
-      const validator = new AsyncValidator({
-        [props.config.metaCode]: rules
-        // validator: (rule, value, callback) => {
-        //   callback(new Error('test error'))
-        //   return
-        // }
-      })
-      const a = await validator.validate({[columnConfig.metaCode]: row[columnConfig.metaCode]})
-      debugger
     }
   }
-  
+  return true
 }
 
 function getItemRenderProps(itemConfig, tableProps, rowScope) {
-  const {row } = rowScope
+  const { row } = rowScope
   return {
     config: itemConfig,
     modelValue: row[itemConfig.metaCode],

package/src/components/packages-web/CustomComponentFormLayout.vue

@@ -1,15 +1,17 @@
 <template>
   <ElForm v-bind="formProps" :ref="refFn" :model="props.modelValue">
-    <ElRow v-bind="rowProps">
-      <Renderer :config="pmPageMetaList" v-model="val"></Renderer>
-    </ElRow>
+    <FormPolyfill :form="rootForm">
+      <ElRow v-bind="rowProps">
+        <Renderer :config="pmPageMetaList" v-model="val"></Renderer>
+      </ElRow>
+    </FormPolyfill>
   </ElForm>
 </template>
 <script setup>
 import Renderer from '../../renderer.jsx'
 import { computed, inject } from "vue"
 import { ElForm, ElRow } from 'element-plus'
-
+import FormPolyfill from '../helper/FormPolyfill.jsx'
 
 const emits = defineEmits(['update:modelValue'])
 const props = defineProps({

package/src/components/packages-web/CustomComponentTable.jsx

@@ -23,10 +23,14 @@ export default {
       triggerRef: null,
       content: ''
     })
-    let pageSize = 5 // 默认每页5条
-    if (props.config?.pageSize) {
-      pageSize = parseInt(props.config.pageSize) || 5
-    }
+
+    // let pageSize = 10 // 默认每页5条
+    // if (props.config?.pageSize) {
+    //   pageSize = parseInt(props.config.pageSize) || 5
+    // }
+    const pageSize = computed(() => {
+      return parseInt(props.config.pageSize) || 5
+    })
     const page = reactive({
       pageNum: 1,
       pageSize,
@@ -36,9 +40,9 @@ export default {
     const isFrontPage = computed(() => {
       return props.config?.frontPageFlag == '1'
     })
-    // 是否配置分页功能     ====== start======
+    // 是否开启分页功能     ====== start======
     const pageable = computed(() => {
-      return props.config?.pageable == '1'
+      return isFrontPage.value || props.config?.pageable == '1'
     })
     // 分页器布局模式
     const pageAlign = computed(() => {
@@ -252,6 +256,7 @@ export default {
         retObj.className = `${retObj.className || ''} clear-index`
       }
       if (!isVirtualized.value) {
+        retObj.className = `${retObj.className} cell-col-ellipsis`
         if (!retObj.prop) {
           retObj.prop = config.metaCode
         }
@@ -554,22 +559,20 @@ export default {
     }, {})
 
     function validate() {
-      // lang,
-      // rootValue,
-      // dynamicMapComp,
-      // props,
-      // messageInstance: messageInstance?.value
       return tableValidate({
         props,
         data: unref(modelValue),
-        lang,
+        lang: unref(lang),
         rootValue,
         dynamicMapComp,
-        messageInstance: messageInstance?.value
+        messageInstance: messageInstance?.value,
+        isFrontPage: unref(isFrontPage),
+        page,
       })
     }
 
     const context = reactive({
+      prop: props.config.dynamicHireRelat,
       // ...toRefs(props),
       // $el: formItemRef,
       // size: _size,
@@ -586,7 +589,7 @@ export default {
       validate,
     })
     onMounted(() => {
-      // formContext?.addField(context)
+      formContext?.addField(context)
     })
 
     // 是否配置分页功能     ====== end======
@@ -602,7 +605,6 @@ export default {
     const dataList = computed(() => {
       return totalRow.value?.length ? [...tableData.value, ...totalRow.value] : tableData.value
     })
-    // console.log('dynamicMapComp===:', inject('dynamicMapComp'))
 
     function cellMouseEnenter(e) {
       const {overflow, content} = eleIsOverflow(e)
@@ -678,7 +680,7 @@ export default {
           }
           if (isVirtualized.value) {
             retVnode = (
-              <div className="table-v2-cell" onMouseenter={(e) => cellMouseEnenter(e)} onMouseout={(e) => cellMouseout(e)}>
+              <div className="table-v2-cell" onMouseenter={(e) => cellMouseEnenter(e)} onMouseleave={(e) => cellMouseout(e)}>
                 {retVnode}
               </div>
             )

package/src/theme/element/components/common.scss

@@ -17,4 +17,10 @@
       }
     }
   }
-}
+}
+
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/src/theme/element/components/table.scss

@@ -154,6 +154,14 @@
   .pagination-wrap {
     display: flex;
   }
+  .cell-col-ellipsis {
+    & > .cell > .el-col {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
   // table-v2
   .table-border {
     --el-table-header-bg-color: #f5f6f7;
@@ -181,6 +189,11 @@
     .table-v2-cell {
       padding: 0 16px;
       width: 100%;
+      & > .el-col {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
     }
     .table-v2-common-row {
       border-bottom: none;

package/src/utils/render.jsx

@@ -417,6 +417,7 @@ export function getComponentForConfig({messageInstance, config, disabled, getNat
   if (config.isCustom) {
     return () => loadModule(generateVuePath(config.fileId), loadModuleCache, messageInstance)
   }
+  
   // 表格中中的列，是否需要转换为普通形式
   if (isPlainColumn(config, disabled)) {
     return CustomComponentPlain
@@ -720,6 +721,12 @@ function generateFormItemPc (config, lang, compProps, params,) {
         return node
       }
     }
+
+    // 表格中的列，不需要form-item的时候，就尽可能不要，可以提升性能
+    
+    if (!props?.rules?.length && props?.class?.['hidden-label'] && config.isColumn) {
+      return node
+    }
     
     const slots = {
       error: (info) => createFormLabelErrorTip(info, config, lang)
@@ -786,6 +793,10 @@ export function generateFormItemPolyfill(config, lang, compProps, _isH5, params)
   }
 }
 
+function isHiddenLable(config) {
+  return (config.labelWidth == 0 || config.labelWidth === '0px' || config.labelHidden == '1') && config.showLabel != '1'
+}
+
 function getFormItemExtendProps(config, lang, params, compProps) {
   const prop = config.dynamicHireRelat || ''
   // const propAttr = config.dynamicHireRelat ? config.dynamicHireRelat?.split('->') : []
@@ -802,14 +813,14 @@ function getFormItemExtendProps(config, lang, params, compProps) {
     class: {
       [`vertical-${config['label-vertical'] || config['labelVertical'] || 'center'}`]: true,
       'content-right': config.contentRight,
-      'hidden-label': (config.labelWidth == 0 || config.labelWidth === '0px' || config.labelHidden == '1') && config.showLabel != '1',
+      'hidden-label': isHiddenLable(config),
       [`label-position-${config['label-position'] || config['labelPosition'] || 'right'}`]: true // label-position 支持三个值，right、left、top
     },
     style,
   }
 }
 
-export function getFormItemRule(config, lang, params, compProps) {
+export function getFormItemRule(config, lang, params, compProps, fromCustValid) {
   const required = config.requiredFlag == '1'
   const onlyRequiredFlag = config.onlyRequiredFlag
   let trigger = ['blur', 'change']
@@ -817,18 +828,22 @@ export function getFormItemRule(config, lang, params, compProps) {
   if (config.showMoney && config.metaType == 'ElInput') {
     trigger = 'blur'
   }
-  const rules = [{
+  const rules = []
+  // 是否需要去进行校验
+  const needToValid = !(
+    (compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1' ||
+    isChainHidden({ config })
+  )
+  if (!needToValid) {
+    return rules
+  }
+  rules.push({
     // required,
     validator: (rule, value, callback) => {
-      if ((compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1') {
-        callback()
-        return
+      let val = config?.refValue
+      if (fromCustValid) {
+        val = value
       }
-      if (isChainHidden({ config })) {
-        callback()
-        return
-      }
-      const val = config?.refValue
       const message = lang.indexOf('zh') > -1 ? `${config.metaNameZh || ''}不能为空` : `${config.metaNameEn || ''} can not be empty`
       if (!onlyRequiredFlag && required) {
         if (val === '' || val === null || val === undefined || (Array.isArray(val) && !val.length)) {
@@ -846,7 +861,8 @@ export function getFormItemRule(config, lang, params, compProps) {
       }
     },
     trigger,
-  }]
+  })
+
   let regexPattern = []
   if (config.regexPattern) {
     try {
@@ -870,15 +886,10 @@ export function getFormItemRule(config, lang, params, compProps) {
   if (regexPattern?.length) {
     rules.push({
       validator: (rule, value, callback) => {
-        if ((compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1') {
-        callback()
-          return
-        }
-        if (isChainHidden({ config })) {
-          callback()
-          return
-        }
         const bingdValue = config?.refValue
+        if (fromCustValid) {
+          val = value
+        }
         const val = (bingdValue === null || bingdValue === undefined) ? '' : bingdValue
         if (!val) callback() // 为空不进行正则校验
         for (let i = 0; i < regexPattern.length; i++) {
@@ -908,14 +919,6 @@ export function getFormItemRule(config, lang, params, compProps) {
       if (isFunction(validator)) {
         rules.push({
           validator: (rule, value, callback) => {
-            if ((compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1') {
-              callback()
-              return
-            }
-            if (isChainHidden({ config })) {
-              callback()
-              return
-            }
             return validator(rule, config.refValue, callback, config)
           },
           trigger,
@@ -988,7 +991,7 @@ function createFormLable(config, lang = 'zh') {
     <div title={lang.indexOf('zh') > -1 ? (config.labelZh || config.metaNameZh) : (config.labelEn || config.metaNameEn)} class="custom-label">
       <span
         onMouseenter={(e) => labelMouseEnenter(e, config, lang)}
-        onMouseout={() => config._labelShowTip = false}
+        onMouseleave={() => config._labelShowTip = false}
         class={`custom-label-content ${required ? 'custom-label-require' : ''}`} style={config.labelStyle}
         onClick={() => config.onLabelClick && config.onLabelClick?.(config)}
       >