文件上传组件前端校验超128长度大小，不清楚怎么配置

相关推荐

• 前端

  弹窗或抽屉表单视图rootRecord获取不到对应的数据

  在平台默认的实现中，rootRecord 代表的是根视图的数据。比如，在表格页面点击按钮打开了弹窗，弹窗里面包含一个表单视图，但是该视图获取 rootRecord 却是最外层的视图数据。 如果期望 rootRecord 数据是弹窗的视图数据，需要手动修改表单的 rootRecord。下面的代码演示了如何重写 rootData 以确保其数据是弹窗的数据： @SPI.ClassFactory( BaseElementWidget.Token({ viewType: ViewType.Form, widget: 'MyCustomFormWidgetFormWidget' }) ) export class MyCustomFormWidgetFormWidget extends FormWidget { @Widget.Reactive() @Widget.Provide() public get rootData(): any[] | undefined { return this.activeRecords; } } 上述代码重写了 rootData，这样就可以确保 rootData 的数据是弹窗的数据。 接下来就是注册： registerLayout( ` <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="MyCustomFormWidgetFormWidget" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> `, { viewType: ViewType.Form, model: '弹窗模型', viewName: '弹窗视图名称' } )

  汤乾华

  2023年11月13日

  1.4K000
• 前端

  【界面设计器】自定义字段组件基础

  阅读之前 本文档属于高阶实战文档，已假定你了解了所有必读文档中的全部内容，并了解过界面设计器的一些基本操作。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 概述 平台提供的字段组件（以下简称组件）是通过SPI机制进行查找并最终渲染在页面中。虽然平台内置了众多组件，但无法避免的是，对于业务场景复杂多变的实际情况下，我们无法完全提供所有组件。 面对这样的困境，我们提供了外部注册组件的方式。在之前文章中，我们了解到组件注册后需要应用到页面中，需要配合DSL才能实现。其实，在平台中还提供了一种SAAS化的组件注册方式，配合界面设计器的设计能力，可以将组件在设计器页面中引入，从而更近一步的满足不同的业务场景。 通过界面设计器可以创建自定义组件，并为组件添加对应的元件。 界面设计器可以为元件设计其在指定视图下的属性面板，在页面设计时，可以使用该属性面板为元件设置相关属性。 在界面设计器的设计页面中拖入的组件，将通过SPI机制获取到一个唯一的元件，并渲染在页面中，提供给业务使用。 界面设计器-组件管理 名词解释 页面设计：使用界面设计器设计页面的页面。 属性面板设计：使用界面设计器设计属性面板的页面。 设计页面：页面设计和属性面板设计的统称。 组件库：展示在设计页面左侧的全部可拖拽组件。 组件：在组件库中可拖拽的最小单元。 元件：一个组件中的具体实现，是组件的最小单元。 属性面板：展示在设计页面右侧的元件属性。 页面设计 属性面板设计 组件管理入口 进入界面设计器后，可通过上方标签页切换至【组件】管理页面。 创建第一个组件 点击【添加组件】，在弹窗中输入组件名称【文本输入框】后，点击【确定】。 创建第一个元件 点击【组件卡片】或点击【管理元件】按钮进入【元件】管理页面。 点击【添加元件】，可以看到如下【创建元件】弹窗。 表单字段解释 元件名称：显示名称，仅在管理页面做展示使用。 API名称：SPI中的widget属性。 支持字段业务类型：SPI中的ttype属性。 支持多值：SPI中的multi属性。 支持视图类型：SPI中的viewType属性。 元件描述：元件功能描述内容，仅在管理页面做展示使用。 填入以下内容，并点击【确定】。 设计元件属性面板 点击【元件卡片】或点击【设计元件属性】按钮进入【属性面板设计】页面。 从【模型】中搜索【标题】，将【标题】和【隐藏标题】拖放至设计区域。如果想实现的相对美观，可以额外添加【分组】组件拖放至设计区域，并修改标题为【基础】，如下图所示。 点击【发布】按钮进行页面的发布。 至此，我们设计了第一个元件属性面板，接下来，我们需要在页面设计中使用这个组件。 在页面中使用【文本输入框】 由于我们之前选择的支持的视图类型是【表单】，因此我们在【表单】页面进行接下来的操作，此处略去创建视图的过程。 从【模型】中将【名称】拖放至设计区域。并通过点击【切换】按钮切换至我们的组件【文本输入框】，并且将标题改为【这是文本输入框组件】查看其展示效果。 属性变化 在组件切换后，属性面板发生了变化，原有属性会根据当前属性面板中现有字段进行【裁剪】，相同属性名称（字段）的值会被保留，其他属性值会被丢弃。 由于我们并没有在当前属性面板添加【宽度】属性，因此原有属性的宽度被丢弃，组件会自动变成默认【宽度】，默认宽度为1。 组件变化 由于我们并没有在【低无一体】中上传对应元件的代码实现，因此展示了默认的【单行文本】组件，目前组件的展示效果不会发生变化。 组件可切换规则 只有【组件】中包含与【当前选中字段】匹配的【元件】，才会将对应【组件】的名称展示在【可切换列表】中。 【当前选中字段】中包含了如下三个属性，这三个属性和【创建元件】时设置的属性一一对应。 （右侧属性面板切换至字段后，可查看当前选中字段的相关元数据信息。） 所在视图类型：根据字段在视图中的位置进行推断，当前所在位置为【表单】。当【支持视图类型】包含【表单】时条件成立。 字段业务类型：文本。当【支持字段业务类型】包含【文本】时条件成立。 是否多值：否。当【支持多值】相同时条件成立。 使用低无一体为组件上传代码实现 进入【组件】管理页面，点击【低无一体】，打开【低无一体】弹窗。 按照步骤，在【生成SDK】后，可以【下载模板工程】。在本地进行npm相关操作后，会在packages/kunlun-plugin目录下生成dist目录。在dist目录中，会有对应的kunlun-sdk.umd.js文件，使用【上传JS文件】进行上传。如果工程中包含了css，使用【上传CSS文件】进行上传。上传完成后点击【确定】进行保存。 PS：在模板工程中，我们提供了最简化的Hello World示例，即使不添加任何代码也可以看到组件的具体效果，为了方便演示，我们暂时不介绍代码实现的相关内容，仅需直接上传对应js文件，看到效果即可。如果遇到相关问题，请点击查看【前端】低无一体部署常见问题。 结语 至此，我们已经完整体验了从【创建组件】到【属性面板设计】再到【使用组件】以及【实现组件】的全部流程。 通过这一流程我们不难发现，【自定义组件】并非仅仅用于【页面设计】，在【属性面板设计】时，我们同样可以使用【自定义组件】来设计【自定义组件】的属性面板。这样便形成了一个完整的设计闭环，使得开发者可以更大程度的发挥自身创造力，开发出符合业务需求的【自定义组件】。

  数式-海波

  2023年11月1日

  2.1K000
• 前端

  表格字段配置Switch开关

  在业务开发中，我们经常会遇到表格中有个Switch开关组件: 那么如何通过界面设计器配置这个组件呢，下面让我们一起来学习下吧。 设计布尔类型的组件 1: 首先在界面设计器的组件区域添加一个组件。 2: 我们给这个组件添加一个元件,元件的配置必须跟下面的一致 3: 给元件添加属性配置 拖拽一个单行文本字段, 字段编码必须是truthyAction，代表的是该字段为true的时候要执行的动作 再拖拽一个单行文本字段, 字段编码必须是falsyAction，代表的是该字段为false的时候要执行的动作 4: 发布元件，然后再去对应的界面设计器页面，将对应的字段切换成刚刚设计的组件 5: 发布界面设计器，染红我们可以在运行时的页面看到效果 当switch切换的时候，会执行对应的action

  汤乾华

  2023年11月21日

  1.6K000

• 【前端】移动端工程结构最佳实践（v4/v5）

  阅读之前 你应该： 了解node与npm相关内容 了解lerna包管理工具的相关内容 官方文档 了解git仓库的相关内容 了解rollup的相关内容 工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解 工程结构 ├── packages │   ├── kunlun-mobile-boot │   │   ├── package.json │   │   ├── public │   │   │   ├── favicon.ico │   │   │   └── index.html │   │   ├── src │   │   │   ├── main.ts │   │   │   └── shim-vue.d.ts │   │   ├── tsconfig.json │   │   └── vue.config.js │   ├── kunlun-module-mobile-demo │   │   ├── scripts │   │   │   ├── postpublish.js │   │   │   └── prepublish-only.js │   │   ├── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── index.ts │   │   ├── package.json │   │   ├── rollup.config.js │   │   └── tsconfig.json │   └── kunlun-modules-mobile-demo │   ├── scripts │   │   ├── build.config.js │   │   ├── postpublish.js │   │   └── prepublish-only.js │   ├── packages │   │   ├── module-demo1 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │   └── src │   │   │   ├── index.ts │   │   │   └── shim-vue.d.ts │   │   ├── module-demo2 │   │   │   ├── index.ts │   │   │   ├── package.json │   │   │   ├── rollup.config.js │   │   │  …

  nation

  前端 2023年11月1日

  1.5K000
• 前端

  Oinone移动端快速入门

  介绍 oinone的pc端的页面默认都可以在移动端直接访问。自定义mask、layout、视图组件、字段组件、动作组件方式都参考pc端实现。目前移动端的UI组件是基于vant@3.6.0版本开发，如有自定义部分的代码，推荐使用该组件库。 “注意”： 由于移动端和pc端在交互上的巨大差异，两端用的是不同的UI组件库是，按照此约定开发的自定义组件在两端也是无法相互兼容的，在pc端自定义的组件或者页面，不会在移动端自动适配，需要自行开发对应的移动端组件或者页面。 工程搭建 移动端很多交互跟pc端差异很大，所以移动端的我们采用的方案是独立用一套移动端的UI框架实现，而不是简单的做页面布局自适应，所以移动端需要跟pc端一样独立部署一套前端工程。 参考文档：【前端】移动端工程结构最佳实践（v4/v5） 如何区分多端 在界面设计器设计页面的时候，可以通过顶部的多端设备的图标切换在各端的页面效果。 pc端页面 切换为移动端后的页面 注意：大部分情况下，pc端和移动端可以共享一个设计的页面，然后通过上面的方法区分两端，如果移动端的页面交互差异很大，那更推荐独立新建一个页面专门给移动端使用。 模块 模块在定义的时候可以通过注解@Module.clientTypes决定当前模块在哪些端展示 package pro.shushi.pamirs.demo.api; import org.springframework.stereotype.Component; import pro.shushi.pamirs.business.api.BusinessModule; import pro.shushi.pamirs.core.common.CommonModule; import pro.shushi.pamirs.file.api.FileModule; import pro.shushi.pamirs.meta.annotation.Module; import pro.shushi.pamirs.meta.base.PamirsModule; import pro.shushi.pamirs.meta.common.constants.ModuleConstants; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; import pro.shushi.pamirs.user.api.UserModule; @Component @Module( name = DemoModule.MODULE_NAME, displayName = "oinoneDemo工程", version = "1.0.0", // 客户端类型，默认是PC和MOBILE端都展示 clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}, // 登录后默认访问 priority 值最小的模块 priority = 1, dependencies = {ModuleConstants.MODULE_BASE, CommonModule.MODULE_MODULE, UserModule.MODULE_MODULE, BusinessModule.MODULE_MODULE, FileModule.MODULE_MODULE } ) @Module.module(DemoModule.MODULE_MODULE) @Module.Advanced(selfBuilt = true, application = true) public class DemoModule implements PamirsModule { public static final String MODULE_MODULE = "demo_core"; public static final String MODULE_NAME = "DemoCore"; @Override public String[] packagePrefix() { return new String[]{ "pro.shushi.pamirs.demo" }; } } 菜单 界面设计器设置方式 在菜单设置的时候可以选择“显示设备” 低代码设置方式 通过注解@UxMenu.clientTypes设置显示设备 package pro.shushi.pamirs.demo.core.init.menu; import pro.shushi.pamirs.boot.base.constants.ViewActionConstants; import pro.shushi.pamirs.boot.base.ux.annotation.action.UxRoute; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenu; import pro.shushi.pamirs.boot.base.ux.annotation.navigator.UxMenus; import pro.shushi.pamirs.demo.api.model.DemoItem; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.enmu.ClientTypeEnum; @UxMenus() public class DemoMenus implements ViewActionConstants { // 同时在pc端和移动端显示 @UxMenu(value = "商品中心", clientTypes = {ClientTypeEnum.PC, ClientTypeEnum.MOBILE}) class ItemPMenu{ @UxMenu("商品类目") class DemoItemAndCateMenu { // 只在pc端显示 @UxMenu(value = "商品管理", clientTypes = {ClientTypeEnum.PC}) @UxRoute(DemoItem.MODEL_MODEL) class DemoItemMenu { } // 只在移动端显示 @UxMenu(value = "类目管理", clientTypes = {ClientTypeEnum.MOBILE}) @UxRoute(DemoItemCategory.MODEL_MODEL) class DemoItemCategoryMenu { } } } } 组件 界面设计器选中组件后，可以在右边属性面板看到“显示设备”的配置，默认为空，为空则表示在pc端和移动端都显示

  nation

  2024年9月19日

  1.6K000