Skip to main content

表单默认值

支持版本：v1.15.0

智能表单从 v1.15.0 版本开始支持以插件的方式给表单或弹窗子表单设置默认值。

自定义表单默认值，一般分为两步：

  1. 创建自定义默认值的文件
  2. 注册自定义默认值的文件

创建自定义默认值的文件​

我们可以在src/plugins/custom-default-values文件夹下创建一个customDefaultValues文件，然后在此文件中编写生成默认值的逻辑。

方法说明​

关于默认值的设置，一共有两个方法：

  • defaultFormValueAsync 给表单设置默认值
  • defaultSubFormValueAsync 给表单中的弹窗子表单设置默认值

defaultFormValueAsync​

自定义表单默认值。具体使用方式如下：

src/plugins/custom-default-values/customDefaultValues.ts
import appSetting from "@sinoform/app-setting";

const formId = "625e4f0081b95c1aff6f41ff";

// 简单值
appSetting.defaultFormValueAsync(formId, async (currentUser) => {
  return {
    field_10: currentUser.deptName,
  };
});

// 从远程获取值
appSetting.defaultFormValueAsync(formId, async (currentUser) => {
  const userInfo = await http.get("/custom-api/user-info", {
    params: { userId: currentUser.userId },
  });

  return {
    field_11: userInfo.telephone,
  };
});

从上述示例中可以看出，defaultFormValueAsync接收两个参数，表单 id 和生成默认值的回调函数。

  • formId。表单设计 id。必选
  • 异步回调函数。
    • 回调函数参数说明：
      • currentUser 当前登录人信息
      • formDesign 表单配置数据
    • 返回值为表单值对象，格式为{[表单项 fieldName]: 表单项的值}
数据列表的默认值处理​

1.19.0 后，智能表单新提供了数据表格类型的表单项，支持单元格进行合并操作。数据表格类型的字段项保存了数据表格的值和单元格合并信息两个对象。智能表单内置提供了getDatatableValuesFormArray方法，支持用户将单纯数组类型的值转换成数据表格的值。

下面示例代码为给数据表格类型的字段field_11设置初始值的方法

import { findFormItemById } from "@sinoform/helpers-form-items";
import { getDatatableValuesFormArray } from "@sinoform/app-core";

appSetting.defaultFormValueAsync(formId, async (currentUser, formDesign) => {
  // 1. 获取数据列表的默认数据
  const datas = await http.get("/custom-api/data-table-value", {
    params: { userId: currentUser.userId },
  });

  // 2. 获取field_11的表单项配置
  const items = formDesign.formConfig?.items;
  const field = findFormItemById(items, "field_11");

  // 3. 获取数据表格的值，对field_12对应的表格列进行合并
  const dataTableValues = getDatatableValuesFormArray(field, datas, "field_12");

  return {
    field_11: dataTableValues,
  };
});

defaultSubFormValueAsync​

自定义弹窗子表单的默认值。具体方式如下：

src/plugins/custom-default-values/customDefaultValues.ts
import appSetting from "@sinoform/app-setting";

const formId = "625e4f0081b95c1aff6f41ff";

// 简单值
appSetting.defaultSubFormValueAsync(formId, "field_2", async (currentUser) => {
  return {
    field2_field_10: currentUser.deptName,
  };
});

// 从远程获取值
appSetting.defaultSubFormValueAsync(formId, "field_2", async (currentUser) => {
  const userInfo = await http.get("/custom-api/user-info", {
    params: { userId: currentUser.userId },
  });

  return {
    field_2_field_11: userInfo.telephone,
  };
});

方法参数说明：

  • formId。表单设计 id。必选
  • subFormId。formId 对应的表单中弹窗子表单表单项的 id。必选
  • 异步回调函数。
    • 回调函数参数说明：
      • currentUser 当前登录人信息
      • formDesign 表单配置数据
    • 返回值为表单值对象，格式为{[表单项 fieldName]: 表单项的值}

注册自定义默认值的文件​

在插件项目入口文件中引用该配置文件。

src/index.ts
import "./plugins/custom-default-values/customDefaultValues";