diff --git a/docs/components/form/options.md b/docs/components/form/options.md index 5fda97a0..ebb0a90c 100755 --- a/docs/components/form/options.md +++ b/docs/components/form/options.md @@ -8,7 +8,7 @@ icon: order: 2 --- -**选择器表单项** 是指那些（例如下拉选择框）具有[选择器特性](#%E9%80%89%E6%8B%A9%E5%99%A8%E7%89%B9%E6%80%A7)的表单项 +**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项 它派生自 [表单项](./formitem)，拥有表单项所有的特性。 @@ -43,7 +43,7 @@ order: 2 } ``` -`options`属性配置的对象数组就是`select`组件的选项组。 +`options`属性配置的对象数组就是`select`选择器组件的选项组。 ### 选项组格式 @@ -54,12 +54,14 @@ order: 2 "options": [ { "label": "xxx1", - "value": "value1" + "value": "value1", + "chlidren": [] ... // 其他变量值 }, { "label": "xxx2", - "value": "value2" + "value": "value2", + "chlidren": [] ... // 其他变量值 } ] @@ -70,6 +72,7 @@ order: 2 - `label`：标识当前选项的显示文本，帮助用户选择 - `value`：标识当前选项的值，用作数据保存和映射 +- `chlidren`：嵌套子选项，只有在 Tree 或 Nested-Select 等支持嵌套功能的组件中才有用 查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。 diff --git a/docs/components/form/select.md b/docs/components/form/select.md index f52821d8..0cddfe55 100755 --- a/docs/components/form/select.md +++ b/docs/components/form/select.md @@ -44,7 +44,7 @@ order: 48 ## 属性表 -当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 | 属性名 | 类型 | 默认值 | 说明 | | --------------- | --------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- | diff --git a/docs/components/form/tabs-transfer.md b/docs/components/form/tabs-transfer.md new file mode 100644 index 00000000..4f605494 --- /dev/null +++ b/docs/components/form/tabs-transfer.md @@ -0,0 +1,123 @@ +--- +title: TabsTransfer 组合穿梭器 +description: +type: 0 +group: null +menuName: TabsTransfer 组合穿梭器 +icon: +--- + +在[穿梭器（Transfer）](./transfer)的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "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" + } + ] + } + ] + } + ] + } + ] +} +``` + +## 属性表 + +更多配置请参考[穿梭器（Transfer）](./transfer)。 diff --git a/docs/components/form/transfer.md b/docs/components/form/transfer.md new file mode 100644 index 00000000..937f7e64 --- /dev/null +++ b/docs/components/form/transfer.md @@ -0,0 +1,566 @@ +--- +title: Transfer 穿梭器 +description: +type: 0 +group: null +menuName: Transfer 穿梭器 +icon: +--- + +## 基本用法 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "默认", + "type": "transfer", + "name": "transfer", + "options": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + }, + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + }, + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] +} +``` + +## 展示模式 + +### 分组 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "分组", + "type": "transfer", + "name": "transfer", + "options": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + } + ] +} +``` + +### 表格模式 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "表格形式", + "type": "transfer", + "name": "transfer", + "selectMode": "table", + "columns": [ + { + "name": "label", + "label": "英雄" + }, + { + "name": "position", + "label": "位置" + } + ], + "options": [ + { + "label": "诸葛亮", + "value": "zhugeliang", + "position": "中单" + }, + { + "label": "曹操", + "value": "caocao", + "position": "上单" + }, + { + "label": "钟无艳", + "value": "zhongwuyan", + "position": "上单" + }, + { + "label": "李白", + "value": "libai", + "position": "打野" + }, + { + "label": "韩信", + "value": "hanxin", + "position": "打野" + }, + { + "label": "云中君", + "value": "yunzhongjun", + "position": "打野" + } + ] + } + ] +} +``` + +### 树形模式 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "树型展示", + "type": "transfer", + "name": "transfer4", + "selectMode": "tree", + "options": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + } + ] +} +``` + +### 级联选择 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "级联选择", + "type": "transfer", + "name": "transfer5", + "selectMode": "chained", + "options": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + } + ] +} +``` + +### 支持搜索 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "带搜索", + "type": "transfer", + "name": "transfer6", + "selectMode": "chained", + "searchable": true, + "sortable": true, + "options": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + } + ] +} +``` + +### 延时加载 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "延时加载", + "type": "transfer", + "name": "transfer7", + "selectMode": "tree", + "deferApi": "/api/mock2/form/deferOptions?label=${label}", + "options": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "defer": true + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ] + } + ] +} +``` + +### 关联选择模式 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "label": "关联选择模式", + "type": "transfer", + "name": "b", + "sortable": true, + "searchable": true, + "deferApi": "/api/mock2/form/deferOptions?label=${label}", + "selectMode": "associated", + "leftMode": "tree", + "leftOptions": [ + { + "label": "法师", + "children": [ + { + "label": "诸葛亮", + "value": "zhugeliang" + } + ] + }, + { + "label": "战士", + "children": [ + { + "label": "曹操", + "value": "caocao" + }, + { + "label": "钟无艳", + "value": "zhongwuyan" + } + ] + }, + { + "label": "打野", + "children": [ + { + "label": "李白", + "value": "libai" + }, + { + "label": "韩信", + "value": "hanxin" + }, + { + "label": "云中君", + "value": "yunzhongjun" + } + ] + } + ], + "options": [ + { + "ref": "zhugeliang", + "children": [ + { + "label": "A", + "value": "a" + } + ] + }, + { + "ref": "caocao", + "children": [ + { + "label": "B", + "value": "b" + }, + + { + "label": "C", + "value": "c" + } + ] + }, + { + "ref": "zhongwuyan", + "children": [ + { + "label": "D", + "value": "d" + }, + + { + "label": "E", + "value": "e" + } + ] + }, + { + "ref": "libai", + "defer": true + }, + { + "ref": "hanxin", + "defer": true + }, + { + "ref": "yunzhongjun", + "defer": true + } + ] + } + ] +} +``` + +## searchApi + +**发送** + +默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。 + +**响应** + +格式要求如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "options": [ + { + "label": "描述", + "value": "值" // , + // "children": [] // 可以嵌套 + }, + + { + "label": "描述2", + "value": "值2" + } + ], + + "value": "值" // 默认值，可以获取列表的同时设置默认值。 + } +} +``` + +适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。 + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| options | `Array`或`Array` | | [选项组](./options#%E9%9D%99%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-options) | +| source | `string`或 [API](../../types/api) | | [动态选项组](./options#%E5%8A%A8%E6%80%81%E9%80%89%E9%A1%B9%E7%BB%84-source) | +| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| joinValues | `boolean` | `true` | [拼接值](./options#%E6%8B%BC%E6%8E%A5%E5%80%BC-joinvalues) | +| extractValue | `boolean` | `false` | [提取值](./options#%E6%8F%90%E5%8F%96%E5%A4%9A%E9%80%89%E5%80%BC-extractvalue) | +| searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 | +| searchApi | [API](../../types/api) | | 如果想通过接口检索，可以设置个 api。 | +| statistics | `boolean` | `true` | 是否显示统计数据 | +| selectTitle | `string` | `"请选择"` | 左侧的标题文字 | +| resultTitle | `string` | `"当前选择"` | 右侧结果的标题文字 | +| sortable | `boolean` | `false` | 结果可以进行拖拽排序 | +| selectMode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 | +| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 | +| columns | `Array` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 | +| leftOptions | `Array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 | +| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 | +| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 | diff --git a/examples/components/Doc.tsx b/examples/components/Doc.tsx index 57c246e0..5142a68f 100644 --- a/examples/components/Doc.tsx +++ b/examples/components/Doc.tsx @@ -576,6 +576,22 @@ export const docs = [ cb(null, makeMarkdownRenderer(doc)); }) }, + { + label: 'Transfer 穿梭器', + path: '/docs/components/form/transfer', + getComponent: (location, cb) => + require(['../../docs/components/form/transfer.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'TabsTransfer 组合穿梭器', + path: '/docs/components/form/tabs-transfer', + getComponent: (location, cb) => + require(['../../docs/components/form/tabs-transfer.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, { label: 'Tree 树形选择框', path: '/docs/components/form/tree', diff --git a/examples/components/Form/Transfer.jsx b/examples/components/Form/Transfer.jsx index eda3099c..7222b2e7 100644 --- a/examples/components/Form/Transfer.jsx +++ b/examples/components/Form/Transfer.jsx @@ -428,7 +428,6 @@ export default { ] }, - , { label: '关联选择模式', type: 'transfer',