resolver-egretimp-plus 0.0.44 → 0.0.46

package/package.json

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

package/src/analysisComponent.jsx

@@ -201,7 +201,8 @@ export default {
         lang,
         rootValue,
         dynamicMapComp,
-        props
+        props,
+        messageInstance: messageInstance?.value
       }) // 生成formItem（）的辅助函数
       return formItemPolyfill(
         <currentComponent.value

package/src/components/cmiFormItem/index.js

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

package/src/components/cmiFormItem/src/index.vue

@@ -0,0 +1,106 @@
+<script setup>
+import { computed, useAttrs } from 'vue';
+
+const props = defineProps({
+  messageInstance: {
+    type: [Object, Function],
+    default: () => null
+  },
+  config: [Object, Array],
+  lang: String,
+  labelWidth: [String, Number]
+})
+const attrs = useAttrs()
+const label = computed(() => {
+  if (props.config.labelHidden == '1' || props.config.labelWidth === 0 || props.config.labelWidth === '0') {
+    return ''
+  }
+  return (props.lang.indexOf('zh') > -1 ? props.config.metaNameZh : props.config.metaNameEn) || ''
+})
+const labelWidth = computed(() => {
+  if (!!props.config.labelPosition) {
+    return props.config.labelPosition
+  }
+  return 'left'
+})
+function handleClickTip() {
+  messageInstance?.text(props.lang.indexOf('zh') > -1 ? props.config.hintContentZh : props.config.hintContentEn)
+}
+
+</script>
+<template>
+  <cmi-form-item v-bind="attrs" class="custom-form-item-h5"
+    :class="[{'--required': props.config.requiredFlag == '1', '--label-hide': !labelWidth, 
+              '--label-text-left': labelPosition === 'left', '--label-text-right': labelPosition === 'right'
+            }, customClass]"
+    :labelWidth="props.labelWidth"
+  >
+    <div slot="label" class="custom-label--formItem">
+      <div class="custom-label-content">
+        <span class="label-required" v-if="props.config.requiredFlag == '1'">*</span>
+        <span class="label-text">{{ label }}</span>
+        <span class="label-tip" v-if="props.config.hintFlag == '1'" @click="handleClickTip"><cmi-icon-question-circle size="14"/></span>
+      </div>
+    </div>
+    <slot></slot>
+  </cmi-form-item>
+</template>
+<style lang="scss" scoped>
+cmi-form-item {
+  position: relative;
+
+  .custom-label--formItem {
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+    // height: 16px;
+    
+    .custom-label-content {
+      width: 100%;
+      display: -webkit-box;
+      line-height: 16px;
+      overflow: hidden; 
+      text-overflow: ellipsis;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-align: left;
+      .label-required {
+        color: #f5222d;
+        position: relative;
+        right: 3px;
+        top: 3px;
+      }
+      .label-text {
+        padding-right: 3px;
+      }
+      .label-tip {
+        position: absolute;
+        right: 16px;
+        top: 2px;
+      }
+    }
+  }
+
+  &.--label-text-left {
+    .custom-label--formItem {
+      .custom-label-content {
+        text-align: left;
+      }
+    }
+  }
+  
+  &.--label-text-right {
+    .custom-label--formItem {
+      .custom-label-content {
+        text-align: right;
+      }
+    }
+  }
+  
+  &.--required {
+    .custom-label-content {
+      padding-left: 3px;
+    }
+  }
+}
+</style>

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/CmiCheckbox.vue

@@ -30,16 +30,6 @@ const checkboxProps = computed(() => {
 const attrs = useAttrs()
 const modeValue = defineModel()
 
-const aa = [
-  {
-    columnValue: 'aaa',
-    columnDesc_zh: 'aaa',
-  },
-  {
-    columnValue: 'bbb',
-    columnDesc_zh: 'bbb',
-  }
-]
 const onChange = ({ detail }) => {
   modeValue.value = detail.value
 }
@@ -49,11 +39,11 @@ const onSigleChange = ({ detail }) => {
 </script>
 
 <template>
-  <cmi-checkbox-group :value="modeValue" @change="onChange" v-if="props.options && props.options.length" v-bind="{...checkboxGroupProps, ...attrs}">
+  <cmi-checkbox-group :value="modeValue" @change="onChange" v-if="props.options && props.options.length" v-bind="{...attrs, ...checkboxGroupProps}">
     <cmi-checkbox 
       class="mr-20"
       v-for="option in props.options" :key="option.columnValue"
-      :disabled="option.columnStatus == '0' || option.columnStatus == '2'"
+      :disabled="props.disabled || option.columnStatus == '0' || option.columnStatus == '2'"
       :name="option.columnValue" :label="lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc"
     >
       {{lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc}}

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

@@ -9,7 +9,7 @@ const props = defineProps({
 const inputProps = computed(() => {
   return {
     label: props.config?.label,
-    type: props.config?.type,
+    type: props.config?.displayType,
     name: props.config?.name,
     placeholder: lang?.value?.indexOf('zh') > -1 ? props.config?.defPlacehold : props.config?.defPlaceholdEn,
     min: props.config?.min,

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

@@ -54,7 +54,7 @@ const selectProps = computed(() => {
     multiple: isMutiple.value,
     placeholder: lang?.value?.indexOf('zh') > -1 ? props.config?.defPlacehold : props.config?.defPlaceholdEn,
     'max-options-visible': props.config?.['max-options-visible'] || props.config?.maxOptionsVisible,
-    required: props.required,
+    // required: props.required,
   }
 })
 const clear = () => {

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,12 +12,15 @@ 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(() => {
   return {
-    title: lang?.value?.indexOf('zh') ? props.config?.metaNameZh : props.config?.metaNameEn,
-    subtitle: lang?.value?.indexOf('zh') ? props.config.subtitleZh : props.config.subtitleEn,
+    title: lang?.value?.indexOf('zh') > -1 ? props.config?.metaNameZh : props.config?.metaNameEn,
+    subtitle: lang?.value?.indexOf('zh') > -1 ? props.config.subtitleZh : props.config.subtitleEn,
     content: props.content,
     noborder: props.noborder == '1' ? true : false,
     cardbgcolor: props.cardbgcolor || '#FAFAFA',
@@ -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-H5/CustomComponentTableH5.vue

@@ -16,7 +16,7 @@ const tableProps = computed(() => {
     card: props.config?.displayType === 'card',
     display: props.config?.display,
     open: props.config?.open === '1',
-    showlandscape: props.config?.showlandscape === '1',
+    showlandscape: props.config?.showLandscape === '1',
   }
 })
 

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

@@ -367,7 +367,7 @@ export default {
             {
               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/packages-web/ElInput.vue

@@ -12,6 +12,9 @@ const inputProps = computed(() => {
     total[key] = props[key]
     return total
   }, {})
+  if (props.config?.icon) {
+    ret.suffixIcon = props.config?.icon
+  }
   return ret
 })
 const attrs = useAttrs()

package/src/utils/render.jsx

@@ -1,6 +1,6 @@
 import { getCodeMapRules } from '../rules/rulesDriver.js'
 import { resolveAssetComponents, findComponent, compareComponet, normalPixel, isPlainObject, hasOwn, isFnStr, normalCapitalizeComponent, capitalize, camelize, formatDate} from './common.js'
-import { resolveComponent, inject } from 'vue'
+import { resolveComponent, inject, defineAsyncComponent } from 'vue'
 import CustomComponentColH5 from '../components/packages-H5/CustomComponentColH5.vue'
 import {
   commonPropsType,
@@ -26,6 +26,7 @@ import { isArray, isFunction, isString } from './is.js'
 import CustomComponentPlain from '../components/packages-web/CustomComponentPlain.vue'
 import QuestionFilled from '../components/icons/question-filled.vue'
 import { dispatchClickEvent, dispatchClickEvents, getTableConfig } from '../components/helper/eventOrchestration.js'
+import CmiFormItem from '../components/cmiFormItem'
 
 // 解析配置中的defStyle属性
 export function parseDefStyle(defStyle) {
@@ -166,9 +167,6 @@ export function normalConfig({
   }
   
   let extendAttrObj = parseExtendAttr(config)
-  if (metaType == 'cmi-card') {
-    debugger
-  }
   let extendObj = {
     removeCol: findComponent(NOT_NEED_COL_ITEM_META_TYPE, extendAttrObj.renderby) !== -1 || findComponent(NOT_NEED_COL_ITEM_META_TYPE, metaType) !== -1,
     needformItem: (findComponent(NOT_NEED_FORM_ITEM_META_TYPE, extendAttrObj.renderby) !== -1 || findComponent(NOT_NEED_FORM_ITEM_META_TYPE, metaType) !== -1) ? false : needformItem, // 表示这个配置项对应的渲染组件是否需要formItem进行包装 移动端是cmi-form-item
@@ -582,20 +580,27 @@ function generateFormItemPc (config, lang, compProps, params,) {
   }
 }
 
-function generateFormItemH5(config, lang, compProps, params) {
+function generateFormItemH5(config, lang, compProps, params = {}) {
+  const { messageInstance } = params
+  const props = {
+    config,
+    lang,
+    messageInstance,
+    hidemessage: config?.hidemessage == '1' ? true : false,
+    hideasterisk: config?.hideasterisk == '1' ? true : false,
+    ...getFormItemExtendProps(config, lang, params),
+  }
+  // labelWidth 需要特殊处理
+  if (hasOwn(config, 'labelWidth')) {
+    props.labelWidth = props.labelWidth && `${props.labelWidth}` !== '-1' ? props.labelWidth : undefined
+  }
+
   return node => {
     if (!config.needformItem && !config.showFormItem) {
       return node
     }
-    const props = {
-      label: lang.indexOf('zh') > -1 ? config.metaNameZh : config.metaNameEn,
-      hidemessage: config?.hidemessage == '1' ? true : false,
-      hideasterisk: config?.hideasterisk == '1' ? true : false,
-      ...getFormItemExtendProps(config, lang, params),
-    }
-    
     return (
-      <cmi-form-item class="custom-form-item-h5" {...props}>{node}</cmi-form-item>
+      <CmiFormItem {...props}>{node}</CmiFormItem>
     )
   }
 }