resolver-egretimp-plus 0.0.298 → 0.0.300

package/package.json

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

package/src/components/helper/calcTooltip.jsx

@@ -0,0 +1,132 @@
+import { defineComponent, ref, watch, nextTick, onMounted, onUnmounted, computed } from 'vue';
+import { getDomWidth } from '../../utils/dom';
+
+export function useToolTip({
+  showTooltip,
+  offset,
+  displayValue,
+  calcFn,
+}) {
+  const isFocus = ref(false) // 是否是焦点状态
+  const isEnter = ref(false) // 鼠标是否在内部
+  const triggerRef = ref(null)
+  const isOverflow = ref(false)
+  const inputWrapRef = ref(null)
+  const calcSpanRef = ref(null)
+
+  function calcDomWidth(node) {
+    if (calcFn) {
+      return calcFn(node)
+    }
+    return getDomWidth(node, 0)
+  }
+
+  const tooltipCalc = (() => {
+    let unWatch = null
+    let onResize = null
+    return {
+      clear: () => {
+        unWatch && unWatch()
+        onResize && window.removeEventListener('resize', onResize)
+      },
+      calc() {
+        this.clear()
+        let inputWrapWidth = calcDomWidth(inputWrapRef.value, 0)
+        let textLengthWidth = getDomWidth(calcSpanRef.value, 0 - offset.value)
+        isOverflow.value = inputWrapWidth < textLengthWidth
+
+        unWatch = watch(() => displayValue.value, (val) => {
+          nextTick(() => {
+            textLengthWidth = getDomWidth(calcSpanRef.value, 0 - offset.value)
+            isOverflow.value = inputWrapWidth < textLengthWidth
+          })
+        })
+        onResize = () => {
+          inputWrapWidth = calcDomWidth(inputWrapRef.value, 0)
+          isOverflow.value = inputWrapWidth < textLengthWidth
+          // console.log('===:', inputWrapWidth, textLengthWidth)
+        }
+        window.addEventListener('resize', onResize)
+      }
+    }
+  })()
+  const inputWrapMouseEvents = computed(() => {
+    const ret = {}
+    if (showTooltip.value) {
+      ret.onMouseenter = (e) => {
+        isEnter.value = true
+        triggerRef.value = e?.target
+      }
+      ret.onMouseleave = () => {
+        isEnter.value = false
+        if (!isFocus.value) {
+          triggerRef.value = null
+        }
+      }
+    }
+    return ret
+  })
+  const calcComEvents = computed(() => {
+    const ret = {}
+    ret['onFocus'] = (...arg) => {
+      isFocus.value = true
+      if (showTooltip.value) {
+        triggerRef.value = arg?.[0]?.target
+      }
+    }
+    ret['onBlur'] = (...arg) => {
+      isFocus.value = false
+      if (showTooltip.value) {
+        if (!isEnter.value) {
+          triggerRef.value = null
+        }
+      }
+    }
+    return ret
+  })
+  onMounted(() => {
+    watch(showTooltip, (val) => {
+      if (val) {
+        tooltipCalc?.calc()
+      }
+    }, {
+      immediate: true
+    })
+  })
+  onUnmounted(() => {
+    tooltipCalc?.clear()
+  })
+  function generateTooltipWrap(node, opt) {
+    const {
+      maintain = false,
+    } = opt || {}
+    const nodeComp = defineComponent(node)
+    if (maintain && !showTooltip.value) {
+      <nodeComp></nodeComp>
+    }
+    return (
+      <div class="resolver-calc-contrainer">
+        <span ref={(e) => calcSpanRef.value = e} class="resolver-calc-span">{ displayValue.value }</span>
+        {
+          isOverflow.value ? 
+            <el-tooltip
+              placement="top"
+              visible={isOverflow.value && !!triggerRef.value}
+              content={displayValue.value}
+              virtualTriggering
+              virtualRef={triggerRef.value}
+            ></el-tooltip>
+            : null
+        }
+        <div class="resolver-calc-wrap" {...inputWrapMouseEvents.value} ref={(e) => inputWrapRef.value = e}>
+          <nodeComp {...calcComEvents.value}></nodeComp>
+        </div>
+      </div>
+    )
+  }
+  return {
+    isFocus,
+    isEnter,
+    generateTooltipWrap
+  }
+}

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

@@ -0,0 +1,393 @@
+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';
+import { onUnmounted } from 'vue';
+
+export default {
+  inheritAttrs: false,
+  props: {
+    ...commonPropsType,
+    ...ElInput.props,
+    textAreaCnt: {
+      type: [Number, String],
+      default: 2,
+    },
+    // 是否在超出的时候展示tooltip
+    showTooltip: {
+      type: [String, Number],
+      default: ''
+    },
+    // 是否使用金额显示
+    showMoney: {
+      type: [String, Number],
+      default: ''
+    },
+    // 金额显示的分割，默认‘,’
+    moneySeg: {
+      type: [String],
+      default: ','
+    },
+    // 金额显示的最小值
+    min: {
+      type: Number,
+      default: -Infinity
+    },
+    // 金额显示的最大值
+    max: {
+      type: Number,
+      default: Infinity
+    },
+    // 金额显示小数位数
+    decimal: {
+      type: Number,
+      default: 2
+    },
+    // 金额显示时保留小数点0后缀
+    decimalSuffix: {
+      type: [Number, String],
+      default: '0'
+    },
+    // 在显示金额的时候，可以显示的符号
+    canShowFlag: {
+      type: Array,
+      default: ['na', '-']
+    },
+    // 金额显示是否显示货币符号
+    showSymbol: {
+      type: String,
+      default: ''
+    },
+    // 货币符号
+    symbol: {
+      type: String,
+      default: '¥'
+    },
+    // 符号位置：before/after
+    symbolPosition: {
+      type: String,
+      default: 'before',
+      validator: value => ['before', 'after'].includes(value)
+    },
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit, attrs, expose, slots }) {
+    const isFocus = ref(false) // 是否是焦点状态
+    const isEnter = ref(false) // 鼠标是否在内部
+    const triggerRef = ref(null)
+    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
+      }
+      if (props.config?.maxLength) {
+        ret.maxlength = parseInt(props.config.maxLength)
+      }
+      if (props.textAreaCnt) {
+        ret.rows = parseInt(props.textAreaCnt)
+      }
+      return ret
+    })
+    const normalInputProps = computed(() => {
+      const ret = {
+        ...inputProps.value
+      }
+      delete ret.modelValue
+      delete ret.suffixIcon
+      delete ret.prefixIcon
+      return ret
+    })
+    const showTooltip = computed(() => {
+      return props?.showTooltip == '1'
+    })
+    // 这个是真实的值
+    const modelValue = computed({
+      get() {
+        return props.modelValue
+      },
+      set(val) {
+        emit('update:modelValue', val)
+      }
+    })
+    // 开启金额展示的时候需要isFocus来控制格式的转换
+    const currentVal = ref('')
+    const displayValue = computed(() => {
+      return props.showMoney == '1' ? (isFocus.value ? currentVal.value : formatValue(modelValue.value)) : modelValue.value
+    })
+    const isPagePopupAndSearch = computed(() => {
+      return props.config?.lcpPagePopupMapVO && inputProps.value.suffixIcon == 'Search'
+    })
+    // 弹框是否只能支持点击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: displayValue.value
+      }
+      if (!(isPagePopupAndSearch.value && !isPagePopupAlwayEdit.value)) {
+        ret['onUpdate:modelValue'] = (val) => {
+          if (props.showMoney == '1') {
+            currentVal.value = val
+          } else {
+            modelValue.value = val
+          }
+        }
+        if (props.showMoney == '1') {
+          ret['onFocus'] = () => {
+            currentVal.value = modelValue.value
+          }
+          ret['onBlur'] = () => {
+            modelValue.value = parseValue(formatValue(currentVal.value))
+          }
+        }
+      } else {
+        ret['onClear'] = () => {
+          attrs?.onClear?.()
+          modelValue.value = ''
+        }
+      }
+      return ret
+    })
+    const inputWrapAttrs = computed(() => {
+      return {
+        class: attrs?.class,
+        style: attrs?.style
+      }
+    })
+    const normalAttrs = computed(() => {
+      const ret = {
+        ...attrs
+      }
+      delete ret.class
+      
+      const originFocus = ret['onFocus']
+      ret['onFocus'] = (...arg) => {
+        isFocus.value = true
+        if (showTooltip.value) {
+          triggerRef.value = arg?.[0]?.target
+        }
+        originFocus?.(...arg)
+      }
+      const originonBlur = ret['onBlur']
+      ret['onBlur'] = (...arg) => {
+        isFocus.value = false
+        if (showTooltip.value) {
+          if (!isEnter.value) {
+            triggerRef.value = null
+          }
+        }
+        originonBlur?.(...arg)
+      }
+
+      if (isPagePopupAndSearch.value && isOnlyIconClickFlag.value) {
+        delete ret.onClick
+      }
+      if (ret.onWrapClick) {
+        if (ret.onClick) {
+          const originClick = ret.onClick
+          ret.onClick = function(...arg) {
+            originClick(...arg)
+            ret.onWrapClick(...arg)
+          }
+        } else {
+          ret.onClick = ret.onWrapClick
+        }
+      }
+      return ret
+    })
+
+    const tooltipCalc = (() => {
+      let unWatch = null
+      let onResize = null
+      return {
+        clear: () => {
+          unWatch && unWatch()
+          onResize && window.removeEventListener('resize', onResize)
+        },
+        calc() {
+          this.clear()
+          let offset = 20
+          if (!props.disabled && props.clearable) {
+            offset = 50
+          }
+          let inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
+          let textLengthWidth = getDomWidth(calcSpanRef.value, 0 - offset)
+          isOverflow.value = inputWrapWidth < textLengthWidth
+
+          unWatch = watch(() => displayValue.value, (val) => {
+            nextTick(() => {
+              textLengthWidth = getDomWidth(calcSpanRef.value, 0 - offset)
+              isOverflow.value = inputWrapWidth < textLengthWidth
+            })
+          })
+          onResize = () => {
+            inputWrapWidth = getDomWidth(inputWrapRef.value, 0)
+            isOverflow.value = inputWrapWidth < textLengthWidth
+          }
+          window.addEventListener('resize', onResize)
+        }
+      }
+    })()
+
+    onMounted(() => {
+      watch(showTooltip, (val) => {
+        if (val) {
+          tooltipCalc?.calc()
+        }
+      }, {
+        immediate: true
+      })
+    })
+    onUnmounted(() => {
+      tooltipCalc?.clear()
+    })
+    const getInputSolts = () => {
+      const ret = {
+        ...slots
+      }
+      if (inputProps.value?.suffixIcon) {
+        const suffixIcon = resolveComponent(inputProps.value.suffixIcon)
+        ret.suffix = () => {
+          const iconProps = {}
+          if (isPagePopupAndSearch.value) {
+            if (!props.disabled) {
+              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
+    }
+
+    // 格式化显示
+    function formatValue(value) {
+      if (props.canShowFlag?.includes(String(value).toLowerCase())) {
+        return value
+      }
+      if (value === null || value === undefined) return ''
+      let val = `${value}`.replace(props.moneySeg, '')
+      val = parseFloat(val)
+      if (isNaN(val)) {
+        return ''
+      }
+
+      // 转换数字并限制范围
+      val = Math.max(props.min, Math.min(props.max, val))
+
+      // 处理千分位
+      if (props.decimal != '-1') {
+        val = val.toFixed(props.decimal)
+      }
+      if (props.decimalSuffix != '1') {
+        val = parseFloat(val)
+      }
+      const parts = `${val}`.split('.')
+      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, props.moneySeg)
+      
+      // 添加货币符号
+      const formatted = parts.join('.')
+      return props.showSymbol == '1'
+        ? props.symbolPosition === 'before'
+          ? `${props.symbol} ${formatted}`
+          : `${formatted} ${props.symbol}`
+        : formatted
+    }
+
+    // 解析输入值
+    function parseValue(value) {
+      if (props.canShowFlag?.includes(String(value).toLowerCase())) {
+        return value
+      }
+      if (value === undefined || value === null || value === '') {
+        return ''
+      }
+      // 移除所有非数字字符（保留负号和小数点）
+      let pointCount = 0
+      const repVal = `${value}`.replace(/[^\d.-]/g, '').replace(/(\.\d*)/g, (a) => {
+        const count = pointCount
+        pointCount ++
+        if (!count) {
+          return a
+        }
+        return ''
+      })
+      const parsed = Number(repVal)
+      return isNaN(parsed) ? '' : parsed
+    }
+
+    const inputWrapMouseEvents = computed(() => {
+      const ret = {}
+      if (showTooltip.value) {
+        ret.onMouseenter = (e) => {
+          isEnter.value = true
+          triggerRef.value = e?.target
+        }
+        ret.onMouseleave = () => {
+          isEnter.value = false
+          if (!isFocus.value) {
+            triggerRef.value = null
+          }
+        }
+      }
+      return ret
+    })
+    expose({
+      click: (params) => {
+        attrs?.onClick?.(null, params)
+      }
+    })
+    return () => {
+      return (
+        <div class="input-contrainer" {...inputWrapAttrs.value}>
+          <span ref={(e) => calcSpanRef.value = e} class="calc-span">{ displayValue.value }</span>
+          {
+            isOverflow.value ? 
+              <el-tooltip
+                placement="top"
+                visible={isOverflow.value && !!triggerRef.value}
+                content={displayValue.value}
+                virtualTriggering
+                virtualRef={triggerRef.value}
+              ></el-tooltip>
+              : null
+          }
+          <div class="input-wrap" {...inputWrapMouseEvents.value} ref={(e) => inputWrapRef.value = e}>
+            <ElInput {...vmodelProps.value} {...{...normalAttrs.value, ...normalInputProps.value}}>
+              {
+                getInputSolts()
+              }
+            </ElInput>
+          </div>
+        </div>
+      )
+    }
+  }
+}
+