跳到主要内容

表单

表单:自定义查询区域,支持数据之间的联动;下面为表单的使用指南

1、效果演示

2、添加表单

3、样式配置

  • 通用样式配置:(通用配置)
  • 表单配置:选中表单,在基础设置中点击表单配置
  • 表单配置页面示意图
  1. 点击新增后,手动配置查询条件信息
  2. 字段名称:查询字段,如“name”
  3. 字段文本:展示的文本

  1. 控件类型:支持文本框、下拉框、日期选择框、下拉树
  1. 排序:查询控件按照排序的顺序依次显示
  1. 是否生效:该组件是否显示

  2. 查询模式:分为单一查询、范围查询和多选查询 单一查询:针对于单个值进行查询

    范围查询:在指定范围内进行查询

    多选查询:针对多个值进行查询

  3. 字典编码:当控件类型为下拉框时,需要配置相应的字典,字典的配置位置在列表页面

  1. 默认值:组件在初始化时所设定的初始值
  1. 日期格式:支持年、年-月、年-月-日
  1. 删除操作:删除已配置的查询

4、下拉树控件使用说明

下拉树(dropdownTree)是一种树形结构的下拉选择控件,支持懒加载子节点,适合层级数据的查询场景。

4.1、添加下拉树

在表单配置中,新增一条查询条件,将控件类型选为下拉树

4.2、参数配置

下拉树通过参数配置列配置树节点的加载接口,格式为 JSON:

{
"loadTree": "/api/sys/category/loadTreeRoot",
"loadTreeByValue": "/api/sys/category/loadTreeByValue"
}
参数是否必填说明
loadTree必填加载树节点的接口地址。初始化时传 pid=(空字符串)加载根节点;用户展开节点时传 pid=节点id 懒加载子节点
loadTreeByValue选填根据默认值反查节点路径的接口地址(传参 value=默认值)。配置了默认值时使用,确保回显正确

接口地址支持三种写法:相对路径(自动拼接系统域名)、绝对路径(http/https),以及 {{ domainURL }} 占位符写法。示例:

  • 相对路径:{"loadTree": "/sys/user/treeTest"}
  • domainURL 写法:{"loadTree": "{{ domainURL }}/sys/user/treeTest"}
  • 绝对路径:{"loadTree": "https://api.jeecg.com/mock/26/queryTree"}

接口请求方式均为 GET

4.3、接口返回格式

loadTreeloadTreeByValue 接口需返回节点数组,每个节点的字段如下:

字段类型说明
idstring节点唯一标识
pidstring父节点 id,根节点为空字符串或 null
valuestring节点值(提交查询时使用)
titlestring节点显示文本
izLeafnumber是否叶子节点:1 表示叶子节点(不可展开),0 表示非叶子节点(可继续展开)

示例返回:

[
{ "id": "1", "pid": "", "value": "A", "title": "分类A", "izLeaf": 0 },
{ "id": "2", "pid": "", "value": "B", "title": "分类B", "izLeaf": 1 }
]

izLeaf 字段控制节点是否显示展开箭头:0 会显示折叠箭头,用户点击后才加载子节点;1 表示叶子节点,不显示展开箭头。

4.4、默认值

默认值列填写节点的 value 字段值,组件初始化时会自动选中该节点。

配置默认值时,建议同时填写 loadTreeByValue 接口地址。组件初始化时会通过该接口反查节点的完整路径并展开,确保正确回显。若未配置 loadTreeByValue,默认值将只显示为 value 文本,不会展开树路径。

4.5、懒加载说明

下拉树默认采用懒加载方式:

  • 打开下拉框时,仅加载根节点(传参 pid=,即空字符串)
  • 用户点击展开非叶子节点(izLeaf=0)时,自动请求 loadTree 接口并传入当前节点的 id 作为 pid,动态加载子节点
  • 叶子节点(izLeaf=1)不显示展开箭头,点击即直接选中

5、交互

联动查询用法:联动专题