resolver-egretimp-plus 0.1.75 → 0.1.76

package/package.json

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

package/src/analysisComponent.jsx

@@ -9,6 +9,7 @@ import { executeEventOrchestration } from './components/helper/eventOrchestratio
 import { useRouter } from 'vue-router'
 import { onErrorCaptured } from 'vue'
 import LoadingComponent from './components/loadingComponent/LoadingComponent.vue'
+import { useConfigLoad } from './hooks/configLoad.js'
 
 export default {
   name: 'AnalysisComponent',
@@ -51,6 +52,7 @@ export default {
       delete ret.onClick
       return ret
     })
+    useConfigLoad(props.config)
     const ruleExecuter = inject('_ruleExecuter')
     const dialogReq = inject('_dialogReq', {})
     const requestTraceId = inject('requestTraceId')

package/src/components/packages-H5/CustomComponentCardH5.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed, inject, ref, resolveComponent, useAttrs } from "vue";
+import { computed, inject, onMounted, ref, resolveComponent, useAttrs, watch } from "vue";
 import Renderer from '../../renderer.jsx'
 import { commonPropsType, DISPLAY_HIDDEN, hasOwn } from '../../utils/index.js'
 
@@ -13,7 +13,7 @@ const props = defineProps({
   cardbgcolor: String,
 })
 
-const collapseLimt = 5
+const collapseLimt = ref(Number.MAX_VALUE)
 const isCollapse = ref(true)
 const attrs = useAttrs()
 const lang = inject('lang')
@@ -28,15 +28,61 @@ const cmiProps = computed(() => {
   }
 })
 
+const propCollapseLimt = computed(() => {
+  return props.config?.collapseLimt || 5
+})
+
 const pmPageMetaList = computed(() => {
-  return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot) || []
+  return props.config?.pmPageMetaList || []
+})
+
+const showPageMeteList = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN && item.hidden != '1')
 })
+
+const lastShowPageMeteItem = computed(() => {
+  return showPageMeteList.value?.length ? showPageMeteList.value[showPageMeteList.value.length - 1] : null
+})
+
 const showCollapseBtn = computed(() => {
-  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN)?.length > collapseLimt
+  return showPageMeteList.value?.length > collapseLimt.value
 })
-const showPageMeteList = computed(() => {
-  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN).slice(0, isCollapse.value ? collapseLimt : Number.MAX_VALUE)
+
+
+// 定位到最后显示的组件在折叠组件中的索引
+const lasetLimitIdx = computed(() => {
+  const limt = isCollapse.value ? collapseLimt.value : Number.MAX_VALUE
+  return pmPageMetaList.value?.findIndex(item => item == showPageMeteList.value[limt - 1])
+})
+
+// 通过监听最后一个显示组件的索引，控制那些组件隐藏（通过collapseHidden控制隐藏）
+watch(lasetLimitIdx, (val) => {
+  pmPageMetaList.value?.forEach((item, index) => {
+    item.collapseHidden = '0'
+    if (item.metaType === 'cmi-cell') {
+      item.borderHidden = '0'
+    }
+    if (val > -1) {
+      if (index > val) {
+        item.collapseHidden = '1'
+      }
+      if (index === val) {
+        if (item.metaType === 'cmi-cell') {
+          item.borderHidden = '1'
+        }
+      }
+    }
+  })
+  if (val === -1) {
+    if (lastShowPageMeteItem.value?.metaType === 'cmi-cell') {
+      lastShowPageMeteItem.value.borderHidden = '1'
+    }
+  }
+}, {
+  immediate: true
 })
+
+
 const collapseLabel = computed(() => {
   const isCh = lang?.value?.indexOf('zh') > -1
   return isCollapse.value ? (isCh ? '更多' : 'More') : (isCh ? '收起' : 'Close')
@@ -44,11 +90,24 @@ const collapseLabel = computed(() => {
 function toCollapse() {
   isCollapse.value = !isCollapse.value
 }
+
+onMounted(() => {
+  watch(() => props.config._componentLoad, (val) => {
+    if (val) {
+      collapseLimt.value = propCollapseLimt.value
+      watch(propCollapseLimt, (val) => {
+        collapseLimt.value = val
+      })
+    }
+  }, {
+    immediate: true
+  })
+})
 </script>
 <template>
-  <cmi-card v-bind="{...cmiProps, ...attrs}">
+  <cmi-card v-bind="{...attrs, ...cmiProps}">
     <div slot="content" :style="{'background-color': cmiProps.cardbgcolor}">
-      <Renderer :config="showPageMeteList" v-model="modelValue"></Renderer>
+      <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
       <div v-if="showCollapseBtn" class="collapse-wrap">
         <cmi-button type="text" size="small" @click="toCollapse">
           {{ collapseLabel }}

package/src/components/packages-H5/CustomComponentTabPaneH5.vue

@@ -2,10 +2,12 @@
 import { computed, inject, useAttrs } from 'vue'
 import Renderer from '../../renderer.jsx'
 import { commonPropsType } from '../../utils/index.js'
+import { useConfigLoad } from '../../hooks/configLoad.js'
 const lang = inject('lang')
 const props = defineProps({
   ...commonPropsType,
 })
+useConfigLoad(props.config)
 const attrs = useAttrs()
 const tabProps = computed(() => {
   return {

package/src/hooks/configLoad.js

@@ -0,0 +1,45 @@
+import { definePrivatelyProp, findComponent, NOT_LOAD_CHILD_TYPE } from "../utils"
+import { inject, onMounted, provide } from "vue"
+
+const CONFIG_LOAD_KEY = Symbol()
+export const useConfigLoad = (config) => {
+  const injectLoadFn = inject(CONFIG_LOAD_KEY) // 加载父组件传递下来的 加载完成的 回调函数
+  const loadFn = (childConfig) => {
+    const multiPmPageMetaList = config.multiPmPageMetaList
+    const pmPageMetaList = config.pmPageMetaList
+    // if (config.metaCode == 'rackRental') {
+    //   debugger
+    // }
+    if (multiPmPageMetaList && multiPmPageMetaList.length) {
+      const allLoad = multiPmPageMetaList.every(configList => configList.every(config => config._componentLoad))
+      if (allLoad) {
+        config._componentLoad = true
+        injectLoadFn?.(config)
+      }
+    } else {
+      const allLoad = pmPageMetaList.every(config => config._componentLoad)
+      if (allLoad) {
+        config._componentLoad = true
+        injectLoadFn?.(config)
+      }
+    }
+  }
+  provide(CONFIG_LOAD_KEY, loadFn)
+
+  onMounted(() => {
+    const multiPmPageMetaList = config.multiPmPageMetaList
+    const pmPageMetaList = config.pmPageMetaList
+    
+    if (
+      (
+        (!multiPmPageMetaList || multiPmPageMetaList.length === 0) &&
+        (!pmPageMetaList || pmPageMetaList.length === 0)
+      ) ||
+      config.renderby ||
+      findComponent(NOT_LOAD_CHILD_TYPE, config.metaType) !== -1
+    ) {
+      config._componentLoad = true
+      injectLoadFn?.(config)
+    }
+  })
+}

package/src/utils/const.js

@@ -15,6 +15,7 @@ export const VALUE_TYPES = {
   OBJECT: 'object',
   STRING: 'string',
 }
+export const NOT_LOAD_CHILD_TYPE = ['CustomComponentTableH5']
 export const NOT_LOG_EFFECT_TYPE = ['CustomComponentTabs', 'CustomComponentTabPane', 'CustomComponentCycleTabPane', 'CustomComponentCollapse', 'CustomComponentTabPaneH5']
 export const FORM_META_TYPE = 'CustomComponentFormLayout'
 export const FORM_META_TYPE_H5 = 'CustomComponentFormLayoutH5'