提交数据动作如何把弹窗内的数据完全返回

相关推荐

• 前端

  左树右表页面，点击表格的新建按钮，获取选中的树节点

  左树右表页面，点击表格的新建按钮，获取选中的树节点 通过自定义action的方式来实现 新建一个action文件TreeActionWidget.ts import { ActionType, ActionWidget, SPI, ViewActionTarget, RouterViewActionWidget } from '@kunlun/dependencies'; import { OioNotification } from '@kunlun/vue-ui-antd'; @SPI.ClassFactory( ActionWidget.Token({ actionType: [ActionType.View], target: [ViewActionTarget.Router], name: 'uiView0000000000079503' // action对应的name }) ) export class TreeActionWidget extends RouterViewActionWidget { protected async clickAction() { const context = this.rootRuntimeContext.view.context || {}; const activeTreeContext = context.activeTreeContext || null; if (!activeTreeContext) { // 没有选中左侧树 OioNotification.error('', '请选择左侧节点!'); } else { // 选中的时候 (this.action as any).context = activeTreeContext; // 执行原先的action逻辑 super.clickAction(); } } }

  oinone

  2023年11月1日

  775000
• 前端

  前端自定义字段与视图最佳方案

  自定义视图获取数据 在某些情况下，oinone 提供的默认视图无法满足需求，这时我们就需要自定义视图。通常，虽然视图的 UI 不足以满足要求，但数据结构是不变的。此时，重点是修改页面 UI，数据的请求与回填可以利用平台默认的能力。 如何实现？ 界面设计器的使用 你可以通过界面设计器先配置页面，平台在运行时会根据设计器生成对应的 GraphQL 请求，并自动回填数据。 视图的数据结构 视图的数据类型分为可以分为 Object 跟 List Object 代表当前视图的数据结构是对象 List 代表当前视图的数据结构是数组。 如果我们将 Object 跟 List 分的更细一点就变成了这样： 1: Object: 对象，代表当前视图的数据结构是单个对象，例如：表单视图、详情视图1: List: 对象数组，代表当前视图的数据结构数组，例如：表格视图、卡片视图、画廊视图 视图类型 平台组件 数据属性 表格视图 TableWidget dataSource 画廊视图 GalleryWidget dataSource 表单视图 FormWidget formData 详情视图 DetailWidget formData 自定义视图时，需要先确认当前视图的类型，再通过界面设计器进行页面配置。前端部分只需继承相应的组件，平台底层会自动处理接口数据的获取与回填。 表单视图示例： import Form from './Form.vue'; // 自定义表单视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-form' }) ) export class CustomForm extends FormWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Form); return this; } } Vue 组件： <template></template> <script lang="ts"> export default defineComponent({ props: { formData: { // 当前表单的数据 type: Object, default: () => ({}) } } }); </script> 自定义layout // 原始的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> //自定义的layout模版 <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="custom-form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 其实就是把 widget="form" 改成 widget="custom-form" 表格视图示例： import Table from './Table.vue'; // 自定义表格视图 @SPI.ClassFactory( BaseElementWidget.Token({ widget: 'custom-table' }) ) export class CustomTable extends TableWidget { public initialize(props: Props) { super.initialize(props); this.setComponent(Table); return this; } } Vue 组件： <template></template> <script…

  汤乾华

  2024年10月17日

  1.6K002
• 前端

  TableWidget 与 FormWidget 浅析

  前言：本文主要聚集于 TableWidget和 FormWidget，对两者以外的内容不做赘述。 TableWidget和 FormWidget作为一个基本的渲染模块与 Mask等不同，TableWidget与 FormWidget有着明确的目的，比如 TableWidget就是作为一个表格视图，这种名称中可以看得出来。其将表格的一系列能力聚拢，如单元格，行列选择排序，翻页等等； TableWidget 我们使用表格到底是在使用什么？ 在我们讲述渲染流程前，我们需要提一个问题，在我们使用表格组件时，我们在使用什么，换而言之，我们对表格组件中关注的是什么？应该说我们更关注的是表格所展示的数据。TableWidget或者说整个低代码其实解决的就是这个问题，让我们可以很方便的展示数据。不用关心一些细枝末节 TableWidget 的渲染 TableWidget在整个渲染流程中的负责组装各种 Vue 组件所需要的核心数据或事件回调并传递给其绑定的 Vue 组件即 DefaultTable，如 allowRowClick,rowClickMode等等，这些值会作为 Props 传递给 DefaultTable，DefaultTable则一定意义上充当了一个桥接层，主要做了两件事，处理 Props， 处理 Slot，TableWidget传递给 DefaultTable的 Props 会经过 DefaultTable再次组合，创建新的 Props,同时根据当前的 Props 判断是否有必要新增一些 slot，比如 OioPagination组件是否需要渲染就取决于 Props.showPagination 的值,经过 DefaultTable的处理后， props与 slot会进一步交给 OioTable进行渲染，OioTable则会进一步聚合处理，比如如果没有 defaultSlot则进行空值的渲染，如果存在 footSlot则会构建一个包裹层去包裹它。这些组件协同完成了一个表格的结构，而我们真正关心的数据则由一个个 BaseTableColumnWidget渲染。BaseTableColumnWidget的渲染过程类似于 TableWidget，其负责组装 DefaultTableColumn渲染所需要的 props，然后交给 OioTableColumn进行实际渲染。并且会有多种基于 BaseTableColumnWidget的 widget通过重写 renderDefaultSlot,renderEditSlot,renderContentSlot,renderHeaderSlot等几个 props 实现不同状态，不同类型等组件的渲染。通过 TableWidget与 BaseTableColumnWidget相结合， Table 页面完成了主体框架与内容的渲染。而当数据完成渲染后，不可避免的会有数据交互，比如分页，排序，过滤等，这些交互都由 TableWidget与 BaseTableColumnWidget共同完成。比如排序翻页等，TableWidget会将事件作为 props 向下注入，当事件被调用，TableWidget会进行处理，比如发起请求，或者对内部数据排序等。而除了数据的展示，还有一些动作，即 Action ,Action 被触发时会按照内部的配置进行工作，比如编辑时，将获取 activeRecord，随后触发 Table 的编辑。 TableWidget就是这样去渲染出了一个完整的表格页面。能够完成数据的增删改查等操作 FormWidget FormWidget与 TableWidget一样，也是作为一个渲染模块，但是它与 TableWidget不同的是，FormWidget是作为一个表单视图，其将表单的一系列能力聚拢，如表单提交，表单校验，表单重置等等。其重点在于对数据的增改。所以在提供的能力上也有区别，比如 FormWidget没有提供翻页，排序，过滤等能力，因为这些能力属于表格的能力，而 FormWidget则更关注于表单的能力。提供了数据的存储，提交，校验等能力 Form 在渲染时流程与 Table 大同小异，其同样为三层结构 FormWidget => DefaultForm => FormFieldWidget 一层层向下渲染，不同的在于 FormWidget 更多的关注点在于维护其内部的 FormData 这是整个表单页面所围绕的东西，当页面上的控件发生变化，其变更的值会被收集到 FormData 中，并在后续中使用。同时在编辑已有数据场景下，Form 会将数据加载到 FormData，随后下放给 FormFiledWidget。 异同之处 从介绍中可以看出，Table 侧重于数据的查询展示，Form 则侧重于数据的变动处理，但是抽象的看其核心其实是同一套逻辑，即数据的存储与展示，中间或许会有对数据的某些处理，但是并不是本质上的区别，两者在核心理念上是一致的，即让使用者只需要关心数据本身，而不需要关注于繁琐的视图构造，这是整个低代码甚至前端的发展方向。

  liji2

  2025年3月25日

  599000
• 组件

  oio-dropdown 下拉菜单

  向下弹出的列表。 何时使用 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。 用于收罗一组命令操作。 Select 用于选择，而 Dropdown 是命令集合。 API 属性如下 参数 说明 类型 默认值 destroyOnHide 关闭后是否销毁 Dropdown boolean false disabled 菜单是否禁用 boolean – getTriggerContainer 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 Function(triggerNode) () => document.body overlay(v-slot) 菜单 Menu – overlayClassName 下拉根元素的类名称 string – overlayStyle 下拉根元素的样式 object – placement 菜单弹出位置 bottomLeft | bottom | bottomRight | topLeft | top | topRight bottomLeft trigger 触发下拉的行为, 移动端不支持 hover Array<click|hover|contextmenu> ['hover'] visible(v-model:visible) 菜单是否显示 boolean – 事件 事件名称 说明 回调参数 onUpdateValue 菜单显示状态改变时调用，参数为 visible。点击菜单按钮导致的消失不会触发 function(visible)

  汤乾华

  2023年12月18日

  874000
• 前端

  如何通过 Oineone 平台自定义视图

  在 Oineone 平台上，自定义视图允许用户替换默认提供的页面布局，以使用自定义页面。本文将指导您如何利用 Oineone 提供的 API 来实现这一点。 默认视图介绍 Oineone 平台提供了多种默认视图，包括： 表单视图 表格视图 表格视图 (左树右表) 详情视图 画廊视图 树视图 每种视图都有其标准的 layout。自定义视图实际上是替换这些默认 layout 的过程。 默认的表单视图 layout <view type="FORM"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 内嵌的的表单视图 layout <view type="FORM"> <element widget="form" slot="form"> <xslot name="fields" slotSupport="pack,field" /> </element> </view> 默认的表格 <view type="TABLE"> <pack widget="group"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> </pack> <pack widget="group" slot="tableGroup"> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="table" slot="table" slotSupport="field"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" slotSupport="action" /> </element> </pack> </view> 内嵌的的表格 <view type="TABLE"> <view type="SEARCH"> <element widget="search" slot="search" slotSupport="field" /> </view> <element widget="actionBar" slot="actionBar" slotSupport="action"> <xslot name="actions" slotSupport="action" /> </element> <element widget="table" slot="table"> <element widget="expandColumn" slot="expandRow" /> <xslot name="fields" slotSupport="field" /> <element widget="rowActions" slot="rowActions" /> </element> </view> 左树右表 <view type="table"> <pack title="" widget="group"> <view type="search"> <element slot="search" widget="search"/> </view> </pack> <pack title="" widget="group"> <pack widget="row" wrap="false"> <pack widget="col" width="257"> <pack title="" widget="group"> <pack widget="col"> <element slot="tree" widget="tree"/> </pack> </pack> </pack> <pack mode="full" widget="col"> <pack widget="row"> <element justify="START" slot="actionBar"…

  汤乾华

  2024年4月3日

  1.1K000