resolver-egretimp-plus 0.1.124 → 0.1.126

package/package.json

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

package/src/analysisComponent.jsx

@@ -235,7 +235,6 @@ export default {
      */
     const parent = inject('parent', null)
     const dynamicMapComp = inject('dynamicMapComp')
-
     const configLinks = [parent, ...props.additionConfigs, props.config]
     configLinks.reduce((parent, config) => {
       definePrivatelyProp(config, 'parent', parent)

package/src/components/lazyLoadComponent/index.js

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

package/src/components/lazyLoadComponent/src/LazyLoadComponent.jsx

@@ -0,0 +1,137 @@
+import { onMounted, onUnmounted, reactive, ref, TransitionGroup } from "vue"
+import './LazyLoadComponent.scss'
+
+export default {
+  name: 'LazyLoadComponent',
+  props: {
+    timeout: {
+      type: Number
+    },
+    tagName: {
+      type: String,
+      default: 'div'
+    },
+    viewport: {
+      type: typeof window !== 'undefined' ? window.HTMLElement : Object,
+      default: () => null
+    },
+    threshold: {
+      type: String,
+      default: '0px'
+    },
+    direction: {
+      type: String,
+      default: 'vertical'
+    },
+    maxWaitingTime: {
+      type: Number,
+      default: 50
+    }
+  },
+  setup(props, { slots, emit }) {
+    const el = ref(null)
+    let timer = null
+    let io = null
+    const data = reactive({
+      isInit: false,
+      timer: null,
+      io: null,
+      loading: false
+    })
+    // 如果指定timeout则无论可见与否都是在timeout之后初始化
+    if (props.timeout) {
+      timer = setTimeout(() => {
+        toInit()
+      }, props.timeout)
+    }
+
+    function intersectionHandler (entries) {
+      if (
+        // 正在交叉
+        entries[0].isIntersecting ||
+        // 交叉率大于0
+        entries[0].intersectionRatio
+      ) {
+        toInit()
+        io?.unobserve(el.value)
+      }
+    }
+
+    function requestAnimationFrame (callback) {
+      // 防止等待太久没有执行回调
+      // 设置最大等待时间
+      setTimeout(() => {
+        if (data.isInit) return
+        callback()
+      }, props.maxWaitingTime)
+
+      // 兼容不支持requestAnimationFrame 的浏览器
+      return (window.requestAnimationFrame || ((callback) => setTimeout(callback, 1000 / 60)))(callback)
+    }
+    // 处理组件和骨架组件的切换
+    function toInit () {
+      debugger
+      // 此时说明骨架组件即将被切换
+      emit('beforeInit')
+
+      // 此时可以准备加载懒加载组件的资源
+      data.loading = true
+
+      // 由于函数会在主线程中执行，加载懒加载组件非常耗时，容易卡顿
+      // 所以在requestAnimationFrame回调中延后执行
+      requestAnimationFrame(() => {
+        data.isInit = true
+        emit('init')
+      })
+    }
+
+    onMounted(() => {
+      if (!props.timeout) {
+        // 根据滚动方向来构造视口外边距，用于提前加载
+        let rootMargin
+        switch (props.direction) {
+          case 'vertical':
+            rootMargin = `${props.threshold} 0px`
+            break
+          case 'horizontal':
+            rootMargin = `0px ${props.threshold}`
+            break
+        }
+
+        try {
+          // 观察视口与组件容器的交叉情况
+          io = new window.IntersectionObserver(intersectionHandler, {
+              rootMargin,
+              root: props.viewport,
+              threshold: [0, Number.MIN_VALUE, 0.01]
+          });
+          io.observe(el.value);
+        } catch (e) {
+          toInit()
+        }
+      }
+    })
+    onUnmounted(() => {
+      if (io) {
+        io.unobserve(el.value)
+      }
+    })
+
+    return () => (
+      <TransitionGroup ref={(e) => {el.value= e.$el}} tag={props.tagName} name="lazy-component" className="lazy-load-component"
+        onBeforeEnter={(el) => emit('before-enter', el)}
+        onBbeforeLeave={(el) => emit('before-leave', el)}
+        onAfterEnter={(el) => emit('after-enter', el)}
+        onAfterLeave={(el) => emit('after-leave', el)}
+      >
+        {
+          data.isInit ?
+            slots?.default(data.loading) :
+            slots?.skeleton ?
+              slots?.skeleton() :
+              null
+        }
+      </TransitionGroup>
+    )
+  }
+}

package/src/components/lazyLoadComponent/src/LazyLoadComponent.scss

@@ -0,0 +1,36 @@
+.lazy-load-component {
+  position: relative;
+  width: 100%;
+}
+.CustomComponentRow {
+  & > .lazy-load-component {
+    width: unset;
+  }
+}
+
+.lazy-component-enter {
+  opacity: 0;
+}
+
+.lazy-component-enter-to {
+   opacity: 1;
+}
+
+.lazy-component-enter-active {
+  transition: opacity 0.3s 0.2s;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.lazy-component-leave {
+  opacity: 1;
+}
+
+.lazy-component-leave-to {
+  opacity: 0;
+}
+
+.lazy-component-leave-active {
+  transition: opacity 0.5s;
+}

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

@@ -7,14 +7,14 @@ import { commonPropsType, PLAIN_TYPE_OPTIONS_COLUMNS } from '../../utils/const'
 import { computed, defineModel, defineProps, inject, getCurrentInstance, watch, nextTick, useAttrs } from 'vue'
 import dayjs from 'dayjs'
 import { isNaN } from '../../utils/is';
-import { useFormItem } from 'element-plus'
 
+const useFormItem = inject('_useFormItem', null)
 defineOptions({
   inheritAttrs: false
 })
 
 const attrs = useAttrs()
-const { formItem: elFormItem } = useFormItem()
+const { formItem: elFormItem } = useFormItem?.() || {}
 const modelValue = defineModel()
 const props = defineProps({
   ...commonPropsType,
@@ -230,6 +230,7 @@ function formatValue(value) {
     : formatted
 }
 
+
 watch(modelValue, () => {
   nextTick(() => {
     elFormItem?.validate?.('blur').catch()

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

@@ -11,10 +11,9 @@ import { ElTabs } from 'element-plus'
 import Tabs from '../tabs'
 import Renderer from '../../renderer.jsx'
 import { computed, useAttrs, useSlots } from 'vue'
-import { commonPropsType, hasOwn } from '../../utils/index.js'
+import { assertMetaType, commonPropsType, hasOwn } from '../../utils/index.js'
 import { watch } from 'vue'
 import { OPEN_DATA_RULES } from '../../config.js'
-
 // import * as lib from 'element-plus/es/utils/index.mjs'
 
 const slots = useSlots()
@@ -127,9 +126,6 @@ if (OPEN_DATA_RULES) {
   })
 }
 
-function assertMetaType(config, metaType) {
-  return config.renderby === metaType || config.metaType === metaType
-}
 
 defineExpose({
   setActiveTab(tabMetaCode) {

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

@@ -1,5 +1,5 @@
 <template>
-  <ElDatePicker v-bind="{ ...attrs, ...datePickerProps}" :disabledDate="disabledDate" v-model="value">
+  <ElDatePicker v-bind="{ ...attrs, ...normalDatePickerProps}" :disabledDate="disabledDate" v-model="value">
     <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
       <slot :name="key" v-bind="scope"></slot>
     </template>
@@ -46,22 +46,38 @@ const datePickerProps = computed(() => {
   }
   return ret
 })
+const normalDatePickerProps = computed(() => {
+  const ret = {
+    ...datePickerProps.value
+  }
+  delete ret.valueFormat
+  return ret
+})
+
 const attrs = useAttrs()
 const modeValue = defineModel()
 
 const value = computed({
   get() {
-    if (isNaN(Number(modeValue.value))) {
-      return modeValue.value
-    } else {
-      if (datePickerProps.value.valueFormat === 'timestamp' || `${modeValue.value}`.length >= 13) {
-        return Number(modeValue.value)
+    let ret = modeValue.value
+    if (!isNaN(Number(modeValue.value))) {
+      if (
+        datePickerProps.value.valueFormat === 'x' ||
+        datePickerProps.value.valueFormat === 'timestamp' ||
+        `${modeValue.value}`.length >= 13
+      ) {
+        ret = Number(modeValue.value)
       }
-      return modeValue.value
     }
+    ret = dayjs(ret).toDate()
+    return ret
   },
   set(val) {
-    modeValue.value = val
+    let valueFormat = datePickerProps.value?.valueFormat
+    if (valueFormat === 'timestamp') {
+      valueFormat = 'x'
+    }
+    modeValue.value = dayjs(val).format(valueFormat)
   }
 })
 watch(value, () => {

package/src/hooks/pageConfig.js

@@ -1,4 +1,4 @@
-import { generateFormConfig, parsePageConfig } from "../utils"
+import { generateFormConfig, parsePageConfig } from "../utils/index.js"
 import { ref } from 'vue'
 import { buildInRequest } from "../utils/request"
 import { GET_SYS_PARAM_CACHE, QUERY_PAGE_CONFIG_DATA } from "../api/builtIn"
@@ -11,6 +11,11 @@ export function usePageConfig() {
   const hireRelatMapRulesRef = ref(null)
   const mapCompRef = ref(null)
   function initPageConfig({
+    components,
+    confirmInstance,
+    openChildDialogInstance,
+    buttonActions,
+    builtPolyfillReq,
     requestTraceId,
     dialogReq,
     mode,
@@ -30,6 +35,11 @@ export function usePageConfig() {
     messageCb
   }) {
     const { pageConfig, mapComp, hireRelatMapRules } = parsePageConfig({
+      components,
+      confirmInstance,
+      openChildDialogInstance,
+      buttonActions,
+      builtPolyfillReq,
       requestTraceId,
       dialogReq,
       mode,

package/src/index.jsx

@@ -3,6 +3,7 @@ import Renderer from './renderer.jsx'
 // import './style/index.scss'
 import { usePageConfig } from './hooks/pageConfig'
 import { toValidate } from './utils/valid.js'
+import { toValidate as validateByData } from './utils/validateByData.js'
 import { MODE } from "./utils/const.js"
 import { generateRequester } from "./utils/request.js"
 import { executeLoadServices, resetConfigEventInit } from "./components/helper/resolver.js"
@@ -207,6 +208,7 @@ export default {
   },
   emits: ['update:modelValue', 'rootStoreChange'],
   setup(props, { emit, attrs, expose }) {
+    const componentsRef = toRef(props, 'components')
     const configsSet = new Set()
     const dynamicMapComp = reactive({})
     const instance = getCurrentInstance()
@@ -298,6 +300,11 @@ export default {
       )
     }
     initPageConfig({
+      components: props.components,
+      confirmInstance: props.confirmInstance,
+      openChildDialogInstance: props.openChildDialogInstance,
+      buttonActions: props.buttonActions,
+      builtPolyfillReq: props.builtPolyfillReq,
       requestTraceId: props.requestTraceId,
       dialogReq: props.dialogReq,
       mode: props.mode,
@@ -320,6 +327,11 @@ export default {
 
     watch(toRef(props, 'config'), () => {
       initPageConfig({
+        components: props.components,
+        confirmInstance: props.confirmInstance,
+        openChildDialogInstance: props.openChildDialogInstance,
+        buttonActions: props.buttonActions,
+        builtPolyfillReq: props.builtPolyfillReq,
         requestTraceId: props.requestTraceId,
         dialogReq: props.dialogReq,
         mode: props.mode,
@@ -361,7 +373,7 @@ export default {
     provide('hireRelatMapRules', hireRelatMapRulesRef) // 组件对应的规则集合
 
     provide('buttonActions', props.buttonActions)
-    provide('components', toRef(props, 'components'))
+    provide('components', componentsRef)
     provide('selects', toRef(props, 'selects'))
     provide('_rootInstance', instance)
     provide('rootValue', computed({
@@ -381,13 +393,27 @@ export default {
     provide('_parentDynamicMapComp', props.parentDynamicMapComp)
     provide('_selectionsObj', props.selectionsObj) 
     provide('_polyfillConfigs', props.polyfillConfigs)
-    provide('requestTraceId', toRef(props, 'requestTraceId')) // 所有渲染器调用的接口，都需要加次参数（生哥提）
+    const requestTraceIdRef = toRef(props, 'requestTraceId')
+    provide('requestTraceId', requestTraceIdRef) // 所有渲染器调用的接口，都需要加次参数（生哥提）
 
     const rootForm = ref(null)
     provide('rootForm', rootForm)
 
     const validate = (cb) => {
-      toValidate(rootForm, cb, dynamicMapComp)
+      if (OPEN_DATA_RULES) {
+        validateByData({
+          rootConfig: props.config,
+          rootValue: props.modelValue,
+          mode: props.mode,
+          lang: props.lang,
+          messageInstance: props.messageInstance,
+          formRef:rootForm,
+          cb,
+          dynamicMapComp,
+        })
+      } else {
+        toValidate(rootForm, cb, dynamicMapComp)
+      }
     }
     provide('_validate', validate)
     expose({

package/src/resolver-web.vue

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

package/src/utils/common.js

@@ -637,6 +637,7 @@ export function assignmentPathVal(obj = {}, path, val, separator = '.') {
               const currentIdx = parseInt(match[2])
               if (!Number.isNaN(currentIdx)) {
                 !retObj[currentIdx] && (retObj[currentIdx] = {})
+                retObj = retObj[currentIdx]
               }
             }
           }

package/src/utils/lazyLoad.js

@@ -0,0 +1,69 @@
+export class LazyLoader {
+  el = null
+  io = null
+  isInit = false
+  options = {}
+  constructor(el, options) {
+    this.options = options
+    this.el = el
+    let { viewport, direction = 'vertical', threshold = '10px'} = this.options
+    let rootMargin
+    switch (direction) {
+      case 'vertical':
+        rootMargin = `${threshold} 0px`
+        break
+      case 'horizontal':
+        rootMargin = `0px ${threshold}`
+        break
+    }
+
+    try {
+      // 观察视口与组件容器的交叉情况
+      this.io = new window.IntersectionObserver(this.intersectionHandler.bind(this), {
+          rootMargin,
+          root: viewport,
+          threshold: [0, Number.MIN_VALUE, 0.01]
+      });
+      this.io.observe(el);
+    } catch (e) {
+      this.toInit()
+    }
+  }
+  intersectionHandler (entries) {
+    if (
+      // 正在交叉
+      entries[0].isIntersecting ||
+      // 交叉率大于0
+      entries[0].intersectionRatio
+    ) {
+      this.toInit()
+      this.io?.unobserve(this.el)
+    }
+  }
+  toInit () {
+    // 此时说明骨架组件即将被切换
+    this.options?.beforeInit?.()
+
+    // 此时可以准备加载懒加载组件的资源
+    this.options?.beginLoading?.()
+
+    // 由于函数会在主线程中执行，加载懒加载组件非常耗时，容易卡顿
+    // 所以在requestAnimationFrame回调中延后执行
+    this.requestAnimationFrame(() => {
+      this.isInit = true
+      this.options?.init?.()
+    })
+  }
+  requestAnimationFrame (callback) {
+    const { maxWaitingTime = 50 } = this.options
+    // 防止等待太久没有执行回调
+    // 设置最大等待时间
+    setTimeout(() => {
+      if (this.isInit) return
+      callback()
+    }, maxWaitingTime)
+
+    // 兼容不支持requestAnimationFrame 的浏览器
+    return (window.requestAnimationFrame || ((callback) => setTimeout(callback, 1000 / 60)))(callback)
+  }
+}