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

相关推荐

• 低无一体

  如何编写自定义字段组件的校验逻辑

  介绍 自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。 示例代码 import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType } from '@kunlun/dependencies' @SPI.ClassFactory(FormFieldWidget.Token({ viewType: [ViewType.Form], ttype: ModelFieldType.String, widget: 'DemoPhone' })) export class DemoFormPhoneFieldWidget extends FormStringFieldWidget { // 字段校验方法 public async validator(): Promise<ValidatorInfo> { // 建议先调用平台内置的通用校验逻辑 const res = await super.validator(); if (!isValidatorSuccess(res)) { // 校验失败直接返回 return res; } // 编写自有校验逻辑 if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) { // 通过内置的validatorError方法提示校验提示信息 return this.validatorError('手机号格式错误'); } // 无异常，用内置的validatorSuccess返回校验通过的信息 return this.validatorSuccess(); } } 扩展学习 自定义字段组件如何处理vue组件内的表单校验

  nation

  2024年8月23日

  2.1K000

• 自定义组件之手动渲染弹出层（v4）

  阅读之前 你应该： 了解自定义组件相关内容。 自定义组件之手动渲染基础（v4） 弹出层组件 我们内置了两个弹出层组件，弹窗(Dialog)和抽屉(Drawer)，以下所有内容全部围绕弹窗(Dialog)进行描述，抽屉相关内容与弹窗完全一致。 下面这个对照表格可以帮助你区分两个弹出层组件的异同： 弹出层相关功能 弹窗(Dialog) 抽屉(Drawer) API方法 Dialog#create Drawer#create 内置组件 DialogWidget DrawerWidget 内置插槽 header, default, footer header, default, footer 渲染弹出层的方式 我们提供了三种渲染弹出层组件的方式，根据不同的情况使用不同的方式可以让实现变得更简单。 使用Dialog#createAPI方法创建弹窗：一般用于简单场景，动作区无法进行自定义。 使用DSL渲染能力创建弹窗 调用ActionWidget#click方法打开弹窗（适用于自动渲染场景） 使用createWidget创建DialogWidget并打开弹窗（适用于手动渲染场景） 使用第三方组件创建弹窗：一般用于弹窗需要自定义的场景中，性能最优，可用于任何场景。 使用Dialog#createAPI方法创建弹窗 以下是一个自定义组件的完整示例，其使用ViewCache#compule方法获取视图。 view.ts export const template = `<view> <field data="id" invisible="true" /> <field data="code" label="编码" /> <field data="name" label="名称" /> </view>`; ManualDemoWidget.ts import { BaseElementWidget, createRuntimeContextForWidget, Dialog, FormWidget, MessageHub, RuntimeView, SPI, ViewCache, ViewType, Widget } from '@kunlun/dependencies'; import ManualDemo from './ManualDemo.vue'; import { template } from './view'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ManualDemo' })) export class ManualDemoWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(ManualDemo); return this; } @Widget.Method() public async openPopup() { // 获取运行时视图 const view = await this.fetchViewByCompile(); if (!view) { console.error('Invalid view'); return; } // 创建运行时上下文 const runtimeContext = createRuntimeContextForWidget(view); const runtimeContextHandle = runtimeContext.handle; // 获取初始化数据 const formData = await runtimeContext.getInitialValue(); // 创建弹窗 const dialogWidget = Dialog.create(); // 设置弹窗属性 dialogWidget.setTitle('这是一个演示弹窗'); // 创建所需组件 dialogWidget.createWidget(FormWidget, undefined, { metadataHandle: runtimeContextHandle, rootHandle: runtimeContextHandle, dataSource: formData, activeRecords: formData, template: runtimeContext.viewTemplate, inline: true }); dialogWidget.on('ok', () => { MessageHub.info('click ok'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); dialogWidget.on('cancel', () => { MessageHub.info('click cancel'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); // 打开弹窗…

  nation

  前端 2023年11月1日

  1.3K000
• 前端

  表格页自定义按钮如何获取搜索区域的查询条件

  介绍 在使用 Oinone 平台开发过程中，开发者可能会遇到自定义动作需要获取搜索条件并传递给后端的情况。本文将介绍如何利用 Oinone平台 实现此功能。 技术基础知识 当我们在自定义一个动作的时候要先明确自定义的动作类型是什么样的，在Oinone平台中，分为了如下几个动作： 1: 视图动作2: 服务端动作3: 客户端动作3: URL动作 功能步骤或代码示例 案例1、服务端动作，动作点击时候要拿到搜索内容，然后传递给后端。 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model', actionType: ActionType.Server }) ) export class MyServerActionWidget extends ServerActionWidget { protected async clickAction() { const rst = this.getSearchRsqlAndQueryParams(); } } 案例2、视图动作点击的时候把搜索内容带到另外一个视图或者弹窗 import { ActionType, ActionWidget, SPI, ServerActionWidget } from '@kunlun/dependencies'; @SPI.ClassFactory( ActionWidget.Token({ name: 'name', model: 'model' }) ) export class MyDialogViewActionWidget extends DialogViewActionWidget { // 继承当前动作原本的class protected async clickAction() { const { queryData } = this.getSearchRsqlAndQueryParams(); this.action.context = queryData super.clickAction() return true } } 在上述代码中，我们自定义了一个服务器动作，并在点击触发函数中调用了getSearchRsqlAndQueryParams方法，该方法会返回一个对象： { rsql: String, // 搜索内容对应的rsql queryData: Object, // 搜索的数据 condition: Condition, // 搜索内容对应的数据结构 queryDataToString: Function // 将搜索内容转成JSON字符串 } 这样我们就可以根据业务场景使用对应的值。 注意事项 1: 确保正确导入所需的依赖包。2: 理解并适当修改代码以满足特定业务需求。 总结 本文介绍了在 Oinone 平台中如何自定义一个服务端动作，并获取搜索条件传递给后端的方法。通过合理利用这些功能，开发者可以更灵活地定制应用程序，满足不同的业务需求。 实践案例 如何自定义点击导出动作绑定指定模板

  汤乾华

  2024年3月6日

  1.5K000
• 前端

  如何自定义 GraphQL 请求

  在开发过程中，有时需要自定义 GraphQL 请求来实现更灵活的数据查询和操作。本文将介绍两种主要的自定义 GraphQL 请求方式：手写 GraphQL 请求和调用平台 API。 方式一：手写 GraphQL 请求 手写 GraphQL 请求是一种直接编写查询或变更语句的方式，适用于更复杂或特定的业务需求。以下分别是 query 和 mutation 请求的示例。 1. 手写 Query 请求 以下是一个自定义 query 请求的示例，用于查询某个资源的语言信息列表。 const customQuery = async () => { const query = `{ resourceLangQuery { queryListByEntity(query: {active: ACTIVE, installState: true}) { id name active installState code isoCode } } }`; const result = await http.query('resource', query); this.list = result.data['resourceLangQuery']['queryListByEntity']; }; 说明： query 语句定义了一个请求，查询 resourceLangQuery 下的语言信息。 查询的条件是 active 和 installState，只返回符合条件的结果。 查询结果包括 id、name、active、installState 等字段。 2. 手写 Mutation 请求 以下是一个 mutation 请求的示例，用于创建新的资源分类信息。 const customMutation = async () => { const code = Date.now() const name = `测试${code}` const mutation = `mutation { resourceTaxKindMutation { create(data: {code: "${code}", name: "${name}"}) { id code name createDate writeDate createUid writeUid } } }`; const res = await http.mutate('resource', mutation); console.log(res); }; 说明： mutation 语句用于创建一个新的资源分类。 create 操作的参数是一个对象，包含 code 和 name 字段。 返回值包括 id、createDate 等字段。 方式二：调用平台的 API 平台 API 提供了简化的 GraphQL 调用方法，可以通过封装的函数来发送 query 和 mutation 请求。这种方式减少了手写 GraphQL 语句的复杂性，更加简洁和易于维护。 1. 调用平台的 Mutation API 使用平台的 customMutation 方法可以简化 Mutation 请求。 /** * 自定义请求方法 * @param modelModel 模型编码 * @param method 方法名或方法对象 * @param records 请求参数，可以是单体对象或者对象的列表 * @param requestFields…

  汤乾华

  2024年9月21日

  2.0K000
• 前端

  【界面设计器】自定义字段组件实战——轮播图

  阅读之前 此文章为实战教程，已假定你熟悉了【界面设计器】较为完整的【自定义组件】相关内容。 如果在阅读过程中出现的部分概念无法理解，请自行学习相关内容。【前端】文章目录 业务背景 用户需要从【创建/编辑】页面中上传多张图片，并且在【详情】页面将这多张图片进行【轮播】展示。 业务分析 从需求来看，我们需要实现一个【轮播图】组件，并且该组件允许在【详情】视图中使用。在其他视图中，我们可以直接使用平台内置的【图片】组件，实现基础的编辑和展示功能。 名词解释 业务模型：需要进行可视化管理的存储模型或代理模型。 准备工作 你需要在某个业务模型下创建一个【表格视图】用于查看全部数据，创建【表单视图】用于创建/编辑数据，并创建【详情视图】展示必要的信息。（为了方便起见，你可以在所有视图中仅使用编码和名称两个字段） 你需要将【表格视图】绑定到某个菜单上，并通过【跳转动作】将三个视图进行关联，可以完整执行当前模型的全部【增删改查】操作。 业务模型定义 （以下仅展示本文章用到的模型字段，忽略其他无关字段。） DemoModel 名称 API名称 业务类型 是否多值 长度(单值长度) 编码 code 文本 否 128 名称 name 文本 否 128 轮播图 carouselImages 文本 是 512 实现页面效果展示 表格视图 表单视图-创建 表单视图-编辑 详情视图 根据业务背景添加轮播图字段到所有视图 轮播图字段信息： 字段业务类型：文本 多值：是 使用组件：图片 无代码模型 在模型设计器创建轮播图字段，并从【组件库】-【模型】拖放至视图中即可。 PS：这里需要注意的是，在模型设计器中需要切换至专家模式，并确认字段长度为512，否则当URL超长时将无法保存。 低代码模型 与服务端同学确认字段，并从【组件库】-【模型】中拖放至视图中即可。 将上图中的【演示】数据进行【编辑】，并上传三张图片，在【详情视图】查看默认展示效果。 演示图片下载 创建组件、元件 准备工作完成后，我们需要根据【业务背景】确定【组件】以及【元件】相关信息，并在【界面设计器】中进行创建。 以下操作过程将省略详细步骤，仅展示可能需要确认的关键页面。 创建轮播图组件 创建轮播图元件 根据业务背景，我们需要根据模型中的字段确定业务类型，在这个场景中，可以使用如下配置。（暂时可以不进行属性面板的设计） 在【详情视图】中将【轮播图字段】的组件切换为我们新创建的【轮播图组件】 PS：这里会发现组件变成了【输入框】的样式，这是由于我们没有提供对应元件的代码实现，使得SPI找到了默认组件。 启动SDK工程进行组件基本功能开发 (npm相关操作请自行查看SDK工程中内置的README.MD) Carousel.vue <template> <a-carousel class="carousel" effect="fade" autoplay> <div class="carousel-item" v-for="image in images" :key="image"> <img :src="image" :alt="image" /> </div> </a-carousel> </template> <script lang="ts"> import { Carousel as ACarousel } from 'ant-design-vue'; import { computed, defineComponent, PropType } from 'vue'; export default defineComponent({ name: 'Carousel', components: { ACarousel }, props: { value: { type: Array as PropType<string[]> } }, setup(props) { const images = computed(() => props.value || []); return { images }; } }); </script> <style lang="scss"> .carousel { .slick-slide { height: 160px; & > div, .carousel-item { width: 100%; height: 100%; } img { max-width: 100%; max-height: 100%; margin: auto; } } } </style> 效果展示 开发完成后，我们将重新打包生成的JS文件和CSS文件在【界面设计器】的【低无一体】进行上传，就可以在【设计器环境】中正常使用了。 设计轮播图的属性面板 通过我们使用的a-carousel组件，我们发现组件中提供了很多【属性】或【功能】可以进行配置，比如是否自动切换(autoplay)、面板指示点位置(dotPosition)、是否显示面板指示点(dots)等。在这里我们将对这三个属性的配置方式进行演示，其他更多属性可以自行设计并开发。 我们可以在【界面设计器】的【属性面板设计】中根据这三个属性的字段类型确定以下信息： 功能 API名称 业务类型 选用组件 可选项 是否自动切换 autoplay 布尔 开关 -…

  数式-海波

  2023年11月1日

  4.3K000