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

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

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

相关推荐

  • 数据大屏如何绑定页面

    第一步:数据可视化创建大屏。 第二步:界面设计器创建页面,在页面设计时,拖一个数据大屏组件,将大屏绑定到页面中,点击右上角显示母版,准备将页面绑定到菜单上。 第三步:在oinone功能展示应用下,创建一个菜单,点击绑定当前页面,将该页面绑定到菜单上,点击发布。 第四步:进入刚才菜单所属的应用(oinone功能展示),可以看到刚刚新增的菜单,数据大屏就成功绑定到页面上了。

    2024年12月11日
    56800
  • 协同开发常见问题

    一、协同开发支持 https://doc.oinone.top/backend/4821.html 二、协同开发手册 https://doc.oinone.top/backend/14878.html 三、协同开发常见问题 1、启动报错:公共环境开启了元数据保护模式,本地开发环境需配置https://doc.oinone.top/faq/17045.html 2.协同开发配置一定要注意事项https://doc.oinone.top/faq/18249.html 3.Onione协同开发源码分析https://doc.oinone.top/backend/17209.html 4、Oinone环境保护(v5.2.3以上)https://doc.oinone.top/backend/18451.html 5.协同模式下,本地开发的模型在设计器里找不到https://doc.oinone.top/faq/17110.html

    2024年10月24日
    67300
  • 常见启动问题

    一、配置问题: 1.证书问题,如过期、路径等。排查文档:https://doc.oinone.top/install/backendinstall/13760.html2.模型中关系字段配置问题。排查文档:https://doc.oinone.top/wen-ti-zhen-duan/15999.html3.跨模块依赖诸多问题。排查文档:https://doc.oinone.top/install/backendinstall/14824.html4.代码问题。如枚举类忘记添加类注解等 二、 环境问题: 1.版本问题。同base库的多个环境版本不一致,从而引发系列问题,如数据表重复新增删除。2.数据表唯一键冲突。 三、场景启动问题分析及解决方案 1.后端启动慢如何排查https://doc.oinone.top/faq/16613.html 2.验证服务是否启动成功https://doc.oinone.top/oinone-faq/17905.html 3.启动时提示未配置SQL记录存储目录,然后启动失败报错https://doc.oinone.top/faq/17048.html 4.启动报错,公共环境开启了元数据保护模式,本地开发环境需配置https://doc.oinone.top/faq/17045.html 5.在docker容器里启动,路径配置正确,仍旧报错https://doc.oinone.top/faq/17040.html 6.容器启动服务,License认证报错https://doc.oinone.top/faq/17039.html 7.系统启动耗时过长,内存耗用过大https://doc.oinone.top/faq/6659.html 8.启动提示:依赖的模块不存在https://doc.oinone.top/faq/6630.html 9.协同模式下,本地开发的模型在设计器里找不到https://doc.oinone.top/faq/17110.html 10.测试服务访问测试服务里docker容器的设计器服务接口,报dubbo接口不存在https://doc.oinone.top/faq/17055.html

    2024年10月23日
    46000
  • 请确认函数是否存在报错排查路径

    当函数不存在的时候,可能有的原因如下:先确认引入启动环境: 是否引入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日
    55500
  • 常见权限问题

    一、系统权限操作手册配置 https://doc.oinone.top/chan-pin-shi-yong-shou-ce/17797.html 二、常见权限问题分析及解决 1.函数如何跳过权限拦截https://doc.oinone.top/wen-ti-zhen-duan/16299.html 2.工作流工作台无权限排查路径https://doc.oinone.top/wen-ti-zhen-duan/15924.html 3.windows环境npm安装依赖提示无权限https://doc.oinone.top/faq/14590.html 4.权限异常排查路径参考https://doc.oinone.top/faq/14391.html 5.自定义RSQL占位符(placeholder)及在权限中使用https://doc.oinone.top/backend/6393.html 6.自定义数据权限拦截处理https://doc.oinone.top/backend/4737.html 7.如何扩展行为权限https://doc.oinone.top/dai-ma-shi-jian/18976.html 8.跳转动作无权限问题排查https://doc.oinone.top/wen-ti-zhen-duan/18678.html

    2024年10月23日
    44800

Leave a Reply

登录后才能评论