resolver-egretimp-plus 0.1.75 → 0.1.77

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "resolver-egretimp-plus",
-  "version": "0.1.75",
+  "version": "0.1.77",
   "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,20 +2,24 @@
 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 {
-    label: props?.config?.hidden == '1' ?
-      '' :
-      lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    label: lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    // label: props?.config?.hidden == '1' ?
+    //   '' :
+    //   lang.value.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
     name: props.config?.metaCode,
-    disabled: props?.config?.hidden == '1' ?
-      true :
-      props.config?.editFlag == '0'
+    disabled: props.config?.editFlag == '0'
+    // disabled: props?.config?.hidden == '1' ?
+    //   true :
+    //   props.config?.editFlag == '0'
   }
 })
 const modelValue = defineModel()

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

@@ -1,6 +1,6 @@
 <script setup>
-import { computed, inject, useAttrs } from 'vue'
-import { commonPropsType, hasOwn } from '../../utils/index.js'
+import { computed, inject, nextTick, onMounted, ref, useAttrs, watch } from 'vue'
+import { commonPropsType, getUuid, hasOwn } from '../../utils/index.js'
 import Renderer from '../../renderer.jsx'
 import CustomComponentTabPaneH5 from './CustomComponentTabPaneH5.vue'
 
@@ -8,28 +8,34 @@ const props = defineProps({
   ...commonPropsType,
 })
 
+const uuid = getUuid()
 const lang = inject('lang')
 const attrs = useAttrs()
 const modelValue = defineModel()
 const tabpanes = computed(() => {
-  return [...(props.config.pmPageMetaList || []).filter(item => item.hidden != '1'), ...(props.config.pmPageMetaList || []).filter(item => item.hidden == '1')]
+  return props.config.pmPageMetaList || []
+})
+const tabpanesOfHidden = computed(() => {
+  return tabpanes.value?.map(item => item.hidden)
 })
 
+const activeNameModel = ref(null)
 const activeNames = computed({
   get() {
-    const currentTab = tabpanes.value.find(tab => tab.defaultShowFlag == '1')
-    const currentCycleTab = tabpanes.value.find(tab => tab.currentCode)
+    const showTabpanes = tabpanes.value.filter(item => item.hidden != '1')
+    const currentTab = showTabpanes.find(tab => tab.defaultShowFlag == '1')
+    const currentCycleTab = showTabpanes.find(tab => tab.currentCode)
     if (currentTab) {
       return currentTab?.isCycle == '1' ? `${currentTab.metaCode}-0` : currentTab.metaCode
     }
     if (currentCycleTab) {
       return currentCycleTab.currentCode
     }
-    if (tabpanes.value[0]) {
-      if (assertMetaType(tabpanes.value[0], 'CustomComponentCycleTabPaneH5') || tabpanes.value[0]?.isCycle == '1') {
-        return `${tabpanes.value[0].metaCode}-0`
+    if (showTabpanes[0]) {
+      if (assertMetaType(showTabpanes[0], 'CustomComponentCycleTabPaneH5') || showTabpanes[0]?.isCycle == '1') {
+        return `${showTabpanes[0].metaCode}-0`
       } else {
-        return tabpanes.value[0].metaCode
+        return showTabpanes[0].metaCode
       }
     }
   },
@@ -54,7 +60,7 @@ const activeNames = computed({
 })
 const tabProps = computed(() => {
   return {
-    activekey: activeNames.value,
+    activekey: activeNameModel.value || activeNames.value,
     sticky: props.config?.sticky == '1',
     offsettop: (props.config?.offsetTop || '0') + 'vw',
     type: props.config.displayType || props.config.tabType,
@@ -90,13 +96,45 @@ const customClass = computed(() => {
 function assertMetaType(config, metaType) {
   return config.renderby === metaType || config.metaType === metaType
 }
+
+onMounted(() => {
+  // 控制 nav 头 可以支持设置hidden的时候的效果 ====start====
+  watch(() => props.config._componentLoad, (val) => {
+    setTimeout(() => {
+      if (val) {
+        watch(tabpanesOfHidden, (hids) => {
+          const navList = document.getElementById(uuid)?.shadowRoot?.querySelectorAll('cmi-tab-nav')
+          hids?.forEach((hidden, idx) => {
+            if (navList?.[idx]?.style) {
+              if (hidden == '1') {
+                navList[idx].style.display = 'none'
+              } else {
+                navList[idx].style.display = 'inline-flex'
+              }
+            }
+          })
+
+          activeNameModel.value = 'void'
+          nextTick(() => {
+            activeNameModel.value = null
+          })
+        }, {
+          immediate: true
+        })
+      }
+    }, 300);
+  }, {
+    immediate: true
+  })
+  // 控制 nav 头 可以支持设置hidden的时候的效果 ====end====
+})
 </script>
 
 <template>
-  <cmi-tabs :class="customClass" v-bind="{...attrs, ...tabProps}">
-    <CustomComponentTabPaneH5
-      v-for="tabpane in tabpanes" :config="tabpane" :key="tabpane.metaId"
-    >
+  <cmi-tabs :id="uuid" :class="customClass" v-bind="{...attrs, ...tabProps}">
+    <!-- <Renderer :config="tabpanes" v-model="modelValue"></Renderer> -->
+     <!-- 只能用下面这种方式写，移动端这个组件 内容嵌套多层级，就显示不出来 -->
+    <CustomComponentTabPaneH5 v-for="tabpane in tabpanes" :config="tabpane" :key="tabpane.metaId">
       <Renderer :config="tabpane?.pmPageMetaList || []" :additionConfigs="[tabpane]" :modelValue="getValue(tabpane.metaCode)" @update:modelValue="(val) => { onUpdateModelValue(val, tabpane.metaCode) }"></Renderer>
     </CustomComponentTabPaneH5>
   </cmi-tabs>

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'