resolver-egretimp-plus 0.0.276 → 0.0.278

package/package.json

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

package/src/analysisComponent.jsx

@@ -1,5 +1,5 @@
 import { computed, defineAsyncComponent, getCurrentInstance, inject, onBeforeMount, provide, ref, watch } from 'vue'
-import { commonPropsType, definePrivatelyProp, EXECTE_CLICK_EVENT_COMPONENTS, findComponent, getComponentPropsKeys, hasOwn, isPlainObject } from './utils/index.js'
+import { commonPropsType, definePrivatelyProp, EXECTE_CLICK_EVENT_COMPONENTS, findComponent, getComponentPropsKeys, getComponentSolt, hasOwn, isPlainObject } from './utils/index.js'
 import { useVmodels } from './hooks/index.js'
 import { getRenderComponentProps, generateFormItemPolyfill } from './utils/index.js'
 import rulesDriver from './rules/rulesDriver'
@@ -308,7 +308,11 @@ export default {
           {...componentProps}
           {...compProps}
           {...vModelObjs}
-        ></currentComponent.value>
+        >
+          {
+            getComponentSolt({config: props.config})
+          }
+        </currentComponent.value>
       )
     }
   }

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

@@ -134,9 +134,4 @@ function toCollapse() {
 .CustomComponentCollapseH5.CustomComponentCollapseH5.CustomComponentCollapseH5:last-child {
   margin-bottom: 0;
 }
-.CustomComponentTabsH5 {
-  .CustomComponentCollapseH5 {
-    margin-bottom: 0;
-  }
-}
 </style>

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

@@ -229,7 +229,8 @@ onMounted(() => {
   watch(() => {
     return {
       val: normalTableData.value,
-      pageNum: page.pageNum
+      pageNum: page.pageNum,
+      collapseHidden: props?.config?.collapseHidden
     }
   }, ({ val }) => {
     try {

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

@@ -66,10 +66,21 @@ const onUpdateModelValue = (val, code) => {
   }
 }
 
+const gap = computed(() => {
+  return props.config.gap ?? '1'
+})
+
+const customClass = computed(() => {
+  return {
+    "custom-component-tabs-h5": true,
+    "--gap": gap.value == '1'
+  }
+})
+
 </script>
 
 <template>
-  <cmi-tabs class="custom-component-tabs-h5" v-bind="{...attrs, ...tabProps}">
+  <cmi-tabs :class="customClass" v-bind="{...attrs, ...tabProps}">
     <CustomComponentTabPaneH5 
       v-for="tabpane in tabpanes" :config="tabpane" :key="tabpane.metaId"
     >
@@ -85,3 +96,24 @@ const onUpdateModelValue = (val, code) => {
   // }
 }
 </style>
+
+<style lang="scss">
+.CustomComponentTabsH5 {
+  margin-bottom: 16px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+  .CustomComponentCollapseH5 {
+    margin-bottom: 0;
+  }
+  .--gap {
+    --cmi-tabs-background-color: transparent;
+    .CustomComponentCollapseH5 {
+      margin-bottom: 16px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

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

@@ -7,16 +7,20 @@
     <ElRow>
       <Renderer :config="(props.config.pmPageMetaList || []).filter(config => !config.collapseSlot)" v-model="props.refValue.value"></Renderer>
     </ElRow>
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
   </TabPane>
 </template>
 <script setup>
 import { ElTabPane, ElRow } from 'element-plus'
 import Renderer from '../../renderer.jsx'
-import { computed, inject, useAttrs } from 'vue'
+import { computed, inject, useAttrs, useSlots } from 'vue'
 import { commonPropsType } from '../../utils/index.js'
 import { TabPane } from '../tabs'
 import { h } from 'vue'
 
+const slots = useSlots()
 const props = defineProps({
   ...commonPropsType,
   ...TabPane.props,

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

@@ -1,17 +1,21 @@
 <template>
   <Tabs :class="[`tabs-level-${level}`, isHeaderAuto ? 'tabpane-auto-header' : '',  fullBorder ? 'full-border' : '']" v-bind="transTabsProps" v-model="activeNames">
     <Renderer :config="tabpanes" v-model="props.refValue.value"></Renderer>
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
   </Tabs>
 </template>
 <script setup>
 import { ElTabs } from 'element-plus'
 import Tabs from '../tabs'
 import Renderer from '../../renderer.jsx'
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useSlots } from 'vue'
 import { commonPropsType, hasOwn } from '../../utils/index.js'
 
 // import * as lib from 'element-plus/es/utils/index.mjs'
 
+const slots = useSlots()
 const props = defineProps({
   ...ElTabs.props,
   ...commonPropsType,

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

@@ -1,11 +1,14 @@
 <template>
   <ElButton @click.stop="buttonAction" v-bind="{...calcAttrs, ...calcPorps}">
     {{label}}
+    <template v-for="(_, keyaa) in slots" :key="keyaa" v-slot:[keyaa]="scope">
+      <slot :name="keyaa" v-bind="scope"></slot>
+    </template>
   </ElButton>
 </template>
 <script setup>
 import { ElButton } from 'element-plus'
-import { defineProps, inject, getCurrentInstance, computed, useAttrs } from 'vue'
+import { defineProps, inject, getCurrentInstance, computed, useAttrs, useSlots } from 'vue'
 import { commonPropsType, isPromise } from '../../utils/index.js'
 import { useRoute } from 'vue-router'
 
@@ -13,7 +16,7 @@ defineOptions({
   inheritAttrs: false
 })
 const appContext = getCurrentInstance()?.appContext
-
+const slots = useSlots()
 const props = defineProps({
   ...commonPropsType,
   ...ElButton.props,

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

@@ -6,17 +6,24 @@
       :value="option.columnValue"
     >
       {{lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc}}
+      <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+        <slot :name="key" v-bind="scope"></slot>
+      </template>
     </ElCheckbox>
   </ElCheckboxGroup>
   <ElCheckbox v-else v-bind="{...checkboxProps, ...attrs}" v-model="proxyValue">
     {{ label }}
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
   </ElCheckbox>
 </template>
 <script setup>
 import { ElCheckbox, ElCheckboxGroup } from 'element-plus'
-import { useAttrs, computed, inject, ref } from 'vue'
+import { useAttrs, computed, inject, useSlots } from 'vue'
 import { commonPropsType, hasOwn } from '../../utils/index.js'
 
+const slots = useSlots()
 const props = defineProps({
   ...ElCheckbox.props,
   ...commonPropsType,

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

@@ -1,13 +1,18 @@
 <template>
-  <ElDatePicker v-bind="{ ...attrs, ...datePickerProps}" :disabledDate="disabledDate" v-model="value"></ElDatePicker>
+  <ElDatePicker v-bind="{ ...attrs, ...datePickerProps}" :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>
+  </ElDatePicker>
 </template>
 <script setup>
 import { ElDatePicker } from 'element-plus'
-import { useAttrs, computed, watch, nextTick } from 'vue'
+import { useAttrs, computed, watch, nextTick, useSlots } from 'vue'
 import { commonPropsType, formatDate, isDate, hasOwn } from '../../utils/index.js'
 import { useFormItem } from 'element-plus'
 import dateIcon from '../icons/date.vue'
 
+const slots = useSlots()
 const { formItem: elFormItem } = useFormItem()
 const props = defineProps({
   ...ElDatePicker.props,

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

@@ -61,7 +61,7 @@ export default {
     },
   },
   emits: ['update:modelValue'],
-  setup(props, { emit, attrs, expose }) {
+  setup(props, { emit, attrs, expose, slots }) {
     const isOverflow = ref(false)
     const inputWrapRef = ref(null)
     const calcSpanRef = ref(null)
@@ -232,7 +232,9 @@ export default {
       return node
     }
     const getInputSolts = () => {
-      const ret = {}
+      const ret = {
+        ...slots
+      }
       if (inputProps.value?.suffixIcon) {
         const suffixIcon = resolveComponent(inputProps.value.suffixIcon)
         ret.suffix = () => {

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

@@ -1,11 +1,16 @@
 <template>
-  <ElInputNumber v-bind="{...inputNumberProps, ...attrs}" @blur="normalValue" :class="[textAlignClass]" :key="updateKey" v-model="inputNumberValue"></ElInputNumber>
+  <ElInputNumber v-bind="{...inputNumberProps, ...attrs}" @blur="normalValue" :class="[textAlignClass]" :key="updateKey" v-model="inputNumberValue">
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
+  </ElInputNumber>
 </template>
 <script setup>
 import { ElInputNumber } from 'element-plus'
-import { useAttrs, computed, ref } from 'vue'
+import { useAttrs, computed, ref, useSlots } from 'vue'
 import { commonPropsType, isDate } from '../../utils/index.js'
 
+const slots = useSlots()
 const props = defineProps({
   textAlign: {
     type: String, // left、right

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

@@ -1,12 +1,13 @@
 <script setup>
 import { ElPagination } from 'element-plus'
-import { computed, defineProps, useAttrs } from 'vue'
+import { computed, defineProps, useAttrs, useSlots } from 'vue'
 import { commonPropsType, hasOwn } from '../../utils/index.js'
 
 const props = defineProps({
   ...commonPropsType,
   ...ElPagination.props,
 })
+const slots = useSlots()
 const calcProps = computed(() => {
   const ret = Object.keys(ElPagination.props).reduce((total, key) => {
     total[key] = props[key]
@@ -52,5 +53,9 @@ const modelValue = defineModel()
 
 </script>
 <template>
-  <ElPagination v-bind="{...attrs, ...calcProps}"></ElPagination>
+  <ElPagination v-bind="{...attrs, ...calcProps}">
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
+  </ElPagination>
 </template>

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

@@ -5,19 +5,22 @@
       :value="option.columnValue"
     >
       {{lang.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc}}
+      <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+        <slot :name="key" v-bind="scope"></slot>
+      </template>
     </CurrentRadio>
   </el-radio-group>
 </template>
 <script setup>
 import { ElRadioGroup, ElRadio, ElRadioButton } from 'element-plus'
-import { useAttrs, computed, inject, ref } from 'vue'
+import { useAttrs, computed, inject, useSlots } from 'vue'
 import { commonPropsType, hasOwn } from '../../utils/index.js'
 
 const props = defineProps({
   ...ElRadioGroup.props,
   ...commonPropsType,
 })
-
+const slots = useSlots()
 // 两种样式，一种是button，一种是default，默认为default
 const type = computed(() => {
   return props.config.type || 'default'

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

@@ -0,0 +1,158 @@
+import { ElSelect, ElOption } from 'element-plus'
+import { computed, inject} from 'vue'
+import { commonPropsType } from '../../utils/index.js'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    ...ElSelect.props,
+    ...commonPropsType,
+    multiple: [String, Boolean],
+    filterable: [String, Boolean],
+    multipleLimit: [String, Number],
+    rangeOptions: Array,
+    excludeOptions: Array,
+    // 多选的分割符号
+    separator: {
+      type: [String],
+      default: ','
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, attrs, expose, slots }) {
+    const VALUE_TYPES = {
+      LIST: 'list',
+      OBJECT: 'object',
+      STRING: 'string',
+    }
+    // 这个是真实的值
+    const modelValue = computed({
+      get() {
+        return props.modelValue
+      },
+      set(val) {
+        emit('update:modelValue', val)
+      }
+    })
+    const separator = computed(() => {
+      return props.separator
+    })
+    const valueTypes = computed(() => {
+      return props.config?.valueType
+    })
+    // 值是list 还是,连起来的string
+    const isStrVal = computed(() => {
+      // valueType 值为 list 或者 string
+      return valueTypes.value !== VALUE_TYPES.LIST && valueTypes.value !== VALUE_TYPES.OBJECT
+    })
+    const isObject = computed(() => {
+      return valueTypes.value === VALUE_TYPES.OBJECT
+    })
+
+    // 是否为多选
+    const isMutiple = computed(() => {
+      return props.multiple == '1'
+    })
+
+    const options = computed(() => {
+      let list = props.options
+      if (props.rangeOptions && props.rangeOptions.length) {
+        list = list?.filter?.(item => props.rangeOptions?.some(subValue => subValue == item.columnValue))
+      }
+      if (props.excludeOptions && props.excludeOptions.length) {
+        list = list?.filter?.(item => !(props.excludeOptions?.some(subValue => subValue == item.columnValue)))
+      }
+      return list
+    })
+
+    const value = computed({
+      get() {
+        if (isMutiple.value) {
+          const val = modelValue.value || ''
+          return val ? 
+            (
+              isStrVal.value ?
+                val.split(separator.value) :
+                (
+                  isObject.value ?
+                    Object.values(val || {}) :
+                    val
+                )
+            ) :
+            []
+        } else {
+          if (modelValue.value !== null && modelValue.value !== undefined) {
+            if (options.value?.some(item => item.columnValue == modelValue.value)) {
+              props.config.isMatch = true
+              return `${modelValue.value}`
+            } else {
+              props.config.isMatch = false
+              return ''
+            }
+          } else {
+            return ''
+          }
+        }
+      },
+      set(val) {
+        if (isMutiple.value) {
+          modelValue.value = isStrVal.value ? 
+            val.join(separator.value) :
+            (
+              isObject.value ?
+                val?.reduce((ret, item, idx) => {ret[idx] = item; return ret;}, {}) :
+                val
+            )
+        } else {
+          modelValue.value = val
+        }
+      }
+    })
+
+    const selectProps = computed(() => {
+      const attrs = Object.keys(ElSelect.props).reduce((ret, key) => {
+        ret[key] = props[key]
+        return ret
+      }, {})
+      if (attrs.placeholder === null || attrs.placeholder === undefined) {
+        attrs.placeholder = ''
+      }
+      if (typeof attrs.filterable === 'string') {
+        attrs.filterable = attrs.filterable == '1'
+      }
+      if (typeof attrs.multiple === 'string') {
+        attrs.multiple = attrs.multiple == '1'
+      }
+      if (!attrs['suffix-icon'] && !attrs.suffixIcon) {
+        delete attrs.suffixIcon
+        delete attrs['suffix-icon']
+      }
+      attrs.multipleLimit = Number(parseInt(attrs.multipleLimit || 0))
+      return attrs
+    })
+    const lang = inject('lang')
+    const clear = () => {
+      modelValue.value = ''
+    }
+
+    return () => {
+      return (
+        <ElSelect class="custom-self-select" { ...{...attrs, ...selectProps.value }} v-model={value.value} onClear={clear}>
+          {
+            {
+              default: () => options.value?.map(option => (
+                <ElOption
+                  key={option.columnValue}
+                  label={lang?.value?.indexOf('zh') > -1 ? option.columnDesc_zh : option.columnDesc}
+                  value={option.columnValue}
+                  disabled={option.columnStatus == '0' || option.columnStatus == '2'}
+                />
+              )),
+              ...slots
+            }
+          }
+        </ElSelect>
+      )
+    }
+  }
+}

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

@@ -4,10 +4,11 @@
 </template>
 <script setup>
 import { ElText } from 'element-plus'
-import { computed, defineProps, inject, getCurrentInstance, useAttrs } from 'vue'
+import { computed, defineProps, inject, getCurrentInstance, useAttrs, useSlots } from 'vue'
 import { commonPropsType } from '../../utils/index.js'
 import { h } from 'vue'
 
+const slots = useSlots()
 const lang = inject('lang')
 const modelValue = defineModel()
 const appContext = getCurrentInstance()?.appContext
@@ -60,7 +61,8 @@ const renderNode = computed(() => {
       clickAction()
     }
   }, {
-    default: () => labelDesc.value
+    default: () => labelDesc.value,
+    ...slots,
   })
   if (props.needWrap == '1') {
     return h('div', {

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

@@ -1,11 +1,16 @@
 <template>
-  <ElTimePicker v-bind="calcProps" v-model="modeValue"></ElTimePicker>
+  <ElTimePicker v-bind="calcProps" v-model="modeValue">
+    <template v-for="(_, key) in slots" :key="key" v-slot:[key]="scope">
+      <slot :name="key" v-bind="scope"></slot>
+    </template>
+  </ElTimePicker>
 </template>
 <script setup>
 import { ElTimePicker } from "element-plus"
-import { useAttrs, computed, ref, watch } from "vue"
-import { commonPropsType, isDate } from "../../utils/index.js"
+import { useAttrs, computed, useSlots } from "vue"
+import { commonPropsType } from "../../utils/index.js"
 
+const slots = useSlots()
 const attrs = useAttrs()
 const props = defineProps({
   min: {

package/src/utils/render.jsx

@@ -986,7 +986,6 @@ function createFormLable(config, lang = 'zh') {
   )
 }
 
-
 export function getComponentPropsKeys(comp, config) {
   let propsKeys = []
   if (typeof comp === 'string') {
@@ -1049,3 +1048,26 @@ function generateVuePath(path) {
   }
   return new LoadModulePath(path)
 }
+
+export function getComponentSolt({
+  config,
+  slotKey = 'slots'
+}) {
+  const slots = config?.[slotKey]
+  if (config.metaType === 'ElButton') {
+    // debugger
+  }
+  if (slots) {
+    let retSlots = null
+    try {
+      retSlots = Object.keys(slots).reduce((ret, key) => {
+        ret[key] = slots[key]
+        return ret
+      }, {})
+    } catch (error) {
+      console.error('slots parse fail, error==:', error)
+    }
+    return retSlots
+  }
+  return {}
+}