resolver-egretimp-plus 0.1.111 → 0.1.113

package/package.json

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

package/src/components/helper/dock.js

@@ -78,15 +78,25 @@ export const getFeiShuTokensApi = async (params) => {
 
 // https://cmitry.feishu.cn/docs/doccnCtL96HOryMUErjXBMBrn4c#
 // 选人选部门Select组件（原生js版本）
-let token = ''
+let tokenAxiosInstance = null
+
 export const useSelEmployeeJs = () => {
   const getToken = async () => {
-    if (token) {
-      return token
+    let currentAxiosInstance = tokenAxiosInstance
+    if (!currentAxiosInstance) {
+      currentAxiosInstance = getFeiShuTokensApi({ "busiType": "CONSULTING_HELP" })
+      tokenAxiosInstance = currentAxiosInstance
+    }
+    let ret = null
+    try {
+      ret = await currentAxiosInstance
+    } catch (error) {
+      tokenAxiosInstance = null
+      ret = null
+    }
+    if (ret) {
+      return ret?.data?.result
     }
-    let { data: { result } } = await getFeiShuTokensApi({ "busiType": "CONSULTING_HELP" })
-    token = result
-    return result
   }
 
   const loadStyle = async () => {

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

@@ -45,23 +45,21 @@ const reserveBottomMargin = computed(() => {
 })
 </script>
 <style lang="scss">
-.custom-component-row {
-  .el-col {
-    & > .el-form-item {
-    }
-  }
-}
 .clear-right-margin {
   .el-col {
-    & > .el-form-item {
-      margin-right: 0;
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-right: 0;
+      }
     }
   }
 }
 .clear-bottom-margin {
   .el-col {
-    & > .el-form-item {
-      margin-bottom: 0;
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-bottom: 0;
+      }
     }
   }
 }

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

@@ -47,7 +47,7 @@ const reserveBottomMargin = computed(() => {
 })
 </script>
 <style lang="scss">
-.el-form-item__content {
+.el-form-item__content, simple-form-item-content {
   & > .custom-component-row {
     width: 100%;
   }
@@ -61,8 +61,10 @@ const reserveBottomMargin = computed(() => {
 }
 .clear-right-margin {
   .el-col {
-    & > .el-form-item {
-      margin-right: 0;
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-right: 0;
+      }
     }
   }
 }
@@ -71,8 +73,10 @@ const reserveBottomMargin = computed(() => {
 }
 .clear-bottom-margin {
   .el-col {
-    & > .el-form-item {
-      margin-bottom: 0;
+    & > {
+      .el-form-item, .simple-form-item {
+        margin-bottom: 0;
+      }
     }
   }
 }

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

@@ -95,6 +95,7 @@ const initSelEmployee = async () => {
     feiShuTokens = ret[0]
     if (!feiShuTokens) return
   }
+  
   const unWatch = watch(() => {
     return dataLoad.value
   }, async (val) => {

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

@@ -23,23 +23,55 @@ 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 defaultPageablePageSize = computed({
+      get() {
+        return parseInt(props.config.defaultPageablePageSize) || 10 // 默认每页5条
+      },
+      set(val) {
+        props.config.defaultPageablePageSize = val
+      }
+    })
+    const pageSize = computed({
+      get() {
+        if (defaultPageable.value) {
+          return defaultPageablePageSize.value
+        }
+        return parseInt(props.config.pageSize) || 5 // 默认每页5条
+      },
+      set(val) {
+        if (defaultPageable.value) {
+          defaultPageablePageSize.value = val
+        }
+        props.config.pageSize = val
+      }
+    })
     const page = reactive({
       pageNum: 1,
       pageSize,
       total: 0,
     })
+    
+    // 在数据量超过10的话，默认开启分页功能
+    const defaultPageable = computed(() => {
+      return !(props.config?.frontPageFlag == '1' || props.config?.pageable == '1') && modelValue.value?.length > 10
+    })
+
     // 开启前端分页
     const isFrontPage = computed(() => {
-      return props.config?.frontPageFlag == '1'
+      return (props.config?.frontPageFlag == '1' || defaultPageable.value) && !isVirtualized.value
     })
+
     // 是否开启分页功能     ====== start======
     const pageable = computed(() => {
-      return isFrontPage.value || props.config?.pageable == '1'
+      return (isFrontPage.value || props.config?.pageable == '1') && !isVirtualized.value
     })
+
     // 分页器布局模式
     const pageAlign = computed(() => {
       return props.config?.pageAlign
@@ -252,6 +284,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
         }
@@ -517,6 +550,7 @@ export default {
     })
     // 页面大小变动
     watch(() => page.pageSize, async (val) => {
+      page.pageSize = val
       const fn = props.config?.sizeChange
       const ret = await fn?.(val, props, page)
       if (ret && isArray(ret)) {
@@ -600,7 +634,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)
@@ -676,7 +709,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/components/simpleFormItemPc/index.js

@@ -0,0 +1 @@
+export { default as default} from './src/index.vue'

package/src/components/simpleFormItemPc/src/index.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { computed, inject, useAttrs } from 'vue';
+
+
+defineOptions({
+  inheritAttrs: false,
+  name: 'SimpleFormItemPc'
+})
+
+const attrs = useAttrs()
+const props = defineProps({
+  label: String,
+  labelWidth: [String, Number],
+  labelPosition: String,
+})
+
+const formContextKey = inject('_formContextKey')
+const formContext = inject(formContextKey, undefined)
+
+const labelStyle = computed(() => {
+  if (formContext?.labelPosition === 'top' || props?.labelPosition === 'top') {
+    return {}
+  }
+
+  const labelWidth = props.labelWidth || formContext?.labelWidth || ''
+  if (labelWidth) return { width: `${parseInt(labelWidth)}px` }
+  return {}
+})
+
+const formItemClass = computed(() => {
+  const clas = attrs.class
+  return [
+    clas || '',
+    {
+      [`label-position__${props.labelPosition || 'right'}`]: true
+    }
+  ]
+})
+
+</script>
+<template>
+  <div class="simple-form-item el-form-item" :class="formItemClass" :style="attrs.style">
+    <label class="simple-form-item-label el-form-item__label" :style="labelStyle">
+      <slot name="label"></slot>
+    </label>
+    <div class="simple-form-item-content el-form-item__content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.simple-form-item {
+  display: flex;
+  margin-bottom: var(--prmary-marign);
+  margin-right: var(--prmary-marign);
+  .simple-form-item-label {
+    flex: 0 0 auto;
+    display: flex;
+    font-size: var(--el-form-label-font-size);
+    color: var(--el-text-color-regular);
+    height: 32px;
+    line-height: 32px;
+    padding: 0 12px 0 0;
+    align-items: center;
+    box-sizing: content-box;
+    max-width: 100%;
+  }
+  .simple-form-item-content {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    line-height: 32px;
+    min-width: 0;
+    position: relative;
+  }
+}
+.label-position__left {
+  .simple-form-item-label {
+    justify-content: flex-start;
+    text-align: left;
+  }
+}
+.label-position__right {
+  .simple-form-item-label {
+    justify-content: flex-end;
+    text-align: right;
+  }
+}
+.label-position__top {
+  display: block;
+}
+</style>

package/src/resolver-web.vue

@@ -1,8 +1,8 @@
 <script setup>
 import getNativeComps from './components/patchComponents-web'
-import { ElMessage, ElMessageBox } from "element-plus"
+import { ElMessage, ElMessageBox, formContextKey } from "element-plus"
 import { loadingInstance } from './components/loading'
-import { computed, ref, useAttrs } from 'vue';
+import { computed, provide, ref, useAttrs } from 'vue';
 import Resolver from './resolver-common.vue'
 import { generateOpenChildDialog } from './components/childDialog';
 import { generateUniqueId } from './utils/common.js';
@@ -46,6 +46,9 @@ defineOptions({
 const attrs = useAttrs()
 
 const resolverRef = ref(null)
+
+provide('_formContextKey', formContextKey)
+
 defineExpose({
   dynamicMapComp: computed({
     get() {

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

@@ -79,10 +79,12 @@
     }
     .el-collapse-item__content {
       & > .el-row {
-        > .el-col {
+        & > .el-col {
           &:last-child {
-            & > .el-form-item {
-              margin-bottom: 24px;
+            & > {
+              .el-form-item, .simple-form-item {
+                margin-bottom: 24px;
+              }
             }
           }
         }

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/form.scss

@@ -61,13 +61,13 @@
     }
   }
   .label-position-right {
-    .el-form-item__label {
+    .el-form-item__label, .simple-form-item-label {
       justify-content: flex-end;
       
     }
   }
   .label-position-left {
-    .el-form-item__label {
+    .el-form-item__label, .simple-form-item-label {
       justify-content: flex-start;
       .custom-label-content {
         text-align: left;
@@ -76,7 +76,7 @@
   }
   .label-position-top {
     display: block;
-    .el-form-item__label {
+    .el-form-item__label, .simple-form-item-label {
       display: block;
       width: 100% !important;
     }

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

@@ -84,7 +84,7 @@
   .el-table .el-table__cell {
     padding: 4px 0;
   }
-  .el-form-item {
+  .el-form-item, .simple-form-item {
     margin-right: 0;
     margin-bottom: 0;
   }
@@ -116,10 +116,10 @@
     .el-input {
       --el-input-height: 24px;
     }
-    .el-form-item__label {
+    .el-form-item__label, .simple-form-item-label {
       height: 24px;
     }
-    .el-form-item__content {
+    .el-form-item__content, .simple-form-item-content {
       min-height: 24px;
     }
     .el-select__wrapper, .el-input__wrapper {
@@ -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/theme/element/index.scss

@@ -4,15 +4,17 @@
   font-weight: inherit;
 }
 .custom-form-item.hidden-label {
-  & > .el-form-item__label {
-    display: none;
+  & > {
+    .el-form-item__label, .simple-form-item-label {
+      display: none;
+    }
   }
   & > .el-form-item__label-wrap {
     display: none;
   }
 }
 .content-right {
-  .el-form-item__content {
+  .el-form-item__content, .simple-form-item-content {
     text-align: right;
     justify-content: flex-end;
   }

package/src/utils/render.jsx

@@ -1,4 +1,5 @@
 import { getCodeMapRules } from '../rules/rulesDriver.js'
+import SimpleFormItemPc from '../components/simpleFormItemPc'
 import { resolveAssetComponents, findComponent, compareComponet, normalPixel, isPlainObject, hasOwn, isFnStr, normalCapitalizeComponent, capitalize, camelize, formatDate, definePrivatelyProp} from './common.js'
 import { resolveComponent, inject } from 'vue'
 import CustomComponentColH5 from '../components/packages-H5/CustomComponentColH5.vue'
@@ -665,7 +666,7 @@ function generateFormItemPc (config, lang, compProps, params,) {
   let props = {}
   let propsKeys
   let slotName = 'default'
-  const formItemComp = resolveComponent('el-form-item')
+  let formItemComp = resolveComponent('el-form-item')
   if (formItemComp) {
     isFormItem = true
     propsKeys = getComponentPropsKeys(formItemComp)
@@ -721,6 +722,15 @@ function generateFormItemPc (config, lang, compProps, params,) {
         return node
       }
     }
+
+    // 表格中的列，不需要form-item的时候，就尽可能不要，可以提升性能
+    if (!props?.rules?.length && props?.class?.['hidden-label'] && config.isColumn) {
+      return node
+    }
+
+    if (!props?.rules?.length) {
+      formItemComp = SimpleFormItemPc
+    }
     
     const slots = {
       error: (info) => createFormLabelErrorTip(info, config, lang)
@@ -729,6 +739,7 @@ function generateFormItemPc (config, lang, compProps, params,) {
     if (isFormItem && slotName !== 'label') {
       slots.label = () => createFormLable(config, lang)
     }
+    
     return (
       <formItemComp ref={(e) => {definePrivatelyProp(config, 'formItemVm', e)}} key={config.requiredFlag} class="custom-form-item" {...props}>{slots}</formItemComp>
     )
@@ -787,6 +798,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('->') : []
@@ -803,7 +818,7 @@ 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,
@@ -818,39 +833,43 @@ export function getFormItemRule(config, lang, params, compProps, fromCustValid)
   if (config.showMoney && config.metaType == 'ElInput') {
     trigger = 'blur'
   }
-  const rules = [{
-    // required,
-    validator: (rule, value, callback) => {
-      if ((compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1') {
-        callback()
-        return
-      }
-      if (isChainHidden({ config })) {
-        callback()
-        return
-      }
-      let val = config?.refValue
-      if (fromCustValid) {
-        val = value
-      }
-      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)) {
-          callback(new Error(message))
-        } else {
-          // isMatch在下来框的时候，表示当前值没有在下拉选项中匹配到，就表示没有选中值；因为后端在表字段为数字类型的时候，默认返回的是0值
-          if (hasOwn(config, 'isMatch') && !config.isMatch) {
+  const rules = []
+  // 是否需要去进行校验
+  const needToValid = !(
+    (compProps?.disabled || isPlainColumn(config, compProps?.disabled)) && config.alongValidate != '1' ||
+    isChainHidden({ config })
+  )
+  if (!needToValid) {
+    return rules
+  }
+  if (!onlyRequiredFlag && required) {
+    rules.push({
+      // required,
+      validator: (rule, value, callback) => {
+        let val = config?.refValue
+        if (fromCustValid) {
+          val = value
+        }
+        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)) {
             callback(new Error(message))
           } else {
-            callback()
+            // isMatch在下来框的时候，表示当前值没有在下拉选项中匹配到，就表示没有选中值；因为后端在表字段为数字类型的时候，默认返回的是0值
+            if (hasOwn(config, 'isMatch') && !config.isMatch) {
+              callback(new Error(message))
+            } else {
+              callback()
+            }
           }
+        } else {
+          callback()
         }
-      } else {
-        callback()
-      }
-    },
-    trigger,
-  }]
+      },
+      trigger,
+    })
+  }
+
   let regexPattern = []
   if (config.regexPattern) {
     try {
@@ -874,14 +893,6 @@ export function getFormItemRule(config, lang, params, compProps, fromCustValid)
   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
@@ -909,26 +920,20 @@ export function getFormItemRule(config, lang, params, compProps, fromCustValid)
     })
   }
   let validators = config.validators
-  validators = isArray(validators) ? validators : [validators]
-  if (validators && validators.length) {
-    validators.forEach(validator => {
-      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,
-        })
-      }
-    })
+  if (validators) {
+    validators = isArray(validators) ? validators : [validators]
+    if (validators && validators.length) {
+      validators.forEach(validator => {
+        if (isFunction(validator)) {
+          rules.push({
+            validator: (rule, value, callback) => {
+              return validator(rule, config.refValue, callback, config)
+            },
+            trigger,
+          })
+        }
+      })
+    }
   }
   return rules
 }
@@ -995,7 +1000,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)}
       >