diff --git a/docs/renderers.md b/docs/renderers.md index 7082658a1..d34d26086 100644 --- a/docs/renderers.md +++ b/docs/renderers.md @@ -2,97 +2,99 @@ title: 渲染器手册 --- -amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。 +amis 页面是通过 JSON 配置出来的，是由一个一个渲染模型组成的，掌握他们规则，就能灵活配置出各种页面。 开始之前，请您一定要先阅读[基本用法](./basic.md)。 -- [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项 -- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出 -- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器 -- [Form](./renderers/Form/Form.md): 表单渲染器 - - [FormItem](./renderers/Form/FormItem.md): Form 中主要是由各种 FormItem 组成 - - [List](./renderers/Form/List.md): 简单的列表选择框 - - [Button-Group](./renderers/Form/Button-Group.md): 按钮集合 - - [Service](./renderers/Form/Service.md): 动态配置，配置项由接口决定 - - [Tabs](./renderers/Form/Tabs.md): 多个输入框通过选项卡来分组 - - [Table](./renderers/Form/Table.md): 可以用来展示数组类型的数据 - - [HBox](./renderers/Form/HBox.md): 支持 form 内部再用 HBox 布局 - - [Grid](./renderers/Form/Grid.md): 支持 form 内部再用 grid 布局 - - [Panel](./renderers/Form/Panel.md): 还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示 - - [Hidden](./renderers/Form/Hidden.md): 隐藏字段类型 - - [Text](./renderers/Form/Text.md): 普通的文本输入框 - - [Textarea](./renderers/Form/Textarea.md): 多行文本输入框 - - [Url](./renderers/Form/Url.md): URL 输入框 - - [Email](./renderers/Form/Email.md): Email 输入框 - - [Password](./renderers/Form/Password.md): 密码输入框 - - [Number](./renderers/Form/Number.md): 数字输入框 - - [Tag](./renderers/Form/Tag.md): 标签输入框 - - [Select](./renderers/Form/Select.md): 选项表单 - - [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉 - - [Checkbox](./renderers/Form/Checkbox.md): 勾选框 - - [Checkboxes](./renderers/Form/Checkboxes.md): 复选框 - - [Radios](./renderers/Form/Radios.md): 单选框 - - [City](./renderers/Form/City.md): 城市选择 - - [Rating](./renderers/Form/Rating.md): 评分 - - [Switch](./renderers/Form/Switch.md): 可选框，和 checkbox 完全等价 - - [Date](./renderers/Form/Date.md): 日期类型 - - [Datetime](./renderers/Form/Datetime.md): 日期时间类型 - - [Time](./renderers/Form/Time.md): 时间类型 - - [Date-Range](./renderers/Form/Date-Range.md): 日期范围类型 - - [Color](./renderers/Form/Color.md): 颜色选择器 - - [Range](./renderers/Form/Range.md): 范围输入框 - - [Image](./renderers/Form/Image.md): 图片输入 - - [File](./renderers/Form/File.md): 文件输入 - - [Matrix](./renderers/Form/Matrix.md): 矩阵类型的输入框 - - [Tree](./renderers/Form/Tree.md): 树形结构输入框 - - [TreeSelect](./renderers/Form/TreeSelect.md): 树形结构选择框 - - [NestedSelect](./renderers/Form/NestedSelect.md): 树形结构选择框 - - [Button](./renderers/Form/Button.md): 按钮, 包含 button、submit 和 reset - - [Button-Toolbar](./renderers/Form/Button-Toolbar.md): 让多个按钮在一起放置 - - [Combo](./renderers/Form/Combo.md): 组合模式 - - [Array](./renderers/Form/Array.md): 数组输入框配置 - - [SubForm](./renderers/Form/SubForm.md): formItem 还可以是子表单类型 - - [Picker](./renderers/Form/Picker.md): 列表选取 - - [Formula](./renderers/Form/Formula.md): 公式类型 - - [Group](./renderers/Form/Group.md): 表单项集合 - - [FieldSet](./renderers/Form/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起 - - [Repeat](./renderers/Form/Repeat.md): 可用来设置重复频率 - - [Rich-Text](./renderers/Form/Rich-Text.md): 富文本编辑器 - - [Editor](./renderers/Form/Editor.md): 编辑器 - - [Static](./renderers/Static.md): 纯用来展现数据的 -- [Wizard](./renderers/Wizard.md): 表单向导 -- [Each](./renderers/Each.md): 基于现有变量循环输出渲染器 -- [Plain](./renderers/Plain.md): 单纯的文字输出 -- [Html](./renderers/Html.md): html, 当需要用到变量时，请用 Tpl 代替 -- [Action](./renderers/Action.md): 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件 -- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型 -- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发 -- [Divider](./renderers/Divider.md): 分割线 -- [CRUD](./renderers/CRUD.md): 增删改查模型，主要用来展现列表 - - [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table - - [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards - - [CRUD-List](./renderers/CRUD-List.md): 请参考 List -- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。 -- [Wrapper](./renderers/Wrapper.md): 简单的一个容器。 -- [Service](./renderers/Service.md): 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据 -- [Chart](./renderers/Chart.md): 图表渲染器 -- [Collapse](./renderers/Collapse.md): 折叠器 -- [Carousel](./renderers/Carousel.md): 轮播图 -- [Alert](./renderers/Alert.md): 提示框 -- [Audio](./renderers/Audio.md): 音频播放器 -- [Video](./renderers/Video.md): 视频播放器 -- [Table](./renderers/Table.md): 表格展示 - - [Column](./renderers/Column.md): 表格中的列配置 -- [List](./renderers/List.md): 列表展示 -- [Card](./renderers/Card.md): 卡片的展示形式 -- [Cards](./renderers/Cards.md): 卡片集合 -- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中 -- [Tabs](./renderers/Tabs.md): 标签页 -- [Grid](./renderers/Grid.md): Grid 布局 -- [HBox](./renderers/HBox.md): HBox 布局 -- [Button-Group](./renderers/Button-Group.md)： 按钮集合 -- [iFrame](./renderers/iFrame.md)： 如果需要内嵌外部站点，可用 iframe 来实现 -- [Nav](./renderers/Nav.md): 菜单栏 -- [Tasks](./renderers/Tasks.md): 任务操作集合，类似于 orp 上线 -- [QRCode](./renderers/QRCode.md): 二维码显示组件 -- [Types](./renderers/Types.md): 类型说明文档 +- [Definitions](./renderers/Definitions.md): 建立当前页面公共的配置项 +- [Tpl](./renderers/Tpl.md): 支持用 JS 模板引擎来组织输出 +- [Page](./renderers/Page.md): JSON 配置最外层的 Page 渲染器 +- [Form](./renderers/Form/Form.md): 表单渲染器 + - [FormItem](./renderers/Form/FormItem.md): Form 中主要是由各种 FormItem 组成 + - [List](./renderers/Form/List.md): 简单的列表选择框 + - [Button-Group](./renderers/Form/Button-Group.md): 按钮集合 + - [Service](./renderers/Form/Service.md): 动态配置，配置项由接口决定 + - [Tabs](./renderers/Form/Tabs.md): 多个输入框通过选项卡来分组 + - [Table](./renderers/Form/Table.md): 可以用来展示数组类型的数据 + - [HBox](./renderers/Form/HBox.md): 支持 form 内部再用 HBox 布局 + - [Grid](./renderers/Form/Grid.md): 支持 form 内部再用 grid 布局 + - [Panel](./renderers/Form/Panel.md): 还是为了布局，可以把一部分 FormItem 合并到一个 panel 里面单独展示 + - [Hidden](./renderers/Form/Hidden.md): 隐藏字段类型 + - [Text](./renderers/Form/Text.md): 普通的文本输入框 + - [Textarea](./renderers/Form/Textarea.md): 多行文本输入框 + - [Url](./renderers/Form/Url.md): URL 输入框 + - [Email](./renderers/Form/Email.md): Email 输入框 + - [Password](./renderers/Form/Password.md): 密码输入框 + - [Number](./renderers/Form/Number.md): 数字输入框 + - [Tag](./renderers/Form/Tag.md): 标签输入框 + - [Select](./renderers/Form/Select.md): 选项表单 + - [Chained-Select](./renderers/Form/Chained-Select.md): 无限级别下拉 + - [Checkbox](./renderers/Form/Checkbox.md): 勾选框 + - [Checkboxes](./renderers/Form/Checkboxes.md): 复选框 + - [Radios](./renderers/Form/Radios.md): 单选框 + - [City](./renderers/Form/City.md): 城市选择 + - [Rating](./renderers/Form/Rating.md): 评分 + - [Switch](./renderers/Form/Switch.md): 可选框，和 checkbox 完全等价 + - [Date](./renderers/Form/Date.md): 日期类型 + - [Datetime](./renderers/Form/Datetime.md): 日期时间类型 + - [Time](./renderers/Form/Time.md): 时间类型 + - [Date-Range](./renderers/Form/Date-Range.md): 日期范围类型 + - [Transfer](./renderers/Form/Transfer.md): 穿梭器，用来勾选选项。 + - [TabsTransfer](./renderers/Form/TabsTransfer.md): 组合穿梭器，用来勾选选项。 + - [Color](./renderers/Form/Color.md): 颜色选择器 + - [Range](./renderers/Form/Range.md): 范围输入框 + - [Image](./renderers/Form/Image.md): 图片输入 + - [File](./renderers/Form/File.md): 文件输入 + - [Matrix](./renderers/Form/Matrix.md): 矩阵类型的输入框 + - [Tree](./renderers/Form/Tree.md): 树形结构输入框 + - [TreeSelect](./renderers/Form/TreeSelect.md): 树形结构选择框 + - [NestedSelect](./renderers/Form/NestedSelect.md): 树形结构选择框 + - [Button](./renderers/Form/Button.md): 按钮, 包含 button、submit 和 reset + - [Button-Toolbar](./renderers/Form/Button-Toolbar.md): 让多个按钮在一起放置 + - [Combo](./renderers/Form/Combo.md): 组合模式 + - [Array](./renderers/Form/Array.md): 数组输入框配置 + - [SubForm](./renderers/Form/SubForm.md): formItem 还可以是子表单类型 + - [Picker](./renderers/Form/Picker.md): 列表选取 + - [Formula](./renderers/Form/Formula.md): 公式类型 + - [Group](./renderers/Form/Group.md): 表单项集合 + - [FieldSet](./renderers/Form/FieldSet.md): 多个输入框可以通过 fieldSet 捆绑在一起 + - [Repeat](./renderers/Form/Repeat.md): 可用来设置重复频率 + - [Rich-Text](./renderers/Form/Rich-Text.md): 富文本编辑器 + - [Editor](./renderers/Form/Editor.md): 编辑器 + - [Static](./renderers/Static.md): 纯用来展现数据的 +- [Wizard](./renderers/Wizard.md): 表单向导 +- [Each](./renderers/Each.md): 基于现有变量循环输出渲染器 +- [Plain](./renderers/Plain.md): 单纯的文字输出 +- [Html](./renderers/Html.md): html, 当需要用到变量时，请用 Tpl 代替 +- [Action](./renderers/Action.md): 一种特殊的渲染器，它本身是一个按钮，同时它能触发事件 +- [Dialog](./renderers/Dialog.md): Dialog 由 Action 触发。他是一个类似于 Page 的容器模型 +- [Drawer](./renderers/Drawer.md): Drawer 由 Action 触发 +- [Divider](./renderers/Divider.md): 分割线 +- [CRUD](./renderers/CRUD.md): 增删改查模型，主要用来展现列表 + - [CRUD-Table](./renderers/CRUD-Table.md): 请参考 Table + - [CRUD-Cards](./renderers/CRUD-Cards.md): 请参考 Cards + - [CRUD-List](./renderers/CRUD-List.md): 请参考 List +- [Panel](./renderers/Panel.md): 可以把相关信息以盒子的形式展示到一块。 +- [Wrapper](./renderers/Wrapper.md): 简单的一个容器。 +- [Service](./renderers/Service.md): 功能型容器，自身不负责展示内容，主要职责在于通过配置的 api 拉取数据 +- [Chart](./renderers/Chart.md): 图表渲染器 +- [Collapse](./renderers/Collapse.md): 折叠器 +- [Carousel](./renderers/Carousel.md): 轮播图 +- [Alert](./renderers/Alert.md): 提示框 +- [Audio](./renderers/Audio.md): 音频播放器 +- [Video](./renderers/Video.md): 视频播放器 +- [Table](./renderers/Table.md): 表格展示 + - [Column](./renderers/Column.md): 表格中的列配置 +- [List](./renderers/List.md): 列表展示 +- [Card](./renderers/Card.md): 卡片的展示形式 +- [Cards](./renderers/Cards.md): 卡片集合 +- [Field](./renderers/Field.md): 主要用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中 +- [Tabs](./renderers/Tabs.md): 标签页 +- [Grid](./renderers/Grid.md): Grid 布局 +- [HBox](./renderers/HBox.md): HBox 布局 +- [Button-Group](./renderers/Button-Group.md)： 按钮集合 +- [iFrame](./renderers/iFrame.md)： 如果需要内嵌外部站点，可用 iframe 来实现 +- [Nav](./renderers/Nav.md): 菜单栏 +- [Tasks](./renderers/Tasks.md): 任务操作集合，类似于 orp 上线 +- [QRCode](./renderers/QRCode.md): 二维码显示组件 +- [Types](./renderers/Types.md): 类型说明文档 diff --git a/docs/renderers/Form/TabsTransfer.md b/docs/renderers/Form/TabsTransfer.md new file mode 100644 index 000000000..59a1bd044 --- /dev/null +++ b/docs/renderers/Form/TabsTransfer.md @@ -0,0 +1,118 @@ +### 组合穿梭器（TabsTransfer） + +在[穿梭器（Transfer）](./Transfer.md)的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。 + +比如： + +```schema:height="450" scope="form" +[ + { + "label": "组合穿梭器", + "type": "tabs-transfer", + "name": "a", + "sortable": true, + "selectMode": "tree", + "searchable": true, + "options": [ + { + "label": "成员", + "selectMode": "tree", + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + }, + { + "label": "用户", + "selectMode": "chained", + "children": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang2" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao2" + }, + { + "label": "钟无艳", + "value": "zhongwuyan2" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai2" + }, + { + "label": "韩信", + "value": "hanxin2" + }, + { + "label": "云中君", + "value": "yunzhongjun2" + } + ] + } + ] + } + ] + }, + + { + "type": "static", + "name": "transfer", + "label": "当前值" + } +] +``` + +更多配置请参考[穿梭器（Transfer）](./Transfer.md)。 diff --git a/docs/renderers/Form/Transfer.md b/docs/renderers/Form/Transfer.md new file mode 100644 index 000000000..79b52daf5 --- /dev/null +++ b/docs/renderers/Form/Transfer.md @@ -0,0 +1,123 @@ +### 穿梭器（Transfer） + +适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。 + +- `type` 请设置成 `transfer` +- `options` 选项配置，类型为数组，成员格式如下。 + - `label` 文字 + - `value` 值 + - `children` 说明可以嵌套。 +- `value` 设置默认值，如果想要默认选中某个，请设置默认值。 +- `source` Api 地址，如果选项不固定，可以通过配置 `source` 动态拉取。另外也可以用 `${xxxx}` 来获取当前作用域中的变量。 +- `joinValues` 默认为 `true` +- `extractValue` 默认为 `false`, `joinValues`设置为`false`时生效, 开启后将选中的选项 `value` 的值封装为数组，作为当前表单项的值。 +- `delimiter` 默认为 `,` +- `searchable` 默认为 `false`，当设置为 `true` 时表示可以通过输入部分内容检索出选项。 +- `searchApi` 可选，如果想通过接口检索，可以设置个 api。 +- `statistics` 是否显示统计数据，设置为 `false` 不显示，默认为显示。 +- `selectTitle` 默认为 `请选择`，左侧的标题文字。 +- `resultTitle` 默认为 `当前选择`，右侧结果的标题文字。 +- `sortable` 默认为 `false`，开启后，结果可以进行拖拽排序。 +- `selectMode` 默认为 `list`， 可选：`list`、`table`、`tree`、`chained`。分表为：列表形式、表格形式、树形选择形式和级联选择形式。 +- `searchResultMode` 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 +- `columns` 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是不能设置 `type` 选择渲染器类型。 + +- **还有更多通用配置请参考** [FormItem](./FormItem.md) + +```schema:height="450" scope="form" +[ + { + "type": "transfer", + "name": "transfer", + "label": "穿梭器", + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + } + ] + }, + + { + "type": "static", + "name": "transfer", + "label": "当前值" + } +] +``` + +[更多示例](/examples/form/transfer) + +### 接口说明 + +开始之前请你先阅读[整体要求](../api.md)。 + +#### source + +**发送** + +默认 GET，不携带数据，可从上下文中取数据设置进去。 + +**响应** + +格式要求如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "options": [ + { + "label": "描述", + "value": "值" // , + // "children": [] // 可以嵌套 + }, + + { + "label": "描述2", + "value": "值2" + } + ], + + "value": "值" // 默认值，可以获取列表的同时设置默认值。 + } +} +``` + +#### searchApi + +**发送** + +默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。 + +**响应** + +格式要求如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "options": [ + { + "label": "描述", + "value": "值" // , + // "children": [] // 可以嵌套 + }, + + { + "label": "描述2", + "value": "值2" + } + ], + + "value": "值" // 默认值，可以获取列表的同时设置默认值。 + } +} +``` diff --git a/examples/components/Form/Transfer.jsx b/examples/components/Form/Transfer.jsx index 5fb030f5c..470be4726 100644 --- a/examples/components/Form/Transfer.jsx +++ b/examples/components/Form/Transfer.jsx @@ -17,7 +17,7 @@ export default { label: '默认', type: 'transfer', name: 'transfer1', - showArrow: true, + // showArrow: true, options: [ { label: '诸葛亮', @@ -299,19 +299,29 @@ export default { selectMode: 'tree', children: [ { - label: '诸葛亮', - value: 'zhugeliang' + label: '法师', + children: [ + { + label: '诸葛亮', + value: 'zhugeliang' + } + ] }, { - label: '曹操', - value: 'caocao' + label: '战士', + children: [ + { + label: '曹操', + value: 'caocao' + }, + { + label: '钟无艳', + value: 'zhongwuyan' + } + ] }, { - label: '钟无艳', - value: 'zhongwuyan' - }, - { - label: '野核', + label: '打野', children: [ { label: '李白', @@ -335,20 +345,29 @@ export default { selectMode: 'chained', children: [ { - label: '诸葛亮', - value: 'zhugeliang2' + label: '法师', + children: [ + { + label: '诸葛亮', + value: 'zhugeliang2' + } + ] }, { - label: '曹操', - value: 'caocao2' + label: '战士', + children: [ + { + label: '曹操', + value: 'caocao2' + }, + { + label: '钟无艳', + value: 'zhongwuyan2' + } + ] }, { - label: '钟无艳', - value: 'zhongwuyan2' - }, - { - label: '野核', - subTitle: '就是打野的', + label: '打野', children: [ { label: '李白',