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

介绍

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

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日 下午7:27
下一篇 2024年5月16日 上午10:30

相关推荐

  • 登录页自定义配置如何使用

    介绍 为满足大家对登录页面不同的展示需求,oinone在登录页面提供了丰富的配置项以支持大家在业务上的个性化需求 配置方式 在manifest.js内新增以下配置选项 manifest.js文件如何配置的参考文档 runtimeConfigResolve({ login: { /** * 登录按钮label */ loginLabel: '登录&#…

    2024年4月24日
    53800
  • 如何自定义指定页面的样式

    可以通过在layout上给页面元素加css的class来解决此问题 import { registerLayout, ViewType } from '@kunlun/dependencies'; export const install = () => { registerLayout( ` <!– 给视图加class -…

    2024年8月16日
    46800
  • 如何在Oinone 根据主题实现自定义组件样式

    在页面交互中,样式的变化是前端核心工作之一。本文介绍如何在Oinone平台中根据主题变化自定义组件样式。 介绍 Oinone平台提供了六种不同的主题设置,浅色大主题、浅色中主题、浅色小主题、深色大主题、深色中主题、深色小主题,默认采用浅色中主题。本文旨在指导如何在线或通过代码修改这些主题,以满足个性化需求。 基础知识 Oinone平台的默认主题为浅色中主题,…

    2024年2月26日
    46400
  • 如何自定义 GraphQL 请求

    在开发过程中,有时需要自定义 GraphQL 请求来实现更灵活的数据查询和操作。本文将介绍两种主要的自定义 GraphQL 请求方式:手写 GraphQL 请求和调用平台 API。 方式一:手写 GraphQL 请求 手写 GraphQL 请求是一种直接编写查询或变更语句的方式,适用于更复杂或特定的业务需求。以下分别是 query 和 mutation 请求…

    2024年9月21日
    67900
  • 自定义组件之自动渲染(组件插槽的使用)(v4)

    阅读之前 你应该: 了解DSL相关内容。母版-布局-DSL 渲染基础(v4) 了解SPI机制相关内容。组件SPI机制(v4.3.0) 自定义组件简介 前面我们简单介绍过一个简单的自定义组件该如何被定义,并应用于页面中。这篇文章将对自定义组件进行详细介绍。 自定义一个带有具名插槽的容器组件(一般用于Object数据类型的视图中) 使用BasePackWidge…

    2023年11月1日
    32900

发表回复

登录后才能评论