如何在表格的字段内添加动作

介绍

在日常的业务中,我们经常需要在表格内直接点击动作完成一些操作,而不是只能在操作栏中,例如:订单的表格内点击商品名称或者里面的按钮跳转到商品详情页面,这里我们将带来大家来通过自定义表格字段来实现这个功能。

1.编写表格字段组件

组件ts文件TableBtnFieldWidget.ts

import {
  ActionWidget,
  ActiveRecordExtendKeys,
  BaseFieldWidget,
  BaseListView,
  ModelFieldType,
  queryDslWidget,
  queryRowActionBar,
  RowContext,
  SPI,
  TableStringFieldWidget,
  BaseElementListViewWidget,
  ViewType,
  Widget
} from '@kunlun/dependencies';
import { createVNode, VNode } from 'vue';
import { toString } from 'lodash-es';
import TableBtnField from './TableBtnField.vue';

@SPI.ClassFactory(
  BaseFieldWidget.Token({
    viewType: ViewType.Table,
    ttype: [ModelFieldType.String, ModelFieldType.Text],
    // widget: 'StringLink',
    // 以下3行配置代码测试用,生产建议在界面设计器自定义组件,widget填自定义组件的api名称
    model: 'resource.k2.Model0000000109',
    name: 'name'
  })
)
export class TableBtnFieldWidget extends TableStringFieldWidget {
  @Widget.Reactive()
  private get triggerActionLabel() {
    // 界面设计器组件内设计该属性
    return this.getDsl().triggerActionLabel || '更新';
  }

  private getTriggerAction() {
    return this.model.modelActions.find((a) => a.label === this.triggerActionLabel);
  }

  private getTriggerActionWidget(widgetHandle: string, draftId: string, triggerActionLabel: string): ActionWidget | undefined {
    const listView = Widget.select(widgetHandle) as unknown as BaseListView;
    const listWidget = queryDslWidget(listView?.getChildrenInstance(), BaseElementListViewWidget);
    if (!listWidget) {
      return undefined;
    }
    const rowActionBar = queryRowActionBar(listWidget.getChildrenInstance(), draftId);
    const actionWidget = rowActionBar?.getChildrenInstance().find((a) => (a as ActionWidget).action.label === triggerActionLabel);
    return actionWidget as ActionWidget;
  }

  protected clickAction(context: RowContext) {
    const draftId = context.data[ActiveRecordExtendKeys.DRAFT_ID] as unknown as string;
    const actionWidget = this.getTriggerActionWidget(this.getRootHandle()!, draftId, this.triggerActionLabel);
    if (!actionWidget) {
      console.error('未找到action', this.triggerActionLabel);
      return;
    }
    actionWidget.click();
  }

  @Widget.Method()
  public renderDefaultSlot(context: RowContext): VNode[] | string {
    const value = toString(this.compute(context));
    if (value) {
      return [
        createVNode(TableBtnField, {
            value,
            triggerAction: this.getTriggerAction(),
            clickAction: () => this.clickAction(context)
          }
        )
      ];
    }
    return [];
  }
}

组件的vue文件TableBtnField.vue

这里的vue组件是将动作直接以按钮的形式展现,可以根据实际需要给字段内容包裹一个div后直接添加点击事件触发clickAction方法

<template>
  <span>
    {{ value }}
  </span>
  <oio-button type="primary" size="small" @click="clickAction" v-if="triggerAction">{{ triggerAction.label || triggerAction.displayName }}</oio-button>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { RuntimeAction } from '@kunlun/dependencies';
import { OioButton } from '@kunlun/vue-ui-antd';

export default defineComponent({
  components: { OioButton },
  props: { value: String, triggerAction: Object as PropType<RuntimeAction>, clickAction: Function },
  setup(props) {
    return {
    };
  }
});
</script>

2.在界面设计器的设计页面将需要在字段单元格展示的动作拖入到操作栏中,这样我们就可以在字段组件中拿到需要触发的动作的元数据。由于这个动作并不需要在操作栏真的展示,所以再将这个字段设置隐藏。

如果需要跳转到其他模型的页面,可以在动作的属性面板的上下文中配置参数,查看参考文档 页面跳转的时候如何增加跳转参数

如何在表格的字段内添加动作

3.预览页面效果

如何在表格的字段内添加动作

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

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

(0)
nation的头像nation数式员工
上一篇 2024年5月15日 pm7:27
下一篇 2024年5月16日 am10:30

相关推荐

  • 自定义字段的数据联动

    某种情况下,开发人员期望自定以的字段发生变化后,需要修改其他的字段,这篇文章从两个维度来讲解如果处理数据的联动 界面设计器配置 1: 在界面设计器页面中的的组件区域找到自定义的字段,设计元件 2: 在模型区域,搜索提交方式,如果找到了,就把该字段拖拽进来, 如果找不到,就在元件中的组件区域,拖拽一个文本字段,按照下面的配置进行配置,然后保存 图一是找到了对应的字段图二是找不到对应的字段 【图一】 【图二】 图二的字段编码必须是constructDataTrigger 3: 从模型区搜索联动函数,将其拖拽进来 3: 从模型区搜索提交数据,将其拖拽进来4: 从模型区搜索提交字段,将其拖拽进来 5: 发布 (记得刷新页面哦) 最后再到对应的设计器页面,选中该字段,进行配置 提交方式为blur或者change , 需要开发者手动调用该方法 this.blur()或者this.change(value) // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // this.change(val) // this.blur() } } 联动函数就是要调用的后端函数 提交数据分为:变更字段 -> 发生变化后的字段当前视图字段 -> 当前视图所有的字段指定字段 -> 指定字段,如果配置的指定字段,那么提交字段的配置就要输入对应的字段 代码配置 平台也支持通过代码的方式修改字段 // 字段对应的ts文件 class MyField extends FormFieldWidget { onChangeValue(val) { // 修改字段本身的值 this.change(val) // 修改其他字段的值 this.formData.otherField = 'value' this.reloadFormData$.subject.next(true); } }

    2023年11月9日
    1.2K00
  • oio-button 按钮

    主按钮:用于主行动点,一个操作区域只能有一个主按钮。 默认按钮:用于没有主次之分的一组行动点。 虚线按钮:常用于添加操作。 文本按钮:用于最次级的行动点。 链接按钮:一般用于链接,即导航至某位置。 以及四种状态属性与上面配合使用。 危险:删除/移动/修改权限等危险操作,一般需要二次确认。 禁用:行动点不可用的时候,一般需要文案解释。 加载中:用于异步操作等待反馈的时候,也可以避免多次提交。 API 按钮的属性说明如下: 属性 说明 类型 默认值 版本 block 将按钮宽度调整为其父宽度的选项 boolean false disabled 按钮失效状态 boolean false icon 设置按钮的图标类型 v-slot – loading 设置按钮载入状态 boolean | { delay: number } false type 设置按钮类型 primary | ghost | dashed | link | text | default default 事件 事件名称 说明 回调参数 版本 click 点击按钮时的回调 (event) => void 支持原生 button 的其他所有属性。

    2023年12月18日
    49700
  • oio-checkbox 对选框

    API 属性 Checkbox 参数 说明 类型 默认值 版本 autofocus 自动获取焦点 boolean false checked(v-model:checked) 指定当前是否选中 boolean false disabled 失效状态 boolean false indeterminate 设置 indeterminate 状态,只负责样式控制 boolean false value 与 CheckboxGroup 组合使用时的值 boolean | string | number – 事件 事件名称 说明 回调参数 版本 change 变化时回调函数 Function(e:Event) –

    2023年12月18日
    71100
  • oio-modal 对话框

    API 参数 说明 类型 默认值 版本 cancelText 取消按钮文字 string| slot 取消 closable 是否显示右上角的关闭按钮 boolean true closeIcon 自定义关闭图标 VNode | slot – confirmLoading 确定按钮 loading boolean 无 destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false footer 底部内容,当不需要默认底部按钮时,可以设为 :footerInvisible="true" slot 确定取消按钮 getTriggerContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body keyboard 是否支持键盘 esc 关闭 boolean true mask 是否展示遮罩 boolean true maskClosable 点击蒙层是否允许关闭 boolean true enterText 确认按钮文字 string 确定 title 标题 string|slot 无 visible(v-model:visible) 对话框是否可见 boolean 无 width 宽度 string|number 520 wrapClassName 对话框外层容器的类名 string – zIndex 设置 Modal 的 z-index number 1000 cancelCallback 点击遮罩层或右上角叉或取消按钮的回调, return true则关闭弹窗 function(e) enterCallback 点击确定回调 function(e)

    2023年12月18日
    82500
  • 如何提高自定义组件的开发效率

    引言 本文将通过前端的开发者模式带领大家提高自定义组件的开发效率 支持2024年9月6日之后用npm i安装的4.7.x之后的所有版本 介绍前端开发者模式 开发者模式的特性 浏览器控制台可以看到更多利于开发的日志输出 页面顶部状态栏消息模块的轮询接口,将只在页面刷新后请求一次,这样会减少开发阶段不必要的请求,以及解决后端断点调试的时候被消息轮询干扰的问题 页面视图的数据将不在走缓存,而是每次实时从base_view表里查询template字段获取,方便需要实时看通过xml修改的页面效果 如何进入开发者模式 通过在浏览器地址栏后追加;mode=dev刷新页面进入开发者模式,页面加载后可以在浏览器开发者工具的应用标签下的本地存储空间(即localStorage)中看到本标识的存储,如果想退出开发者模式可以手动清除该值 开发者模式的应用场景 1.通过控制台跳转到视图动作(ViewAction)的调试页面 页面刷新后,可以在浏览器开发者工具的控制台看到如下图的日志输出,直接点击该链接可以跳转到当前页面的调试链接弹窗视图动作、抽屉视图动作等以弹出层为展示效果的页面,之前的版本是无法进入调试链接查看的,现在可以在弹窗等视图动作点击后在控制台看到该链接点击进入调试页面 2.查看页面母版(mask)、布局(layout)的匹配情况 母版(mask)匹配结果布局(layout)匹配结果 3.查看视图组件(View)、字段组件(Field)、动作组件(Action)的匹配情况 通过浏览器开发者工具的控制台,我们可以看到每个视图、字段、字段匹配到的组件的class类名,这样我们就知道当前用的是那个组件,在自定义的时候可以在源码查看该组件类的实现代码,然后再选择是否继承该父类。另外我们在给组件定义SPI条件的时候,可以参考匹配入参和匹配结果内的属性。 匹配入参是当前元数据SPI的最全量注册条件 匹配结果是当前匹配到的组件的注册条件,一般情况下我们只需要在匹配结果的条件加上当前模型编码(model)、视图名称(viewName)、字段名称(name)、动作名称(actionName)等条件就可以完成自定义组件的覆盖。 在浏览器开发者工具的控制台,通过模型编码、视图名称、字段名称、动作名称等关键字快速搜索定位到需要查找的组件 控制台搜索快捷键:win系统通过ctrl+f,mac系统通过cmd+f 总结 在确保自定义部分代码最终正确被import导入到启动工程main.ts内的情况下,可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。

    2024年9月6日
    1.5K00

Leave a Reply

登录后才能评论