resolver-egretimp-plus 0.1.112 → 0.1.113

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.112",
+  "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

@@ -28,22 +28,50 @@ export default {
     // if (props.config?.pageSize) {
     //   pageSize = parseInt(props.config.pageSize) || 5
     // }
-    const pageSize = computed(() => {
-      return 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
@@ -522,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)) {

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/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 {

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)
@@ -723,10 +724,13 @@ function generateFormItemPc (config, lang, compProps, params,) {
     }
 
     // 表格中的列，不需要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)
@@ -735,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>
     )
@@ -837,31 +842,33 @@ export function getFormItemRule(config, lang, params, compProps, fromCustValid)
   if (!needToValid) {
     return rules
   }
-  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 {
-          // isMatch在下来框的时候，表示当前值没有在下拉选项中匹配到，就表示没有选中值；因为后端在表字段为数字类型的时候，默认返回的是0值
-          if (hasOwn(config, 'isMatch') && !config.isMatch) {
+  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) {
@@ -913,18 +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) => {
-            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
 }