resolver-egretimp-plus 0.0.4

package/src/utils/render.jsx

@@ -0,0 +1,714 @@
+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 getNativeComps from '../components/patchComponents'
+import CustomComponentColH5 from '../components/packages/CustomComponentColH5.vue'
+import { commonPropsType,
+  FORM_META_TYPE,
+  NOT_NEED_FORM_ITEM_META_TYPE,
+  SPECIAL_SET_FULL_WIDTH_ITEM_META_TYPE,
+  NOT_NEED_COL_ITEM_META_TYPE,
+  MULTI_PAGE_META_LIST_TYPES,
+  REPLACE_PREFIX_FLAG,
+  PREFIX_FLAG,
+  ARG_FLAGS,
+  PLAIN_TYPE_COLUMNS,
+  PLAIN_TYPE_OPTIONS_COLUMNS,
+  CONTEXT_PEDDING_TYPE,
+  calcDisable,
+  META_TYPE_MAP,
+  H5_REPLACE_PREFIX_FLAG,
+  H5_PREFIX_FLAG,
+  FORM_META_TYPE_H5
+} from './const.js'
+import { preserveCheck } from './preserveFunc.js'
+import { isArray, isFunction, isString } from './is.js'
+import CustomComponentPlain from '../components/packages/CustomComponentPlain.vue'
+import QuestionFilled from '../components/icons/question-filled.vue'
+
+// 解析配置中的defStyle属性
+export function parseDefStyle(defStyle) {
+  try {
+    return JSON.parse(defStyle)
+  } catch (error) {
+    return {}
+  }
+}
+
+// 解析extendAttr中方法
+function deepParseFnStr(obj, refVal) {
+  if (isPlainObject(obj) || Array.isArray(obj)) {
+    Object.keys(obj).forEach(key => {
+      if (isPlainObject(obj[key]) || Array.isArray(obj[key])) {
+        deepParseFnStr(obj[key])
+      } else if (isFnStr(obj[key])) {
+        obj[key] = eval(`(${obj[key]})`)
+      } else {
+        if (isString(obj[key])) {
+          if (obj[key] === ARG_FLAGS.REF_VAL) {
+            obj[key] = refVal || ''
+          } else if (obj[key] === ARG_FLAGS.CURRENT_DATE) {
+            obj[key] = formatDate(new Date(), 'yyyy-MM-dd')
+          } else {
+            const { checked, val } = preserveCheck(key, obj[key])
+            if (checked) {
+              obj[key] = val
+            }
+          }
+        }
+      }
+    })
+  }
+}
+
+// 解析配置中的extendAttr属性
+export function parseExtendAttr(config, refVal) {
+  if (config.extendAttr) {
+    try {
+      // return JSON.parse(config.extendAttr, (k, v) => {
+      //   if (isFnStr(v)) {
+      //     return eval(`(${v})`)
+      //   }
+      //   return v
+      // }) || {}
+      let obj = eval('(' + config.extendAttr+ ')') || {}
+      deepParseFnStr(obj, refVal)
+      return obj
+    } catch (error) {
+      console.log(config.metaCode, '\n===JSON parse err, err==:', error, '\nextendAttr==:', config.extendAttr)
+      return {}
+    }
+  }
+  return {}
+  
+}
+
+// 目前所有的配置都是在form表单下面，但是现在的配置数据没有form配置项，所有我们自己手动增加
+function generateFormConfig(lang = 'zh', isH5) {
+  return {
+    metaType: isH5 ? FORM_META_TYPE_H5 : FORM_META_TYPE,
+    displayType: '1',
+    span: 24,
+    labelWidth: lang.indexOf('zh') > -1 ? '92px' : '148px',
+    'label-position': 'right',
+    rootForm: true,
+    inline: true
+  }
+}
+
+/**
+ * 
+ * @param {*} config 通过接口获取的配置对象
+ */
+export function parsePageConfig(config, lang, polyfillConfigs, instance, isH5) {
+  if (!config) return {}
+  const formConfig = generateFormConfig(lang, isH5)
+  const hireRelatMapRules = getCodeMapRules(config)
+  formConfig.pmPageMetaList = config.pmPageMetaList
+  let { pageConfig, mapComp } = normalConfig({ polyfillConfigs, instance }, formConfig)
+  return {
+    pageConfig,
+    mapComp,
+    hireRelatMapRules
+  }
+}
+/**
+ * {
+ *  children: [], // 子元素
+ *  bindValue: '', // 配置项对应的绑定值
+ * }
+ * @param {*} config 
+ */
+export function normalConfig({ polyfillConfigs, instance }, config, hireRelat = '', mapComp = {}, needformItem = false) {
+  const metaCode = config.metaCode || ''
+  hireRelat += hireRelat ? `->${metaCode}` : metaCode
+
+  const metaType = normalMetaType(config.metaType)
+
+  // 这个对象是不可以被配置进行覆盖
+  const extendNativeObj = {
+    metaType,
+    eventInit: false, // 初始渲染的时候，配置项对应的事件是否执行了
+    bindValue: '', // 这个是对应组件绑定的值
+    vmIsBind: false,
+    vm: null, // 具体渲染的组件
+    wrapVm: null, // 当前组件的实例（也就是analysisComponent）
+    hireRelat,
+    parent: null, // 这个是执行过程中，动态获取的
+    dynamicHireRelat: '', // 这个也是执行过程中，动态获取的层级
+  }
+  
+  let extendAttrObj = parseExtendAttr(config)
+  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进行包装
+  }
+  if (config.defStyle) {
+    extendObj.style = parseDefStyle(config.defStyle)
+  }
+  // 组件是根据数据进行动态循环渲染，这边需要进行特殊处理，确保config配置项独立
+  if (findComponent(MULTI_PAGE_META_LIST_TYPES, extendAttrObj.renderby) !== -1 || findComponent(MULTI_PAGE_META_LIST_TYPES, metaType) !== -1) {
+    extendObj.multiPmPageMetaList = []
+  }
+  // 如果有子项，需要进行递归遍历
+  if (config.pmPageMetaList && config.pmPageMetaList.length) {
+    config.pmPageMetaList = config.pmPageMetaList.map(metaItem => {
+      const { pageConfig } = normalConfig({ polyfillConfigs, instance }, metaItem, hireRelat, mapComp, needformItem || [FORM_META_TYPE].includes(metaType))
+      return pageConfig
+    })?.sort((a, b) => a.seqNo - b.seqNo)
+  }
+  const pageConfig = {
+    ...extendObj,
+    ...extendAttrObj,
+    ...config,
+    ...extendNativeObj
+  }
+  if (config.metaType == 'textarea') {
+    pageConfig.type = 'textarea'
+  }
+  if (config.metaType == 'time-range') {
+    pageConfig['isRange'] = true
+  }
+  if (config.metaType == 'date-range') {
+    pageConfig.type = 'daterange'
+  }
+  if (config.metaType == 'card') {
+    pageConfig.needWrap = '2'
+  }
+  mapComp[hireRelat] = pageConfig
+  parsePolyfillConfigs({ polyfillConfigs, instance }, pageConfig)
+  return {
+    mapComp,
+    pageConfig
+  }
+}
+
+function parsePolyfillConfigs({ polyfillConfigs, instance }, config) {
+  const hireRelat = config.hireRelat
+  const findKeys = Object.keys(polyfillConfigs).filter(key => hireRelat.endsWith(key))
+  if (!findKeys.length) {
+    return
+  }
+  const findKey = findKeys.reduce((ret, key) => (hireRelat.lastIndexOf(ret) < hireRelat.lastIndexOf(key) ? ret : key))
+  const polyObj = polyfillConfigs[findKey] && polyfillConfigs[findKey](config, instance)
+  polyObj && Object.keys(polyObj).forEach(key => {
+    config[key] = polyObj[key]
+  })
+}
+
+// 配置化工具现在还是用aidesign组件库，这边进行统一替换一下
+function normalMetaType(metaType) {
+  let retType = metaType
+  if (typeof retType !== 'string') return ''
+  if (retType.startsWith(REPLACE_PREFIX_FLAG)) {
+    retType = retType.replace(REPLACE_PREFIX_FLAG, PREFIX_FLAG)
+  } else if (retType.startsWith(H5_REPLACE_PREFIX_FLAG)) {
+    retType = retType.replace(H5_REPLACE_PREFIX_FLAG, H5_PREFIX_FLAG)
+  }
+  if (META_TYPE_MAP[retType]) {
+    retType = META_TYPE_MAP[retType]
+  }
+  return retType
+}
+
+export function isPlainColumn(config, disabled) {
+  // 表格中中的列，可以根据配置进行转换为普通形式，表格原生支持的tooltip
+
+  if (config.isColumn && disabled) {
+    if (config.plainColumn) {
+      return true
+    }
+    // 有些标签，在没有plainColumn属性的时候，默认表示会直接进行普通形式的转换
+    if (
+        !hasOwn(config, 'plainColumn') &&
+        (
+          findComponent([...PLAIN_TYPE_COLUMNS, ...PLAIN_TYPE_OPTIONS_COLUMNS], config.renderby || config.metaType) !== -1 ||
+          (
+            // 这边是在日期组件中，日过valueFormat属性跟format属性值一样的时候，就可以直接展示
+            findComponent(['ElDatePicker'], config?.renderby || config?.metaType) !== -1 &&
+            (
+              (config.valueFormat || 'YYYY-MM-DD') == (config.format || 'YYYY-MM-DD') ||
+              (config['value-format'] || 'YYYY-MM-DD') == (config.format || 'YYYY-MM-DD')
+            )
+          )
+        )
+      ) {
+      return true
+    }
+  }
+  return false
+}
+
+export function getComponentForConfig(config, disabled) {
+  // 表格中中的列，是否需要转换为普通形式
+  if (isPlainColumn(config, disabled)) {
+    return CustomComponentPlain
+  }
+
+  const components = inject('components')
+  const { composeComponents } = getNativeComps()
+  const allComps = {
+    ...composeComponents,
+    ...components.value
+  }
+  const metaType = config.metaType
+  let component = resolveAssetComponents(allComps, metaType) //则通过传入的获取组件
+  if (!component) {
+    component = resolveComponent(metaType) // 实例上绑定的组件
+  }
+
+  const renderby = config.renderby
+  if (renderby && typeof renderby === 'string') {
+    let renderbyComp = resolveAssetComponents(allComps, renderby) //则通过传入的获取组件
+    if (!renderbyComp) {
+      renderbyComp = resolveComponent(renderby) // 实例上绑定的组件
+    }
+    component = renderbyComp || component
+  }
+  return component
+}
+
+// 获取渲染组件的props配置数据
+export function getRenderComponentProps({ props, component, modelValue, selects }) {
+  if (!component) return {}
+  let config = props.config
+  if (findComponent(['CustomComponentTabs'], config.renderby || config.metaType) !== -1) {
+    // 目前tabs组件在配置平台那边，是不能进行配置大的tabs的，目前就换一种方式
+    config.pmPageMetaList?.forEach(pane => {
+      if (pane.tabExtendAttr && isPlainObject(pane.tabExtendAttr)) {
+        config = {
+          ...config,
+          ...pane.tabExtendAttr
+        }
+      }
+    })
+  }
+  const propsKeys = getComponentPropsKeys(component, config)
+  const defprops = {}
+  if (propsKeys) {
+    propsKeys.forEach(key => {
+      if (hasOwn(config, key)) {
+        defprops[key] = config[key]
+      }
+    })
+  }
+  const commonProps = getCommonProps(config, props, modelValue, selects)
+  defprops.style = {
+    ...config.style,
+    ...getRenderCompMargins(config),
+    width: commonProps.width || getBuildCompDefaultWidth(config)
+  }
+  
+  const retObj = {
+    ...defprops,
+    ...commonProps
+  }
+  return retObj
+}
+// 一些组件并且没有占居满格
+function getBuildCompDefaultWidth(config) {
+  if (SPECIAL_SET_FULL_WIDTH_ITEM_META_TYPE.some(metaType => compareComponet(metaType, config.metaType))) {
+    return '100%'
+  }
+}
+// 获取渲染组件开放的配置props，提供给所有自定义组件
+function getCommonProps(config, props, modelValue, selects) {
+  return Object.keys(commonPropsType).reduce((ret, key) => {
+    ret[key] = commonPropsType[key].getValue(config, props, modelValue, selects)
+    return ret
+  }, {})
+}
+// 获取渲染组件的margin配置数据
+function getRenderCompMargins(config) {
+  const marginObj = {}
+  if (config.marginRight) {
+    marginObj.marginRight = normalPixel(config.marginRight)
+  }
+  if (config.marginLeft) {
+    marginObj.marginLeft = normalPixel(config.marginLeft)
+  }
+  if (config.marginTop) {
+    marginObj.marginTop = normalPixel(config.marginTop)
+  }
+  if (config.marginBottom) {
+    marginObj.marginBottom = normalPixel(config.marginBottom)
+  }
+
+  if (config.paddingRight) {
+    marginObj.paddingRight = normalPixel(config.paddingRight)
+  }
+  if (config.paddingLeft) {
+    marginObj.paddingLeft = normalPixel(config.paddingLeft)
+  }
+  if (config.paddingTop) {
+    marginObj.paddingTop = normalPixel(config.paddingTop)
+  }
+  if (config.paddingBottom) {
+    marginObj.paddingBottom = normalPixel(config.paddingBottom)
+  }
+  return marginObj
+}
+
+// 生成布局框（el-col）
+export function generateLayoutPolyfill(config, disabled, isH5) {
+  let isElCol = false
+  let props = {}
+  let propsKeys
+  let colComp = null
+  if (isH5) {
+    colComp = CustomComponentColH5
+  } else {
+    colComp = resolveComponent('el-col')
+    isElCol = true
+    propsKeys = getComponentPropsKeys(colComp)
+  }
+  if (propsKeys) {
+    propsKeys.forEach(key => {
+      if (config[key]) {
+        props[key] = config[key]
+      }
+    })
+  }
+  if (isElCol) {
+    props.class = {
+      [normalCapitalizeComponent(config.metaType)]: true,
+      'is-card': config?.needWrap, // 这个样式主要用于折叠上面，控制被卡片包裹的时候，下边距是16，没有被包裹的时候，是12
+    }
+    props = {
+      ...props,
+      ...getDefaultColProps(config),
+      ...elColSpecialProsp(config),
+    }
+    
+  }
+  return node => {
+    // 表格中中的列，是否需要转换为普通形式
+    if (isPlainColumn(config, disabled)) {
+      return node
+    }
+    
+    if (config.removeCol) {
+      return node
+    }
+    let ret = <colComp {...props}>{node}</colComp>
+    if (config.isAllRow) {
+      ret = <colComp span={24}>{ret}</colComp>
+    }
+    return ret
+  }
+}
+
+// el-col 特殊的定义，目前这边进行宽度的接受
+function elColSpecialProsp (config) {
+  const style = {
+    textAlign: config.colTextAlign
+  }
+  if ((typeof config.hidden === 'boolean' && config.hidden) || config.hidden === '1') {
+    style.display = 'none'
+  } else {
+    if (hasOwn(config, 'elWidth')) {
+      if (config.elWidth === 'auto') {
+        style.flexGrow = 1
+        style.flexShrink = 1
+        style.flexBasis = 0
+        style.maxWidth = 'unset'
+        style.minWidth = 'unset'
+      } else if (config.elWidth === 'self') {
+        style.flexGrow = 0
+        style.flexShrink = 0
+        style.flexBasis = 0
+        style.maxWidth = 'unset'
+        style.minWidth = 'unset'
+      } else {
+        style.flexGrow = 0
+        style.flexShrink = 0
+        style.flexBasis = 0
+        style.maxWidth = normalPixel(config.elWidth)
+        style.minWidth = normalPixel(config.elWidth)
+      }
+    }
+  }
+  return {
+    style
+  }
+}
+
+function getDefaultColProps(config) {
+  const colProps = {
+    offset: config.offset || 0
+  }
+  if (hasOwn(config, 'md') || hasOwn(config, 'lg')) {
+    colProps.md = isPlainObject(config.md) ? parseIntColProps(config.md) : parseInt(config.md, 10)
+    colProps.lg = isPlainObject(config.lg) ? parseIntColProps(config.lg) : parseInt(config.lg, 10)
+  } else if (config.span) {
+    colProps.span = config.span
+  } else {
+    colProps.md = isPlainObject(config.md) ? parseIntColProps(config.md) : parseInt(config.md || 12, 10)
+    colProps.lg = isPlainObject(config.lg) ? parseIntColProps(config.lg) : parseInt(config.lg || 8, 10)
+  }
+  return colProps
+}
+function parseIntColProps(obj) {
+  return obj
+}
+
+function generateFormItemPc (config, lang, compProps, params,) {
+  let isFormItem = false
+  let props = {}
+  let propsKeys
+  let slotName = 'default'
+  const formItemComp = resolveComponent('el-form-item')
+  if (formItemComp) {
+    isFormItem = true
+    propsKeys = getComponentPropsKeys(formItemComp)
+  }
+  if (propsKeys) {
+    propsKeys.forEach(key => {
+      if (config[key]) {
+        props[key] = config[key]
+      }
+    })
+  }
+  if (isFormItem) {
+    if (config.formItemSlot === 'label') {
+      slotName = 'label'
+    }
+    props = {
+      ...props,
+      ...getFormItemExtendProps(config, lang, params)
+    }
+    // labelWidth 需要特殊处理
+    if (hasOwn(props, 'labelWidth')) {
+      props.labelWidth = props.labelWidth && `${props.labelWidth}` !== '-1' ? props.labelWidth : undefined
+    }
+  }
+  return node => {
+    // 表格中中的列，是否需要转换为普通形式
+    if (isPlainColumn(config, compProps.disabled)) {
+      return node
+    }
+
+    if (!config.needformItem && !config.showFromItem) {
+      return node
+    }
+    const slots = {}
+    slots[slotName] = () => node
+    if (isFormItem && slotName !== 'label') {
+      slots.label = () => createFormLable(config, lang)
+    }
+    return (
+      <formItemComp class="custom-form-item" {...props}>{slots}</formItemComp>
+    )
+  }
+}
+
+function generateFormItemH5(config, lang, compProps, params) {
+  return node => {
+    if (!config.needformItem && !config.showFromItem) {
+      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>
+    )
+  }
+}
+
+export function generateFormItemPolyfill(config, lang, compProps, _isH5, params) {
+  if (_isH5) {
+    return generateFormItemH5(config, lang, compProps, params)
+  } else {
+    return generateFormItemPc(config, lang, compProps, params)
+  }
+}
+
+function getFormItemExtendProps(config, lang, params) {
+  return {
+    prop: config.dynamicHireRelat,
+    rules: getFormItemRule(config, lang, params),
+    class: {
+      'content-right': config.contentRight,
+      'hidden-label': config.labelWidth == 0 || config.labelWidth === '0px' || config.labelHidden == '1',
+      [`label-position-${config['label-position'] || 'right'}`]: true // label-position 支持三个值，right、left、top
+    },
+    style: {
+      ...getFormItemMargins(config)
+    }
+  }
+}
+
+function getFormItemRule(config, lang, params) {
+  const required = config.requiredFlag === '1'
+  const onlyRequiredFlag = config.onlyRequiredFlag
+  const rules = [{
+    required,
+    validator: (rule, value, callback) => {
+      if (config.editFlag === '0') callback()
+      const val = config.bindValue
+      const message = lang.indexOf('zh') > -1 ? `${config.metaNameZh}不能为空` : `${config.metaNameEn} can not be empty`
+      if (!onlyRequiredFlag && required) {
+        if (val === '' || val === null || val === undefined) {
+          callback(new Error(message))
+        } else {
+          // isMatch在下来框的时候，表示当前值没有在下拉选项中匹配到，就表示没有选中值；因为后端在表字段为数字类型的时候，默认返回的是0值
+          if (hasOwn(config, 'isMatch') && !config.isMatch) {
+            callback(new Error(message))
+          } else {
+            callback()
+          }
+        }
+      } else {
+        callback()
+      }
+    },
+    trigger: ['blur', 'change']
+  }]
+  let regexPattern = []
+  if (config.regexPattern) {
+    try {
+      regexPattern = JSON.parse(config.regexPattern)
+      regexPattern = regexPattern.map(item => ({
+        reg: item?.pattern,
+        tip: item?.message,
+        tipEn: item?.messageEn,
+      }))
+
+    } catch (error) {
+      console.log(config.metaCode, '=regexPattern JSON parse fail, error==:', error)
+      regexPattern = []
+    }
+  }
+  if (config.validRegs && (Array.isArray(config.validRegs) || isPlainObject(config.validRegs)) ) {
+    const validRegs = isPlainObject(config.validRegs) ? [config.validRegs] : config.validRegs
+    regexPattern.push(...validRegs)
+  }
+
+  if (regexPattern?.length) {
+    rules.push({
+      validator: (rule, value, callback) => {
+        if (config.editFlag === '0') callback()
+        const val = config.bindValue
+
+        for (let i = 0; i < regexPattern.length; i++) {
+          const validInfo = regexPattern[i]
+          const { reg, tip, tipEn } = validInfo
+          const message = lang.indexOf('zh') > -1 ? tip : tipEn
+          let validFlag = true
+          if (typeof reg === 'function') {
+            validFlag = reg(val, params)
+          } else {
+            validFlag = new RegExp(reg).test(val)
+          }
+          if (!validFlag) {
+            callback(new Error(message))
+            return
+          }
+        }
+        callback()
+      },
+      trigger: ['blur', 'change']
+    })
+  }
+  let validators = config.validators
+  validators = isArray(validators) ? validators : [validators]
+  if (validators && validators.length) {
+    validators.forEach(validator => {
+      if (isFunction(validator)) {
+        rules.push({
+          validator,
+          trigger: ['blur', 'change']
+        })
+      }
+    })
+  }
+  return rules
+}
+
+function getFormItemMargins(config) {
+  const marginObj = {}
+  if (config.formItemMarginRight && `${config.formItemMarginRight}` !== '-1') {
+    marginObj.marginRight = normalPixel(config.formItemMarginRight)
+  }
+  if (config.formItemMarginLeft && `${config.formItemMarginLeft}` !== '-1') {
+    marginObj.marginLeft = normalPixel(config.formItemMarginLeft)
+  }
+  if (config.formItemMarginTop && `${config.formItemMarginTop}` !== '-1') {
+    marginObj.marginTop = normalPixel(config.formItemMarginTop)
+  }
+  if (config.formItemMarginBottom && `${config.formItemMarginBottom}` !== '-1') {
+    marginObj.marginBottom = normalPixel(config.formItemMarginBottom)
+  }
+  if (config.formItemPaddingRight && `${config.formItemPaddingRight}` !== '-1') {
+    marginObj.paddingRight = normalPixel(config.formItemPaddingRight)
+  }
+  if (config.formItemPaddingLeft && `${config.formItemPaddingLeft}` !== '-1') {
+    marginObj.paddingLeft = normalPixel(config.formItemPaddingLeft)
+  }
+  if (config.formItemPaddingTop && `${config.formItemPaddingTop}` !== '-1') {
+    marginObj.paddingTop = normalPixel(config.formItemPaddingTop)
+  }
+  if (config.formItemPaddingBottom && `${config.formItemPaddingBottom}` !== '-1') {
+    marginObj.paddingBottom = normalPixel(config.formItemPaddingBottom)
+  }
+  return marginObj
+}
+
+function createFormLable(config, lang = 'zh') {
+  const ElPopover = resolveComponent('el-popover')
+  const elIcon = resolveComponent('el-icon')
+  const required = config.requiredFlag === '1'
+  return (
+    <div title={lang.indexOf('zh') > -1 ? config.metaNameZh : config.metaNameEn} class="custom-label">
+      <span class="custom-label-content" style={config.labelStyle}>
+        {required ? <span style="color: #f5222d; margin-right: 3px">*</span> : null}
+        <span>{lang.indexOf('zh') > -1 ? config.metaNameZh : config.metaNameEn}</span>
+      </span>
+      <ElPopover
+        placement="top"
+        width="300"
+        trigger="hover"
+        content={lang.indexOf('zh') > -1 ? config.hintContentZh : config.hintContentEn}
+      >
+        {
+          {
+            reference: () => {
+              return config.hintFlag == '1' ? <span class="label-tip"><elIcon><QuestionFilled /></elIcon></span> : null
+            }
+          }
+        }
+      </ElPopover>
+    </div>
+  )
+}
+
+export function getComponentPropsKeys(comp, config) {
+  let propsKeys = []
+  if (typeof comp === 'string') {
+    propsKeys = []
+  } else {
+    propsKeys = Object.keys(comp.props || {})
+  }
+  let emitsKyes = []
+  if (config) {
+    Object.keys(config).forEach(key => {
+      if (/^on[A-Z]/.test(key)) {
+        emitsKyes.push(key)
+      }
+    })
+  }
+  // if (comp?.emits) {
+  //   if (isPlainObject(comp?.emits)) {
+  //     emitsKyes = Object.keys(comp.emits)
+  //   } else if (isArray(comp.emits)) {
+  //     emitsKyes = comp.emits
+  //   }
+  // }
+  // emitsKyes = emitsKyes.filter(key => typeof key === 'string').map(key => `on${capitalize((camelize(key)))}`)
+  return [...emitsKyes, ...propsKeys]
+}