resolver-egretimp-plus 0.0.45 → 0.0.47

package/package.json

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

package/scripts/webpack.config.js

@@ -80,7 +80,9 @@ module.exports = {
     '@element-plus/icons-vue': '@element-plus/icons-vue',
     'element-plus/es/components/icon/index.mjs': 'element-plus/es/components/icon/index.mjs',
     'element-plus/es/constants/index.mjs': 'element-plus/es/constants/index.mjs',
-    'element-plus/es/utils/index.mjs': 'element-plus/es/utils/index.mjs'
+    'element-plus/es/utils/index.mjs': 'element-plus/es/utils/index.mjs',
+    'element-plus/es/locale/lang/zh-cn': 'element-plus/es/locale/lang/zh-cn',
+    'element-plus/es/locale/lang/en': 'element-plus/es/locale/lang/en'
   },
   externalsType: 'module',
   experiments: {

package/src/components/childDialog/src/index.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { computed, defineAsyncComponent, ref } from 'vue';
 import { ElDialog } from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
 const Resolver = defineAsyncComponent(() => import('../../../resolver-web.vue'))
 
 const props = defineProps({
@@ -38,6 +40,9 @@ const rootOptionComp = ref({})
 const dialogHeight = computed(() => {
   return rootOptionComp.value?.widgetHeight
 })
+const locale = computed(() => {
+  return props.lang?.indexOf('zh') > -1 ? zhCn : en
+})
 const dialogWidth = computed(() => {
   return rootOptionComp.value?.widgetWidth
 })
@@ -58,24 +63,26 @@ defineExpose({
 })
 </script>
 <template>
-  <ElDialog class="open-child-frame" v-model="dialogVisible"
-    :style="dialogStyle"
-    :close-on-click-modal="false" :width="dialogWidth"
-  >
-    <div>
-    </div>
-    <Resolver v-if="dialogVisible" ref="resolverRef"
-      @loadedConfigCompeted="loadedConfigCompeted"
-      @rootStoreChange="rootStoreChange"
-      v-model="formData"
-      :busiIdentityId="busiIdentityId"
-      :lang="props.lang"
-      :loadEvnetsReq="props.loadEvnetsReq"
-      :polyfillConfigs="props.polyfillConfigs"
-      :axiosInstance="props.axiosInstance"
-      :axiosConfig="props.axiosConfig"
-    ></Resolver>
-  </ElDialog>
+  <ElConfigProvider :locale="locale">
+    <ElDialog class="open-child-frame" v-model="dialogVisible"
+      :style="dialogStyle"
+      :close-on-click-modal="false" :width="dialogWidth"
+    >
+      <div>
+      </div>
+      <Resolver v-if="dialogVisible" ref="resolverRef"
+        @loadedConfigCompeted="loadedConfigCompeted"
+        @rootStoreChange="rootStoreChange"
+        v-model="formData"
+        :busiIdentityId="busiIdentityId"
+        :lang="props.lang"
+        :loadEvnetsReq="props.loadEvnetsReq"
+        :polyfillConfigs="props.polyfillConfigs"
+        :axiosInstance="props.axiosInstance"
+        :axiosConfig="props.axiosConfig"
+      ></Resolver>
+    </ElDialog>
+  </ElConfigProvider>
 </template>
 
 <style lang="scss">

package/src/components/helper/eventOrchestration.js

@@ -128,9 +128,10 @@ export function openDailg({
   const reqData = getReqData(pagePopupMap.inParamMappingList || [], {dynamicMapComp, dynamicMapCompKeys, dynamicHireRelat})
 
   const outParamMappingList = pagePopupMap?.outParamMappingList?.map(item => {
+    const orignParamArr = item.orignParam ? item.orignParam.split('->') : []
     return {
       ...item,
-      orignParam: item.orignParam ? item.orignParam.split('->')[0] : ''
+      orignParam: item.orignParam ? orignParamArr[orignParamArr.length - 1] : ''
     }
   }) || []
 
@@ -231,6 +232,11 @@ export async function executeDataValid(validConfig, { dynamicMapComp, mixinServi
   })
 }
 
+function closePage() {
+  // window?.close()
+  // window?.history?.back()
+}
+
 export async function executeEventOrchestration({props, axiosInstance, rootValue, confirmInstance, dynamicMapComp, messageInstance, openChildDialog, messageCb, lang, appContext } = {}) {
   const lcpPageRuleVOLis = props.config?.lcpPageRuleVOList || []
   const PageServiceMapVOList = props.config.lcpPageServiceMapVOList || []

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

@@ -2,7 +2,6 @@
 import { defineProps, inject, getCurrentInstance, computed, useAttrs } from 'vue'
 import { commonPropsType } from '../../utils/index.js'
 import { useRoute } from 'vue-router'
-import { dispatchClickEvents } from '../helper/eventOrchestration.js';
 
 const appContext = getCurrentInstance()?.appContext
 
@@ -41,7 +40,6 @@ const label = computed(() => {
 const route = useRoute()
 const buttonActions = inject('buttonActions', {})
 
-const messageInstance = inject('_messageInstance')
 const dynamicMapComp = inject('dynamicMapComp')
 const hireRelatMapRules = inject('hireRelatMapRules')
 const components = inject('components')
@@ -49,12 +47,11 @@ const selects = inject('selects')
 const rootValue = inject('rootValue')
 const dataLoad = inject('dataLoad')
 const rootForm = inject('rootForm')
-const _axiosInstance = inject('_axiosInstance')
 const routeQuery= route?.query
 
 
-const buttonAction = () => {
-  attrs?.onClick?.(e) // 如果配置中有点击事件
+const buttonAction = (...arg) => {
+  attrs?.onClick?.(...arg) // 如果配置中有点击事件
   const actionKey = props.config?.clickActionKey || props.config?.buttonActionKey || props.config?.hireRelat
   const actionFn = buttonActions[actionKey]
   actionFn && actionFn(props, {
@@ -67,16 +64,6 @@ const buttonAction = () => {
     rootForm,
     routeQuery
   }, appContext)
-  
-  const PageServiceMapVOList = props.config.lcpPageServiceMapVOList
-  if (PageServiceMapVOList?.length) {
-    dispatchClickEvents({
-      serviceList: PageServiceMapVOList,
-      axiosInstance: _axiosInstance,
-      reqData: rootValue?.value,
-      messageInstance
-    })
-  }
 }
 </script>
 

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

@@ -1,7 +1,7 @@
 <script setup>
-import { computed, inject, resolveComponent, useAttrs } from "vue";
+import { computed, inject, ref, resolveComponent, useAttrs } from "vue";
 import Renderer from '../../renderer.jsx'
-import { commonPropsType, hasOwn } from '../../utils/index.js'
+import { commonPropsType, DISPLAY_HIDDEN, hasOwn } from '../../utils/index.js'
 
 const modelValue = defineModel()
 const props = defineProps({
@@ -12,6 +12,9 @@ const props = defineProps({
   noborder: [Boolean, String],
   cardbgcolor: String,
 })
+
+const collapseLimt = 5
+const isCollapse = ref(true)
 const attrs = useAttrs()
 const lang = inject('lang')
 const cmiProps = computed(() => {
@@ -27,17 +30,35 @@ const cmiProps = computed(() => {
 const pmPageMetaList = computed(() => {
   return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot) || []
 })
-
+const showCollapseBtn = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN)?.length > collapseLimt
+})
+const showPageMeteList = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN).slice(0, isCollapse.value ? collapseLimt : Number.MAX_VALUE)
+})
+const collapseLabel = computed(() => {
+  const isCh = lang?.value?.indexOf('zh') > -1
+  return isCollapse.value ? (isCh ? '更多' : 'More') : (isCh ? '收起' : 'Close')
+})
+function toCollapse() {
+  isCollapse.value = !isCollapse.value
+}
 </script>
 <template>
-  <div style="">
-
-  </div>
   <cmi-card v-bind="{...cmiProps, ...attrs}">
     <div slot="content">
-      <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+      <Renderer :config="showPageMeteList" v-model="modelValue"></Renderer>
+      <div v-if="showCollapseBtn" class="collapse-wrap">
+        <cmi-button type="text" size="small" @click="toCollapse">
+          {{ collapseLabel }}
+        </cmi-button>
+      </div>
     </div>
   </cmi-card>
 </template>
 <style lang="scss">
+.collapse-wrap {
+  display: flex;
+  justify-content: end;
+}
 </style>

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

@@ -1,12 +1,14 @@
 <script setup>
 import Renderer from '../../renderer.jsx'
-import { computed, inject, useAttrs, defineEmits, defineProps } from 'vue'
-import { commonPropsType } from '../../utils/index.js'
+import { computed, inject, useAttrs, defineEmits, defineProps, ref } from 'vue'
+import { commonPropsType, DISPLAY_HIDDEN } from '../../utils/index.js'
 
 defineOptions({
   inheritAttrs: false
 })
 
+const collapseLimt = 5
+const isCollapse = ref(true)
 const modelValue = defineModel()
 const attrs = useAttrs()
 const lang = inject('lang')
@@ -25,13 +27,46 @@ const collapseProps = computed(() => {
 const pmPageMetaList = computed(() => {
   return props.config?.pmPageMetaList?.filter(item => !item.collapseSlot) || []
 })
+const showCollapseBtn = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN)?.length > collapseLimt
+})
+const showPageMeteList = computed(() => {
+  return pmPageMetaList.value.filter(item => item.displayType != DISPLAY_HIDDEN).slice(0, isCollapse.value ? collapseLimt : Number.MAX_VALUE)
+})
+const collapseLabel = computed(() => {
+  const isCh = lang?.value?.indexOf('zh') > -1
+  return isCollapse.value ? (isCh ? '更多' : 'More') : (isCh ? '收起' : 'Close')
+})
+function toCollapse() {
+  isCollapse.value = !isCollapse.value
+}
 </script>
 
 <template>
   <cmi-collapse v-bind="{...attrs, ...collapseProps}">
-    <Renderer :config="pmPageMetaList" v-model="modelValue"></Renderer>
+    <div class="render-wrap">
+      <Renderer :config="showPageMeteList" v-model="modelValue"></Renderer>
+    </div>
+    <div v-if="showCollapseBtn" class="collapse-wrap">
+      <cmi-button type="text" size="small" @click="toCollapse">
+        {{ collapseLabel }}
+      </cmi-button>
+    </div>
   </cmi-collapse>
 </template>
 
 <style lang="scss">
+.render-wrap {
+  div:last-child {
+    cmi-cell {
+      &::after {
+        display: none;
+      }
+    }
+  }
+}
+.collapse-wrap {
+  display: flex;
+  justify-content: end;
+}
 </style>

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

@@ -46,7 +46,6 @@ const reserveBottomMargin = computed(() => {
 </script>
 <style lang="scss">
 .custom-component-row {
-  width: 100%;
   .el-col {
     & > .el-form-item {
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <component :is="component" :class="[component === ElCard ? 'is-card' : '']" class="standard-wrap custom-component-collapse" v-bind="{...componentProps, ...attrs}">
+  <component :is="component" class="standard-wrap" v-bind="{...componentProps, ...attrs}">
     <ElCollapse v-bind="{...collapseProps}" :class="collapseClass"  v-model="activeNames">
       <ElCollapseItem v-bind="collapseItemProps" >
         <template #title>
@@ -93,7 +93,7 @@ const activeNames = computed({
 })
 
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .collapge-slot-title {
   display: flex;
   justify-content: space-between;
@@ -112,72 +112,4 @@ const activeNames = computed({
     }
   }
 }
-.not-wrap-border {
-  &.el-collapse {
-    border-top: none;
-    border-bottom: none;
-  }
-}
-</style>
-<style lang="scss">
-// 配置被包裹的一层样式
-.standard-wrap {
-  box-sizing: border-box;
-}
-.custom-component-collapse {
-  .el-collapse-item__wrap, .el-collapse-item__header {
-    border-bottom: none;
-    &::before {
-      display: none;
-    }
-  }
-  .el-collapse-item__wrap {
-    overflow: none;
-  }
-  .el-collapse-item {
-    position: relative;
-    &::after {
-      content: "";
-      display: block;
-      position: absolute;
-      width: 100%;
-      bottom: 0;
-      left: 0;
-      height: 1px;
-      background-color: #d0d3d6;
-      // margin-bottom: var(--prmary-marign);
-    }
-    .el-collapse-item__content {
-      & > .el-row {
-        > .el-col {
-          &:last-child {
-            & > .el-form-item {
-              margin-bottom: 24px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .el-collapse-item__arrow {
-    font-size: 16px;
-    color: #646A73;
-    svg path {
-      d: path("M 338.752 104.704 a 64 64 0 0 0 0 90.496 l 316.8 316.8 l -316.8 316.8 a 64 64 0 0 0 90.496 90.496 l 362.048 -362.048 a 64 64 0 0 0 0 -90.496 L 429.248 104.704 a 64 64 0 0 0 -90.496 0 Z");
-    }
-  }
-  .el-collapse-item__content {
-    .el-tabs {
-      margin-right: 16px;
-      margin-bottom: 16px;
-    }
-  }
-}
-.underline-hidden {
-  .el-collapse-item {
-    &::after {
-      display: none;
-    }
-  }
-}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <ElRow class="custom-component-row" :class="classRef" v-bind="{...elRowProps, ...attrs}">
+  <ElRow class="custom-component-row" :class="classRef" v-bind="{...attrs, ...elRowProps}">
     <Renderer :config="pmPageMetaList" v-model="props.refValue.value"></Renderer>
   </ElRow>
 </template>
@@ -22,7 +22,6 @@ const elRowProps = computed(() => {
   }, {})
 })
 const attrs = useAttrs()
-
 const classRef = computed(() => {
   return {
     'clear-right-margin': !reserveRightMargin.value,
@@ -44,7 +43,6 @@ const reserveBottomMargin = computed(() => {
 </script>
 <style lang="scss">
 .custom-component-row {
-  width: 100%;
   .el-col {
     & > .el-form-item {
     }

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

@@ -360,14 +360,14 @@ export default {
           <ElTable {...tableProps.value} {...tableEvents}
             ref={(e) => {tableRef.value = e}}
             highlight-current-row={selectable.value || tableProps.value?.highlightCurrentRow ? true : false}
-            onCurrentChange={selectable.value ? currentChange : () => {}}
+            onCurrentChange={selectable.value || tableProps.value?.highlightCurrentRow ? currentChange : () => {}}
             data={[...(props.refValue.value || []), ...totalRow.value]}
             onSelectionChange={handleSelectionChange}
           >
             {
               tableColumnConfigs.value.map((columnConfg, configIdx) => {
                 return columnConfg.displayType == DISPLAY_HIDDEN ? null : (
-                  <ElTableColumn key={columnConfg.requiredFlag} {...getTableColumnProps(columnConfg, configIdx)}>
+                  <ElTableColumn key={columnConfg.requiredFlag + columnConfg.metaCode} {...getTableColumnProps(columnConfg, configIdx)}>
                     {{
                       header: () => (
                         <span className='head-span' title={lang.value.indexOf('zh') > -1 ? columnConfg.metaNameZh : columnConfg.metaNameEn}>

package/src/components/styles/CustomComponenTable.scss

@@ -6,7 +6,7 @@
 .custom-component-table {
   --boder-radius: 4px;
   border-radius: var(--boder-radius);
-  width: 100%;
+  // width: 100%;
   .el-table, &.el-table {
     --el-table-header-bg-color: #f5f6f7;
     --el-table-header-text-color: #646a73;

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

@@ -1,16 +1,104 @@
+@import "./common.scss";not-wrap-border
 
-.el-collapse {
-  --el-collapse-header-height: 22px;
-  --el-collapse-header-font-size: 14px;
-  // margin-bottom: var(--prmary-marign);
-  .el-collapse-item__header {
-    padding-bottom: 12px;
-    box-sizing: content-box;
+// 配置被包裹的一层样式
+.standard-wrap {
+  box-sizing: border-box;
+}
+.CustomComponentCollapse {
+  .el-collapse {
+    --el-collapse-header-height: 22px;
+    --el-collapse-header-font-size: 14px;
+    // margin-bottom: var(--prmary-marign);
+    .el-collapse-item__header {
+      padding-bottom: 12px;
+      box-sizing: content-box;
+    }
+    .el-collapse-item__content {
+      padding-bottom: 0;
+    }
+    .el-collapse-item__wrap {
+      margin-right: calc(var(--prmary-marign) - var(--prmary-marign) * 2);
+    }
   }
-  .el-collapse-item__content {
-    padding-bottom: 0;
+
+  .el-collapse-item__wrap, .el-collapse-item__header {
+    border-bottom: none;
+    &::before {
+      display: none;
+    }
   }
   .el-collapse-item__wrap {
-    margin-right: calc(var(--prmary-marign) - var(--prmary-marign) * 2);
+    overflow: none;
+  }
+  .el-collapse-item {
+    position: relative;
+    &::after {
+      content: "";
+      display: block;
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      left: 0;
+      height: 1px;
+      background-color: #d0d3d6;
+      // margin-bottom: var(--prmary-marign);
+    }
+    .el-collapse-item__content {
+      & > .el-row {
+        > .el-col {
+          &:last-child {
+            & > .el-form-item {
+              margin-bottom: 24px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .el-collapse-item__arrow {
+    font-size: 16px;
+    color: #646A73;
+    svg path {
+      d: path("M 338.752 104.704 a 64 64 0 0 0 0 90.496 l 316.8 316.8 l -316.8 316.8 a 64 64 0 0 0 90.496 90.496 l 362.048 -362.048 a 64 64 0 0 0 0 -90.496 L 429.248 104.704 a 64 64 0 0 0 -90.496 0 Z");
+    }
+  }
+  .el-collapse-item__content {
+    @include nestMargin
+  }
+
+  .el-collapse-item__arrow {
+    margin-right: 0;
+  }
+}
+
+.CustomComponentCollapse:first-child {
+  margin-bottom: 12px;
+}
+.CustomComponentCollapse + .CustomComponentCollapse {
+  margin-bottom: 12px;
+}
+
+.CustomComponentCollapse.is-card:first-child {
+  margin-bottom: 16px;
+}
+.CustomComponentCollapse.is-card + .CustomComponentCollapse.is-card {
+  margin-bottom: 16px;
+}
+
+// 加权
+.CustomComponentCollapse.CustomComponentCollapse.CustomComponentCollapse:last-child {
+  margin-bottom: 0;
+}
+.underline-hidden {
+  .el-collapse-item {
+    &::after {
+      display: none;
+    }
+  }
+}
+.not-wrap-border {
+  &.el-collapse {
+    border-top: none;
+    border-bottom: none;
   }
 }

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

@@ -0,0 +1,12 @@
+@mixin nestMargin {
+  & > div {
+    & > .CustomComponentTable,
+    & > .CustomComponentCollapse,
+    & > .CustomComponentRow {
+      & > div {
+        margin-right: 16px;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,42 @@
+
+// 组件弹框样式定义调整
+.custom-component-dialog {
+  padding-top: 0px;
+  padding-bottom: 0;
+  
+  .el-dialog__header {
+    display: none;
+  }
+  .el-dialog__body {
+    height: 100%;
+    .header {
+      line-height: 46px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #1F2329;
+    }
+    .content {
+      height: 100%;
+      box-sizing: border-box;
+      // .el-scrollbar__wrap {
+      //   overflow-x: hidden;
+      // }
+      // .is-horizontal {
+      //   display: none;
+      // }
+    }
+    .footer {
+      height: 68px;
+      text-align: right;
+      overflow: hidden;
+      .dialog-footer {
+        margin-top: 16px;
+      }
+    }
+  }
+  &.el-dialog footer {
+    position: initial;
+    transform: none;
+    padding: 0;
+  }
+}

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

@@ -40,3 +40,4 @@
 @import './tabs.scss';
 @import './tree.scss';
 @import './steps.scss';
+@import './dialog.scss'

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

@@ -1,4 +1,6 @@
 
+@import "./common.scss";
+
 .resolver-tabs {
   // 这个是渲染器里面tabs
   display: block;
@@ -69,4 +71,12 @@
       border: none;
     }
   }
+}
+.CustomComponentTabs {
+  .el-tabs__content {
+    margin-right: -16px;
+    .el-tab-pane {
+      @include nestMargin
+    }
+  }
 }