【界面设计器】组件开发常见问题

如何获取当前页面中的全部可用字段?

Class Component(ts)中使用以下代码获取当前设计组件实例

``` ts
import { WidgetInstance } from '@kunlun/ui-designer-dependencies';

@Widget.Reactive()
@Widget.Inject()
protected currentInstance: WidgetInstance | undefined;
```

PS:这里使用了@kunlun/ui-designer-dependencies依赖包中的类型定义,但没有使用函数,因此这个导入是可以正常执行的。

Vue组件中使用以下代码获取可选字段列表

``` ts
import { WidgetInstance } from '@kunlun/ui-designer-dependencies';

// props add currentInstance define
props: {
currentInstance: {
type: Object as PropType<WidgetInstance>
}
}

// setup using currentInstance get fields
const fields = computed(() => {
return Array.from(props.currentInstance?.root?.fieldCollection.values() || []).map((v) => {
return {
label: v.element?.widgetData?.displayName,
value: v.element?.name
};
});
});
```

PS:这里的v.element?.widgetData?.displayName获取的是字段的元数据显示名称,如果需要获取字段输入的标题可以使用v.element?.properties?.label

为什么需要选择当前页面中的字段?

页面在发起请求时,会根据当前视图中的字段查询最小结果集,不在页面中的字段无法被正确获取。可以将用到的字段拖放至视图中,并使用【隐藏】属性进行隐藏即可。

列内容超过当前表格行高该怎么办?

在界面设计器中选中表格组件,可以为表格设置指定的行高。

在界面设计器的属性面板组件中,如何获取当前字段所在模型的模型编码?

``` ts
interface InternalMetadata {
model?: string;
}

@Widget.Reactive()
protected get currentModel(): string | undefined {
return (this.formData._metadata as InternalMetadata)?.model;
}
```

在界面设计器的属性面板组件中,如何获取关联关系字段的关联模型的模型编码?

``` ts
interface InternalMetadata {
modelReferences?: {
model?: string;
};
}

@Widget.Reactive()
protected get referenceModel(): string | undefined {
return (this.formData._metadata as InternalMetadata)?.modelReferences?.model;
}
```

如何理解关联关系字段中的【透出字段(选项字段列表)】属性?

正如我们现在已知的,页面发起查询请求时,将根据页面中的元数据获取最小结果集,不在页面中的字段并不包含在结果集中。这样虽然使得我们可以最小化的控制结果集的大小。

但对于关联关系类型的字段来说,我们也面临了一个无法回避的问题:对于【表格】、【表单】等这些组件,我们可以通过拖放字段的方式直接将字段展示在页面中,因此对于这些可被设计的组件而言无需其他过多的配置即可正常使用。但对于【下拉单选】、【下拉多选】等这些组件而言,我们无法在页面中直接定义关联关系字段的元数据。

我们在解决这一问题上也同样做了很多,比如当你在【下拉单选】中设置【选项标题】时,选项标题中的字段会被自动透出到页面中,在发起请求时也就能正常获取这些字段了。

特殊的是,如果某些字段只是在逻辑上被使用的,但又不能将其通过【选项标题】展示给用户的时候,我们必须使用一个属性来定义这些字段,使得我们的业务逻辑可以正常运行。因此,我们设计了【透出字段】来解决这一问题。

为什么在属性面板中的【选项字段列表】是【透出字段】呢?

正如我们在业务开发过程中,服务端的模型定义的显示名称和在界面设计器中的字段标题可以是不一致的。由于服务端模型定义的字段API名称为optionFields,其中文直译是【选项字段列表】,但我们在产品设计时,希望这一属性可以被用户理解,因此在页面上展示的时候使用了【透出字段】作为标题呈现给用户。

在界面设计器中如何配置【透出字段(选项字段列表)】?

optionFields在配置时使用的是字段的API名称,在关联关系属性定义时,允许使用.分隔的方式定义关联关系字段的关联属性。

如:['code', 'name', 'user.code', 'user.name']。
其中user字段为多对一(M2O)的关联关系字段,其中有两个字段codename

与之对应的GQL响应结构为:

query {
    xxxxxxQuery {
        queryPage(xxxxxx) {
            content {
                code
                name
                user {
                    code
                    name
                }
            }
        }
    }
}

在界面设计器的属性面板组件中,如何通过代码方式设置【透出字段(选项字段列表)】?

@Widget.Method()
public setOptionFields(optionFields: string[]) {
  this.formData.optionFields = optionFields;
}

如何在字段中使用mountedCallChaining提供mountedProcess方法?

@Widget.Reactive()
@Widget.Inject()
protected mountedCallChaining: CallChaining | undefined;

protected mountedProcess() {}

protected mounted() {
  super.mounted();
  this.mountedCallChaining?.hook(this.path, async () => {
    await this.mountedProcess();
  });
}

protected unmounted() {
  super.unmounted();
  this.mountedCallChaining?.unhook(this.path);
}

Oinone社区 作者:nation原创文章,如若转载,请注明出处:https://doc.oinone.top/oinone-faq/58.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
nation的头像nation数式员工
上一篇 2023年6月20日 pm4:07
下一篇 2023年11月2日 pm1:58

相关推荐

  • 工作流常见问题

    一、工作流引用及触发 1.项目中工作流引入和流程触发https://doc.oinone.top/backend/4361.html 2.【工作流】如何添加工作流运行时依赖https://doc.oinone.top/workflow/13144.html 3.工作流查看、处理流程https://doc.oinone.top/oio4/9388.html 二、 常见工作流功能应用及扩展 1.动态表单https://doc.oinone.top/designer/workflowdesigner/16336.html 2.【工作流】如何自定义支持在加签的同时审批同意https://doc.oinone.top/workflow/13505.html 3.【工作流】如何自定义工作流的待办任务列表https://doc.oinone.top/workflow/6989.html 4.【工作流】如何在业务模型的列表中展示工作流的审批按钮https://doc.oinone.top/workflow/6987.html 5.【工作流】流程扩展自定义函数示例代码汇总https://doc.oinone.top/designer/workflowdesigner/4802.html 6.工作流审核撤回/回退/拒绝钩子使用https://doc.oinone.top/backend/4542.html 三、工作流常见使用问题分析及处理 1.测试环境的流程向正式环境迁移,5.1.x是否还需要部署流程设计器https://doc.oinone.top/faq/17858.html 2.流程设计器里,部门领导审批环节,审批按钮不见了https://doc.oinone.top/faq/17684.html 3.流程设计器,在某个节点审批完后,能否自定义抄送/知会人员(可能多个)https://doc.oinone.top/faq/17516.html 4.流程设计器,填写审批意见,能支持富文本吗?https://doc.oinone.top/faq/17510.html 5.流程设计器,想在同意时加入电子签名https://doc.oinone.top/faq/17503.html 6.加了工作流模块,但是界面设计器模型动作下没有业务流程按钮https://doc.oinone.top/faq/17206.html 7.流程设计器,流程审批人是传哪个类型的IDhttps://doc.oinone.top/faq/17198.html 8.流程设计器里,配置更新数据触发场景,但更新数据时没有触发自动发起流程https://doc.oinone.top/faq/17192.html 9.动态根据业务数据的字段值显示审批同意按钮的文案https://doc.oinone.top/faq/13822.html 10.自定义审批方式、自定义审批节点名称https://doc.oinone.top/backend/4847.html

    2024年10月24日
    1.8K00
  • 复杂字段类型的导入导出

    复杂字段类型的导入导出 如果想要导出的字段是该模型关联的对象里的一个字段,则需要在创建模版时使用 “对象.字段” 的方式,并在导出时手动设置该字段 例如PamirsEmployee模型中的company,使用company.name创建值 @Field.many2one @Field.Relation(relationFields = {“companyCode”}, referenceFields = {“code”}) @Field(displayName = “所属公司”) private PamirsCompany company; //定义员工导入导出模版 @Component public class EmployeeTemplate implements ExcelTemplateInit { public static final String TEMPLATE_NAME = "employeeTemplate"; @Override public List<ExcelWorkbookDefinition> generator() { //可以返回多个模版,导出的时候页面上由用户选择导出模版 return Collections.singletonList( ExcelHelper.fixedHeader(PetShop.MODEL_MODEL, TEMPLATE_NAME) .createBlock(TEMPLATE_NAME, PetShop.MODEL_MODEL) .setType(ExcelTemplateTypeEnum.EXPORT) //使用company.name获取PamirsCompany里面的name字段 .addColumn("company.name", "所属公司") .build()); } } //手动设置该字段,如2所示 如果想要导出的字段是非存储字段,由于默认只导出存储在数据库里的字段,非存储的字段需要在导出时手动设置 @Slf4j @Component @Ext(ExcelExportTask.class) public class EmpTemplateExportExtPoint extends DefaultExcelExportFetchDataExtPoint { @Override @ExtPoint.Implement(expression = "context.name==\"" + EmployeeTemplate.TEMPLATE_NAME + "\"") public List<Object> fetchExportData(ExcelExportTask exportTask, ExcelDefinitionContext context) { return super.fetchExportData(exportTask, context); } //重写rawQueryList方法,使用listFieldQuery将非存储字段单独设置 @Override protected List<?> rawQueryList(IWrapper<?> wrapper) { List<PamirsEmployee> pamirsEmployeeProxies = (List<PamirsEmployee>) Models.data().queryListByWrapper(wrapper); if (CollectionUtils.isNotEmpty(pamirsEmployeeProxies)) { new PamirsEmployee().listFieldQuery(pamirsEmployeeProxies, PamirsEmployee::getDepartmentList); } return pamirsEmployeeProxies; } } 如果想要导入的字段存在多个,则可以创建一个代理模型,在代理模型里设置一个字段用来接受该多值字段(在Excel里一个单元格内填写多值字段,每个字段用自定义符号(如:" ; ")进行分割),在创建模版时使用该代理类的模版,在导入导出的时候再根据 “;” 截取 @Model.model(PamirsEmployeeProxy.MODEL_MODEL) @Model(displayName = "员工导出代理") @Model.Advanced(type = ModelTypeEnum.PROXY) public class PamirsEmployeeProxy extends PamirsEmployee { private static final long serialVersionUID = -6582160484690807999L; public static final String MODEL_MODEL = "business.PamirsEmployeeProxy"; @Field.String @Field(displayName = "部门编码列表") private String departmentCodeList; } 创建模版时创建代理模型的字段 .addColumn("departmentCodeList", "部门编码列表") 导入:新建一个类,用来作为导入的扩展点,继承AbstractExcelImportDataExtPointImpl @Component @Ext(ExcelImportTask.class) @Slf4j public class EmpTemplateImportExtPoint extends AbstractExcelImportDataExtPointImpl<PamirsEmployeeProxy> { //必须加这个方法,它使用EmployeeTemplate.TEMPLATE_NAME来指定导入模版 @Override @ExtPoint.Implement(expression = "importContext.definitionContext.name==\"" + EmployeeTemplate.TEMPLATE_NAME + "\"") public Boolean importData(ExcelImportContext importContext, PamirsEmployeeProxy data) { //TODO 根据逻辑校验数据 String departmentCodeList = data.getDepartmentCodeList();…

    2024年7月1日
    89700
  • 如何排查启动依赖错误的问题

    场景 启动的时候可能会出现以下错误提示 启动模块中包含jar包或者数据库中不存在的模块 启动模块中包含不存在的模块 启动模块互斥模块中包含已安装模块 排查项 确保启动工程的application.yml中的启动模块pamirs.boot.modules配置项内的模块在pom.xml内依赖了对应模块的jar包 确保出问题的模块的定义文件内的包扫描前缀packagePrefix方法内的路径定义正确,该路径可以是多个,但是一定要包含模块下所有子工程的路径,包括但不限于api子工程、core工程等,另外该路径也不能和其他模块的配置有重复、交集、包含关系(例如:a模块是 aa.bb.cc, b模块是aa.bb,这样b模块的路径就包含了a模块的) 启动类里spring自带的@ComponentScan.basePackages注解项需要包含所有依赖模块的路径 无代码应用创建的时候,配置了依赖模块。但这个依赖没有被本地安装,该模块就会出问题,要么删除该依赖,要么在代码里添加该依赖。

    2024年7月18日
    1.2K00
  • Oinone 是什么

    1.Oinone能做什么? Oinone 是一款专注解决复杂业务场景的开源低代码应用平台,旨在提供所见即所得的快速可视化搭建应用功能,并打造企业专属的低代码平台。 提升交付效率,缩短交付周期; 减少人力投入,解决技术人才招聘难的难题; 减少接联调,减少重复建设,解决质量管控难题; 一键轻松安装,应用全生命周期管理,解决应用管理难题; 2.为什么要用Oinone? 用Oinone低代码平台可以帮助企业应对竞争变化、适应业务变化、满足技术需求、提高研发效率,并且低代码平台已经成为企业数字化转型的核心工具之一。 企业竞争变化,从单一企业变相兼职链的网络竞争; 业务变化,从信息化时代,内部/管理/流程、结果,变向数字时代,外部/商业,运营; 技术更替,从主球稳定,安全,功能丰富可配置到系统性能极限承载能力与弹性扩容/随需而变,需求响应速度、智能;化、实时分析,数据与业务的联动,用户体验,B端的业务需求C端的体验; 对研发人员的需求越来越大,同时要求越来越高。低代码平台是提升研发效率,降低研发成本核心手段; 低代码的地位已经从辅助走向核心; 3.Oinone 和其他的无代码平台相比优势是什么 既支持无代码的拖拉拽,还能通过研发框架支持自主工程研发; 低代码和无代码在贯彻了整个软件的生命周期,在不同场景发挥不同价值; 可基于软件工程理论,进行科学管理; 不改变研发习惯,主流开源技术栈,无抵触心理 4.我是软件公司,用不用Oinone? 软件公司非常适合使用 Oinone,不管你是做标品还是定制项目,都非常适合使用Oinone 低代码:构建软件快速开发标准,让研发专注在业务创新本身 快速实施个性化需求、或开发简单和应急应用 5.我们公司产品迭代很快,用不用Oinone? 无代码:使用Oinone 可以快速的响应需求,以及后续迭代需求; 集成平台:快速的是实施集成方案,一次配置,终身受用; 低代码:降低技术复杂度,提升研发效率,让研发专注于业务本身; 6.我们公司产品bug很多,用不用Oinone? 很多公司都有这样的痛点,一直有BUG ,反复修反复出现,重构成本非常大,比如项目预算有限,无法支撑重新构建,技术栈老旧,研发人员比较少,Oinone 提供以下解决方案: 同步原系统数据回流处理后数据; 原系统数据扩展处理新业务逻辑; 7..我用的是JAVA 技术栈,我还需要用Oinone么? 在探讨低代码平台的合作时,首先需要确认的是,如果您之前使用的是Java技术栈,那么低代码平台是否能够生成相应的Java代码,包括常用的增删改查等方法。这种代码生成器与低代码平台的第一种方式——代码生成器相似,它提供了基础逻辑的生成。 针对这一层面,Oinone平台具有几个显著优势。首先,后端定义的模型或写法不仅决定了后端的数据处理,同时也影响了前端的UI展示层。其次,当前端开发时加入特定的注解,这些注解的本质是为了收集原始数据。一旦数据源被定义,编写的代码在最终运行时实际上已经转变为数据。这是与传统代码编写方式的第二个不同点。第三,尽管我们提供了代码编写的方式,但这样做的核心目的在于解决标准化产品与个性化需求之间的矛盾。在进行功能扩展时,对于工程架构和代码编写的冲击较大。 oinone的核心优势在于减少代码生成量,内置代码规范,并实现前后端无需联调。此外,无代码设计器能够理解用代码构建的模型或函数,并与之结合。 在前端方面,低代码平台也提供了相应的工程结构,允许通过添加平台依赖来引入平台功能。前端的自定义能力包括自定义模板、布局和页面,以及完全自定义视图的能力。此外,平台支持前端与后端的交互自定义,以及自定义字段的引入。 总结来说,后端定义的模型不仅决定了数据存储结构和扩展方式,还决定了前端的UI展示,并能与无代码平台结合。引入TypeScript(TS)的概念,可以帮助团队最大化逻辑复用,解决了业务组件难以沉淀的问题。通过这种方式,前后端的结合更为紧密,减少了联调的需求,提高了开发效率。

    2022年3月14日
    98800
  • 请确认函数是否存在报错排查路径

    当函数不存在的时候,可能有的原因如下:先确认引入启动环境: 是否引入distribution-session包?(Y/N) 如果 distribution-session 包被引入,可能的原因如下: 先检查 base_function 根据 namespace 和 fun 检查函数是否存在,如果存在,检查 openLevel 是否包含 API 级别(二进制值为 14/12/8)。 在 base_model_data 中根据 res_id 检查 load_module,同一环境中所有jvm服务,加载模块必须在启动模块或启动模块的依赖模块中。 检查 redis 中 base.Model:${modelModel}:model_model 键值是否存在,如果存在,根据函数关键字尝试搜索。 如果上面三步没有找到问题,且所有元数据都存在。distribution-session 包可能没有引入,确认是否需要使用 distribution-session 包。 如果 distribution-session 包没有被引入,可能的原因如下: 先检查 base_function 根据 namespace 和 fun 检查函数是否存在,如果存在,检查 openLevel 是否包含 API 级别。 在 base_model_data 中根据 res_id 检查 load_module,加载模块必须在启动模块中。 自定义gql进行请求报函数是否存在可能的原因 检查Gql请求是否符合规范:参考文章GraphQL Service检查请求类型query/mutation是否和函数定义一致。

    2025年8月29日
    57600

Leave a Reply

登录后才能评论