跳到主要内容

普通控件

函数使得普通控件能够响应用户的交互，并执行相应的业务逻辑。

控件列表​

  • 输入框
  • 多行文本
  • 计数器
  • 单选框组
  • 多选框组
  • 下拉选择
  • 日期选择器
  • 日期区间选择器
  • 评分
  • 颜色选择器
  • 开关
  • 滑块
  • 按钮
  • 文字
  • HTML

ctx 函数列表​

获取组件的值​

通过 dataBind 或者 instanceId 来获取组件的值。 如果需要获取 ArrayForm 内某个组件的值，你应该使用 getArrayValue

使用方法​

ctx.getValue(dataBind);

ctx.getValue(instanceId);

示例​

ctx.getValue("flow_purchase.ID"); // '值'

ctx.getValue("input_ah2wl95gdra4f"); // '值'

批量获取组件的值​

通过 dataBind 或者 instanceId 来批量获取组件的值。 按照传入的组件 id 顺序，返回一个值的数组。 仅能用来获取非 ArrayForm 组件内的组件的值

使用方法​

ctx.getValues(dataBind, dataBind2, dataBind3, ...);

ctx.getValues(instanceId, instanceId2, ...);

示例​

ctx.getValues(
  "flow_purchase.ID",
  "switch_qfrgaqtjc9n01",
  "flow_purchase_product"
);

修改组件的值​

通过 dataBind 或者 instanceId 来修改组件的值。 如果需要修改 ArrayForm 内某个组件的值，你应该使用 setArrayValue

使用方法​

ctx.setValue(dataBind, newValue);

ctx.setValue(instanceId, newValue);

示例​

ctx.setValue("flow_purchase.ID", "新值");

ctx.setValue("input_ah2wl95gdra4f", "新值");

批量修改组件的值​

通过对象的形式，批量修改组件的值 仅能用来修改非 ArrayForm 组件内的组件的值

使用方法​

ctx.setDatas({
    [dataBind]: newValue,
    [instanceId]: newValue,
    ...
})

示例​

ctx.setDatas({
  "flow_purchase.ID": "新id",
  "flow_purchase.pur_number": 10,
  rate_5rk4hzg0s65bk: 5,
});

获取组件 Instance​

通过 dataBind 或者 instanceId 来获取组件的对象实例。 如果需要获取 ArrayForm 内的某个组件对象实例，你应该使用 getArrayInstance

使用方法​

const instanace = ctx.getInstance(dataBind); // 组件实例

const instance2 = ctx.getInstance(instanceId); // 组件实例

示例​

const instanace = ctx.getInstance("flow_purchase.ID"); // 组件实例

const instance2 = ctx.getInstance("input_ah2wl95gdra4f"); // 组件实例

修改组件 instance 的属性​

通过 dataBind，或者 instanceId，或者 instance，来修改组件的对象实例。 如果需要修改 ArrayForm 内的某个组件对象实例，你应该使用 setArrayInstance

propName 指组件实例 props 属性中的任意属性。

使用方法​

ctx.setInstance(dataBind, propName, newValue);

ctx.setInstance(instanceId, propName, newValue);

ctx.setInstance(instance, propName, newValue);

示例​

// 通过dataBind修改
// 修改组件的提示文案
ctx.setInstance("flow_purchase.ID", "placeholder", "新的提示文字");

// 修改组件的显示隐藏，false为隐藏组件，true为显示组件
ctx.setInstance("flow_purchase.ID", "visible", false);

// 通过instanceId修改
// 修改组件的是否禁用，false为不禁用，true为禁用
ctx.setInstance("input_ah2wl95gdra4f", "disabled", true);

// 通过instance对象实例修改
// 修改组件的是否必填，false为不必填，true为必填
const instance = ctx.getInstance("input_ah2wl95gdra4f");
ctx.setInstance(instance, "required", true);

校验组件的值​

使用方法​

const [isValid, errors] = await ctx.validate(); // 校验整个表单

const [isValid, errors] = await ctx.validate(dataBind); // 校验指定组件

const [isValid, errors] = await ctx.validate(instanceId); // 校验指定组件

示例​

// 校验整个表单
const [isValid, errors] = await ctx.validate();
if (isValid) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors);
}

// 通过dataBind校验指定组件
const [isValid2, errors2] = await ctx.validate("flow_purchase.ID");
if (isValid2) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors2);
}

// 通过instanceId校验指定组件
const [isValid3, errors3] = await ctx.validate("input_ah2wl95gdra4f");
if (isValid3) {
  // 校验通过
} else {
  // 校验失败，存在错误项
  console.log(errors3);
}

errors 示例​

[
  {
    index: undefined,
    message: "输入框必填",
    name: "flow_purchase.ID",
    success: false,
  },
];

修改组件显示隐藏​

使用方法​

// 输入一个或多个组件的dataBind或instanceId，最后一个参数输入显示隐藏的布尔值，true为显示，flase为隐藏
ctx.visibles(dataBind, dataBind2, dataBind3, ..., visible);

ctx.visibles(instanceId, instanceId2, instanceId3, ..., visible);

示例​

// 通过dataBind
// 显示
ctx.visibles("flow_purchase.ID", "flow_purchase.reason", true);

// 通过instanceId
// 显示
ctx.visibles("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", true);

修改组件是否禁用​

使用方法​

// 输入一个或多个组件的dataBind或instanceId，最后一个参数输入是否禁用的布尔值，true为禁用，flase为不禁用
ctx.disableds(dataBind, dataBind2, dataBind3, ..., disabled);

ctx.disableds(instanceId, instanceId2, instanceId3, ..., disabled);

示例​

// 通过dataBind
// 禁用
ctx.disableds("flow_purchase.ID", "flow_purchase.reason", true);
// 不禁用
ctx.disableds("flow_purchase.ID", "flow_purchase.reason", false);

// 通过instanceId
// 禁用
ctx.disableds("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", true);
// 不禁用
ctx.disableds("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", false);

修改组件是否必填​

使用方法​

// 输入一个或多个组件的dataBind或instanceId，最后一个参数输入是否必填的布尔值，true为必填，flase为不必填
ctx.requireds(dataBind, dataBind2, dataBind3, ..., required);

ctx.requireds(instanceId, instanceId2, instanceId3, ..., required);

示例​

// 通过dataBind
// 必填
ctx.requireds("flow_purchase.ID", "flow_purchase.reason", true);
// 不必填
ctx.requireds("flow_purchase.ID", "flow_purchase.reason", false);

// 通过instanceId
// 必填
ctx.requireds("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", true);
// 不必填
ctx.requireds("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", false);

修改组件是否只读​

使用方法​

// 输入一个或多个组件的dataBind或instanceId，最后一个参数输入是否只读的布尔值，true为只读，flase为不只读
ctx.readonlys(dataBind, dataBind2, dataBind3, ..., readonly);

ctx.readonlys(instanceId, instanceId2, instanceId3, ..., readonly);

示例​

// 通过dataBind
// 只读
ctx.readonlys("flow_purchase.ID", "flow_purchase.reason", true);
// 不只读
ctx.readonlys("flow_purchase.ID", "flow_purchase.reason", false);

// 通过instanceId
// 只读
ctx.readonlys("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", true);
// 不只读
ctx.readonlys("number_w5nll6wnrglnn", "switch_qfrgaqtjc9n01", false);

给组件添加 Class 类名​

使用方法​

ctx.addClassName(dataBind, className1, className2, ...);

示例​

ctx.addClassName("flow_purchase.ID", "c-red");

ctx.addClassName("flow_purchase.ID", "mt-12", "ml-8");

给组件删除 Class 类名​

使用方法​

ctx.removeClassName(dataBind, className1, className2, ...);

示例​

ctx.removeClassName("flow_purchase.ID", "c-red");

ctx.removeClassName("flow_purchase.ID", "mt-12", "ml-8");

获取组件的 options​

需要注意：只有下拉选择，级联选择，下拉选择树，机构，字典等组件，存在 options

使用方法​

// 通过dataBind
ctx.getOptions(dataBind);

// 通过instanceId
ctx.getOptions(instanceId);

示例​

ctx.getOptions("flow_purchase.ID"); // [{ label, value, ... }, { label, value, ... }]

修改组件的 options​

需要注意：只有下拉选择，级联选择，下拉选择树，机构，字典等组件，存在 options options 必须存在 label 和 value 字段

使用方法​

// 通过dataBind
ctx.setOptions(dataBind, newOptions);

// 通过instanceId
ctx.getOptions(instanceId, newOptions);

示例​

ctx.setOptions("flow_purchase.ID", [
  {
    label: "new1",
    value: "new1",
  },
  {
    label: "new2",
    value: "new2",
  },
]);

params 函数列表​

获取当前组件​

使用方法​

params.instance; // 触发当前事件的组件

params.getInstance(); // 触发当前事件的组件

修改当前组件的属性​

使用方法​

params.setInstance(propName, newValue);

示例​

// 修改提示文案
params.setInstance("placeholder", "新的提示文案");

// 修改组件的显示隐藏，false为隐藏组件，true为显示组件
params.setInstance("visible", true);

获取当前组件的父级组件​

正常情况下，主表单内的父级组件，就是表单，或者是它所在的布局组件，子表单内的组件，父级就是子表单 如果当前组件为表单本身，则父级组件为 null

使用方法​

params.parent; // 当前组件的父级组件 或 null
// Instance | null

获取当前组件的值​

使用方法​

params.value; // 当前组件的值

params.getValue(); // 当前组件的值

value和getValue的区别：value是在触发事件的对应节点，组件的值，getValue()可以获取组件最新的值

修改当前组件的值​

使用方法​

params.setValue(newValue);

示例​

params.setValue("新值");

当前组件的禁用​

使用方法​

// 不传递参数，获取当前组件的禁用状态
params.disabled(); // true 或者 false

// 传递参数， 修改当前组件的禁用状态
params.disabled(true); // 禁用
params.disabled(false); // 不禁用

示例​

// 根据组件禁用状态做额外处理
if (params.disabled()) {
  // 当组件禁用时
} else {
  // 当组件未禁用时
}

// 修改组件的禁用状态
params.disabled(true);
params.disabled(false);

当前组件的必填​

使用方法​

// 不传递参数，获取当前组件的必填状态
params.required(); // true 或者 false

// 传递参数， 修改当前组件的必填状态
params.required(true); // 必填
params.required(false); // 不必填

示例​

// 根据组件必填状态做额外处理
if (params.required()) {
  // 当组件必填时
} else {
  // 当组件非必填时
}

// 修改组件的必填状态
params.required(true);
params.required(false);

当前组件的 options​

需要注意：只有当前组件为下拉选择，级联选择，下拉选择树，机构，字典等组件时，params 存在 options 方法

使用方法​

// 不传递参数，获取当前组件的options选项
params.options(); // // [{ label, value, ... }, { label, value, ... }]

// 传递参数， 修改当前组件的options选项
params.options([{ label, value, ... }]);

示例​

// 修改组件的options选项
params.options([
  {
    label: "new1",
    value: "new1",
  },
  {
    label: "new2",
    value: "new2",
  },
]);

校验当前组件​

使用方法​

params.validate();

示例​

const [isValid, errors] = await params.validate();
if (isValid) {
  // 校验通过
} else {
  // 校验不通过
  // errors
}

行对象​

注意：只有当前组件是在 ArrayForm 内的组件时，params 才会提供 row 属性 提示：row 属性是实时获取，详情参考示例

使用方法​

params.row;

示例​

const id = params.row["flow_purchase.ID"];
// id = ''
ctx.setArrayValue("flow_purchase", 0, "flow_purchase.ID", "新值");
const id2 = params.row["flow_purchase.ID"];
// id2 = '新值'