• Tiếng Việt

      • Mở rộng Action

      Trong NocoBase, Action là nút bấm trong Block, dùng để kích hoạt logic nghiệp vụ — ví dụ "Tạo mới", "Chỉnh sửa", "Xóa", v.v. Bằng cách kế thừa lớp cơ sở ActionModel, bạn có thể thêm nút Action tùy chỉnh.

      Ngữ cảnh Action

      Mỗi Action cần khai báo ngữ cảnh nó xuất hiện, chỉ định thông qua thuộc tính static scene:

      Ngữ cảnhGiá trịMô tả
      collectionActionSceneEnum.collectionTác động lên bảng dữ liệu, ví dụ nút "Tạo mới"
      recordActionSceneEnum.recordTác động lên một bản ghi, ví dụ nút "Chỉnh sửa", "Xóa"
      bothActionSceneEnum.bothCả hai ngữ cảnh đều dùng được
      allActionSceneEnum.allTất cả các ngữ cảnh đều dùng được (bao gồm các context đặc biệt như dialog, v.v.)

      Ví dụ

      Action cấp bảng dữ liệu

      Tác động lên toàn bộ bảng dữ liệu, xuất hiện trong thanh thao tác phía trên Block:

      // models/SimpleCollectionActionModel.tsx
import { ActionModel, ActionSceneEnum } from '@nocobase/client-v2';
import { ButtonProps } from 'antd';
import { tExpr } from '@nocobase/flow-engine';

export class SimpleCollectionActionModel extends ActionModel {
  static scene = ActionSceneEnum.collection;

  defaultProps: ButtonProps = {
    children: tExpr('Simple collection action'),
  };
}

SimpleCollectionActionModel.define({
  label: tExpr('Simple collection action'),
});

      Action cấp bản ghi

      Tác động lên một bản ghi, xuất hiện trong cột thao tác của mỗi hàng trong bảng:

      // models/SimpleRecordActionModel.tsx
import { ActionModel, ActionSceneEnum } from '@nocobase/client-v2';
import { ButtonProps } from 'antd';
import { tExpr } from '@nocobase/flow-engine';

export class SimpleRecordActionModel extends ActionModel {
  static scene = ActionSceneEnum.record;

  defaultProps: ButtonProps = {
    children: tExpr('Simple record action'),
  };
}

SimpleRecordActionModel.define({
  label: tExpr('Simple record action'),
});

      Áp dụng cả hai ngữ cảnh

      Nếu Action không phân biệt ngữ cảnh, dùng ActionSceneEnum.both:

      // models/SimpleBothActionModel.tsx
import { ActionModel, ActionSceneEnum } from '@nocobase/client-v2';
import { ButtonProps } from 'antd';
import { tExpr } from '@nocobase/flow-engine';

export class SimpleBothActionModel extends ActionModel {
  static scene = ActionSceneEnum.both;

  defaultProps: ButtonProps = {
    children: tExpr('Simple both action'),
  };
}

SimpleBothActionModel.define({
  label: tExpr('Simple both action'),
});

      Cấu trúc của ba cách viết là giống nhau — sự khác nhau chỉ nằm ở giá trị của static scene và văn bản nút trong defaultProps.

      Đăng ký Action

      Trong load() của Plugin, dùng registerModelLoaders để đăng ký tải theo nhu cầu:

      // plugin.tsx
import { Plugin } from '@nocobase/client-v2';

export class PluginSimpleActionClient extends Plugin {
  async load() {
    this.flowEngine.registerModelLoaders({
      SimpleCollectionActionModel: {
        loader: () => import('./models/SimpleCollectionActionModel'),
      },
      SimpleRecordActionModel: {
        loader: () => import('./models/SimpleRecordActionModel'),
      },
      SimpleBothActionModel: {
        loader: () => import('./models/SimpleBothActionModel'),
      },
    });
  }
}

      Sau khi đăng ký xong, trong "Cấu hình thao tác" của Block có thể thêm các nút Action tùy chỉnh của bạn.

      Mã nguồn đầy đủ

      Liên kết liên quan