元数据字段控件扩展

@Component(IMetaControlType.BEAN_PREFIX + MetaControlType_CmsImage.TYPE)
public class MetaControlType_CmsImage implements IMetaControlType {
    
    public static final String TYPE = "CMSImage";
    
    @Override
    public String getType() {
        return TYPE;
    }
    
    @Override
    public String getName() {
        return "{META.CONTROL_TYPE." + TYPE + "}"; // 控件名称的国际化字符串
    }
    
    // 由于图片字段值需要解析成预览地址才能显示图片，因此需要对数据进行处理，返回图片预览地址
    @Override
    public void parseFieldValue(XModelFieldDataDTO fieldData) {
        Object value = fieldData.getValue();
        if (Objects.isNull(value)) {
            return;
        }
        String imagePath = value.toString();
        if (InternalUrlUtils.isInternalUrl(imagePath)) {
            String previewUrl = InternalUrlUtils.getActualPreviewUrl(imagePath);
            fieldData.setValueObj(previewUrl);
        } else {
            fieldData.setValueObj(imagePath);
        }
    }
}

META.CONTROL_TYPE.CMSImage=图片上传

META.CONTROL_TYPE.CMSImage=Image Upload

<template>
  <div>
    <el-form-item v-for="field in fieldList" 
                  :key="field.fieldName"
                  :label="field.label"
                  :prop="field.fieldName">

      ......

      <cms-logo-view v-if="field.controlType==='CMSImage'" 
        v-model="field.value" 
        :src="field.valueObj" 
        :width="210" 
        :height="150">
      </cms-logo-view>
      
      ......

    </el-form-item>
  </div>
</template>
<script>
import CMSLogoView from '@/views/cms/components/LogoView'; // 导入LogoView组件

......

export default {
  name: "CMSEXModelEditor",
  components: {
    "cms-logo-view": CMSLogoView, // 添加组件定义
  },
  
  ......
}
</script>