resolver-egretimp-plus 0.0.125 → 0.0.126

package/package.json

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

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

@@ -17,6 +17,9 @@ const props = defineProps({
   formatter: {
     type: Function,
     default: null
+  },
+  isPointer: {
+    type: [String]
   }
 })
 const lang = inject('lang')
@@ -27,7 +30,7 @@ const value = computed(() => {
   if (
     isPatchComponent(PLAIN_TYPE_OPTIONS_COLUMNS, props)
   ) {
-    return props?.options?.find(item => item.columnValue == modelValue.value)?.[lang?.value?.indexOf('zh') > -1 ? 'columnDesc_zh' : 'columnDesc']
+    return selectFormat(modelValue.value)
   } else {
     if (isPatchComponent(['ElDatePicker'], props)) {
       if (!modelValue.value) {
@@ -40,7 +43,8 @@ const value = computed(() => {
 })
 
 const classObj = computed(() => ({
-  [`custom-component-plain--${props.type}`]: true
+  [`custom-component-plain--${props.type}`]: true,
+  cursor: props.isPointer == '1'
 }))
 
 
@@ -67,6 +71,20 @@ const clickAction = () => {
     rootForm
   }, appContext)
 }
+
+function selectFormat(value) {
+  let valList = value
+  const multiple = props?.config?.multiple == '1'
+  const isStrVal = props.config?.valueType !== 'list'
+  // 在满足多选，并且不是str格式的时候，就表示value为数组类型，取反就表示不满足的时候，需要转换成数组格式进行计算
+  if (!(multiple && !isStrVal)) {
+    valList = valList ? (valList?.split(',') || []) : []
+  }
+  return valList?.reduce((ret, val) => {
+    const str = props?.options?.find(item => item.columnValue == val)?.[lang?.value?.indexOf('zh') > -1 ? 'columnDesc_zh' : 'columnDesc']
+    return `${ret}${ret ? ',' : ''}${str}`
+  }, '')
+}
 </script>
 <style lang="scss" scoped>
 .custom-component-plain {
@@ -77,4 +95,7 @@ const clickAction = () => {
 .custom-component-plain--error {
   color: #F54A45;
 }
+.cursor {
+  cursor: pointer;
+}
 </style>

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

@@ -0,0 +1,180 @@
+import { ElInput } from 'element-plus'
+import { computed, defineProps, useAttrs } from 'vue'
+import { commonPropsType, hasOwn, isElement } from '../../utils/index.js'
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+import { getDomWidth } from '../../utils/dom.js';
+import { watch } from 'vue';
+import { nextTick } from 'vue';
+import { resolveComponent } from 'vue';
+
+export default {
+  inheritAttrs: false,
+  props: {
+    ...commonPropsType,
+    ...ElInput.props
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, attrs }) {
+    const isOverflow = ref(false)
+    const inputWrapRef = ref(null)
+    const calcSpanRef = ref(null)
+    const inputProps = computed(() => {
+      const ret = Object.keys(ElInput.props).reduce((total, key) => {
+        total[key] = props[key]
+        return total
+      }, {})
+      if (props.config?.icon) {
+        ret.suffixIcon = props.config?.icon
+      }
+      return ret
+    })
+    const normalInputProps = computed(() => {
+      const ret = {
+        ...inputProps.value
+      }
+      delete ret.suffixIcon
+      delete ret.prefixIcon
+      return ret
+    })
+    const showTooltip = computed(() => {
+      return props?.config?.showTooltip == '1' && props.disabled
+    })
+    const modelValue = computed({
+      get() {
+        return props.modelValue
+      },
+      set(val) {
+        emit('update:modelValue', val)
+      }
+    })
+    const isPagePopup = computed(() => {
+      return props.config?.lcpPagePopupMapVO
+    })
+    // 弹框是否只能支持点击icon进行触发，默认是
+    const isOnlyIconClickFlag = computed(() => {
+      return hasOwn(props.config, 'onlyIconClickFlag') ? props.config?.onlyIconClickFlag == '1' : true
+    })
+    // 输入点击弹框的情况下，是否仍然可以编辑
+    const isPagePopupAlwayEdit = computed(() => {
+      return props.config?.pagePopupEditFlag == '1'
+    })
+    const vmodelProps = computed(() => {
+      const ret = {
+        modelValue: modelValue.value
+      }
+      if (!(isPagePopup.value && !isPagePopupAlwayEdit.value)) {
+        ret['onUpdate:modelValue'] = (val) => {
+          modelValue.value = val
+        }
+      } else {
+        ret['onClear'] = () => {
+          attrs?.onClear?.()
+          modelValue.value = ''
+        }
+      }
+      return ret
+    })
+    const normalAttrs = computed(() => {
+      const ret = {
+        ...attrs
+      }
+      if (isPagePopup.value && isOnlyIconClickFlag.value) {
+        delete ret.onClick
+      }
+      return ret
+    })
+
+    const tooltipCalc = (() => {
+      let unWatch = null
+      let onResize = null
+      return {
+        clear: () => {
+          unWatch && unWatch()
+          onResize && window.removeEventListener('resize', onResize)
+        },
+        calc() {
+          this.clear()
+          let inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
+          let textLengthWidth = getDomWidth(calcSpanRef.value, -22)
+          isOverflow.value = inputWrapWidth < textLengthWidth
+          unWatch = watch(() => modelValue.value, (val) => {
+            nextTick(() => {
+              textLengthWidth = getDomWidth(calcSpanRef.value, -22)
+              isOverflow.value = inputWrapWidth < textLengthWidth
+            })
+          })
+          onResize = () => {
+            inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
+            isOverflow.value = inputWrapWidth < textLengthWidth
+            console.log('isOverflow==:', isOverflow.value, inputWrapWidth)
+          }
+          window.addEventListener('resize', onResize)
+        }
+      }
+    })()
+
+    onMounted(() => {
+      watch(showTooltip, (val) => {
+        if (val) {
+          tooltipCalc?.calc()
+        }
+      }, {
+        immediate: true
+      })
+    })
+    const polyfillInputWrap = (node) => {
+      if (isOverflow.value) {
+        return (
+          <el-tooltip content={modelValue.value} placement="top">
+            { node }
+          </el-tooltip>
+        )
+      }
+      return node
+    }
+    const getInputSolts = () => {
+      const ret = {}
+      if (inputProps.value?.suffixIcon) {
+        const suffixIcon = resolveComponent(inputProps.value.suffixIcon)
+        ret.suffix = () => {
+          const iconProps = {}
+          if (isPagePopup.value && inputProps.value.suffixIcon == 'Search') {
+            iconProps.onClick = attrs.onClick
+            iconProps.style = {
+              cursor: 'pointer'
+            }
+          }
+
+          return <el-icon {...iconProps}><suffixIcon /></el-icon>
+        }
+      }
+      if (inputProps.value?.prefixIcon) {
+        const prefixIcon = resolveComponent(inputProps.value.prefixIcon)
+        ret.prefix = () => {
+          return <el-icon><prefixIcon /></el-icon>
+        }
+      }
+      return ret
+    }
+    return () => {
+      return (
+        <div class="input-contrainer">
+          <span ref={(e) => calcSpanRef.value = e} class="calc-span">{ modelValue.value }</span>
+          {
+            polyfillInputWrap(
+              <div v-else class="input-wrap" ref={(e) => inputWrapRef.value = e}>
+                <ElInput {...vmodelProps.value} {...{...normalAttrs.value, ...normalInputProps.value}}>
+                  {
+                    getInputSolts()
+                  }
+                </ElInput>
+              </div>
+            )
+          }
+        </div>
+      )
+    }
+  }
+}
+

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

@@ -42,3 +42,4 @@
 @import './steps.scss';
 @import './dialog.scss';
 @import './textarea.scss';
+@import './text.scss';

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

@@ -12,4 +12,18 @@
   .el-input__suffix-inner {
     flex-direction: row-reverse;
   }
+}
+
+.input-contrainer {
+  width: 100%;
+  .calc-span {
+    white-space: nowrap;
+    position: absolute;
+    visibility: hidden;
+    padding: 0 11px;
+    box-sizing: border-box;
+  }
+  .input-wrap{
+    width: 100%;
+  }
 }

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

@@ -0,0 +1,3 @@
+.el-text {
+  line-height: 16px;
+}