diff --git a/.gitignore b/.gitignore index 994d30b1..84b71c2c 100644 --- a/.gitignore +++ b/.gitignore @@ -20,4 +20,6 @@ node_modules /toolkit/amis-renderer /toolkit/output /coverage -/package-lock.json \ No newline at end of file +/package-lock.json +_examples +docs-new \ No newline at end of file diff --git a/build/md-parser.js b/build/md-parser.js index 72f5a998..0031fa2b 100644 --- a/build/md-parser.js +++ b/build/md-parser.js @@ -179,9 +179,8 @@ module.exports = function (content, file) { return placeholder[id] || ''; }); - content = - fis.compile.partial(content, file, 'html') + - `\n\n
文档内容有误？欢迎大家一起来编写，文档地址：${file.subpath}。
`; + content = fis.compile.partial(content, file, 'html'); + // + `\n\n
文档内容有误？欢迎大家一起来编写，文档地址：${file.subpath}。
`; info.html = content; info.toc = toc; diff --git a/docs/advanced.md b/docs-old/advanced.md similarity index 100% rename from docs/advanced.md rename to docs-old/advanced.md diff --git a/docs/api.md b/docs-old/api.md similarity index 100% rename from docs/api.md rename to docs-old/api.md diff --git a/docs/basic.md b/docs-old/basic.md similarity index 100% rename from docs/basic.md rename to docs-old/basic.md diff --git a/docs/custom.md b/docs-old/custom.md similarity index 100% rename from docs/custom.md rename to docs-old/custom.md diff --git a/docs/getting_started.md b/docs-old/getting_started.md similarity index 100% rename from docs/getting_started.md rename to docs-old/getting_started.md diff --git a/docs/intro.md b/docs-old/intro.md similarity index 100% rename from docs/intro.md rename to docs-old/intro.md diff --git a/docs/renderers.md b/docs-old/renderers.md similarity index 100% rename from docs/renderers.md rename to docs-old/renderers.md diff --git a/docs/renderers/Action.md b/docs-old/renderers/Action.md similarity index 100% rename from docs/renderers/Action.md rename to docs-old/renderers/Action.md diff --git a/docs/renderers/Alert.md b/docs-old/renderers/Alert.md similarity index 100% rename from docs/renderers/Alert.md rename to docs-old/renderers/Alert.md diff --git a/docs/renderers/Audio.md b/docs-old/renderers/Audio.md similarity index 100% rename from docs/renderers/Audio.md rename to docs-old/renderers/Audio.md diff --git a/docs/renderers/ButtonGroup.md b/docs-old/renderers/ButtonGroup.md similarity index 100% rename from docs/renderers/ButtonGroup.md rename to docs-old/renderers/ButtonGroup.md diff --git a/docs/renderers/CRUD-Cards.md b/docs-old/renderers/CRUD-Cards.md similarity index 100% rename from docs/renderers/CRUD-Cards.md rename to docs-old/renderers/CRUD-Cards.md diff --git a/docs/renderers/CRUD-List.md b/docs-old/renderers/CRUD-List.md similarity index 100% rename from docs/renderers/CRUD-List.md rename to docs-old/renderers/CRUD-List.md diff --git a/docs/renderers/CRUD-Table.md b/docs-old/renderers/CRUD-Table.md similarity index 100% rename from docs/renderers/CRUD-Table.md rename to docs-old/renderers/CRUD-Table.md diff --git a/docs/renderers/CRUD.md b/docs-old/renderers/CRUD.md similarity index 100% rename from docs/renderers/CRUD.md rename to docs-old/renderers/CRUD.md diff --git a/docs/renderers/Card.md b/docs-old/renderers/Card.md similarity index 100% rename from docs/renderers/Card.md rename to docs-old/renderers/Card.md diff --git a/docs/renderers/Cards.md b/docs-old/renderers/Cards.md similarity index 100% rename from docs/renderers/Cards.md rename to docs-old/renderers/Cards.md diff --git a/docs/renderers/Carousel.md b/docs-old/renderers/Carousel.md similarity index 100% rename from docs/renderers/Carousel.md rename to docs-old/renderers/Carousel.md diff --git a/docs/renderers/Chart.md b/docs-old/renderers/Chart.md similarity index 100% rename from docs/renderers/Chart.md rename to docs-old/renderers/Chart.md diff --git a/docs/renderers/Collapse.md b/docs-old/renderers/Collapse.md similarity index 100% rename from docs/renderers/Collapse.md rename to docs-old/renderers/Collapse.md diff --git a/docs/renderers/Column.md b/docs-old/renderers/Column.md similarity index 100% rename from docs/renderers/Column.md rename to docs-old/renderers/Column.md diff --git a/docs/renderers/Definitions.md b/docs-old/renderers/Definitions.md similarity index 100% rename from docs/renderers/Definitions.md rename to docs-old/renderers/Definitions.md diff --git a/docs/renderers/Dialog.md b/docs-old/renderers/Dialog.md similarity index 100% rename from docs/renderers/Dialog.md rename to docs-old/renderers/Dialog.md diff --git a/docs/renderers/Divider.md b/docs-old/renderers/Divider.md similarity index 100% rename from docs/renderers/Divider.md rename to docs-old/renderers/Divider.md diff --git a/docs/renderers/Drawer.md b/docs-old/renderers/Drawer.md similarity index 100% rename from docs/renderers/Drawer.md rename to docs-old/renderers/Drawer.md diff --git a/docs/renderers/Each.md b/docs-old/renderers/Each.md similarity index 100% rename from docs/renderers/Each.md rename to docs-old/renderers/Each.md diff --git a/docs/renderers/Field.md b/docs-old/renderers/Field.md similarity index 100% rename from docs/renderers/Field.md rename to docs-old/renderers/Field.md diff --git a/docs/renderers/Form/Array.md b/docs-old/renderers/Form/Array.md similarity index 100% rename from docs/renderers/Form/Array.md rename to docs-old/renderers/Form/Array.md diff --git a/docs/renderers/Form/Button-Group.md b/docs-old/renderers/Form/Button-Group.md similarity index 100% rename from docs/renderers/Form/Button-Group.md rename to docs-old/renderers/Form/Button-Group.md diff --git a/docs/renderers/Form/Button-Toolbar.md b/docs-old/renderers/Form/Button-Toolbar.md similarity index 100% rename from docs/renderers/Form/Button-Toolbar.md rename to docs-old/renderers/Form/Button-Toolbar.md diff --git a/docs/renderers/Form/Button.md b/docs-old/renderers/Form/Button.md similarity index 100% rename from docs/renderers/Form/Button.md rename to docs-old/renderers/Form/Button.md diff --git a/docs/renderers/Form/Chained-Select.md b/docs-old/renderers/Form/Chained-Select.md similarity index 100% rename from docs/renderers/Form/Chained-Select.md rename to docs-old/renderers/Form/Chained-Select.md diff --git a/docs/renderers/Form/Checkbox.md b/docs-old/renderers/Form/Checkbox.md similarity index 100% rename from docs/renderers/Form/Checkbox.md rename to docs-old/renderers/Form/Checkbox.md diff --git a/docs/renderers/Form/Checkboxes.md b/docs-old/renderers/Form/Checkboxes.md similarity index 100% rename from docs/renderers/Form/Checkboxes.md rename to docs-old/renderers/Form/Checkboxes.md diff --git a/docs/renderers/Form/City.md b/docs-old/renderers/Form/City.md similarity index 100% rename from docs/renderers/Form/City.md rename to docs-old/renderers/Form/City.md diff --git a/docs/renderers/Form/Color.md b/docs-old/renderers/Form/Color.md similarity index 100% rename from docs/renderers/Form/Color.md rename to docs-old/renderers/Form/Color.md diff --git a/docs/renderers/Form/Combo.md b/docs-old/renderers/Form/Combo.md similarity index 100% rename from docs/renderers/Form/Combo.md rename to docs-old/renderers/Form/Combo.md diff --git a/docs/renderers/Form/Date-Range.md b/docs-old/renderers/Form/Date-Range.md similarity index 100% rename from docs/renderers/Form/Date-Range.md rename to docs-old/renderers/Form/Date-Range.md diff --git a/docs/renderers/Form/Date.md b/docs-old/renderers/Form/Date.md similarity index 100% rename from docs/renderers/Form/Date.md rename to docs-old/renderers/Form/Date.md diff --git a/docs/renderers/Form/Datetime.md b/docs-old/renderers/Form/Datetime.md similarity index 100% rename from docs/renderers/Form/Datetime.md rename to docs-old/renderers/Form/Datetime.md diff --git a/docs/renderers/Form/Editor.md b/docs-old/renderers/Form/Editor.md similarity index 100% rename from docs/renderers/Form/Editor.md rename to docs-old/renderers/Form/Editor.md diff --git a/docs/renderers/Form/Email.md b/docs-old/renderers/Form/Email.md similarity index 100% rename from docs/renderers/Form/Email.md rename to docs-old/renderers/Form/Email.md diff --git a/docs/renderers/Form/FieldSet.md b/docs-old/renderers/Form/FieldSet.md similarity index 100% rename from docs/renderers/Form/FieldSet.md rename to docs-old/renderers/Form/FieldSet.md diff --git a/docs/renderers/Form/File.md b/docs-old/renderers/Form/File.md similarity index 100% rename from docs/renderers/Form/File.md rename to docs-old/renderers/Form/File.md diff --git a/docs/renderers/Form/Form.md b/docs-old/renderers/Form/Form.md similarity index 100% rename from docs/renderers/Form/Form.md rename to docs-old/renderers/Form/Form.md diff --git a/docs/renderers/Form/FormItem.md b/docs-old/renderers/Form/FormItem.md similarity index 100% rename from docs/renderers/Form/FormItem.md rename to docs-old/renderers/Form/FormItem.md diff --git a/docs/renderers/Form/Formula.md b/docs-old/renderers/Form/Formula.md similarity index 100% rename from docs/renderers/Form/Formula.md rename to docs-old/renderers/Form/Formula.md diff --git a/docs/renderers/Form/Grid.md b/docs-old/renderers/Form/Grid.md similarity index 100% rename from docs/renderers/Form/Grid.md rename to docs-old/renderers/Form/Grid.md diff --git a/docs/renderers/Form/Group.md b/docs-old/renderers/Form/Group.md similarity index 100% rename from docs/renderers/Form/Group.md rename to docs-old/renderers/Form/Group.md diff --git a/docs/renderers/Form/HBox.md b/docs-old/renderers/Form/HBox.md similarity index 100% rename from docs/renderers/Form/HBox.md rename to docs-old/renderers/Form/HBox.md diff --git a/docs/renderers/Form/Hidden.md b/docs-old/renderers/Form/Hidden.md similarity index 100% rename from docs/renderers/Form/Hidden.md rename to docs-old/renderers/Form/Hidden.md diff --git a/docs/renderers/Form/Image.md b/docs-old/renderers/Form/Image.md similarity index 100% rename from docs/renderers/Form/Image.md rename to docs-old/renderers/Form/Image.md diff --git a/docs/renderers/Form/Input-Group.md b/docs-old/renderers/Form/Input-Group.md similarity index 100% rename from docs/renderers/Form/Input-Group.md rename to docs-old/renderers/Form/Input-Group.md diff --git a/docs/renderers/Form/List.md b/docs-old/renderers/Form/List.md similarity index 100% rename from docs/renderers/Form/List.md rename to docs-old/renderers/Form/List.md diff --git a/docs/renderers/Form/Matrix.md b/docs-old/renderers/Form/Matrix.md similarity index 100% rename from docs/renderers/Form/Matrix.md rename to docs-old/renderers/Form/Matrix.md diff --git a/docs/renderers/Form/NestedSelect.md b/docs-old/renderers/Form/NestedSelect.md similarity index 100% rename from docs/renderers/Form/NestedSelect.md rename to docs-old/renderers/Form/NestedSelect.md diff --git a/docs/renderers/Form/Number.md b/docs-old/renderers/Form/Number.md similarity index 100% rename from docs/renderers/Form/Number.md rename to docs-old/renderers/Form/Number.md diff --git a/docs/renderers/Form/Panel.md b/docs-old/renderers/Form/Panel.md similarity index 100% rename from docs/renderers/Form/Panel.md rename to docs-old/renderers/Form/Panel.md diff --git a/docs/renderers/Form/Password.md b/docs-old/renderers/Form/Password.md similarity index 100% rename from docs/renderers/Form/Password.md rename to docs-old/renderers/Form/Password.md diff --git a/docs/renderers/Form/Picker.md b/docs-old/renderers/Form/Picker.md similarity index 100% rename from docs/renderers/Form/Picker.md rename to docs-old/renderers/Form/Picker.md diff --git a/docs/renderers/Form/Radios.md b/docs-old/renderers/Form/Radios.md similarity index 100% rename from docs/renderers/Form/Radios.md rename to docs-old/renderers/Form/Radios.md diff --git a/docs/renderers/Form/Range.md b/docs-old/renderers/Form/Range.md similarity index 100% rename from docs/renderers/Form/Range.md rename to docs-old/renderers/Form/Range.md diff --git a/docs/renderers/Form/Rating.md b/docs-old/renderers/Form/Rating.md similarity index 100% rename from docs/renderers/Form/Rating.md rename to docs-old/renderers/Form/Rating.md diff --git a/docs/renderers/Form/Repeat.md b/docs-old/renderers/Form/Repeat.md similarity index 100% rename from docs/renderers/Form/Repeat.md rename to docs-old/renderers/Form/Repeat.md diff --git a/docs/renderers/Form/Rich-Text.md b/docs-old/renderers/Form/Rich-Text.md similarity index 100% rename from docs/renderers/Form/Rich-Text.md rename to docs-old/renderers/Form/Rich-Text.md diff --git a/docs/renderers/Form/Select.md b/docs-old/renderers/Form/Select.md similarity index 100% rename from docs/renderers/Form/Select.md rename to docs-old/renderers/Form/Select.md diff --git a/docs/renderers/Form/Service.md b/docs-old/renderers/Form/Service.md similarity index 100% rename from docs/renderers/Form/Service.md rename to docs-old/renderers/Form/Service.md diff --git a/docs/renderers/Form/SubForm.md b/docs-old/renderers/Form/SubForm.md similarity index 100% rename from docs/renderers/Form/SubForm.md rename to docs-old/renderers/Form/SubForm.md diff --git a/docs/renderers/Form/Switch.md b/docs-old/renderers/Form/Switch.md similarity index 100% rename from docs/renderers/Form/Switch.md rename to docs-old/renderers/Form/Switch.md diff --git a/docs/renderers/Form/Table.md b/docs-old/renderers/Form/Table.md similarity index 100% rename from docs/renderers/Form/Table.md rename to docs-old/renderers/Form/Table.md diff --git a/docs/renderers/Form/Tabs.md b/docs-old/renderers/Form/Tabs.md similarity index 100% rename from docs/renderers/Form/Tabs.md rename to docs-old/renderers/Form/Tabs.md diff --git a/docs/renderers/Form/TabsTransfer.md b/docs-old/renderers/Form/TabsTransfer.md similarity index 100% rename from docs/renderers/Form/TabsTransfer.md rename to docs-old/renderers/Form/TabsTransfer.md diff --git a/docs/renderers/Form/Tag.md b/docs-old/renderers/Form/Tag.md similarity index 100% rename from docs/renderers/Form/Tag.md rename to docs-old/renderers/Form/Tag.md diff --git a/docs/renderers/Form/Text.md b/docs-old/renderers/Form/Text.md similarity index 100% rename from docs/renderers/Form/Text.md rename to docs-old/renderers/Form/Text.md diff --git a/docs/renderers/Form/Textarea.md b/docs-old/renderers/Form/Textarea.md similarity index 100% rename from docs/renderers/Form/Textarea.md rename to docs-old/renderers/Form/Textarea.md diff --git a/docs/renderers/Form/Time.md b/docs-old/renderers/Form/Time.md similarity index 100% rename from docs/renderers/Form/Time.md rename to docs-old/renderers/Form/Time.md diff --git a/docs/renderers/Form/Transfer.md b/docs-old/renderers/Form/Transfer.md similarity index 100% rename from docs/renderers/Form/Transfer.md rename to docs-old/renderers/Form/Transfer.md diff --git a/docs/renderers/Form/Tree.md b/docs-old/renderers/Form/Tree.md similarity index 100% rename from docs/renderers/Form/Tree.md rename to docs-old/renderers/Form/Tree.md diff --git a/docs/renderers/Form/TreeSelect.md b/docs-old/renderers/Form/TreeSelect.md similarity index 100% rename from docs/renderers/Form/TreeSelect.md rename to docs-old/renderers/Form/TreeSelect.md diff --git a/docs/renderers/Form/Url.md b/docs-old/renderers/Form/Url.md similarity index 100% rename from docs/renderers/Form/Url.md rename to docs-old/renderers/Form/Url.md diff --git a/docs/renderers/Grid.md b/docs-old/renderers/Grid.md similarity index 100% rename from docs/renderers/Grid.md rename to docs-old/renderers/Grid.md diff --git a/docs/renderers/HBox.md b/docs-old/renderers/HBox.md similarity index 100% rename from docs/renderers/HBox.md rename to docs-old/renderers/HBox.md diff --git a/docs/renderers/Html.md b/docs-old/renderers/Html.md similarity index 100% rename from docs/renderers/Html.md rename to docs-old/renderers/Html.md diff --git a/docs/renderers/JSON.md b/docs-old/renderers/JSON.md similarity index 100% rename from docs/renderers/JSON.md rename to docs-old/renderers/JSON.md diff --git a/docs/renderers/List.md b/docs-old/renderers/List.md similarity index 100% rename from docs/renderers/List.md rename to docs-old/renderers/List.md diff --git a/docs/renderers/Nav.md b/docs-old/renderers/Nav.md similarity index 100% rename from docs/renderers/Nav.md rename to docs-old/renderers/Nav.md diff --git a/docs/renderers/Operation.md b/docs-old/renderers/Operation.md similarity index 100% rename from docs/renderers/Operation.md rename to docs-old/renderers/Operation.md diff --git a/docs/renderers/Page.md b/docs-old/renderers/Page.md similarity index 100% rename from docs/renderers/Page.md rename to docs-old/renderers/Page.md diff --git a/docs/renderers/Panel.md b/docs-old/renderers/Panel.md similarity index 100% rename from docs/renderers/Panel.md rename to docs-old/renderers/Panel.md diff --git a/docs/renderers/Plain.md b/docs-old/renderers/Plain.md similarity index 100% rename from docs/renderers/Plain.md rename to docs-old/renderers/Plain.md diff --git a/docs/renderers/QRCode.md b/docs-old/renderers/QRCode.md similarity index 100% rename from docs/renderers/QRCode.md rename to docs-old/renderers/QRCode.md diff --git a/docs/renderers/Service.md b/docs-old/renderers/Service.md similarity index 100% rename from docs/renderers/Service.md rename to docs-old/renderers/Service.md diff --git a/docs/renderers/Static.md b/docs-old/renderers/Static.md similarity index 100% rename from docs/renderers/Static.md rename to docs-old/renderers/Static.md diff --git a/docs/renderers/Table.md b/docs-old/renderers/Table.md similarity index 100% rename from docs/renderers/Table.md rename to docs-old/renderers/Table.md diff --git a/docs/renderers/Tabs.md b/docs-old/renderers/Tabs.md similarity index 100% rename from docs/renderers/Tabs.md rename to docs-old/renderers/Tabs.md diff --git a/docs/renderers/Tasks.md b/docs-old/renderers/Tasks.md similarity index 100% rename from docs/renderers/Tasks.md rename to docs-old/renderers/Tasks.md diff --git a/docs/renderers/Tpl.md b/docs-old/renderers/Tpl.md similarity index 100% rename from docs/renderers/Tpl.md rename to docs-old/renderers/Tpl.md diff --git a/docs/renderers/Types.md b/docs-old/renderers/Types.md similarity index 100% rename from docs/renderers/Types.md rename to docs-old/renderers/Types.md diff --git a/docs/renderers/Video.md b/docs-old/renderers/Video.md similarity index 100% rename from docs/renderers/Video.md rename to docs-old/renderers/Video.md diff --git a/docs/renderers/Wizard.md b/docs-old/renderers/Wizard.md similarity index 100% rename from docs/renderers/Wizard.md rename to docs-old/renderers/Wizard.md diff --git a/docs/renderers/Wrapper.md b/docs-old/renderers/Wrapper.md similarity index 100% rename from docs/renderers/Wrapper.md rename to docs-old/renderers/Wrapper.md diff --git a/docs/renderers/iFrame.md b/docs-old/renderers/iFrame.md similarity index 100% rename from docs/renderers/iFrame.md rename to docs-old/renderers/iFrame.md diff --git a/docs/style.md b/docs-old/style.md similarity index 100% rename from docs/style.md rename to docs-old/style.md diff --git a/docs/components/action.md b/docs/components/action.md new file mode 100755 index 00000000..e774facb --- /dev/null +++ b/docs/components/action.md @@ -0,0 +1,467 @@ +--- +title: Action 行为按钮 +description: +type: 0 +group: ⚙ 组件 +menuName: Action 行为按钮 +icon: +order: 26 +--- + +Action 行为按钮，是触发页面行为的主要方法之一 + +## 基本用法 + +我们这里简单实现一个点击按钮弹框的交互。 + +```schema:height="100" scope="body" +{ + "label": "弹框", + "type": "action", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "这是个简单的弹框。" + } +} +``` + +## 样式 + +### 尺寸 + +配置`size`，显示不同尺寸 + +```schema:height="100" scope="body" +{ + "type": "button-toolbar", + "buttons": [ + { + "type": "action", + "label": "默认尺寸" + }, + { + "type": "action", + "label": "极小", + "size": "xs" + }, + { + "type": "action", + "label": "小", + "size": "sm" + }, + { + "type": "action", + "label": "中等", + "size": "md" + }, + { + "type": "action", + "label": "大", + "size": "lg" + } + ] +} +``` + +### 主题 + +可以配置`level`或者`primary`，显示不同样式。 + +```schema:height="100" scope="body" +{ + "type": "button-toolbar", + "buttons": [ + { + "type": "action", + "label": "默认" + }, + { + "type": "action", + "label": "主要", + "level": "primary" + }, + { + "type": "action", + "label": "次要", + "level": "secondary" + }, + { + "type": "action", + "label": "成功", + "level": "success" + }, + { + "type": "action", + "label": "警告", + "level": "warning" + }, + { + "type": "action", + "label": "危险", + "level": "danger" + }, + { + "type": "action", + "label": "浅色", + "level": "light" + }, + { + "type": "action", + "label": "深色", + "level": "dark" + }, + { + "type": "action", + "label": "链接", + "level": "link" + } + ] +} +``` + +### 图标 + +可以配置`icon`配置项，实现按钮显示图标 + +```schema:height="100" scope="body" +{ + "label": "弹框", + "type": "action", + "actionType": "dialog", + "icon": "fa fa-plus", + "dialog": { + "title": "弹框", + "body": "这是个简单的弹框。" + } +} +``` + +如果`label`配置为空字符串，可以只显示`icon` + +```schema:height="100" scope="body" +{ + "label": "", + "type": "action", + "actionType": "dialog", + "icon": "fa fa-plus", + "dialog": { + "title": "弹框", + "body": "这是个简单的弹框。" + } +} +``` + +## 操作前确认 + +可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。 + +```schema:height="100" scope="body" +{ + "label": "ajax请求", + "type": "button", + "actionType": "ajax", + "confirmText": "确认要发出这个请求？", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm" +} +``` + +## ajax 请求 + +通过配置`"actionType":"ajax"`和`api`，可以实现 ajax 请求。 + +```schema:height="100" scope="body" +{ + "label": "ajax请求", + "type": "button", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm" +} +``` + +### 请求成功后，跳转至某个页面 + +##### 配置相对路径，实现单页跳转 + +```schema:height="100" scope="body" +{ + "label": "ajax请求", + "type": "button", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "redirect": "./getting-started" +} +``` + +##### 配置完整路径，直接跳转指定路径 + +```schema:height="100" scope="body" +{ + "label": "ajax请求", + "type": "button", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "redirect": "https://www.baidu.com/" +} +``` + +### 请求成功后，显示反馈弹框 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "ajax 反馈弹框", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "feedback": { + "title": "操作成功", + "body": "xxx 已操作成功" + } +} +``` + +更多内容查看[Dialog 文档](./dialog#feedback-%E5%8F%8D%E9%A6%88%E5%BC%B9%E6%A1%86) + +### 自定义 toast 文字 + +可以通过配置`messages`，自定义接口返回`toast`信息 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "ajax 请求", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "messages": { + "success": "成功了！欧耶", + "failed": "失败了呢。。" + } +} +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------- | -------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | +| api | [Api](../types/api) | - | 请求地址，参考 [api](../types/api) 格式说明。 | +| redirect | [模板字符串](../concepts/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 | +| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog.md) | +| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 | + +## 跳转链接 + +### 单页跳转 + +```schema:height="100" +{ + "body": { + "label": "进入简介页面", + "type": "button", + "level": "info", + "actionType": "link", + "link": "/docs/index" + } +} +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- | +| actionType | `string` | `link` | 单页跳转 | +| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 | + +### 直接跳转 + +```schema:height="100" +{ + "body": { + "label": "打开 Baidu", + "type": "button", + "level": "success", + "actionType": "url", + "url": "raw:http://www.baidu.com" + } +} +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | --------- | ------- | ------------------------------------------------ | +| actionType | `string` | `url` | 页面跳转 | +| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 | +| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 | + +`注意：由于 amis 平台内 http 地址会被替换成 proxy 地址，所以在 amis 平台内使用请加上 raw: 作为前缀。 比如：raw:http://www.baidu.com` + +## 弹框 + +```schema:height="100" +{ + "body": { + "label": "Dialog Form", + "type": "button", + "level": "primary", + "actionType": "dialog", + "dialog": { + "title": "表单设置", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + } + ] + } + } + } +} +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | -------------------------- | -------- | --------------------------------------------- | +| actionType | `string` | `dialog` | 点击后显示一个弹出框 | +| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考[Dialog](./dialog) | +| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 | + +## 抽屉 + +```schema:height="100" + { + "body": { + "label": "Drawer Form", + "type": "button", + "actionType": "drawer", + "drawer": { + "title": "表单设置", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + } + ] + } + } + } + } +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | -------------------------- | -------- | ------------------------------------------ | +| actionType | `string` | `drawer` | 点击后显示一个侧边栏 | +| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考[Drawer](./drawer) | + +## 复制文本 + +```schema:height="100" scope="body" +{ + "label": "复制一段文本", + "type": "button", + "actionType": "copy", + "content": "raw:http://www.baidu.com" +} +``` + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | ---------------------------- | ------ | ------------------------------------ | +| actionType | `string` | `copy` | 复制一段内容到粘贴板 | +| content | [模板](../concepts/template) | - | 指定复制的内容。可用 `${xxx}` 取值。 | + +## 刷新其他组件 + +### 基本使用 + +xxx + +##### 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | -------- | -------- | --------------------------------------------------------------------------- | +| actionType | `string` | `reload` | 刷新目标组件 | +| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 | + +## 组件特有的行为类型 + +### 表单中表格添加一行 + +该 actionType 为[FormItem-Table](./form/table)专用行为 + +### 重置表单 + +在 form 中，配置`"type": "reset"`的按钮，可以实现重置表单数据的功能 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "username", + "placeholder": "请输入用户名", + "label": "用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "placeholder": "请输入密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "option": "记住登录" + } + ], + "actions": [ + { + "type": "reset", + "label": "重置" + }, + { + "type": "submit", + "label": "提交", + "level": "primary" + } + ] +} +``` + +## 通用属性表 + +所有`actionType`都支持的通用配置项 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| type | `string` | `action` | 指定为 Page 渲染器。 | +| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 | +| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 | +| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 | +| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 | +| icon | `string` | - | 设置图标，例如`fa fa-plus`。 | +| iconClassName | `string` | - | 给图标上添加类名。 | +| active | `boolean` | - | 按钮是否高亮。 | +| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 | +| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 | +| block | `boolean` | - | 用`display:"block"`来显示按钮。 | +| confirmText | [模板](../concepts/template) | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 | +| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 | +| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 | +| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 | +| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 | +| close | `boolean` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。 | +| required | `Array` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 | diff --git a/docs/components/alert.md b/docs/components/alert.md new file mode 100755 index 00000000..6362cf15 --- /dev/null +++ b/docs/components/alert.md @@ -0,0 +1,68 @@ +--- +title: Alert 提示 +description: +type: 0 +group: ⚙ 组件 +menuName: Alert 提示 +icon: +order: 27 +--- + +用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。 + +## 基本使用 + +```schema:height="300" scope="body" +[ + { + "type": "alert", + "body": "提示类提示", + "level": "info" + }, + { + "type": "alert", + "body": "成功类提示", + "level": "success" + }, + { + "type": "alert", + "body": "警告类提示", + "level": "warning" + }, + { + "type": "alert", + "body": "危险类提示", + "level": "danger" + } +] +``` + +## 显示关闭按钮 + +配置`"showCloseButton": true`实现显示关闭按钮。 + +```schema:height="200" scope="body" +[ + { + "type": "alert", + "body": "默认提示", + "level": "info" + }, + { + "type": "alert", + "body": "显示关闭按钮的提示", + "level": "info", + "showCloseButton": true + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------------------------------- | --------- | -------------------------------------------------------- | +| type | `string` | `"alert"` | 指定为 alert 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` | +| body | [SchemaNode](../types/schemanode) | | 显示内容 | +| showCloseButton | `boolean` | false | 是否显示关闭按钮 | diff --git a/docs/components/audio.md b/docs/components/audio.md new file mode 100755 index 00000000..13791814 --- /dev/null +++ b/docs/components/audio.md @@ -0,0 +1,37 @@ +--- +title: Audio 音频 +description: +type: 0 +group: ⚙ 组件 +menuName: Audio 音频 +icon: +order: 28 +--- +## 基本使用 + +```schema:height="100" scope="body" +{ + "type": "audio", + "src": "https://amis.bj.bcebos.com/amis/2019-7/1562137295708/chicane-poppiholla-original-radio-edit%20(1).mp3" +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | --------- | ------------------------------------------------ | --------------------------------------- | +| type | `string` | `"audio"` | 指定为 audio 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| inline | `boolean` | true | 是否是内联模式 | +| src | `string` | | 音频地址 | +| loop | `boolean` | false | 是否循环播放 | +| autoPlay | `boolean` | false | 是否自动播放 | +| rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` | +| controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 | + + + + + + + diff --git a/docs/components/button-group.md b/docs/components/button-group.md new file mode 100755 index 00000000..6041f64a --- /dev/null +++ b/docs/components/button-group.md @@ -0,0 +1,78 @@ +--- +title: ButtonGroup 按钮组 +description: +type: 0 +group: ⚙ 组件 +menuName: ButtonGroup +icon: +order: 30 +--- + +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "button-group", + "buttons": [ + { + "type": "button", + "label": "Button", + "actionType": "dialog", + "dialog": { + "confirmMode": false, + "title": "提示", + "body": "对，你刚点击了！" + } + }, + + { + "type": "button", + "actionType": "url", + "url": "https://www.baidu.com", + "blank": true, + "label": "百度一下" + }, + + { + "type": "button", + "label": "普通按钮" + } + ] +} +``` + +## 垂直模式 + +配置`"vertical": true`，实现垂直模式 + +```schema:height="200" scope="body" +[ + { + "type": "button-group", + "vertical": true, + "buttons": [ + { + "type": "button", + "label": "按钮1" + }, + { + "type": "button", + "label": "按钮2" + }, + { + "type": "button", + "label": "按钮3" + } + ] + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------------------------- | ---------------- | -------------------------- | +| type | `string` | `"button-group"` | 指定为 button-group 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| buttons | Array<[Action](./action)> | | 行为按钮组 | +| vertical | `string` | | 是否使用垂直模式 | diff --git a/docs/components/button.md b/docs/components/button.md new file mode 100755 index 00000000..3da828b7 --- /dev/null +++ b/docs/components/button.md @@ -0,0 +1,28 @@ +--- +title: Button 按钮 +description: +type: 0 +group: ⚙ 组件 +menuName: Button 按钮 +icon: +order: 29 +--- +## 基本用法 + +```schema:height="100" scope="body" +{ + "label": "弹个框", + "type": "button", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "这是个简单的弹框。" + } +} +``` + +`button` 实际上是 `action` 的别名，更多用法见[action](./action) + + + + diff --git a/docs/components/card.md b/docs/components/card.md new file mode 100755 index 00000000..dc8ed89b --- /dev/null +++ b/docs/components/card.md @@ -0,0 +1,64 @@ +--- +title: Card 卡片 +description: +type: 0 +group: ⚙ 组件 +menuName: Card 卡片 +icon: +order: 31 +--- + +## 基本用法 + +```schema:height="250" scope="body" +{ + "type": "card", + "header": { + "title": "标题", + "subTitle": "副标题", + "description": "这是一段描述", + "avatarClassName": "pull-left thumb-md avatar b-3x m-r", + "avatar": "raw:http://hiphotos.baidu.com/fex/%70%69%63/item/c9fcc3cec3fdfc03ccabb38edd3f8794a4c22630.jpg" + }, + "body": "这里是内容", + "actions": [ + { + "type": "button", + "label": "编辑", + "actionType": "dialog", + "dialog": { + "title": "编辑", + "body": "你正在编辑该卡片" + } + }, + { + "type": "button", + "label": "删除", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "你删掉了该卡片" + } + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------------- | ---------------------------- | ----------------------------------- | -------------------------------------- | +| type | `string` | `"card"` | 指定为 Card 渲染器 | +| className | `string` | `"panel-default"` | 外层 Dom 的类名 | +| header | `Object` | | Card 头部内容设置 | +| header.className | `string` | | 头部类名 | +| header.title | [模板](../concepts/template) | | 标题 | +| header.subTitle | [模板](../concepts/template) | | 副标题 | +| header.desc | [模板](../concepts/template) | | 描述 | +| header.avatar | [模板](../concepts/template) | | 图片 | +| header.avatarText | [模板](../concepts/template) | | 如果不配置图片，则会在图片处显示该文本 | +| header.highlight | `boolean` | | 是否显示激活样式 | +| header.avatarClassName | `string` | `"pull-left thumb avatar b-3x m-r"` | 图片类名 | +| body | `Array` | | 内容容器，主要用来放置非表单项组件 | +| bodyClassName | `string` | `"padder m-t-sm m-b-sm"` | 内容区域类名 | +| actions | Array<[Action](./action)> | | 配置按钮集合 | diff --git a/docs/components/cards.md b/docs/components/cards.md new file mode 100755 index 00000000..258ffd6e --- /dev/null +++ b/docs/components/cards.md @@ -0,0 +1,128 @@ +--- +title: Cards 卡片组 +description: +type: 0 +group: ⚙ 组件 +menuName: Cards 卡片组 +icon: +order: 32 +--- + +卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。 + +## 基本用法 + +这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。 + +```schema:height="450" +{ + "type": "page", + "data": { + "items": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A" + } + ] + }, + "body": { + "type": "cards", + "source": "$items", + "card": { + "body": [ + { + "label": "Engine", + "name": "engine" + }, + { + "label": "Browser", + "name": "browser" + }, + { + "name": "version", + "label": "Version" + } + ], + "actions": [ + { + "type": "button", + "level": "link", + "icon": "fa fa-eye", + "actionType": "dialog", + "dialog": { + "title": "查看详情", + "body": { + "type": "form", + "controls": [ + { + "label": "Engine", + "name": "engine", + "type": "static" + }, + + { + "name": "browser", + "label": "Browser", + "type": "static" + }, + { + "name": "version", + "label": "Version", + "type": "static" + } + ] + } + } + } + ] + } + } +} +``` + +或者你也可以使用 CRUD 的 [card 模式](./crud#cards-%E5%8D%A1%E7%89%87%E6%A8%A1%E5%BC%8F) + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | ------------------------------------ | ------------------- | ------------------------------ | +| type | `string` | | `"cards"` 指定为卡片组。 | +| title | [模板](../concepts/template) | | 标题 | +| source | [数据映射](../concepts/data-mapping) | `${items}` | 数据源, 获取当前数据域中的变量 | +| placeholder | [模板](../concepts/template) | ‘暂无数据’ | 当没数据的时候的文字提示 | +| className | `string` | | 外层 CSS 类名 | +| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 | +| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 | +| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 | +| card | [Card](./card) | | 配置卡片信息 | diff --git a/docs/components/carousel.md b/docs/components/carousel.md new file mode 100755 index 00000000..52099b7a --- /dev/null +++ b/docs/components/carousel.md @@ -0,0 +1,73 @@ +--- +title: Carousel 轮播图 +description: +type: 0 +group: ⚙ 组件 +menuName: Carousel 幻灯片 +icon: +order: 33 +--- + +## 基本用法 + +```schema:height="350" scope="body" +{ + "type": "carousel", + "options": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png" + }, + { + "html": "
carousel data
" + }, + { + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------------------- | --------- | -------------------- | ------------------------------------------------------- | +| type | `string` | `"carousel"` | 指定为 Carousel 渲染器 | +| className | `string` | `"panel-default"` | 外层 Dom 的类名 | +| options | `array` | `[]` | 轮播面板数据 | +| options.image | `string` | | 图片链接 | +| options.imageClassName | `string` | | 图片类名 | +| options.title | `string` | | 图片标题 | +| options.titleClassName | `string` | | 图片标题类名 | +| options.description | `string` | | 图片描述 | +| options.descriptionClassName | `string` | | 图片描述类名 | +| options.html | `string` | | HTML 自定义，同[Tpl](./tpl)一致 | +| itemSchema | `object` | | 自定义`schema`来展示数据 | +| auto | `boolean` | `true` | 是否自动轮播 | +| interval | `string` | `5s` | 切换动画间隔 | +| duration | `string` | `0.5s` | 切换动画时长 | +| width | `string` | `auto` | 宽度 | +| height | `string` | `200px` | 高度 | +| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 | +| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 | +| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 | + +- `type` 请设置成 `carousel` +- `className` 外层 Dom 的类名 +- `options` 轮播面板数据，默认`[]`，支持以下模式 + - 图片 + - `image` 图片链接 + - `imageClassName` 图片类名 + - `title` 图片标题 + - `titleClassName` 图片标题类名 + - `description` 图片描述 + - `descriptionClassName` 图片描述类名 + - `html` HTML 自定义，同[Tpl](./Tpl.md)一致 +- `itemSchema` 自定义`schema`来展示数据 +- `auto` 是否自动轮播，默认`true` +- `interval` 切换动画间隔，默认`5s` +- `duration` 切换动画时长，默认`0.5s` +- `width` 宽度，默认`auto` +- `height` 高度，默认`200px` +- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']` +- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 +- `animation` 切换动画效果，默认`fade`，另有`slide`模式 diff --git a/docs/components/chart.md b/docs/components/chart.md new file mode 100755 index 00000000..898bdd06 --- /dev/null +++ b/docs/components/chart.md @@ -0,0 +1,334 @@ +--- +title: Chart 图表 +description: +type: 0 +group: ⚙ 组件 +menuName: Chart 图标 +icon: +order: 34 +--- + +图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，[echarts 配置文档](http://echarts.baidu.com/option.html#title) + +## 基本用法 + +```schema:height="350" scope="body" +{ + "type": "chart", + "api": "https://houtai.baidu.com/api/mock2/chart/chart", + "interval": 5000 +} +``` + +## 配置静态配置项 + +通过配置`"config": {}`，可以配置`echarts`配置 + +```schema:height="350" scope="body" +{ + "type": "chart", + "config": { + "title": { + "text": "极坐标双数值轴" + }, + "legend": { + "data": [ + "line" + ] + }, + "polar": { + "center": [ + "50%", + "54%" + ] + }, + "tooltip": { + "trigger": "axis", + "axisPointer": { + "type": "cross" + } + }, + "angleAxis": { + "type": "value", + "startAngle": 0 + }, + "radiusAxis": { + "min": 0 + }, + "series": [ + { + "coordinateSystem": "polar", + "name": "line", + "type": "line", + "showSymbol": false, + "data": [ + [ + 0, + 0 + ], + [ + 0.03487823687206265, + 1 + ], + [ + 0.06958655048003272, + 2 + ], + [ + 0.10395584540887964, + 3 + ], + [ + 0.13781867790849958, + 4 + ], + [ + 0.17101007166283433, + 5 + ], + [ + 0.2033683215379001, + 6 + ], + [ + 0.2347357813929454, + 7 + ], + [ + 0.26495963211660245, + 8 + ], + [ + 0.2938926261462365, + 9 + ], + [ + 0.3213938048432697, + 10 + ] + ] + } + ], + "animationDuration": 2000 + }, + "clickAction": { + "actionType": "dialog", + "dialog": { + "title": "详情", + "body": [ + { + "type": "tpl", + "tpl": "当前选中值 ${value|json}" + }, + { + "type": "chart", + "api": "https://houtai.baidu.com/api/mock2/chart/chart1" + } + ] + } + } +} +``` + +## 配置图表点击行为 + +可以通过配置`"clickAction": {}`，来指定图表节点的点击行为，支持 amis 的[行为](./action)。 + +> 点击下面坐标中的节点查看效果！ + +```schema:height="350" scope="body" +{ + "type": "chart", + "config": { + "title": { + "text": "极坐标双数值轴" + }, + "legend": { + "data": [ + "line" + ] + }, + "polar": { + "center": [ + "50%", + "54%" + ] + }, + "tooltip": { + "trigger": "axis", + "axisPointer": { + "type": "cross" + } + }, + "angleAxis": { + "type": "value", + "startAngle": 0 + }, + "radiusAxis": { + "min": 0 + }, + "series": [ + { + "coordinateSystem": "polar", + "name": "line", + "type": "line", + "showSymbol": false, + "data": [ + [ + 0, + 0 + ], + [ + 0.03487823687206265, + 1 + ], + [ + 0.06958655048003272, + 2 + ], + [ + 0.10395584540887964, + 3 + ], + [ + 0.13781867790849958, + 4 + ], + [ + 0.17101007166283433, + 5 + ], + [ + 0.2033683215379001, + 6 + ], + [ + 0.2347357813929454, + 7 + ], + [ + 0.26495963211660245, + 8 + ], + [ + 0.2938926261462365, + 9 + ], + [ + 0.3213938048432697, + 10 + ] + ] + } + ], + "animationDuration": 2000 + }, + "clickAction": { + "actionType": "dialog", + "dialog": { + "title": "详情", + "body": [ + { + "type": "tpl", + "tpl": "当前选中值 ${value|json}" + }, + { + "type": "chart", + "api": "https://houtai.baidu.com/api/mock2/chart/chart1" + } + ] + } + } +} +``` + +## 远程拉取动态配置项 + +配置`api`，来远程拉取图标配置 + +```schema:height="350" scope="body" +{ + "type": "chart", + "api": "https://houtai.baidu.com/api/mock2/chart/chart1" +} +``` + +## 通过组件间联动，更新图表 + +```schema:height="350" scope="body" +[ + { + "type": "form", + "title": "过滤条件", + "target": "chart1,chart2", + "submitOnInit": true, + "className": "m-b", + "wrapWithPanel": false, + "mode": "inline", + "controls": [ + { + "type": "date", + "label": "开始日期", + "name": "starttime", + "value": "-8days", + "maxDate": "${endtime}" + }, + { + "type": "date", + "label": "结束日期", + "name": "endtime", + "value": "-1days", + "minDate": "${starttime}" + }, + { + "type": "text", + "label": "条件", + "name": "name", + "addOn": { + "type": "submit", + "label": "搜索", + "level": "primary" + } + } + ], + "actions": [] + }, + { + "type": "divider" + }, + { + "type": "grid", + "className": "m-t-lg", + "columns": [ + { + "type": "chart", + "name": "chart1", + "initFetch": false, + "api": "https://houtai.baidu.com/api/mock2/chart/chart?name=$name&starttime=${starttime}&endtime=${endtime}" + }, + { + "type": "chart", + "name": "chart2", + "initFetch": false, + "api": "https://houtai.baidu.com/api/mock2/chart/chart2?name=$name" + } + ] + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------ | --------------------------------- | --------- | ------------------------------------------------------------------ | +| type | `string` | `"chart"` | 指定为 chart 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| body | [SchemaNode](../types/schemanode) | | 内容容器 | +| api | [api](../types/api) | | 配置项接口地址 | +| initFetch | `boolean` | | 组件初始化时，是否请求接口 | +| interval | `number` | | 刷新时间(最低 3000) | +| config | `object | string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 | +| style | `object` | | 设置根元素的 style | +| width | `string` | | 设置根元素的宽度 | +| height | `string` | | 设置根元素的高度 | +| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ | diff --git a/docs/components/collapse.md b/docs/components/collapse.md new file mode 100755 index 00000000..507ef4d8 --- /dev/null +++ b/docs/components/collapse.md @@ -0,0 +1,31 @@ +--- +title: Collapse 折叠器 +description: +type: 0 +group: ⚙ 组件 +menuName: Collapse 折叠器 +icon: +order: 36 +--- + +## 基本用法 + +```schema:height="350" scope="body" +{ + "type": "collapse", + "title": "标题", + "body": "这里是内容" +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------------------------- | -------------------------------------- | ---------------------- | +| type | `string` | `"collapse"` | 指定为 Collapse 渲染器 | +| title | [SchemaNode](../types/schemanode) | | 标题 | +| body | [SchemaNode](../types/schemanode) | | 内容 | +| className | `string` | `bg-white wrapper` | CSS 类名 | +| headingClassName | `string` | `font-thin b-b b-light text-lg p-b-xs` | 标题 CSS 类名 | +| bodyClassName | `string` | | 内容 CSS 类名。 | +| collapsed | `boolean` | `false` | 默认是否要收起。 | diff --git a/docs/components/color.md b/docs/components/color.md new file mode 100755 index 00000000..ce967641 --- /dev/null +++ b/docs/components/color.md @@ -0,0 +1,99 @@ +--- +title: Color 颜色 +description: +type: 0 +group: ⚙ 组件 +menuName: Color +icon: +order: 37 +--- +用于展示颜色 + +## 基本用法 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "color", + "value": "#108cee" + } +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "color": "#108cee" + }, + { + "id": "2", + "color": "#f38900" + }, + { + "id": "3", + "color": "#04c1ba" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "color", + "label": "颜色", + "type": "color" + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "color": "#108cee" + }, + "controls": [ + { + "type": "static-color", + "name": "color", + "label": "颜色" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------ | --------- | ------ | -------------------------------------------------------------------------------------- | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | +| className | `string` | | 外层 CSS 类名 | +| value | `string` | | 显示的颜色值 | +| name | `string` | | 在其他组件中，时，用作变量映射 | +| defaultColor | `string` | `#ccc` | 默认颜色值 | +| showValue | `boolean` | `true` | 是否显示右边的颜色值 | + + + + + + diff --git a/docs/components/component.md b/docs/components/component.md new file mode 100755 index 00000000..c9f6c1b9 --- /dev/null +++ b/docs/components/component.md @@ -0,0 +1,14 @@ +--- +title: 组件介绍 +description: +type: 0 +group: ⚙ 组件 +menuName: 组件介绍 +icon: +order: 21 +--- +从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法 + + + + diff --git a/docs/components/container.md b/docs/components/container.md new file mode 100755 index 00000000..0705ec30 --- /dev/null +++ b/docs/components/container.md @@ -0,0 +1,29 @@ +--- +title: Container 容器 +description: +type: 0 +group: ⚙ 组件 +menuName: Container 容器 +icon: +order: 38 +--- + +Container 是一种容器组件，它可以渲染其他 amis 组件 + +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "container", + "body":"这里是容器内容区" +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | --------------------------------- | --------- | ------------------- | +| type | `string` | `"alert"` | 指定为 alert 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| bodyClassName | `string` | | 容器内容区的类名 | +| body | [SchemaNode](../types/schemanode) | | 容器内容 | diff --git a/docs/components/crud.md b/docs/components/crud.md new file mode 100755 index 00000000..216e405c --- /dev/null +++ b/docs/components/crud.md @@ -0,0 +1,1326 @@ +--- +title: CRUD 增删改查 +description: +type: 0 +group: ⚙ 组件 +menuName: CRUD 增删改查 +icon: +order: 25 +--- + +CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。 + +## 基本用法 + +最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)** + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +## 数据源接口数据结构要求 + +- `items`或`rows`：用于返回数据源数据，格式是数组 +- `total`: 用于返回数据库中一共有多少条数据，用于生成分页 + +```json +{ + "status": 0, + "msg": "", + "data": { + "items": [ + { + // 每一行的数据 + "id": 1, + "xxx": "xxxx" + } + ], + + "total": 200 // 注意！！！这里不是当前请求返回的 items 的长度，而是数据库中一共有多少条数据，用于生成分页组件 + // 如果你不想要分页，把这个不返回就可以了。 + } +} +``` + +如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，AMIS 会简单生成一个简单版本的分页控件。 + +```json +{ + "status": 0, + "msg": "", + "data": { + "items": [ + { + // 每个成员的数据。 + "id": 1, + "xxx": "xxxx" + } + ], + + "hasNext": true // 是否有下一页。 + } +} +``` + +如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。 + +## 展示模式 + +CRUD 支持下面 3 种展示模式，默认为 Table 表格模式。 + +### Table 表格模式 + +Table 模式支持 [Table](./table) 中的所有功能。 + +```schema:height="700" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample", + "syncLocation": false, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + } + ] +} +``` + +### List 列表模式 + +List 模式支持 [List](./list) 中的所有功能。 + +```schema:height="700" scope="body" +{ +"type": "crud", +"api": "raw:https://houtai.baidu.com/api/mock2/crud/permissions", +"mode": "list", +"placeholder": "当前组内, 还没有配置任何权限.", +"syncLocation": false, +"title": null, +"listItem": { + "title": "$name", + "subTitle": "$description", + "actions": [ + { + "icon": "fa fa-edit", + "tooltip": "编辑", + "actionType": "dialog", + "dialog": { + "title": "编辑能力（权限）", + "body": { + "type": "form", + "controls": [ + { + "type": "hidden", + "name": "id" + }, + { + "name": "name", + "label": "权限名称", + "type": "text", + "disabled": true + }, + { + "type": "divider" + }, + { + "name": "description", + "label": "描述", + "type": "textarea" + } + ] + } + } + }, + { + "tooltip": "删除", + "disabledOn": "~[\"admin:permission\", \"admin:user\", \"admin:role\", \"admin:acl\", \"admin:page\", \"page:readAll\", \"admin:settings\"].indexOf(name)", + "icon": "fa fa-times", + "confirmText": "您确定要移除该权限?", + "actionType": "ajax", + "api": "delete:https://houtai.baidu.com/api/mock2/notFound" + } + ] +} +} +``` + +### Cards 卡片模式 + +Cards 模式支持 [Cards](./cards) 中的所有功能。 + +```schema:height="400" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/mock2/crud/users", + "syncLocation": false, + "mode": "cards", + "defaultParams": { + "perPage": 6 + }, + "switchPerPage": false, + "placeholder": "没有用户信息", + "columnsCount": 2, + "card": { + "header": { + "className": "bg-white", + "title": "$name", + "subTitle": "$realName", + "description": "$email", + "avatar": "${avatar | raw}", + "highlight": "$isSuperAdmin", + "avatarClassName": "pull-left thumb-md avatar b-3x m-r" + }, + "bodyClassName": "padder", + "body": "\n <% if (data.roles && data.roles.length) { %>\n <% data.roles.map(function(role) { %>\n <%- role.name %>\n <% }) %>\n <% } else { %>\n

没有分配角色

\n <% } %>\n ", + "actions": [ + { + "label": "编辑", + "actionType": "dialog", + "dialog": { + "title": null, + "body": { + "api": "", + "type": "form", + "tabs": [ + { + "title": "基本信息", + "controls": [ + { + "type": "hidden", + "name": "id" + }, + { + "name": "name", + "label": "帐号", + "disabled": true, + "type": "text" + }, + { + "type": "divider" + }, + { + "name": "email", + "label": "邮箱", + "type": "text", + "disabled": true + }, + { + "type": "divider" + }, + { + "name": "isAmisOwner", + "label": "管理员", + "description": "设置是否为超级管理", + "type": "switch" + } + ] + }, + { + "title": "角色信息", + "controls": [] + }, + { + "title": "设置权限", + "controls": [] + } + ] + } + } + }, + { + "label": "移除", + "confirmText": "您确定要移除该用户?", + "actionType": "ajax", + "api": "delete:https://houtai.baidu.com/api/mock2/notFound" + } + ] + } +} +``` + +## 查询条件表单 + +大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单 + +`filter` 配置实际上同 [Form](./form/index) 组件，因此支持绝大部分`form`的功能。 + +```schema:height="800" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "filter": { + "title": "条件搜索", + "controls": [ + { + "type": "text", + "name": "keywords", + "placeholder": "通过关键字搜索" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作 + +如果想前端实现过滤功能，请看[前端一次性加载](#前端一次性加载)部分。 + +## 数据源接口轮训 + +可以配置`interval`来实现数据接口轮训功能，默认最低为`3000`毫秒， + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "interval": 3000, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +配置`stopAutoRefreshWhen`表达式，来实现满足条件，停止轮训 + +## 列配置 + +除了支持 [Table 中的列配置](./table#%E5%88%97%E9%85%8D%E7%BD%AE) 以外，crud 还支持下面这些配置，帮助更好的操作数据 + +### 排序检索 + +可以在列上配置`"sortable": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "sortable": true + } + ] +} +``` + +amis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下： + +```json +{ + "orderBy": "engine", // 这里为所配置列的 name + "orderDir": "asc" // asc 为升序，desc 为降序 +} +``` + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +### 快速搜索 + +可以在列上配置`"sortable": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索： + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "searchable": true + } + ] +} +``` + +amis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下： + +```json +{ + "engine": "xxx" // 这里的key是列的 name，value是输入的关键字 +} +``` + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +### 快速过滤 + +可以在列上配置`filterable`属性，该列表头右侧会渲染一个可点击的过滤图标，点击显示下拉框，选中进行过滤： + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "filterable": { + "options": [ + "A", + "B", + "C", + "D", + "X" + ] + } + } + ] +} +``` + +amis 只负责生成下拉选择器组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下： + +```json +{ + "grade": "xxx" // 这里的key是列的 name，value是选中项的value值 +} +``` + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +### 快速编辑 + +可以通过给列配置：`"quickEdit":true`和`quickSaveApi` 可以实现表格内快速编辑并批量保存的功能。 + +如下`Rendering engine`列的每一行中，会生成可编辑图标，点击后会显示弹框，用于编辑该列的值， + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "quickEdit":true + } + ] +} +``` + +#### 指定编辑表单项类型 + +`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`"type": "select"`： + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "type": "select", + "options": [ + "A", + "B", + "C", + "D", + "X" + ] + } + } + ] +} +``` + +#### 内联模式 + +配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。 + +```schema:height="750" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ] + } + } + ] +} +``` + +#### 即时保存 + +如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置`quickEdit`中`"saveImmediately": true`，然后配置接口`quickSaveItemApi`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。 + +```schema:height="750" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ], + "saveImmediately": true + } + } + ] +} +``` + +你也可以在`saveImmediately`中配置 api，实现即时保存 + +```schema:height="750" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ], + "saveImmediately": { + "api": "https://houtai.baidu.com/api/sample/$id" + } + } + } + ] +} +``` + +## 顶部和底部工具栏 + +crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件， + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "headerToolbar": [ + { + "type": "tpl", + "tpl": "一共有${count}条数据" + } + ], + "footerToolbar": [ + { + "type": "action", + "actionType": "dialog", + "label": "底部工具栏按钮", + "dialog": { + "title": "一个弹框", + "body": { + "type": "tpl", + "tpl": "一个简单的弹框" + } + } + } + ], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +上例中我们在顶部渲染了一段模板，通过`${count}`取到数据域中，CRUD 返回的`count`变量值；然后我们在底部渲染了一个按钮。 + +从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置： + +```json +{ + "headerToolbar": ["bulkActions", "pagination"], + "footerToolbar": ["statistics", "pagination"] +} +``` + +- 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件 +- 在底部工具栏中：渲染数据统计组件 和 分页组件 + +> 如果你不希望在顶部或者底部渲染默认组件，你可以设置`headerToolbar`和`footerToolbar`为空数组`[]` + +除了可以配置[SchemaNode 类型](../types/schemanode)以外，`headerToolbar`和`footerToolbar`还支持一些针对列表场景而内置的一些常用组件，下面分别介绍： + +### 分页 + +在`headerToolbar`或者`footerToolbar`数组中添加`pagination`字符串，并且在数据源接口中返回了数据总数`count`，即可以渲染分页组件；添加`switch-per-page`字符串，可以渲染切换每页条数组件 + +```schema:height="700" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "headerToolbar": [], + "footerToolbar": ["switch-per-page", "pagination"], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "size": "xs", + "options": [ + "A", + "B", + "C", + "D", + "X" + ], + "saveImmediately": { + "api": "https://houtai.baidu.com/api/sample/$id" + } + } + } + ] +} +``` + +`crud`默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数`total`变量： + +默认传给后端的分页参数格式为： + +```json +{ + "page": 1, + "perPage": 10 +} +``` + +你可以通过配置`pageField`和`perPageField`来修改传给后端的分页数据格式，如： + +```json +{ + "pageField": "pageNo", + "perPageField": "pageSize" +} +``` + +这样传给后端的参数格式将为： + +```json +{ + "pageNo": 1, + "pageSize": 10 +} +``` + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +```json +{ + "type": "crud", + "api": { + "method": "get", + "url": "xxxxxx", + "data": { + "pageNo": "${page}", + "pageSize": "${perPage}", + ... // 一些其他参数 + } + } +} +``` + +分页有两种模式： + +##### 1. 知道数据总数 + +如果后端可以知道数据总数时，接口返回格式如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "items": [ + { + // 每一行的数据。 + "id": 1, + "xxx": "xxxx" + } + ], + + "total": 200 // 注意这里不是当前请求返回的 items 的长度，而是数据库一共有多少条数据，用于生成分页， + } +} +``` + +该模式下，会自动计算总页码数，渲染出有页码的分页组件 + +##### 2. 不知道数据总数 + +如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。 + +```json +{ + "status": 0, + "msg": "", + "data": { + "items": [ + { + // 每个成员的数据。 + "id": 1, + "xxx": "xxxx" + } + ], + + "hasNext": true // 标识是否有下一页。 + } +} +``` + +这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。 + +### 批量操作 + +在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "headerToolbar": [ + "bulkActions" + ], + "bulkActions": [ + { + "label": "批量删除", + "actionType": "ajax", + "api": "delete:https://houtai.baidu.com/api/sample/${ids|raw}", + "confirmText": "确定要批量删除?" + }, + { + "label": "批量修改", + "actionType": "dialog", + "dialog": { + "title": "批量编辑", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/sample/bulkUpdate2", + "controls": [ + { + "type": "hidden", + "name": "ids" + }, + { + "type": "text", + "name": "engine", + "label": "Engine" + } + ] + } + } + } + ], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +批量操作会默认将下面数据添加到数据域中以供按钮行为使用 + +- `items` `Array` 选中的行数据。 +- `rows` items 的别名，推荐用 items。 +- `unselectedItems` `Array` 没选中的行数据也可获取。 +- `ids` `Array` 前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。 +- `第一行所有行数据` 还有第一行的所有行数据也会包含进去。 + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +### 数据统计 + +在`headerToolbar`或者`footerToolbar`数组中添加`statistics`字符串，可以实现简单的数据统计功能 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "headerToolbar": ["statistics"], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +### 加载更多 + +在`headerToolbar`或者`footerToolbar`数组中添加`load-more`字符串，可以实现点击加载更多功能。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "headerToolbar": ["load-more"], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +### 显隐显示查询条件表单 + +在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`"filterTogglable": true`后，可以渲染一个可以切换显示查询表单的功能按钮 + +```schema:height="800" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "filter": { + "title": "条件搜索", + "controls": [ + { + "type": "text", + "name": "keywords", + "placeholder": "通过关键字搜索" + } + ] + }, + "filterTogglable": true, + "headerToolbar": [ + "filter-toggler" + ], + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +## 拖拽排序 + +通过配置`"draggable": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能， + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "draggable": true, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +同样的，前端是不会处理排序结果，需要后端调用接口`saveOrderApi`来保存新的顺序 + +发送方式默认为`POST`，会包含以下信息。 + +- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: "order_id"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。 +- `rows` `Array` 数组格式，新的顺序，数组里面包含所有原始信息。 +- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如： + + ```json + { + "insertAfter": { + "2": ["1", "3"], + "6": ["4", "5"] + } + } + ``` + + 表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。 + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +如下: + +```json +{ + "saveOrderApi": { + "url": "/api/xxxx", + "data": { + "ids": "${ids}" + } + } +} +``` + +这样就只会发送 ids 了。 + +## 单条操作 + +当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。 + +CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息： + +- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。 +- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。 +- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。 +- `prevIndex` `number` +- `nextIndex` `number` + +你可以通过[数据映射](../concepts/data-mapping)，在`api`中获取这些参数。 + +如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。 + +```json +{ + "type": "button", + "label": "删除", + "actionType": "ajax", + "api": "delete:/api/xxxx/$id", + "confirmText": "确定要删除？" +} +``` + +上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样： + +```json +{ + "type": "button", + "label": "删除", + "actionType": "ajax", + "api": { + "method": "post", + "url": "/api/xxxx/$id", + "data": { + "&": "$$", + "op": "delete" + } + }, + "confirmText": "确定要删除？" +} +``` + +## 过滤条件参数同步地址栏 + +默认 CRUD 会将过滤条件参数同步至浏览器地址栏中， + +不过，如果你了解 [数据链](../concepts/datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE) 的话，在开启同步地址栏时，地址栏中的参数数据会合并到顶层的数据链中，可能会造成一些预期中的问题，例如：会自动给某些同名的表单项设置默认值等。可以手动设置`syncLocation: false`来关闭此特性 + +## 前端一次性加载 + +如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "loadDataOnce": true, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade", + "sortable": true + } + ] +} +``` + +配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到[数据映射](../concepts/data-mapping)功能： + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "loadDataOnce": true, + "source": "${rows | filter:engine:match:keywords}", + "filter":{ + "controls": [ + { + "type": "text", + "name": "keywords", + "label": "引擎" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] +} +``` + +上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。 + +> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能 + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------------------------- | ------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- | +| type | `string` | | `type` 指定为 CRUD 渲染器 | +| mode | `string` | `"table"` | `"table" 、 "cards" 或者 "list"` | +| title | `string` | `""` | 可设置成空，当设置成空时，没有标题栏 | +| className | `string` | | 表格外层 Dom 的类名 | +| api | [API](../types/api) | | CRUD 用来获取列表数据的 api。 | +| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） | +| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api | +| source | `string` | | 数据映射接口返回某字段的值，不设置会默认把接口返回的`items`或者`rows`填充进`mode`区域 | +| filter | [Form](./form/index) | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 | +| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 | +| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 | +| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 | +| interval | `number` | `3000` | 刷新时间(最低 3000) | +| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 | +| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](../concepts/expression)来配置停止刷新的条件 | +| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 | +| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 | +| draggable | `boolean` | `false` | 是否可通过拖拽排序 | +| itemDraggableOn | `boolean` | | 用[表达式](../concepts/expression)来配置是否可拖拽排序 | +| [saveOrderApi](#saveOrderApi) | [API](../types/api) | | 保存排序的 api。 | +| [quickSaveApi](#quickSaveApi) | [API](../types/api) | | 快速编辑后用来批量保存的 API。 | +| [quickSaveItemApi](#quickSaveItemApi) | [API](../types/api) | | 快速编辑配置成及时保存时使用的 API。 | +| bulkActions | Array<[Action](./action)> | | 批量操作列表，配置后，表格可进行选中操作。 | +| defaultChecked | `boolean` | `false` | 当可批量操作时，默认是否全部勾选。 | +| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message | +| messages.fetchFailed | `string` | | 获取失败时提示 | +| messages.saveOrderFailed | `string` | | 保存顺序失败提示 | +| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 | +| messages.quickSaveFailed | `string` | | 快速保存失败提示 | +| messages.quickSaveSuccess | `string` | | 快速保存成功提示 | +| primaryField | `string` | `"id"` | 设置 ID 字段名。 | +| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 | +| pageField | `string` | `"page"` | 设置分页页码字段名。 | +| perPageField | `string` | `"perPage"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 | +| perPageAvailable | `Array` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 | +| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 | +| hideQuickSaveBtn | `boolean` | `false` | 隐藏顶部快速保存提示 | +| autoJumpToTopOnPagerChange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 | +| syncResponse2Query | `boolean` | `true` | 将返回数据同步到过滤器上。 | +| keepItemSelectionOnPageChange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 | +| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 | +| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 | +| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 | diff --git a/docs/components/date.md b/docs/components/date.md new file mode 100755 index 00000000..5a6a4222 --- /dev/null +++ b/docs/components/date.md @@ -0,0 +1,137 @@ +--- +title: Date 日期时间 +description: +type: 0 +group: ⚙ 组件 +menuName: Date +icon: +order: 39 +--- +用于展示日期 + +## 基本使用 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "date", + "value": "1591326307" + } +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "date": "1591326307" + }, + { + "id": "2", + "date": "1591321307" + }, + { + "id": "3", + "date": "1591322307" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "date", + "label": "日期", + "type": "date" + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "color": "#108cee" + }, + "controls": [ + { + "type": "static-color", + "name": "color", + "label": "颜色" + } + ] +} +``` + +## 配置展示格式 + +例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即： + +```schema:height="200" +{ + "type": "page", + "data": { + "now": 1586865590 + }, + "body": { + "type": "date", + "value": "1586865590", + "format": "YYYY年MM月DD日 HH时mm分ss秒" + } +} +``` + +## 配置数据格式 + +如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`valueformat`参数用于解析当前时间值 + +例如下面`value`值为：`"2020/4/14 19:59:50"`，查阅 moment 文档可知，需要配置数据格式为 `"YYYY/MM/DD HH:mm:ss"`，然后我们配置输出格式`format`，输出指定格式日期： + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "date", + "value": "2020/4/14 19:59:50", + "valueFormat": "YYYY/MM/DD HH:mm:ss", + "format": "YYYY年MM月DD日 HH时mm分ss秒" + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------- | ------------ | ------------------------------------------------------------------------------------ | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"date"`；在 Form 中用作静态展示，为`"static-date"` | +| className | `string` | | 外层 CSS 类名 | +| value | `string` | | 显示的颜色值 | +| name | `string` | | 在其他组件中，时，用作变量映射 | +| placeholder | `string` | `-` | 占位内容 | +| format | `string` | `YYYY-MM-DD` | 展示格式 | +| valueFormat | `string` | `X` | 数据格式，默认为时间戳 | +| fromNow | `boolean` | `false` | fromNow | +| updateFrequency | `boolean` | `false` | updateFrequency | + + + + + diff --git a/docs/components/dialog.md b/docs/components/dialog.md new file mode 100755 index 00000000..bf494445 --- /dev/null +++ b/docs/components/dialog.md @@ -0,0 +1,558 @@ +--- +title: Dialog 对话框 +description: +type: 0 +group: ⚙ 组件 +menuName: Dialog 对话框 +icon: +order: 41 +--- + +Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框以供用户操作。 + +## 基本用法 + +```schema:height="100" scope="body" +{ + "label": "点击弹框", + "type": "button", + "actionType": "dialog", + "dialog": { + "title": "弹框标题", + "body": "这是一个弹框" + } +} +``` + +## 配置尺寸 + +```schema:height="100" scope="body" +{ + "type": "button-toolbar", + "buttons": [ + { + "type": "button", + "label": "较小的弹框", + "actionType": "dialog", + "dialog": { + "size": "sm", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "标准弹框", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "较大的弹框", + "actionType": "dialog", + "dialog": { + "size": "lg", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "很大的弹框", + "actionType": "dialog", + "dialog": { + "size": "xl", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "占满屏幕的弹框", + "actionType": "dialog", + "dialog": { + "size": "full", + "title": "全屏弹框", + "body": "弹框尽可能占满，内容部分滚动。" + } + } + ] +} +``` + +## 多级弹框 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "多级弹框", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "这是个简单的弹框", + "actions": [ + { + "type": "button", + "actionType": "confirm", + "label": "确认", + "primary": true + }, + { + "type": "button", + "actionType": "dialog", + "label": "再弹一个", + "dialog": { + "title": "弹框中的弹框", + "body": "如果你想，可以无限弹下去", + "actions": [ + { + "type": "button", + "actionType": "dialog", + "label": "来吧", + "level": "info", + "dialog": { + "title": "弹框中的弹框", + "body": "如果你想，可以无限弹下去", + "actions": [ + { + "type": "button", + "actionType": "confirm", + "label": "不弹了", + "primary": true + } + ] + } + } + ] + } + } + ] + } +} +``` + +## 弹框中配置表单 + +### 基本使用 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹个表单", + "actionType": "dialog", + "dialog": { + "title": "在弹框中的表单", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "controls": [ + { + "type": "text", + "name": "username", + "required": true, + "placeholder": "请输入用户名", + "label": "用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "required": true, + "placeholder": "请输入密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] + } + } +} +``` + +### 提交表单 或 ajax 请求 + +弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹个表单", + "actionType": "dialog", + "dialog": { + "title": "在弹框中的表单", + "actions": [ + { + "label": "提交表单", + "actionType": "submit", + "primary": true, + "type": "button" + }, + { + "label": "ajax请求", + "actionType": "ajax", + "primary": true, + "type": "button", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2" + } + ], + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "controls": [ + { + "type": "text", + "name": "text", + "required": true, + "label": "用户名", + "placeholder": "请输入用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "placeholder": "请输入密码", + "required": true + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] + } + } +} +``` + +### 提交表单 或 ajax 请求 后不关闭弹框 + +默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`"close": true` 来禁止该默认特性。 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹个表单", + "actionType": "dialog", + "dialog": { + "title": "在弹框中的表单", + "actions": [ + { + "label": "提交表单后不关闭", + "actionType": "submit", + "close": false, + "primary": true, + "type": "button" + }, + { + "label": "ajax请求后不关闭", + "actionType": "ajax", + "primary": true, + "type": "button", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2" + } + ], + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "controls": [ + { + "type": "text", + "name": "text", + "required": true, + "label": "用户名", + "placeholder": "请输入用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "required": true, + "placeholder": "请输入密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] + } + } +} +``` + +## feedback 反馈弹框 + +feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作 + +### 基本使用 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "Feedback", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=2", + "tooltip": "点击我后会发送一个请求，请求回来后，弹出一个框。", + "feedback": { + "title": "操作成功", + "body": "xxx 已操作成功" + } +} +``` + +### 弹框中配置 feedback + +#### 关闭 feedback 弹框时，同时关闭上层弹框 + +当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式 + +##### 1. 不请求接口，直接关闭 + +`feedback`的`actions`中配置 `"actionType": "close"` 的按钮 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹一个框", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "controls": [ + { + "type": "text", + "name": "text", + "required": true, + "label": "用户名", + "placeholder": "请输入用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "required": true, + "placeholder": "请输入密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] + }, + "actions": [ + { + "type": "button", + "label": "提交表单 Feedback", + "actionType": "confirm", + "feedback": { + "body": "feedback弹框中，不请求接口了，直接点击按钮关闭", + "actions": [ + { + "type": "button", + "actionType": "close", + "label": "关闭" + } + ] + } + }, + { + "type": "button", + "label": "ajax请求 Feedback", + "actionType": "ajax", + "close": true, + "api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1", + "feedback": { + "body": "feedback弹框中，不请求接口了，直接点击按钮关闭", + "actions": [ + { + "type": "button", + "actionType": "close", + "label": "关闭" + } + ] + } + } + ] + } +} +``` + +##### 2. 请求接口，请求成功后，关闭所有弹框 + +需要在 feedback 的 `body` 中添加 Form 组件，并配置`"actionType": "confirm"`， + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹一个框", + "actionType": "dialog", + "dialog": { + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "controls": [ + { + "type": "text", + "name": "text", + "required": true, + "label": "用户名", + "placeholder": "请输入用户名" + }, + { + "type": "password", + "name": "password", + "label": "密码", + "required": true, + "placeholder": "请输入密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] + }, + "actions": [ + { + "type": "button", + "label": "confirm Feedback", + "actionType": "confirm", + "feedback": { + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1", + "controls": [ + { + "type": "tpl", + "tpl": "点击确认，请求接口，接口请求成功后，关闭弹框" + } + ] + }, + "actions": [ + { + "type": "button", + "actionType": "confirm", + "label": "确认", + "primary": true + } + ] + } + }, + { + "type": "button", + "label": "ajax Feedback", + "actionType": "ajax", + "close": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1", + "feedback": { + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1", + "controls": [ + { + "type": "tpl", + "tpl": "点击确认，请求接口，接口请求成功后，关闭弹框" + } + ] + }, + "actions": [ + { + "type": "button", + "actionType": "confirm", + "label": "确认", + "primary": true + } + ] + } + } + ] + } +} +``` + +> 注意上面的例子：如果你的触发`feedback`的按钮`actionType`为`ajax`时，为需要额外在按钮上配置`"close": true` + +#### 关闭 feedback 弹框时，不同时关闭上层弹框 + +改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`"skipRestOnCancel": true` + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "弹一个框", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1", + "controls": [ + { + "type": "tpl", + "tpl": "这是一个简单的弹框" + } + ] + }, + "actions": [ + { + "type": "button", + "actionType": "confirm", + "label": "Feedback", + "feedback": { + "body": "这是一个feedback弹框", + "skipRestOnCancel": true, + "actions": [ + { + "type": "button", + "actionType": "close", + "label": "关闭" + } + ] + } + } + ] + } +} +``` + +### 根据条件显示 feedback + +可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "条件feedback", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/initData?waitSeconds=1", + "feedback": { + "visibleOn": "!(this.date % 2)", + "title": "操作成功", + "body": "当前时间戳: ${date}" + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- | +| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 | +| title | [SchemaNode](../types/schemanode) | | 弹出层标题 | +| body | [SchemaNode](../types/schemanode) | | 往 Dialog 内容区加内容 | +| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` | +| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 | +| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog | +| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 | +| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 | +| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 | +| actions | Array<[Action](./action)> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` | +| data | `object` | | 支持[数据映射](../concepts/data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 | diff --git a/docs/components/divider.md b/docs/components/divider.md new file mode 100755 index 00000000..088bdda3 --- /dev/null +++ b/docs/components/divider.md @@ -0,0 +1,43 @@ +--- +title: Divider 分割线 +description: +type: 0 +group: ⚙ 组件 +menuName: Divider 分割线 +icon: +order: 42 +--- +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "divider" +} +``` + +## 不同样式 + +```schema:height="200" scope="body" +[ + { + "type": "divider" + }, + { + "type": "divider", + "lineStyle": "solid" + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | -------- | ---------- | ----------------------------------- | +| type | `string` | | `"dialog"` 指定为 Dialog 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| lineStyle | `string` | `"dashed"` | 分割线的样式，支持`dashed`和`solid` | + + + + + diff --git a/docs/components/drawer.md b/docs/components/drawer.md new file mode 100755 index 00000000..88c7c2cb --- /dev/null +++ b/docs/components/drawer.md @@ -0,0 +1,227 @@ +--- +title: Drawer 抽屉 +description: +type: 0 +group: ⚙ 组件 +menuName: Drawer 抽屉 +icon: +order: 43 +--- + +## 基本用法 + +```schema:height="100" scope="body" +{ + "label": "弹出", + "type": "button", + "actionType": "drawer", + "drawer": { + "title": "抽屉标题", + "body": "这是一个抽屉" + } +} +``` + +## 抽屉尺寸 + +```schema:height="100" scope="body" +{ + "type": "button-toolbar", + "className": "block m-t", + "buttons": [ + { + "type": "button", + "label": "极小框", + "actionType": "drawer", + "drawer": { + "position": "right", + "size": "xs", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "小框", + "actionType": "drawer", + "drawer": { + "position": "right", + "size": "sm", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "中框", + "actionType": "drawer", + "drawer": { + "position": "right", + "size": "md", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "大框", + "actionType": "drawer", + "drawer": { + "position": "right", + "size": "lg", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "超大框", + "actionType": "drawer", + "drawer": { + "size": "xl", + "position": "right", + "title": "提示", + "body": "这是个简单的弹框" + } + } + ] +} +``` + +## 指定弹出方向 + +```schema:height="100" scope="body" +{ + "type": "button-toolbar", + "className": "block m-t", + "buttons": [ + { + "type": "button", + "label": "左侧弹出", + "actionType": "drawer", + "drawer": { + "position": "left", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "右侧弹出", + "actionType": "drawer", + "drawer": { + "position": "right", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "顶部弹出", + "actionType": "drawer", + "drawer": { + "position": "top", + "title": "提示", + "body": "这是个简单的弹框" + } + }, + { + "type": "button", + "label": "底部弹出", + "actionType": "drawer", + "drawer": { + "position": "bottom", + "title": "提示", + "body": "这是个简单的弹框" + } + } + ] +} +``` + +## 可拖拽抽屉大小 + +配置`"resizable": true`，可以拖拽调整`drawer`大小 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "可拖拽调整大小", + "actionType": "drawer", + "drawer": { + "position": "right", + "resizable": true, + "title": "提示", + "body": "这是个简单的弹框" + } +} +``` + +## 不显示蒙层 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "不显示蒙层", + "actionType": "drawer", + "drawer": { + "position": "right", + "overlay": false, + "title": "提示", + "body": "这是个简单的弹框" + } +} +``` + +## 点击抽屉外自动关闭 + +配置`"closeOnOutside":true` + +### 显示蒙层 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "点击抽屉外自动关闭", + "actionType": "drawer", + "drawer": { + "position": "right", + "closeOnOutside": true, + "title": "提示", + "body": "这是个简单的弹框" + } +} +``` + +### 不显示蒙层 + +```schema:height="100" scope="body" +{ + "type": "button", + "label": "点击抽屉外自动关闭", + "actionType": "drawer", + "drawer": { + "position": "right", + "overlay": false, + "closeOnOutside": true, + "title": "提示", + "body": "这是个简单的弹框" + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | --------------------------------- | ------------------ | ----------------------------------------------------------------------------------------- | +| type | `string` | | `"drawer"` 指定为 Drawer 渲染器 | +| title | [SchemaNode](../types/schemanode) | | 弹出层标题 | +| body | [SchemaNode](../types/schemanode) | | 往 Drawer 内容区加内容 | +| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg` | +| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 | +| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer | +| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer | +| overlay | `boolean` | `true` | 是否显示蒙层 | +| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 | +| actions | Array<[Action](./action)> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 | +| data | `object` | | 支持 [数据映射](../concepts/data-mapping)，如果不设定将默认将触发按钮的上下文中继承数据。 | diff --git a/docs/components/dropdown-button.md b/docs/components/dropdown-button.md new file mode 100755 index 00000000..6ebe0b0c --- /dev/null +++ b/docs/components/dropdown-button.md @@ -0,0 +1,56 @@ +--- +title: DropDownButton +description: +type: 0 +group: ⚙ 组件 +menuName: DropDownButton +icon: +order: 44 +--- +## 基本用法 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "dropdown-button", + "label": "下拉菜单", + "buttons": [ + { + "type": "button", + "label": "按钮1" + }, + { + "type": "button", + "label": "按钮2" + }, + { + "type": "button", + "label": "按钮3" + } + ] + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------------- | ----------------- | ----------------------------------------- | +| type | `string` | `dropdown-button` | 类型 | +| label | `string` | | 按钮文本 | +| className | `string` | | 外层 CSS 类名 | +| block | `boolean` | | 块状样式 | +| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` | +| align | `string` | | 位置，可选`'left'`或`'right'` | +| buttons | `Array` | | 配置下拉按钮 | +| caretIcon | `string` | | caretIcon | +| iconOnly | `boolean` | | 只显示icon | +| defaultIsOpened | `boolean` | | 默认是否打开 | +| closeOnOutside | `boolean` | | 点击外侧区域是否收起 | + + + + + + diff --git a/docs/components/each.md b/docs/components/each.md new file mode 100755 index 00000000..a507fb24 --- /dev/null +++ b/docs/components/each.md @@ -0,0 +1,31 @@ +--- +title: Each 循环渲染器 +description: +type: 0 +group: ⚙ 组件 +menuName: Each 循环渲染器 +icon: +order: 45 +--- + +## 基本用法 + +```schema:height="160" scope="body" +{ + "type": "each", + "value": ["A", "B", "C"], + "items": { + "type": "tpl", + "tpl": "<%= data.item %> " + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------ | -------- | -------- | ----------------------------------------------------------- | +| type | `string` | `"each"` | 指定为 Each 组件 | +| value | `array` | `[]` | 用于循环的值 | +| name | `string` | | 获取数据域中变量，支持 [数据映射](../concepts/data-mapping) | +| items | `object` | | 使用`value`中的数据，循环输出渲染器。 | diff --git a/docs/components/form/Radios.md b/docs/components/form/Radios.md new file mode 100755 index 00000000..ce7954fb --- /dev/null +++ b/docs/components/form/Radios.md @@ -0,0 +1,55 @@ +--- +title: Radios 单选框 +description: +type: 0 +group: null +menuName: Radios 单选框 +icon: +order: 36 +--- + +## 基本用法 + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "name": "radios", + "type": "radios", + "label": "radios", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | diff --git a/docs/components/form/array.md b/docs/components/form/array.md new file mode 100755 index 00000000..8f229835 --- /dev/null +++ b/docs/components/form/array.md @@ -0,0 +1,44 @@ +--- +title: Array 数组输入框 +description: +type: 0 +group: null +menuName: Array 数组输入框 +icon: +order: 3 +--- + +[普通表单项](./formitem)，其实就是 [Combo](./combo) 的一个 flat 用法。 + +## 基本用法 + +```schema:height="200" scope="form" +[ + { + "name": "array", + "label": "颜色集合", + "type": "array", + "value": ["red"], + "inline": true, + "items": { + "type": "color" + } + } +] +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | --------------------------------- | --------- | ------------------------------------------------------------------------ | +| type | `string` | `"array"` | 指明为`array`组件 | +| items | `string`或 [API](../../types/api) | | 配置单项表单类型 | +| addable | `boolean` | | 是否可新增。 | +| removable | `boolean` | | 是否可删除 | +| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 | +| draggableTip | `string` | | 可拖拽的提示文字，默认为：`"可通过拖动每行中的【交换】按钮进行顺序调整"` | +| addButtonText | `string` | `"新增"` | 新增按钮文字 | +| minLength | `number` | | 限制最小长度 | +| maxLength | `number` | | 限制最大长度 | diff --git a/docs/components/form/button-group.md b/docs/components/form/button-group.md new file mode 100755 index 00000000..4f1b9ba4 --- /dev/null +++ b/docs/components/form/button-group.md @@ -0,0 +1,97 @@ +--- +title: Button-Group 按钮集合 +description: +type: 0 +group: null +menuName: Button-Group +icon: +order: 6 +--- + +## 基本用法 + +可以用作按钮组，进行按钮的合并展示。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "type": "button-group", + "buttons": [ + { + "type": "button", + "label": "Button", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + }, + + { + "type": "submit", + "label": "提交" + }, + + { + "type": "reset", + "label": "重置" + } + ] + } + ] +} +``` + +## 作为选择器表单项 + +当不配置 `buttons` 属性时，`button-group`还可以作为 [选择类表单项](./options) 使用。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "debug": true, + "controls": [ + { + "type": "button-group", + "label": "选项", + "name": "type", + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + } + ] + } + ] +} +``` + +更多属性查看 [选择类表单项文档](./options) 。 + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | diff --git a/docs/components/form/button-toolbar.md b/docs/components/form/button-toolbar.md new file mode 100755 index 00000000..8e54272b --- /dev/null +++ b/docs/components/form/button-toolbar.md @@ -0,0 +1,59 @@ +--- +title: Button-Toolbar 按钮工具栏 +description: +type: 0 +group: null +menuName: Button-Toolbar +icon: +order: 5 +--- + +默认按钮独立配置的时候，是独占一行的，如果想让多个按钮在一起放置，可以使用 `button-toolbar` 组件 + +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "name": "test", + "label": "Text" + }, + + { + "type": "button-toolbar", + "label": "按钮组", + "buttons": [ + { + "type": "button", + "label": "按钮", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + }, + + { + "type": "submit", + "label": "提交" + }, + + { + "type": "reset", + "label": "重置" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------- | --------------------------- | ------------------ | ------------------------- | +| type | `string` | `"button-toolbar"` | 指定为 ButtonToolbar 组件 | +| buttons | Array<[行为按钮](./action)> | | 按钮组 | diff --git a/docs/components/form/button.md b/docs/components/form/button.md new file mode 100755 index 00000000..6be66574 --- /dev/null +++ b/docs/components/form/button.md @@ -0,0 +1,84 @@ +--- +title: Button 按钮 +description: +type: 0 +group: null +menuName: Button +icon: +order: 4 +--- + +`form`中除了支持 [行为按钮](./action)以外，还支持一些特定的按钮。 + +## 基本用法 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "type": "action", + "actionType": "dialog", + "label": "按钮", + "dialog": { + "title": "弹框标题", + "body": "这是一个弹框" + } + } + ] +} +``` + +## 提交表单 + +请配置`"actionType": "submit"`或`"type": "submit"`按钮，可以触发表单提交行为， + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "type": "submit", + "label": "提交" + } + ] +} +``` + +## 重置表单 + +请配置`"actionType": "reset"`或`"type": "reset"`按钮，可以触发表单提交行为。 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "type": "reset", + "label": "重置" + } + ] +} +``` + +## 属性表 + +见 [Action 行为按钮](../action) diff --git a/docs/components/form/chain-select.md b/docs/components/form/chain-select.md new file mode 100755 index 00000000..b342b5b0 --- /dev/null +++ b/docs/components/form/chain-select.md @@ -0,0 +1,58 @@ +--- +title: Chain-Select 链式下拉框 +description: +type: 0 +group: null +menuName: Chain-Select +icon: +order: 7 +--- + +## 基本用法 + +无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉下去。 + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "select3", + "type": "chained-select", + "label": "级联下拉", + "source": "https://houtai.baidu.com/api/mock2/options/chainedOptions?waitSeconds=1&parentId=$parentId&level=$level&maxLevel=4", + "value": "a,b" + } + ] +} +``` + +> `source`接口中配置的参数`waitSeconds=1`和`maxLevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数 + +## 暴露参数 + +为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数： + +- `value`: 选中的表单项值； +- `level`: 当前拉取数据时的层级, +- `parentId`: 上一级选项的值，数据格式基于配置的`joinValues`和`extractValue`属性 +- `parent`: 上一级选项的完整的数据格式 + +## 属性表 + +除了支持 [普通表单项属性表](./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) | +| autoComplete | `string`或 [API](../../types/api) | | [自动选中](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | +| delimiter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | + +@todo 可能还支持别的 diff --git a/docs/components/form/checkbox.md b/docs/components/form/checkbox.md new file mode 100755 index 00000000..c1e62541 --- /dev/null +++ b/docs/components/form/checkbox.md @@ -0,0 +1,79 @@ +--- +title: Checkbox 勾选框 +description: +type: 0 +group: null +menuName: Checkbox +icon: +order: 8 +--- +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "name": "checkbox", + "type": "checkbox", + "label": "勾选框", + "option": "选项说明" + } + ] +} +``` + +## 配置真假值 + +默认情况： +- 勾选框勾选时，表单项值为：true +- 勾选框取消勾选时，表单项值为：false + +```schema:height="300" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "name": "checkbox", + "type": "checkbox", + "label": "勾选框" + } + ] +} +``` + +如果你想调整这个值，可以配置`trueValue`和`falseValue` + +```schema:height="300" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "name": "checkbox", + "type": "checkbox", + "label": "勾选框", + "trueValue": 1, + "falseValue": 0 + } + ] +} +``` + +勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 | +| ---------- | -------- | --------- | ----------------------------------------------------------- | +| option | `string` | | 选项说明 | +| trueValue | `any` | `true` | 标识真值 | +| falseValue | `any` | `"false"` | 标识假值 | + + + + + diff --git a/docs/components/form/checkboxes.md b/docs/components/form/checkboxes.md new file mode 100755 index 00000000..066eb9e6 --- /dev/null +++ b/docs/components/form/checkboxes.md @@ -0,0 +1,132 @@ +--- +title: Checkboxes 复选框 +description: +type: 0 +group: null +menuName: Checkboxes +icon: +order: 9 +--- + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "checkboxes", + "type": "checkboxes", + "label": "复选框", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + } + ] +} +``` + +## 展示多行 + +可以配置`columnsCount`属性调整展示列的个数 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "checkboxes1", + "type": "checkboxes", + "label": "默认的复选框", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + }, + { + "type": "divider" + }, + { + "name": "checkboxes2", + "type": "checkboxes", + "label": "显示两列的复选框", + "columnsCount": 2, + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 | +| checkAll | `boolean` | `false` | 是否支持全选 | +| defaultCheckAll | `boolean` | `false` | 默认是否全选 | +| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | +| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) | +| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) | +| addApi | [API](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) | +| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) | +| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) | +| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) | +| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) | +| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) | diff --git a/docs/components/form/city.md b/docs/components/form/city.md new file mode 100755 index 00000000..fda8b4df --- /dev/null +++ b/docs/components/form/city.md @@ -0,0 +1,85 @@ +--- +title: City 城市选择器 +description: +type: 0 +group: null +menuName: City +icon: +order: 10 +--- +城市选择器，可用于让用户输入城市。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "city", + "type": "city", + "label": "城市" + } + ] +} +``` + +观察数据域中表单项的值，存储的是位置邮编。 + +## 配置选择级别 + +可以通过设置 `allowDistrict` 和 `allowCity` 设置用户选择级别，例如只选择省份： + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "city", + "type": "city", + "label": "城市", + "allowDistrict": false, + "allowCity": false + } + ] +} +``` + +## 获取更多选项信息 + +表单项值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "city", + "type": "city", + "label": "城市", + "extractValue": false + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------- | --------- | ------ | --------------------------------------------------------------------------------------------------------------------- | +| allowCity | `boolean` | `true` | 允许选择城市 | +| allowDistrict | `boolean` | `true` | 允许选择区域 | +| extractValue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 | + + + + + diff --git a/docs/components/form/color.md b/docs/components/form/color.md new file mode 100755 index 00000000..8e0ac5ba --- /dev/null +++ b/docs/components/form/color.md @@ -0,0 +1,47 @@ +--- +title: Color 颜色选择器 +description: +type: 0 +group: null +menuName: Color +icon: +order: 11 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "color", + "name": "color", + "label": "颜色" + } + ] +} +``` + +## 选择器预设颜色值 + +颜色选择器底部预设有会写可选的颜色值，默认为：`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']` + +你可以配置`presetColors`数组进行自定义。 + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | +| format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 | +| presetColors | `Array` | [见选择器预设颜色值](./color#%E9%80%89%E6%8B%A9%E5%99%A8%E9%A2%84%E8%AE%BE%E9%A2%9C%E8%89%B2%E5%80%BC) | 选择器底部的默认颜色，数组内为空则不显示默认颜色 | +| allowCustomColor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围 | +| clearable | `boolean` | `"label"` | 是否显示清除按钮 | +| resetValue | `string` | `""` | 清除后，表单项值调整成该值 | + + + + + diff --git a/docs/components/form/combo.md b/docs/components/form/combo.md new file mode 100755 index 00000000..c8cf30d6 --- /dev/null +++ b/docs/components/form/combo.md @@ -0,0 +1,741 @@ +--- +title: Combo 组合 +description: +type: 0 +group: null +menuName: Combo +icon: +order: 12 +--- + +组合模式，支持自由组合多个表单项。当设置成单选时数据格式为对象，当设置成多选时数据格式为数组，数组成员是对象（flat 模式可以直接是某个表单单项的数值）。 + +## 基本使用 + +配置`controls`属性，组合多个表单项 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo", + "label": "Combo", + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + } + ] +} +``` + +## 多行展示模式 + +默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`"multiLine": true` + +```schema:height="450" scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo1", + "label": "Combo 单行展示", + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + }, + { + "type": "divider" + }, + { + "type": "combo", + "name": "combo2", + "label": "Combo 多行展示", + "multiLine": true, + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + } + ] +} +``` + +## 多选模式 + +默认，combo 为单选模式，可以配置`"multiple": true`实现多选模式 + +```schema:height="400" scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo1", + "label": "Combo 单选展示", + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + }, + { + "type": "divider" + }, + { + "type": "combo", + "name": "combo2", + "label": "Combo 多选展示", + "multiple": true, + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + } + ] +} +``` + +## 限制个数 + +多选模式下，可以配置`minLength`和`maxLength`配置该 Combo 可添加的条数 + +```schema:height="400" scope="body" +{ + "type": "form", + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo1", + "label": "最少添加1条", + "multiple": true, + "minLength": 1, + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + }, + { + "type": "combo", + "name": "combo2", + "label": "最多添加3条", + "multiple": true, + "maxLength": 3, + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + } + ] +} +``` + +## 值格式 + +观察下例中表单数据域值的变化，可以发现： + +- 单选模式时，**数据格式为对象**； +- 多选模式时，**数据格式为数组，数组成员是对象** + +```schema:height="600" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo1", + "label": "Combo 单选展示", + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + }, + { + "type": "divider" + }, + { + "type": "combo", + "name": "combo2", + "label": "Combo 多选展示", + "multiple": true, + "controls": [ + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "name": "select", + "label": "选项", + "type": "select", + "options": ["a", "b", "c"] + } + ] + } + ] +} +``` + +### 打平值 + +默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置`"flat": true`，将值进行打平处理。 + +```schema:height="600" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo1", + "label": "默认模式", + "multiple": true, + "controls": [ + { + "name": "text", + "type": "text" + } + ] + }, + { + "type": "divider" + }, + { + "type": "combo", + "name": "combo2", + "label": "打平模式", + "multiple": true, + "flat": true, + "controls": [ + { + "name": "text", + "type": "text" + } + ] + } + ] +} +``` + +查看上例表单数据域，可以看到打平后数据格式如下： + +```json +{ + "combo2": ["aaa", "bbb"] +} +``` + +## 唯一验证 + +可以在配置的`controls`项上，配置`"unique": true`，指定当前表单项不可重复 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo666", + "label": "唯一", + "multiple": true, + "controls": [ + { + "name": "text", + "type": "text", + "placeholder": "文本", + "unique": true + }, + { + "name": "select", + "type": "select", + "options": [ + "a", + "b", + "c" + ], + "unique": true + } + ] + } + ] +} +``` + +上例中，`text`和`select`都配置了`"unique": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`"当前值不唯一"`，而`select`选择框也不可选择重复的选项 + +## 拖拽排序 + +多选模式下，可以配置`"draggable": true`实现拖拽调整排序 + +```schema:height="600" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo", + "label": "拖拽排序", + "multiple": true, + "value": [ + { + "text": "1", + "select": "a" + }, + { + "text": "2", + "select": "b" + } + ], + "draggable": true, + "controls": [ + { + "name": "text", + "type": "text" + }, + { + "name": "select", + "type": "select", + "options": [ + "a", + "b", + "c" + ] + } + ] + } + ] +} +``` + +## 条件分支 + +默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。 + +如下面的栗子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。 + +```schema:height="450" scope="form-item" +{ + "type": "combo", + "name": "combo-conditions2", + "label": "多选", + "value": [ + { + "type": "text" + } + ], + "multiLine": true, + "multiple": true, + "typeSwitchable": false, + "conditions": [ + { + "label": "文本", + "test": "this.type === \"text\"", + "scaffold": { + "type": "text", + "label": "文本", + "name": "" + }, + "controls": [ + { + "label": "名称", + "name": "label", + "type": "text" + }, + { + "label": "字段名", + "name": "name", + "type": "text" + } + ] + }, + { + "label": "数字", + "test": "this.type === \"number\"", + "scaffold": { + "type": "number", + "label": "数字", + "name": "" + }, + "controls": [ + { + "label": "名称", + "name": "label", + "type": "text" + }, + { + "label": "字段名", + "name": "name", + "type": "text" + }, + { + "label": "最小值", + "name": "min", + "type": "number" + }, + { + "label": "最大值", + "name": "max", + "type": "number" + }, + { + "label": "步长", + "name": "step", + "type": "number" + } + ] + } + ] +} +``` + +- `conditions` Array 数组，每个成员是一种类型 +- `conditions[x].label` 类型名称 +- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？ +- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。 +- `conditions[x].controls` 该类型的表单设置。 +- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。 + +## Tabs 模式 + +默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。 + +```schema:height="350" scope="form-item" +{ + "type": "combo", + "name": "combo101", + "label": "组合多条多行", + "multiple": true, + "multiLine": true, + "value": [ + {} + ], + "tabsMode": true, + "tabsStyle": "card", + "maxLength": 3, + "controls": [ + { + "name": "a", + "label": "文本", + "type": "text", + "placeholder": "文本", + "value": "", + "size": "full" + }, + { + "name": "b", + "label": "选项", + "type": "select", + "options": [ + "a", + "b", + "c" + ], + "size": "full" + } + ] +} +``` + +- `tabsMode` boolean 用来开启此模式 +- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`. +- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}` + +注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。 + +## 获取父级数据 + +默认情况下，Combo 内表达项无法获取父级数据域的数据，如下，我们添加 Combo 表单项时，尽管 Combo 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "父级文本框", + "name": "super_text", + "value": "123" + }, + { + "type": "combo", + "name": "combo1", + "label": "不可获取父级数据", + "multiple": true, + "controls": [ + { + "name": "super_text", + "type": "text" + } + ] + } + ] +} +``` + +可以配置`"canAccessSuperData": true`开启此特性，如下，配置了该配置项后，添加 Combo 的`text`表单项会自动映射父级数据域的同名变量 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "父级文本框", + "name": "super_text", + "value": "123" + }, + { + "type": "combo", + "name": "combo2", + "label": "可获取父级数据", + "multiple": true, + "canAccessSuperData": true, + "controls": [ + { + "name": "super_text", + "type": "text" + } + ] + } + ] +} +``` + +## 同步更新内部表单项 + +配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的 + +如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "父级文本框", + "name": "super_text", + "value": "123" + }, + { + "type": "combo", + "name": "combo2", + "label": "可获取父级数据", + "multiple": true, + "canAccessSuperData": true, + "controls": [ + { + "name": "super_text", + "type": "text" + } + ] + } + ] +} +``` + +如果想实现内部同步更新，需要如下配置： + +- 配置`"strictMode": false` +- 配置`syncFields`字符串数组，数组项是需要同步的变量名 + +以上面为例，我们在 combo 上配置`"strictMode": false`和`"syncFields": ["super_text"]`，即可实现同步 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "父级文本框", + "name": "super_text", + "value": "123" + }, + { + "type": "combo", + "name": "combo2", + "label": "可获取父级数据", + "multiple": true, + "canAccessSuperData": true, + "strictMode": false, + "syncFields": ["super_text"], + "controls": [ + { + "name": "super_text", + "type": "text" + } + ] + } + ] +} +``` + +## 设置序号 + +默认 Combo 数据域中，每一项会有一个隐藏变量`index`，可以利用 Tpl 组件，显示当前项序号 + +```schema:height="600" scope="body" +{ + "type": "form", + "debug": true, + "mode": "horizontal", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "combo", + "name": "combo", + "label": "显示序号", + "multiple": true, + "controls": [ + { + "type": "tpl", + "tpl": "<%= data.index + 1%>", + "className": "p-t-xs", + "mode": "inline" + }, + { + "name": "text", + "type": "text" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------------- | --------------------------- | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| formClassName | `string` | | 单组表单项的类名 | +| controls | Array<[表单项](./formitem)> | | 组合展示的表单项 | +| controls[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 | +| controls[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 | +| multiple | `boolean` | `false` | 是否多选 | +| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 | +| minLength | `number` | | 最少添加的条数 | +| maxLength | `number` | | 最多添加的条数 | +| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 controls 的 length 为 1 且 multiple 为 true 的时候才有效。 | +| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 | +| delimeter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 | +| addable | `boolean` | `false` | 是否可新增 | +| removable | `boolean` | `false` | 是否可删除 | +| deleteApi | [API](../../types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 | +| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 | +| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 | +| draggableTip | `string` | `"可通过拖动每行中的【交换】按钮进行顺序调整"` | 可拖拽的提示文字 | +| addButtonText | `string` | `"新增"` | 新增按钮文字 | +| scaffold | `object` | `{}` | 单组表单项初始值 | +| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 | +| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`controls`为符合该条件后渲染的`schema` | +| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 | +| noBorder | `boolean` | `false` | 单组表单项是否显示边框 | +| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 | +| syncFields | `Array` | `true` | 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` | diff --git a/docs/components/form/date-range.md b/docs/components/form/date-range.md new file mode 100755 index 00000000..9b32dbd8 --- /dev/null +++ b/docs/components/form/date-range.md @@ -0,0 +1,45 @@ +--- +title: Date-Range 日期范围 +description: +type: 0 +group: null +menuName: Date-Range +icon: +order: 15 +--- +## 基本用法 + +```schema:height="500" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date-range", + "name": "select", + "label": "日期范围" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------- | ------------------ | ---------------------------------------------------------------------------- | +| format | `string` | `X` | [日期选择器值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) | +| inputFormat | `string` | `YYYY-DD-MM` | [日期选择器显示格式](./date#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | +| placeholder | `string` | `"请选择日期范围"` | 占位文本 | +| shortcuts | `string` | | [日期快捷键](./date#%E5%BF%AB%E6%8D%B7%E9%94%AE) | +| minDate | `string` | | 限制最小日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) | +| maxDate | `string` | | 限制最大日期，用法同 [限制范围](./date#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) | +| utc | `boolean` | `false` | [保存UTC值](./date#utc) | +| clearable | `boolean` | `true` | 是否可清除 | + + + + + + diff --git a/docs/components/form/date.md b/docs/components/form/date.md new file mode 100755 index 00000000..19ebc8c9 --- /dev/null +++ b/docs/components/form/date.md @@ -0,0 +1,313 @@ +--- +title: Date 日期 +description: +type: 0 +group: null +menuName: Date +icon: +order: 13 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期" + } + ] +} +``` + +## 显示格式 + +选中任意日期，可以看到默认显示日期的格式是像`2020-04-14`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。 + +例如你想显示`2020年04月14日`这样的格式，查找 moment 文档可知配置格式应为 `YYYY年MM月DD日`，即： + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期", + "inputFormat": "YYYY年MM月DD日" + } + ] +} +``` + +选中任意日期，观察显示格式 + +## 值格式 + +选中任意日期，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期" + } + ] +} +``` + +如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。 + +例如你调整值为`2020-04-14`这样的格式，查找 moment 文档可知配置格式应为 `YYYY-MM-DD`，即： + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期", + "format": "YYYY-MM-DD" + } + ] +} +``` + +选中任意日期，观察数据域中表单项值的变化 + +## 默认值 + +可以设置`value`属性，设置日期选择器的默认值 + +### 基本配置 + +配置符合当前 [值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) 的默认值。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期", + "value": "1591862818" + } + ] +} +``` + +### 相对值 + +`value` 还支持类似像`"+1days"`这样的相对值，更加便捷的配置默认值 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期", + "value": "+1days" + } + ] +} +``` + +上例中配置了`"value": "+1days"`，默认就会选中明天。 + +支持的相对值关键字有： + +- `today`: 当前日期 +- `day`或`days`: 天 +- `week`或`weeks`: 日 +- `month`或`months`: 月 +- `year`或`years`: 年 + +## 限制范围 + +可以通过配置`maxDate`和`minDate`显示可选范围 + +### 固定时间值 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "start", + "label": "开始时间", + "minDate": "1591862818", + "description": "限制可选最小日期是 2020-06-11 16:06:58" + }, + { + "type": "date", + "name": "end", + "label": "结束时间", + "maxDate": "1591862818", + "description": "限制可选最大日期是 2020-06-11 16:06:58" + } + ] +} +``` + +### 支持相对值 + +范围限制也支持设置 [相对值](./date#%E7%9B%B8%E5%AF%B9%E5%80%BC)。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "start", + "label": "开始时间", + "minDate": "-1days", + "description": "限制可选最小日期是昨天" + } + ] +} +``` + +### 支持模板 + +也支持通过[模板](./template)，设置自定义值。 + +来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "start", + "label": "开始日期", + "maxDate": "$end" + }, + { + "type": "date", + "name": "end", + "label": "结束日期", + "minDate": "$start" + } + ] +} +``` + +## 快捷键 + +你也可以配置`shortcuts`属性支持快捷选择日期 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "日期", + "shortcuts": ["yesterday" ,"today", "tomorrow"] + } + ] +} +``` + +上例中我们配置了`"shortcuts": ["yesterday" ,"today", "tomorrow"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天` + +支持的快捷键有 + +- `today`: 今天 +- `yesterday`: 昨天 +- `thisweek`: 本周一 +- `thismonth`: 本月初 +- `prevmonth`: 上个月初 +- `prevquarter`: 上个季节初 +- `thisquarter`: 本季度初 +- `tomorrow`: 明天 +- `endofthisweek`: 本周日 +- `endofthismonth`:本月底 +- `{n}daysago` : n天前，例如：`1daysago`，下面用法相同 +- `{n}dayslater`: n天后 +- `{n}weeksago`: n周前 +- `{n}weekslater`: n周后 +- `{n}monthsago`: n月前 +- `{n}monthslater`: n月后 +- `{n}quartersago`: n季度前 +- `{n}quarterslater`: n季度后 + + +## UTC + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "date", + "name": "date", + "label": "普通日期", + "format": "YYYY-MM-DD" + }, + { + "type": "date", + "name": "date-utc", + "label": "UTC日期", + "utc": true, + "format": "YYYY-MM-DD" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- | +| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) | +| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| inputFormat | `string` | `YYYY-DD-MM` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 | +| placeholder | `string` | `"请选择日期"` | 占位文本 | +| shortcuts | `string` | | 日期快捷键 | +| minDate | `string` | | 限制最小日期 | +| maxDate | `string` | | 限制最大日期 | +| utc | `boolean` | `false` | 保存utc值 | +| clearable | `boolean` | `true` | 是否可清除 | +| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) | + + + + + diff --git a/docs/components/form/datetime-range.md b/docs/components/form/datetime-range.md new file mode 100755 index 00000000..12d6b9c1 --- /dev/null +++ b/docs/components/form/datetime-range.md @@ -0,0 +1,45 @@ +--- +title: Datetime-Range 日期时间范围 +description: +type: 0 +group: null +menuName: Datetime-Range +icon: +order: 16 +--- +## 基本用法 + +```schema:height="500" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime-range", + "name": "select", + "label": "日期时间范围" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | --------- | ------------------ | ------------------------------------------------------------------------------------ | +| format | `string` | `X` | [日期时间选择器值格式](./datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) | +| inputFormat | `string` | `YYYY-DD-MM` | [日期时间选择器显示格式](./datetime#%E6%98%BE%E7%A4%BA%E6%A0%BC%E5%BC%8F) | +| placeholder | `string` | `"请选择日期范围"` | 占位文本 | +| shortcuts | `string` | | [日期时间快捷键](./datetime#%E5%BF%AB%E6%8D%B7%E9%94%AE) | +| minDate | `string` | | 限制最小日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) | +| maxDate | `string` | | 限制最大日期时间，用法同 [限制范围](./datetime#%E9%99%90%E5%88%B6%E8%8C%83%E5%9B%B4) | +| utc | `boolean` | `false` | [保存UTC值](./datetime#utc) | +| clearable | `boolean` | `true` | 是否可清除 | + + + + + + diff --git a/docs/components/form/datetime.md b/docs/components/form/datetime.md new file mode 100755 index 00000000..d6edf445 --- /dev/null +++ b/docs/components/form/datetime.md @@ -0,0 +1,296 @@ +--- +title: Datetime 日期时间 +description: +type: 0 +group: null +menuName: Datetime +icon: +order: 14 +--- +## 基本用法 + +```schema:height="500" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期时间" + } + ] +} +``` + +## 显示格式 + +选中任意日期时间，可以看到默认显示日期的格式是像`2020-04-14 12:20:10`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。 + +例如你想显示`2020年04月14日 12时20分10秒`这样的格式，查找 moment 文档可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即： + +```schema:height="500" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期时间", + "inputFormat": "YYYY年MM月DD日 HH时mm分ss秒" + } + ] +} +``` + +选中任意日期时间，观察显示格式 + +## 值格式 + +选中任意日期时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期时间" + } + ] +} +``` + +如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。 + +例如你调整值为`2020-04-14 12:20:10`这样的格式，查找 moment 文档可知配置格式应为 `YYYY-MM-DD HH:mm:ss`，即： + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期时间", + "format": "YYYY-MM-DD HH:mm:ss" + } + ] +} +``` + +选中任意日期时间，观察数据域中表单项值的变化 + +## 默认值 + +可以设置`value`属性，设置日期选择器的默认值 + +### 基本配置 + +配置符合当前 [值格式](./datetime#%E5%80%BC%E6%A0%BC%E5%BC%8F) 的默认值。 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期时间", + "value": "1591862818" + } + ] +} +``` + +### 相对值 + +`value` 还支持类似像`"+1hours"`这样的相对值，更加便捷的配置默认值 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期", + "value": "+1hours" + } + ] +} +``` + +上例中配置了`"value": "+1hours"`，默认就会选中一小时后的时间。 + +支持的相对值关键字除了 [Date](./date#%E7%9B%B8%E5%AF%B9%E5%80%BC) 中的以外，还支持： + +- `now`: 当前时间 +- `minute`或`minutes`或`min`或`mins`: 分钟 +- `hour`或`hours`: 小时 + +## 限制范围 + +可以通过配置`maxDate`和`minDate`显示可选范围 + +### 固定时间值 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "start", + "label": "开始时间", + "minDate": "1591862818", + "description": "限制可选最小日期是 2020-06-11 16:06:58" + }, + { + "type": "datetime", + "name": "end", + "label": "结束时间", + "maxDate": "1591862818", + "description": "限制可选最大日期是 2020-06-11 16:06:58" + } + ] +} +``` + +### 支持相对值 + +范围限制也支持设置 [相对值](./date#%E7%9B%B8%E5%AF%B9%E5%80%BC)。 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "start", + "label": "开始时间", + "minDate": "-1days", + "description": "限制可选最小日期是昨天" + } + ] +} +``` + +### 支持模板 + +也支持通过[模板](./template)，设置自定义值。 + +来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`，。 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "start", + "label": "开始时间", + "maxDate": "$end" + }, + { + "type": "datetime", + "name": "end", + "label": "结束时间", + "minDate": "$start" + } + ] +} +``` + +## 快捷键 + +你也可以配置`shortcuts`属性支持快捷选择日期 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "日期", + "shortcuts": ["yesterday" ,"today", "tomorrow"] + } + ] +} +``` + +上例中我们配置了`"shortcuts": ["yesterday" ,"today", "tomorrow"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天` + +除了支持 的快捷键有 + +支持的快捷键除了 [Date](./date#%E5%BF%AB%E6%8D%B7%E9%94%AE) 中的以外，还支持： + +- `now`: 现在 +- `{n}hoursago` : n小时前，例如：`1daysago`，下面用法相同 +- `{n}hourslater` : n小时前，例如：`1daysago`，下面用法相同 + +## UTC + +```schema:height="600" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "datetime", + "name": "datetime", + "label": "普通日期时间", + "format": "YYYY-MM-DD" + }, + { + "type": "datetime", + "name": "datetime-utc", + "label": "UTC日期时间", + "utc": true, + "format": "YYYY-MM-DD" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------- | +| value | `string` | | [默认值](./datetime#%E9%BB%98%E8%AE%A4%E5%80%BC) | +| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| placeholder | `string` | `"请选择日期以及时间"` | 占位文本 | +| shortcuts | `string` | | 日期时间快捷键 | +| minDate | `string` | | 限制最大日期时间 | +| maxDate | `string` | | 限制最大日期时间 | +| utc | `boolean` | `false` | 保存utc值 | +| clearable | `boolean` | `true` | 是否可清除 | +| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) | + + + + + diff --git a/docs/components/form/diff-editor.md b/docs/components/form/diff-editor.md new file mode 100755 index 00000000..38d15776 --- /dev/null +++ b/docs/components/form/diff-editor.md @@ -0,0 +1,85 @@ +--- +title: DiffEditor 对比编辑器 +description: +type: 0 +group: null +menuName: DiffEditor 对比编辑器 +icon: +order: 17 +--- + +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "diff-editor", + "name": "diff", + "label": "Diff-Editor", + "diffValue": "hello world", + "value": "hello" + } + ] +} +``` + +## 禁用编辑器 + +左侧编辑器始终不可编辑，右侧编辑器可以通过设置`disabled`或`disabledOn`，控制是否禁用 + +```schema:height="500" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "diff-editor", + "name": "diff", + "label": "Diff-Editor", + "diffValue": "hello world", + "value": "hello", + "disabledOn": "data.isDisabled" + }, + { + "type": "switch", + "name": "isDisabled", + "label": "是否禁用" + } + ] +} +``` + +## diff 数据域中的两个变量 + +如下例，左侧编辑器中的值，通过`"diffValue": "${value1}"`获取，右侧编辑器的值，通过设置`"name": "value2"`，自动映射数据域中`value2`的值 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "data": { + "value1": "hello world", + "value2": "hello wrold" + }, + "controls": [ + { + "type": "diff-editor", + "name": "value2", + "label": "Diff-Editor", + "diffValue": "${value1}" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- | +| language | `string` | `javascript` | 编辑器高亮的语言，可选 [支持的语言](./editor#%E6%94%AF%E6%8C%81%E7%9A%84%E8%AF%AD%E8%A8%80) | +| diffValue | [Tpl](../tpl) | | 左侧值 | diff --git a/docs/components/form/editor.md b/docs/components/form/editor.md new file mode 100755 index 00000000..4084ef90 --- /dev/null +++ b/docs/components/form/editor.md @@ -0,0 +1,74 @@ +--- +title: Editor 编辑器 +description: +type: 0 +group: null +menuName: Editor +icon: +order: 19 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "editor", + "name": "editor", + "label": "编辑器" + } + ] +} +``` + +## 支持的语言 + +可以设置`language`配置高亮的语言，支持的语言有： + +`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml` + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "editor", + "name": "editor", + "label": "JSON编辑器", + "language": "json" + } + ] +} +``` + +当然你也可以使用`xxx-editor`这种形式，例如`"type": "json-editor"` + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "json-editor", + "name": "editor", + "label": "JSON编辑器" + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------- | -------- | ------------ | ---------------- | +| language | `string` | `javascript` | 编辑器高亮的语言 | + + + + + diff --git a/docs/components/form/fieldset.md b/docs/components/form/fieldset.md new file mode 100755 index 00000000..7d82f163 --- /dev/null +++ b/docs/components/form/fieldset.md @@ -0,0 +1,157 @@ +--- +title: FieldSet 表单项集合 +description: +type: 0 +group: null +menuName: FieldSet +icon: +order: 20 +--- + +FieldSet 是用于分组展示表单项的一种容器型组件。 + +## 基本用法 + +可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "fieldSet", + "title": "基本配置", + "controls": [ + { + "name": "text1", + "type": "text", + "label": "文本1" + }, + + { + "name": "text2", + "type": "text", + "label": "文本2" + } + ] + } + ] +} +``` + +## 展示模式 + +可以通过设置`mode`调整展示模式，用法同 [Form 展示模式](../form/index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) + +下面`group`我们配置了`"mode": "horizontal"`，观察显示情况 + +```schema:height="450" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + }, + { + "type": "divider" + }, + { + "type": "fieldSet", + "title": "基本配置", + "mode": "horizontal", + "controls": [ + { + "name": "text1", + "type": "text", + "label": "文本1" + }, + + { + "name": "text2", + "type": "text", + "label": "文本2" + } + ] + } + ] +} +``` + +## 可折叠 + +配置`"collapsable": true`可以实现点击标题折叠显隐表单项。 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "fieldSet", + "title": "基本配置", + "collapsable": true, + "controls": [ + { + "name": "text1", + "type": "text", + "label": "文本1" + }, + + { + "name": "text2", + "type": "text", + "label": "文本2" + } + ] + } + ] +} +``` + +### 默认是否折叠 + +默认是展开的，如果想默认折叠，那么配置`"collapsed": false`默认折叠。 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "fieldSet", + "title": "基本配置", + "collapsable": true, + "collapsed": false, + "controls": [ + { + "name": "text1", + "type": "text", + "label": "文本1" + }, + + { + "name": "text2", + "type": "text", + "label": "文本2" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ------------------------------------ | ------- | ------------------------------------------ | +| className | `string` | | CSS 类名 | +| headingClassName | `string` | | 标题 CSS 类名 | +| bodyClassName | `string` | | 内容区域 CSS 类名 | +| title | [SchemaNode](../../types/schemanode) | | 标题 | +| controls | Array<[表单项](./formitem)> | | 表单项集合 | +| mode | `string` | | 展示默认，同 [Form](./form/index) 中的模式 | +| collapsable | `boolean` | `false` | 配置是否可折叠 | +| collapsed | `booelan` | | 展示默认，同 [Form](./form/index) 中的模式 | diff --git a/docs/components/form/file.md b/docs/components/form/file.md new file mode 100755 index 00000000..da63dc21 --- /dev/null +++ b/docs/components/form/file.md @@ -0,0 +1,105 @@ +--- +title: File 文件上传 +description: +type: 0 +group: null +menuName: File +icon: +order: 21 +--- + +## 基本用法 + +用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "file", + "name": "file", + "label": "File", + "accept": "*", + "reciever": "https://houtai.baidu.com/api/upload/file" + } + ] +} +``` + +## 限制文件类型 + +可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx` + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "file", + "name": "file", + "label": "限制只能上传csv文件", + "accept": ".csv", + "reciever": "https://houtai.baidu.com/api/upload/file" + } + ] +} +``` + +想要限制多个类型，则用逗号分隔，例如：`.csv,.md` + +## 手动上传 + +如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "debug": true, + "controls": [ + { + "type": "file", + "name": "file", + "label": "File", + "accept": "*", + "asBlob": true + } + ] +} +``` + +上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`FormData` + +## 分块上传 + +如果文件过大，则可能需要使用分块上传 + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| reciever | [API](../../types/api) | | 上传文件接口 | +| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` | +| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 | +| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 | +| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` | +| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 | +| multiple | `boolean` | `false` | 是否多选。 | +| 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) | +| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 | +| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 | +| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 | +| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 | +| downloadUrl | `boolean`或`string` | `""` | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 | +| useChunk | `boolean`或`"auto"` | `"auto"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 | +| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 | +| startChunkApi | [API](../../types/api) | | startChunkApi | +| chunkApi | [API](../../types/api) | | chunkApi | +| finishChunkApi | [API](../../types/api) | | finishChunkApi | diff --git a/docs/components/form/formitem.md b/docs/components/form/formitem.md new file mode 100755 index 00000000..e4c9a6cc --- /dev/null +++ b/docs/components/form/formitem.md @@ -0,0 +1,572 @@ +--- +title: FormItem 普通表单项 +description: +type: 0 +group: null +menuName: Formula 普通表单项 +icon: +order: 1 +--- + +**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。 + +> 所有派生自`FormItem`的组件，都具有`FormItem`的特性。 + +## 基本用法 + +最基本的表单项配置像这样： + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "文本框", + "name": "text" + } + ] +} +``` + +- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key` +- `type`: **必填属性**，标识表单项类型 +- `label`: 标识表单项的标签 + +> 所有表单项都只可以配置在`form`组件中，即`form`的`controls`属性中。 + +## 表单项展示 + +### 内联模式 + +通过配置`"inline": true`，标识当前表单项使用内联模式。 + +```schema:height="320" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "常规", + "name": "text1" + }, + { + "type": "text", + "label": "内联", + "name": "text2", + "mode": "inline" + } + ] +} +``` + +### 表单项尺寸 + +可以配置`size`，来调整表单项的尺寸，支持`'xs' | 'sm' | 'md' | 'lg' | 'full'`，如下： + +```schema:height="550" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "极小", + "name": "text-xs", + "size": "xs" + }, + { + "type": "text", + "label": "小", + "name": "text-sm", + "size": "sm" + }, + { + "type": "text", + "label": "中", + "name": "text-md", + "size": "md" + }, + { + "type": "text", + "label": "大", + "name": "text-lg", + "size": "lg" + }, + { + "type": "text", + "label": "占满", + "name": "text-lg", + "size": "full" + } + ] +} +``` + +> 不同组件的`size`效果可能会有所不同，具体请参考对应的组件文档。 + +### 表单项标签 + +设置`label`属性来配置表单项标签。 + +当表单为水平布局时，左边即便是不设置`label`为了保持对齐也会留空，如果想要去掉空白，请设置成`false`。 + +```schema:height="350" scope="body" +{ + "type": "form", + "mode": "horizontal", + "controls": [ + { + "type": "text", + "label": "常规", + "name": "text1", + "placeholder": "常规标签" + }, + { + "type": "text", + "label": "", + "name": "text1", + "placeholder": "不显示标签" + }, + { + "type": "text", + "label": false, + "name": "text1", + "placeholder": "不显示标签且清除空间" + } + ] +} +``` + +### 配置禁用 + +##### 静态配置 + +通过配置`"disabled": true`来禁用表单项 + +```schema:height="350" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "常规", + "name": "text1" + }, + { + "type": "text", + "label": "禁用", + "name": "text2", + "disabled": true + } + ] +} +``` + +##### 通过条件配置是否禁用 + +你也通过[表达式](../../concepts/expression)配置`disabledOn`，来实现在某个条件下禁用当前表单项. + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "label": "数量", + "name": "number", + "value": 0, + "description": "调整数量大小查看效果吧！" + }, + { + "type": "text", + "label": "文本", + "name": "text", + "disabledOn": "data.number > 1", + "description": "当数量大于1的时候，该文本框会被禁用" + } + ] +} +``` + +### 配置显隐 + +##### 静态配置 + +通过配置`"hidden": true`或者`"visible": false`来禁用表单项 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "常规", + "name": "text1" + }, + { + "type": "text", + "label": "隐藏", + "name": "text2", + "hidden": true + } + ] +} + +``` + +上例中的`text2`被隐藏了。 + +##### 通过条件配置显隐 + +你也通过[表达式](../../concepts/expression)配置`hiddenOn`，来实现在某个条件下禁用当前表单项. + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "label": "数量", + "name": "number", + "value": 0, + "description": "调整数量大小查看效果吧！" + }, + { + "type": "text", + "label": "文本", + "name": "text", + "hiddenOn": "data.number > 1", + "description": "当数量大于1的时候，该文本框会隐藏" + } + ] +} +``` + +> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别 + +## 表单项值 + +表单项值，即表单项通过用户交互发生变化后，更新表单数据域中同`name`变量值. + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "type": "text", + "label": "姓名", + "name": "name" + } + ] +} +``` + +如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。 + +## 配置默认值 + +通过配置`value`属性，可以设置表单项的默认值。 + +```schema:height="320" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "label": "text", + "name": "text", + "value": "hello world!", + "description": "拥有默认值的 text" + } + ] +} +``` + +`value`不支持数据映射，也就是说不可以直接配置类似于这样的语法：`${xxx}`，如果想要映射当前数据域中的某个变量，那么设置该表单项`name`为该变量名就行，如下： + +```schema:height="300" scope="body" +{ + "type": "form", + "data":{ + "text": "hello world!" + }, + "controls": [ + { + "type": "text", + "label": "text", + "name": "text", + "description": "拥有默认值的 text" + } + ] +} +``` + +上例中我们表单数据域中有变量`"text": "hello world!"`，然后我们设置表达项`"name": "text"`，这样就可以自动映射值了。 + +## 表单项必填 + +### 静态配置 + +通过配置`"required": true`来标识该表单项为必填。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "常规", + "name": "text", + "required": true + } + ] +} +``` + +### 满足条件校验必填 + +你也通过[表达式](../../concepts/expression)配置`requiredOn`，来实现在某个条件下使当前表单项必填。 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "number", + "label": "数量", + "name": "number", + "value": 0, + "description": "调整数量大小查看效果吧！" + }, + { + "type": "text", + "label": "文本", + "name": "text", + "requiredOn": "data.number > 1", + "description": "当数量大于1的时候，该文本框为必填" + } + ] +} +``` + +## 格式校验 + +可以配置`validations`属性，指定校验当前表单项值的格式 + +可以通过对象形式配置 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": { + "isNumeric": true + }, + "description": "请输入数字类型文本" + } + ] +} +``` + +同样也可以配置多个格式校验 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": { + "isNumeric": true, + "minimum": 10 + }, + "description": "请输入数字类型文本" + } + ] +} +``` + +### 字符串形式（不推荐） + +也可以配置字符串形式来指定，如下例，输入不合法的值，点击提交会报错并显示报错信息 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": "isNumeric", + "description": "请输入数字类型文本" + } + ] +} +``` + +也可以指定多个格式校验，中间用`逗号`分隔。 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": "isNumeric,minimum:10", + "description": "请输入数字类型文本" + } + ] +} +``` + +如果需要配置参数，例如显示最大值或最小值，则在格式标识符后`:`和参数 + +### 自定义校验信息 + +amis 会有默认的报错信息，如果你想自定义校验信息，配置`validationErrors`属性 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": { + "isNumeric": true + }, + "validationErrors": { + "isNumeric": "同学，请输入数字哈" + }, + "description": "请输入数字类型文本" + } + ] +} +``` + +如果需要获取当前格式校验配置的参数，可以使用`$1` + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "label": "文本", + "name": "text", + "validations": { + "isNumeric": true, + "minimum": 10 + }, + "validationErrors": { + "minimum": "同学，最少输入$1以上的数字哈" + }, + "description": "请输入数字类型文本" + } + ] +} +``` + +### 表单项值发生变化即校验 + +默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`"validateOnChange": false` + +### 支持的格式校验 + +- `isEmptyString` 必须是空白字符。**注意！** 该格式校验是值，校验空白字符，而不是当前表单项是否为空，想校验是否为空，请配置 [必填校验](#%E8%A1%A8%E5%8D%95%E9%A1%B9%E5%BF%85%E5%A1%AB) + - `isEmail` 必须是 Email。 + - `isUrl` 必须是 Url。 + - `isNumeric` 必须是 数值。 + - `isAlpha` 必须是 字母。 + - `isAlphanumeric` 必须是 字母或者数字。 + - `isInt` 必须是 整形。 + - `isFloat` 必须是 浮点形。 + - `isLength:length` 是否长度正好等于设定值。 + - `minLength:length` 最小长度。 + - `maxLength:length` 最大长度。 + - `maximum:number` 最大值。 + - `minimum:number` 最小值。 + - `equals:xxx` 当前值必须完全等于 xxx。 + - `equalsField:xxx` 当前值必须与 xxx 变量值一致。 + - `isJson` 是否是合法的 Json 字符串。 + - `notEmptyString` 要求输入内容不是空白。 + - `isUrlPath` 是 url 路径。 + - `matchRegexp:/foo/` 必须命中某个正则。 + - `matchRegexp1:/foo/` 必须命中某个正则。 + - `matchRegexp2:/foo/` 必须命中某个正则。 + - `matchRegexp3:/foo/` 必须命中某个正则。 + - `matchRegexp4:/foo/` 必须命中某个正则。 + +## 服务端校验 + +也可以通过接口返回错误信息，实现服务端校验 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveFormFailed?waitSeconds=1", + "controls": [ + { + "name": "test2", + "type": "text", + "label": "服务端验证" + } + ] +} +``` + +点击提交，api 接口返回中，需要在 errors 变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。 + +如上，接口返回的格式如下，提交后，`test2`表达项会显示报错信息 + +```json +{ + "status": 422, // 返回非0状态码 + "msg": "", + "errors": { + "test2": "服务器端说，这个有错误。" + }, + "data": null +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | ------------------------------------------ | ------ | ---------------------------------------------------------- | +| type | `string` | | 指定表单项类型 | +| className | `string` | | 表单最外层类名 | +| inputClassName | `string` | | 表单控制器类名 | +| labelClassName | `string` | | label 的类名 | +| name | `string` | | 字段名，指定该表单项提交时的 key | +| label | [模板](../../concepts/template) 或 `false` | | 表单项标签 | +| description | [模板](../../concepts/template) | | 表单项描述 | +| placeholder | `string` | | 表单项描述 | +| inline | `boolean` | | 是否为 内联 模式 | +| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 | +| disabled | `boolean` | | 当前表单项是否是禁用状态 | +| disabledOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| visible | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| visibleOn | [表达式](../../concepts/expression) | | 当前表单项是否禁用的条件 | +| required | `boolean` | | 是否为必填。 | +| requiredOn | [表达式](../../concepts/expression) | | 过[表达式](../Types.md#表达式)来配置当前表单项是否为必填。 | +| validations | [表达式](../../concepts/expression) | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 | diff --git a/docs/components/form/formula.md b/docs/components/form/formula.md new file mode 100755 index 00000000..5bf2e545 --- /dev/null +++ b/docs/components/form/formula.md @@ -0,0 +1,187 @@ +--- +title: Formula 公式 +description: +type: 0 +group: null +menuName: Formula +icon: +order: 22 +--- + +可以设置公式，将公式结果设置到指定表单项上。 + +> 该表单项是隐藏的 + +## 基本用法 + +```schema:height="450" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "name": "a", + "label": "A" + }, + { + "type": "number", + "name": "b", + "label": "B" + }, + { + "type": "number", + "name": "sum", + "label": "和", + "disabled": true, + "description": "自动计算 A + B" + }, + { + "type": "formula", + "name": "sum", + "value": 0, + "formula": "a + b" + } +] +} +``` + +## 自动应用 + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "name": "a", + "label": "A" + }, + { + "type": "number", + "name": "b", + "label": "B" + }, + { + "type": "number", + "name": "sum", + "label": "和", + "disabled": true, + "description": "自动计算 A + B" + }, + { + "type": "formula", + "name": "sum", + "value": 0, + "formula": "a + b" + } +] +} +``` + +## 手动应用 + +配置`"autoSet": false`，然后按钮上配置`target`，配置值为`formula`的`id`值，就可以实现手动触发公式应用 + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "name": "a", + "label": "A" + }, + { + "type": "number", + "name": "b", + "label": "B" + }, + { + "type": "group", + "controls": [ + { + "type": "number", + "name": "sum", + "label": "和", + "disabled": true, + "columnClassName": "col-sm-11" + }, + { + "type": "button", + "label": "计算", + "columnClassName": "col-sm-1 v-bottom", + "target": "theFormula" + } + ] + }, + { + "type": "formula", + "name": "sum", + "id": "theFormula", + "value": 0, + "formula": "a + b", + "initSet": false, + "autoSet": false + } +] +} +``` + +> 为什么设置`id`而不是设置`name`? +> +> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。 + +## 条件应用 + +可以配置`condition`用来指定作用条件，有两种写法： + +- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。 +- 自己写判断如: `data.xxx == "a" && data.xxx !== data.__prev.xxx` 当 xxx 变化了，且新的值是字符 "a" 时应用，可以写更加复杂的判断。 + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "radios", + "name": "radios", + "label": "radios", + "options": [ + { + "label": "a", + "value": "a" + }, + { + "label": "b", + "value": "b" + } + ], + "description": "radios 变化会自动清空 B" + }, + { + "type": "text", + "name": "b", + "label": "B" + }, + { + "type": "formula", + "name": "b", + "value": "some string", + "formula": "''", + "condition": "${radios}", + "initSet": false + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ----------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- | +| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 | +| formula | [表达式](../../concepts/expression) | | 应用的公式 | +| condition | [表达式](../../concepts/expression) | | 公式作用条件 | +| initSet | `boolean` | `true` | 初始化时是否设置 | +| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 | +| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 | diff --git a/docs/components/form/grid.md b/docs/components/form/grid.md new file mode 100755 index 00000000..bbd93096 --- /dev/null +++ b/docs/components/form/grid.md @@ -0,0 +1,81 @@ +--- +title: Grid 网格 +description: +type: 0 +group: null +menuName: Grid +icon: +order: 23 +--- + +支持 Form 内部再用 grid 布局进行渲染组件。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "grid", + "columns": [ + { + "md": 3, + "controls": [ + { + "name": "text", + "type": "text", + "label": "text" + } + ] + }, + + { + "md": 9, + "controls": [ + { + "name": "editor", + "type": "editor", + "label": "editor" + } + ] + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------------------- | --------------------------------- | -------- | -------------------------------------------------------------- | +| type | `string` | `"grid"` | 指定为 Grid 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| columns | `Array` | | 列集合 | +| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 | +| columns[x].controls | Array<[表单项](./formitem)> | | 如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合 | +| columns[x].columnClassName | `int` | | 配置列的 `className` | +| columns[x].xs | `int` | | 宽度占比： 1 - 12 | +| columns[x].xsHidden | `boolean` | | 是否隐藏 | +| columns[x].xsOffset | `int` | | 偏移量 1 - 12 | +| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].sm | `int` | | 宽度占比： 1 - 12 | +| columns[x].smHidden | `boolean` | | 是否隐藏 | +| columns[x].smOffset | `int` | | 偏移量 1 - 12 | +| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].md | `int` | | 宽度占比： 1 - 12 | +| columns[x].mdHidden | `boolean` | | 是否隐藏 | +| columns[x].mdOffset | `int` | | 偏移量 1 - 12 | +| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].lg | `int` | | 宽度占比： 1 - 12 | +| columns[x].lgHidden | `boolean` | | 是否隐藏 | +| columns[x].lgOffset | `int` | | 偏移量 1 - 12 | +| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 | + +更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props) diff --git a/docs/components/form/group.md b/docs/components/form/group.md new file mode 100755 index 00000000..adea5cf0 --- /dev/null +++ b/docs/components/form/group.md @@ -0,0 +1,163 @@ +--- +title: Group 表单项组 +description: +type: 0 +group: null +menuName: Group +icon: +order: 24 +--- + +表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项 + +## 基本用法 + +```schema:height="360" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + }, + { + "type": "divider" + }, + { + "type": "group", + "controls": [ + { + "type": "text", + "name": "text1", + "label": "文本1" + }, + { + "type": "text", + "name": "text2", + "label": "文本2" + } + ] + } + ] +} +``` + +## 展示 + +可以给`group`组件设置`mode`调整展示模式，用法同 [Form 展示](../form/index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) + +下面`group`我们配置了`"mode": "horizontal"`，观察显示情况 + +```schema:height="360" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + }, + { + "type": "divider" + }, + { + "type": "group", + "mode": "horizontal", + "controls": [ + { + "type": "text", + "name": "text1", + "label": "文本1" + }, + + { + "type": "text", + "name": "text2", + "label": "文本2" + } + ] + } + ] +} +``` + +当表单在水平模式下时，如果`group`内表单项设置`"label": false`，会导致布局错乱，如下 + +```schema:height="360" scope="body" +{ + "type": "form", + "mode": "horizontal", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + }, + { + "type": "divider" + }, + { + "type": "group", + "controls": [ + { + "type": "text", + "name": "text1", + "label": false + }, + { + "type": "text", + "name": "text2", + "label": false + } + ] + } + ] +} +``` + +这时可以给`group`配置`label`属性，保持和其他表单项布局统一 + +```schema:height="360" scope="body" +{ + "type": "form", + "mode": "horizontal", + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本" + }, + { + "type": "divider" + }, + { + "type": "group", + "label": "文本组", + "controls": [ + { + "type": "text", + "name": "text1", + "label": false + }, + { + "type": "text", + "name": "text2", + "label": false + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- | +| className | `string` | | CSS 类名 | +| label | `string` | | group 的标签 | +| controls | Array<[表单项](./formitem)> | | 表单项集合 | +| mode | `string` | | 展示默认，同 [Form](./form/index) 中的模式 | +| gap | `string` | | 表单项之间的间距，可选： | +| direction | `string` | `"horizontal"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` | diff --git a/docs/components/form/hbox.md b/docs/components/form/hbox.md new file mode 100755 index 00000000..1edd9285 --- /dev/null +++ b/docs/components/form/hbox.md @@ -0,0 +1,56 @@ +--- +title: HBox +description: +type: 0 +group: null +menuName: HBox +icon: +order: 25 +--- + +表单内部也可以使用 HBox 布局，实现左右排列。更推荐 [Group](./group) + +## 基本用法 + +```schema:height="450" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "hbox", + "columns": [ + { + "controls": [ + { + "name": "text", + "type": "text", + "label": false, + "placeholder": "Text" + } + ] + }, + + { + "type": "tpl", + "tpl": "其他组件" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------- | ------------------------ | ------ | ---------------------------------------- | +| columns | Array<[Column](columns)> | | 列内容。每个 column 为一个独立的渲染器。 | + +### Column 属性 + +除了 [SchemaNode](../../types/schemanode) 支持属性以外，还支持以下几种属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- | +| columnClassName | `string` | | 配置列的 CSS 类名 | +| controls | Array<[表单项](./formitem)> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 | diff --git a/docs/components/form/hidden.md b/docs/components/form/hidden.md new file mode 100755 index 00000000..a13edfc6 --- /dev/null +++ b/docs/components/form/hidden.md @@ -0,0 +1,38 @@ +--- +title: Hidden 隐藏字段 +description: +type: 0 +group: null +menuName: Hidden 隐藏字段 +icon: +order: 26 +--- + +## 基本用法 + +默认表单提交，在没有 [自定义 API 请求数据](../../types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE) 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "debug": true, + "controls": [ + { + "type": "hidden", + "name": "id", + "value": 1 + }, + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] +} +``` diff --git a/docs/components/form/image.md b/docs/components/form/image.md new file mode 100755 index 00000000..d8c24eab --- /dev/null +++ b/docs/components/form/image.md @@ -0,0 +1,102 @@ +--- +title: Image 图片 +description: +type: 0 +group: null +menuName: Image +icon: +order: 27 +--- + +图片格式输入，默认 amis 会直接存储在 FEX 的 hiphoto 里面，提交到 form 是直接的图片 url。 + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "image", + "name": "image", + "label": "image", + "reciever": "https://houtai.baidu.com/api/upload/file" + } + ] +} +``` + +## 限制文件类型 + +可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx` + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "image", + "name": "image", + "label": "限制只能上传jpg图片", + "accept": ".jpg", + "reciever": "https://houtai.baidu.com/api/upload/file" + } + ] +} +``` + +想要限制多个类型，则用逗号分隔，例如：`.jpg,.png` + +## 支持裁剪 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "image", + "name": "image", + "label": "限制只能上传jpg图片", + "accept": ".jpg", + "reciever": "https://houtai.baidu.com/api/upload/file", + "crop": true + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------- | +| reciever | [API](../../types/api) | | 上传文件接口 | +| accept | `string` | `text/plain` | 默认只支持`image/jpeg, image/jpg, image/png, image/gif`，要支持其他类型，请配置此属性为图片后缀`.xxx` | +| maxSize | `string` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`KB` | +| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 | +| multiple | `boolean` | `false` | 是否多选。 | +| 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) | +| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 | +| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 | +| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 | +| crop | `boolean`或`{"aspectRatio":""}` | | 用来设置是否支持裁剪。 | +| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 | +| limit | Limit | | 限制图片大小，超出不让上传。 | + +### Limit 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| width | `number` | | 限制图片宽度。 | +| height | `number` | | 限制图片高度。 | +| minWidth | `number` | | 限制图片最小宽度。 | +| minHeight | `number` | | 限制图片最小高度。 | +| maxWidth | `number` | | 限制图片最大宽度。 | +| maxHeight | `number` | | 限制图片最大高度。 | +| aspectRatio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 | diff --git a/docs/components/form/index.md b/docs/components/form/index.md new file mode 100755 index 00000000..dbdbe393 --- /dev/null +++ b/docs/components/form/index.md @@ -0,0 +1,783 @@ +--- +title: Form 表单 +description: +type: 0 +group: ⚙ 组件 +menuName: Form 表单 +icon: +order: 24 +--- + +表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。 + +## 基本用法 + +最基本的用法是配置 [表单项](./form/index/formitem) 和 提交接口`api`。 + +如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveForm`。 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] +} +``` + +## 表单展示 + +### 默认模式 + +默认展示模式为文字表单项分行显示 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] +} +``` + +### 水平模式 + +水平模式，左右摆放，左右比率分配。 + +```schema:height="330" scope="body" +{ + "type": "form", + "title": "水平模式", + "mode": "horizontal", + "controls": [ + { + "type": "email", + "name": "email", + "label": "邮箱", + "required": true + }, + { + "type": "password", + "name": "password", + "label": "密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] +} +``` + +可以配置`horizontal`属性，调整偏移量，格式如下： + +``` +"horizontal": { + "left": 2, + "right": 10, + "offset": 2 +} +``` + +```schema:height="330" scope="body" +{ + "type": "form", + "title": "水平模式", + "mode": "horizontal", + "horizontal": { + "left": 2, + "right": 10, + "offset": 2 + }, + "controls": [ + { + "type": "email", + "name": "email", + "label": "邮箱", + "required": true + }, + { + "type": "password", + "name": "password", + "label": "密码" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + } + ] +} +``` + +### 内联模式 + +使用内联模式展现表单项 + +```schema:height="200" scope="body" + { + "type": "form", + "title": "内联模式", + "mode": "inline", + "controls": [ + { + "type": "email", + "name": "email", + "label": "邮箱" + }, + { + "type": "password", + "name": "password" + }, + { + "type": "checkbox", + "name": "rememberMe", + "label": "记住登录" + }, + { + "type": "submit", + "label": "登录" + } + ] + } +``` + +### 实现一行展示多个表单项 + +使用 group 实现一行显示多个表单项 + +```schema:height="650" scope="body" + [ + { + "type": "form", + "title": "常规模式", + "controls": [ + { + "type": "group", + "controls": [ + { + "type": "email", + "name": "email", + "label": "邮箱" + }, + { + "type": "password", + "name": "password", + "label": "密码" + } + ] + } + ] + }, + { + "type": "form", + "title": "水平模式", + "mode": "horizontal", + "controls": [ + { + "type": "group", + "controls": [ + { + "type": "email", + "name": "email2", + "label": "邮箱" + }, + { + "type": "password", + "name": "password2", + "label": "密码" + } + ] + } + ] + }, + { + "type": "form", + "title": "内联模式", + "mode": "inline", + "controls": [ + { + "type": "group", + "controls": [ + { + "type": "email", + "name": "email", + "label": "邮箱" + }, + { + "type": "password", + "name": "password", + "label": "密码" + } + ] + } + ] + } + ] +``` + +### 底部按钮栏 + +#### 隐藏默认提交按钮 + +Form 默认会在底部渲染一个提交按钮，用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮： + +1. 配置：`"submitText": ""` +2. 配置：`"actions": []` + +```schema:height="400" scope="body" +[ + { + "type": "form", + "title": "通过 submitText 去掉提交按钮", + "submitText": "", + "controls": [ + { + "type": "text", + "name": "email", + "label": "邮箱" + } + ] + }, + { + "type": "form", + "title": "通过 actions 去掉提交按钮", + "actions": [], + "controls": [ + { + "type": "text", + "name": "email", + "label": "邮箱" + } + ] + } + ] +``` + +#### 配置若干自定义按钮 + +同样，你可以通过 actions 属性，配置任意你想要的行为按钮。 + +```schema:height="330" scope="body" +{ + "type": "form", + "title": "表单", + "controls": [ + { + "type": "text", + "name": "email", + "label": "邮箱" + }, + { + "type": "password", + "name": "password", + "label": "密码" + } + ], + "actions": [ + { + "type": "submit", + "label": "登录" + }, + { + "type": "action", + "actionType": "dialog", + "label": "登录须知", + "dialog": { + "title": "登录须知", + "body": "登录须知" + } + }, + { + "type": "button", + "label": "百度一下", + "url": "https://www.baidu.com/" + } + ] + } +``` + +请记住，如果想触发表单提交行为，请配置`"actionType": "submit"`或`"type": "submit"`按钮 + +### 去掉表单边框 + +通过配置`"wrapWithPanel": false`，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。 + +```schema:height="250" scope="body" +{ + "type": "form", + "wrapWithPanel": false, + "controls": [ + { + "type": "text", + "name": "email", + "label": "邮箱" + }, + { + "type": "password", + "name": "password", + "label": "密码" + } + ] + } +``` + +**注意！配置该属性后，`title`和`actions`属性将失效并无法渲染，请在表单内自行配置。** + +### 固定底部栏 + +如果表单项较多导致表单过长，而不方便操作底部的按钮栏，可以配置`"affixFooter": true`属性，将底部按钮栏固定在浏览器底部 + +## 表单项数据初始化 + +表单可以通过配置`initApi`，实现表单初始化时请求接口，用于展示数据或初始化表单项。 + +```schema:height="330" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/form/initData", + "title": "编辑用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "text", + "name": "email", + "label": "邮箱" + } + ] +} +``` + +### 轮训初始化请求 + +Form 支持轮训初始化接口，步骤如下： + +1. 配置`initApi` +2. 配置 `interval`：单位为`ms`，最低值`3000`，低于该值按`3000`处理 + +```schema:height="300" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "interval": 3000, + "title": "表单", + "controls": [ + { + "type": "text", + "name": "date", + "label": "时间戳" + } + ] + } +``` + +如果希望在满足某个条件的情况下停止轮训，配置`stopAutoRefreshWhen`表达式。 + +```schema:height="300" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "interval": 3000, + "title": "表单", + "stopAutoRefreshWhen": "data.date % 5", + "controls": [ + { + "type": "text", + "name": "date", + "label": "时间戳" + } + ] + } +``` + +## 表单提交 + +配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api` + +```schema:height="330" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/saveForm", + "title": "用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +点击提交按钮，会看到发送表单请求，请求数据体为： + +```json +{ + "name": "xxx", + "email": "xxx@xx.com" +} +``` + +当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`"_from"`。更多用法查看 [API 文档](../../types/api) 和 [数据映射](../../concepts/data-mapping)文档 + +```schema:height="330" scope="body" +{ + "type": "form", + "initApi": { + "method": "put", + "url": "https://houtai.baidu.com/api/mock2/page/initData", + "data": { + "&": "$$", + "_from": "browser" + } + }, + "title": "用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +触发表单提交行为有下面几种方式： + +1. 默认的`提交按钮` +2. 为行为按钮配置`"actionType": "submit"` +3. 配置`"type": "submit"`的按钮 + +### 轮训提交请求 + +通过设置`asyncApi`，当表单提交发送保存接口后，还会继续轮训请求该接口，默认间隔为`3秒`，直到返回 `finished` 属性为 `true` 才 结束。 + +```schema:height="330" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "asyncApi": "https://houtai.baidu.com/api/mock2/page/initData", + "title": "用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +如果决定结束轮训的标识字段名不是 `finished`，请设置`finishedField`属性，比如：`"finishedField": "is_success"` + +## 重置表单 + +配置`"type": "reset"`或者`"actionType": "reset"`的按钮，可以实现点击重置表单项值。 + +```schema:height="330" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ], + "actions": [ + { + "type": "reset", + "label": "重置" + }, + { + "type": "submit", + "label": "保存" + } + ] + } +``` + +> **请注意：**这里的重置是将表单数据域重置到**初始状态**，**而不是清空**，如果你配置了初始化接口，那么重置操作是会**将表单项重置至初始化表单项值** + +## 表单数据域调试 + +配置`debug:true`可以查看当前表单的数据域数据详情，方便数据映射、表达式等功能调试，如下，你可以修改表单项查看数据域变化 + +```schema:height="330" scope="body" +{ + "type": "form", + "title": "用户信息", + "debug": true, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +> 该配置不会展示完整的数据链，只会展示当前表单的数据域 + +## 禁用数据链 + +默认表单是可以获取到完整数据链中的数据的，但是该默认行为不适用于所有场景，例如： + +在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`"canAccessSuperData": false`来关闭该行为 + +## 提交后行为 + +表单提交成功后，可以执行一些行为。 + +### 重置表单 + +如果想提交表单成功后，重置当前表单至初始状态，可以配置`"resetAfterSubmit": true`。 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "resetAfterSubmit": true, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +编辑表单项，点击提交，成功后会发现表单项的值会重置到初始状态，即空 + +> 注意，如果表单项有默认值，则会将该表单项的值重置至该默认值。 + +### 跳转页面 + +配置`redirect`属性，可以指定表单提交成功后要跳转至的页面 + +```schema:height="330" scope="body" +{ + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "redirect": "/user/list", + "title": "用户信息", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + } +``` + +### 刷新目标组件 + +配置`reload`属性为其他组件`name`值，可以在表单提交成功之后，刷新指定组件。 + +```schema:height="330" scope="body" +[ + { + "type": "form", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "title": "用户信息", + "reload": "my_service", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + } + ] + }, + { + "type": "service", + "name": "my_service", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "body": "service初识数据" + } + ] +``` + +上例中`form`提交成功后，会触发`name`为`my_service`的`Service`组件重新请求初始化接口 + +上面示例是一种[组件间联动](../concepts/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8) + +### 将数据域发送给目标组件 + +配置`target`属性为目标组件`name`值，可以在触发提交行为后，将当前表单的数据域发送给目标组件。 + +```schema:height="330" scope="body" +[ + { + "type": "form", + "target": "detailForm", + "controls": [ + { + "type": "text", + "placeholder": "关键字", + "name": "keywords" + } + ] + }, + { + "type": "form", + "name": "detailForm", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData?keywords=${keywords}", + "controls": [ + { + "label": "名称", + "type": "static", + "name": "name" + }, + { + "label": "作者", + "type": "static", + "name": "author" + }, + { + "label": "关键字", + "type": "static", + "name": "${keywords}" + }, + { + "label": "请求时间", + "type": "static-datetime", + "format": "YYYY-MM-DD HH:mm:ss", + "name": "date" + } + ] + } + ] +``` + +第一个表单在提交时，会将它的表单数据域数据发送给`detailForm`表单，触发`detailForm`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。 + +上面示例组合使用了 [组件间联动](../concepts/linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8) 和 [接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8) + +## 持久化保存表单项数据 + +表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么配置`persistData:true` + +如果想提交成功后，清空该缓存，则配置`"clearPersistDataAfterSubmit": true` + +## 修改表单项变化方式 + +@todo + +- lazyChange +- formLazyChange + +默认表单项变化时，会即时变化，例如你输入文本，每键入一次，就会触发 + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------------- | --------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| type | `string` | | `"form"` 指定为 Form 渲染器 | +| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` | +| horizontal | `Object` | `{"left":"col-sm-2", "right":"col-sm-10", "offset":"col-sm-offset-2"}` | 当 mode 为 `horizontal` 时有用，用来控制 label | +| title | `string` | `"表单"` | Form 的标题 | +| submitText | `String` | `"提交"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 | +| className | `string` | | 外层 Dom 的类名 | +| controls | Array<[表单项](./formItem)> | | Form 表单项集合 | +| actions | Array<[表单项](../action)> | | Form 提交按钮，成员为 Action | +| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 | +| messages.fetchSuccess | `string` | | 获取成功时提示 | +| messages.fetchFailed | `string` | | 获取失败时提示 | +| messages.saveSuccess | `string` | | 保存成功时提示 | +| messages.saveFailed | `string` | | 保存失败时提示 | +| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | +| panelClassName | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 | +| api | [API](../../types/api) | | Form 用来保存数据的 api。 | +| initApi | [API](../../types/api) | | Form 用来获取初始数据的 api。 | +| interval | `number` | `3000` | 刷新时间(最低 3000) | +| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | +| stopAutoRefreshWhen | `string` | `""` | 通过[表达式](./Types.md#表达式) 来配置停止刷新的条件 | +| initAsyncApi | [API](../../types/api) | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮训请求该接口，直到返回 finished 属性为 true 才 结束。 | +| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 | +| initFetchOn | `string` | | 用表达式来配置 | +| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 | +| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 | +| asyncApi | [API](../../types/api) | | 设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 | +| checkInterval | `number` | 3000 | 轮训请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 | +| finishedField | `string` | `"finished"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` | +| submitOnChange | `boolean` | `false` | 表单修改即提交 | +| submitOnInit | `boolean` | `false` | 初始就提交一次 | +| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 | +| primaryField | `string` | `"id"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 | +| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 | +| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 | +| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | +| autoFocus | `boolean` | `false` | 是否自动聚焦。 | +| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 | +| persistData | `boolean` | `true` | 指定表单是否开启本地缓存 | +| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 | +| name | `string` | | 设置一个名字后，方便其他组件与其通信 | diff --git a/docs/components/form/input-group.md b/docs/components/form/input-group.md new file mode 100755 index 00000000..4ed2ca8a --- /dev/null +++ b/docs/components/form/input-group.md @@ -0,0 +1,107 @@ +--- +title: Input-Group 输入框组合 +description: +type: 0 +group: null +menuName: Input-Group +icon: +order: 28 +--- + +**输入框组合选择器** 可用于输入框与其他组件进行组合。 + +## 基本用法 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "input-group", + "name": "input-group", + "label": "input 组合", + "controls": [ + { + "type": "text", + "placeholder": "搜索作业ID/名称", + "inputClassName": "b-r-none p-r-none", + "name": "input-group" + }, + { + "type": "submit", + "label": "搜索", + "level": "primary" + } + ] + }, + { + "type": "input-group", + "label": "各种组合", + "controls": [ + { + "type": "select", + "name": "memoryUnits", + "options": [ + { + "label": "Gi", + "value": "Gi" + }, + { + "label": "Mi", + "value": "Mi" + }, + { + "label": "Ki", + "value": "Ki" + } + ], + "value": "Gi" + }, + { + "type": "text", + "name": "memory" + }, + { + "type": "select", + "name": "memoryUnits2", + "options": [ + { + "label": "Gi", + "value": "Gi" + }, + { + "label": "Mi", + "value": "Mi" + }, + { + "label": "Ki", + "value": "Ki" + } + ], + "value": "Gi" + }, + { + "type": "button", + "label": "Go" + } + ] + } + ] +} + +``` + +## 校验 + +input-group 配置校验方法较为特殊，需要配置下面步骤： + +1. input-group 上配置任意`name`值 +2. input-group 的 controls 内配置的表单项上配置校验规则 + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | --------------------------- | ------ | ---------- | +| className | `string` | | CSS 类名 | +| controls | Array<[表单项](./formitem)> | | 表单项集合 | diff --git a/docs/components/form/list.md b/docs/components/form/list.md new file mode 100755 index 00000000..51ee6dcf --- /dev/null +++ b/docs/components/form/list.md @@ -0,0 +1,89 @@ +--- +title: List 列表 +description: +type: 0 +group: null +menuName: List +icon: +order: 29 +--- + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "list", + "name": "select", + "label": "单选", + "clearable": true, + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + } + ] + } + ] +} +``` + +## 选项带图片 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "list", + "name": "select", + "label": "图片", + "options": [ + { + "label": "OptionA", + "value": "a", + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "label": "OptionB", + "value": "b", + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "label": "OptionC", + "value": "c", + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "label": "OptionD", + "value": "d", + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| multiple | `boolean` | `false` | [多选](./options#%E5%A4%9A%E9%80%89-multiple) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | diff --git a/docs/components/form/matrix.md b/docs/components/form/matrix.md new file mode 100755 index 00000000..2f82d762 --- /dev/null +++ b/docs/components/form/matrix.md @@ -0,0 +1,281 @@ +--- +title: Matrix 矩阵 +description: +type: 0 +group: null +menuName: Matrix +icon: +order: 30 +--- + +矩阵类型的输入框。 + +## 基本用法 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "matrix", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ] + } + ] +} +``` + +## 单选模式 + +配置`"multiple": false`可以设置单选，配置`singleSelectMode`可以设置单选模式 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "matrix", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "multiple": false, + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ] + } + ] +} +``` + +## 动态选项 + +可以配置 source 渲染动态选项 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "matrix", + "type": "matrix", + "label": "动态矩阵组件", + "source": "/api/mock2/options/matrix?waitSeconds=1" + } + ] +} +``` + +以上面为例，source 接口返回格式如下： + +```json +{ + "status": 0, + "msg": "ok", + "data": { + "columns": [ + { + "label": "Col A", + "col": "a" + }, + { + "label": "Col B", + "col": "b" + }, + { + "label": "Col C", + "col": "c" + }, + { + "label": "Col D", + "col": "d" + }, + { + "label": "Col E", + "col": "e" + } + ], + "rows": [ + { + "label": "Row 1", + "rol": 1 + }, + { + "label": "Row 2", + "rol": 2 + }, + { + "label": "Row 3", + "rol": 3 + }, + { + "label": "Row 4", + "rol": 4 + }, + { + "label": "Row 5", + "rol": 5 + }, + { + "label": "Row 6", + "rol": 6 + } + ] + } +} +``` + +### column 模式 + +默认为 column 模式，即每列只能单选某个单元格 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "matrix", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "multiple": false, + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ] + } + ] +} +``` + +### cell 模式 + +cell 模式，指全部选项中只能单选某个单元格 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "matrix", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "multiple": false, + "singleSelectMode": "cell", + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ] + } + ] +} +``` + +### row 模式 + +row 模式，每行只能单选某个单元格 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "matrix", + "name": "matrix", + "label": "Matrix", + "rowLabel": "行标题说明", + "multiple": false, + "singleSelectMode": "row", + "columns": [ + { + "label": "列1" + }, + { + "label": "列2" + } + ], + "rows": [ + { + "label": "行1" + }, + { + "label": "行2" + } + ] + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ---------------------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| columns | `Array` | | 列信息，数组中 `label` 字段是必须给出的 | +| rows | `Array` | | 行信息， 数组中 `label` 字段是必须给出的 | +| rowLabel | `string` | | 行标题说明 | +| source | [API](../../types/api) | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 | +| multiple | `boolean` | `true` | 是否多选 | +| singleSelectMode | `string` | `"column"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 | diff --git a/docs/components/form/nestedselect.md b/docs/components/form/nestedselect.md new file mode 100755 index 00000000..895f1037 --- /dev/null +++ b/docs/components/form/nestedselect.md @@ -0,0 +1,243 @@ +--- +title: NestedSelect 级联选择器 +description: +type: 0 +group: null +menuName: NestedSelect 级联选择器 +icon: +order: 31 +--- + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "nested-select", + "name": "nestedSelect", + "label": "级联选择器", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 选中父节点是否自动选中子节点 + +默认选中父节点会自动选中子节点，可以设置`"cascade": true`，不自动选中子节点 + +```schema:height="450" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "nested-select", + "name": "nestedSelect1", + "label": "默认自动选中子节点", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "type": "nested-select", + "name": "nestedSelect2", + "label": "不自动选中子节点", + "multiple": true, + "cascade": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 选中父节点，值是否包含子节点 + +默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`"withChildren": true` + +```schema:height="450" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "nested-select", + "name": "nestedSelect1", + "label": "默认不自动带上子节点的值", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "type": "nested-select", + "name": "nestedSelect2", + "label": "自动带上子节点的值", + "multiple": true, + "withChildren": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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 | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | +| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 | +| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 | +| searchPromptText | `string` | `"输入内容进行检索"` | 搜索框占位文本 | diff --git a/docs/components/form/number.md b/docs/components/form/number.md new file mode 100755 index 00000000..75966f25 --- /dev/null +++ b/docs/components/form/number.md @@ -0,0 +1,36 @@ +--- +title: Number 数字输入框 +description: +type: 0 +group: null +menuName: Number +icon: +order: 32 +--- + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "number", + "name": "number", + "label": "数字" + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ------------------------------- | ------ | -------------------- | +| min | [模板](../../concepts/template) | | 最小值 | +| max | [模板](../../concepts/template) | | 最大值 | +| step | `number` | | 步长 | +| precision | `number` | | 精度，即小数点后几位 | diff --git a/docs/components/form/options.md b/docs/components/form/options.md new file mode 100755 index 00000000..5fda97a0 --- /dev/null +++ b/docs/components/form/options.md @@ -0,0 +1,1177 @@ +--- +title: Options 选择器表单项 +description: +type: 0 +group: null +menuName: Options 选择器表单项 +icon: +order: 2 +--- + +**选择器表单项** 是指那些（例如下拉选择框）具有[选择器特性](#%E9%80%89%E6%8B%A9%E5%99%A8%E7%89%B9%E6%80%A7)的表单项 + +它派生自 [表单项](./formitem)，拥有表单项所有的特性。 + +## 静态选项组 options + +选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下： + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +`options`属性配置的对象数组就是`select`组件的选项组。 + +### 选项组格式 + +##### 标准格式 + +```json +{ + "options": [ + { + "label": "xxx1", + "value": "value1" + ... // 其他变量值 + }, + { + "label": "xxx2", + "value": "value2" + ... // 其他变量值 + } + ] +} +``` + +标准的选项格式为对象数组，数组中的每个对象需要两个必备字段： + +- `label`：标识当前选项的显示文本，帮助用户选择 +- `value`：标识当前选项的值，用作数据保存和映射 + +查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。 + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +##### 简单格式 + +也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致 + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": ["A", "B", "C"] + } + ] +} +``` + +## 动态选项组 source + +### 通过数据域中变量配置 + +你也可以配置`source`属性，利用 [数据映射](../../concepts/data-mapping)，获取当前数据链中的变量 + +```schema:height="260" scope="body" +{ + "type": "form", + "data": { + "items": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + }, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "source": "${items}" + } + ] +} +``` + +上例中，我们给 select 组件，配置`"source": "${items}"`，获取了当前数据域中的`items`变量作为选项组。 + +### 远程拉取 + +除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 [API](../../types/api)，用于动态返回选项组。 + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "source": "https://houtai.baidu.com/api/mock2/form/getOptions?waitSeconds=1" + } + ] +} +``` + +远程拉取接口时，返回的数据结构除了需要满足 [amis 接口要求的基本数据结构](../../types/api#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-) 以外，必须用`"options"`作为选项组的`key`值，如下 + +```json +{ + "status": 0, + "msg": "", + "data": { + // 必须用 options 作为选项组的 key 值 + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } +} +``` + +## 自动选中 + +我们知道表单项可以通过配置`value`属性来设置默认值 + +而选择器表单项如果设置`value`属性，为某一个选项中的`value`值，那么该选择器将自动选中该选项。 + +### 静态配置 + +静态配置同表单项默认值配置方式，直接在组件上配置`value`属性。 + +```schema:height="260" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "value": "b", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +上例我们设置默认值为`b`，则会自动匹配到选项`B`并选中。 + +### 动态配置 + +有时候我们想默认选中一个选项，但是`options`又是远程拉取的，无法确定默认值是啥，这时候，需要在`source`接口中返回`value`，来动态设置默认值，接口返回数据结构如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "value": "b", // 这样就会自动选中b选项 + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } +} +``` + +## 多选 multiple + +大部分选择器组件默认是单选的，可以配置`"multiple": true`支持多选。 + +```schema:height="400" scope="body" +{ + "type": "form", + "data": { + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + }, + "controls": [ + { + "label": "单选", + "type": "select", + "name": "select1", + "source": "${options}" + }, + { + "type": "divider" + }, + { + "label": "多选", + "type": "select", + "name": "select2", + "multiple": true, + "source": "${options}" + } + ] +} +``` + +## 拼接符 delimiter + +多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +默认的拼接符是逗号`,`，但是当你的某个选项中的`value`值内包含`,`这个字符，这样会造成一些预期中的问题 + +你可以设置`delimiter`属性，自定义拼接符，保证不与你选项中的`value`值冲突 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "delimiter": "|", + "options": [ + { + "label":"A", + "value":"a,1" + }, + { + "label":"B", + "value":"b,2" + }, + { + "label":"C", + "value":"c,3" + } + ] + } + ] +} +``` + +上例我们`value`中有逗号，与默认拼接符冲突，这时设置`"delimiter": "|"`，可以看到选择多个选项时，每个选项的`value`属性会用`|`拼接起来，作为表单项的值 + +## 拼接值 joinValues + +当选择器表单项选中某一选项后，当前表单项的值格式默认： + +- 单选：选中选项的`value`值 +- 多选：选中所有选项的`value`，用拼接符进行拼接，默认拼接符为`,` + +选中下面两个选择器，观察数据域值变化。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "单选", + "type": "select", + "name": "select1", + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "label": "多选", + "type": "select", + "name": "select2", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b" + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +但是你可以通过配置`"joinValues": false`，来获取完整的选项对象 + +### 单选模式 + +单选模式下，配置`"joinValues": false`，该表单项值为选中选项的完整对象值，选中下例中的任意选项，观察数据域变化。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "joinValues": false, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +### 多选模式 + +多选模式下，配置`"joinValues": false`，该表单项值为所有选中项的对象数组 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "joinValues": false, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +### 自动选中问题 + +当你通过`joinValues`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致 + +例如下面这个例子，当你给`select`设置了`"joinValues": false`时，选中 B 选项，则该表单项值为`{"label":"B","value":"b"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{"label":"B","value":"b"}` + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "joinValues": false, + "value": { + "label":"B", + "value":"b" + }, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +## 提取多选值 extractValue + +当`"joinValues": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的 value 值，拼成新的数组，那么可以配置`"extractValue": true` + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "joinValues": false, + "extractValue": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +选中所有选型，你会看到表单项的值为：`["a", "b", "c"]`。 + +### 自动选中问题 + +当你通过`joinValues`和`extractValue`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致 + +例如下面这个例子，当你给`select`设置了`"joinValues": false`和`"extractValue": true`时，选中 A、B 选项，则该表单项值为`["a", "b"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`["a", "b"]` + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "multiple": true, + "joinValues": false, + "extractValue": true, + "value": ["a", "b"], + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +## 自动补全 autoComplete + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "name": "select", + "type": "select", + "label": "选项自动补全", + "autoComplete": "https://houtai.baidu.com/api/mock2/options/autoComplete?term=$term", + "placeholder": "请输入" + } + ] +} +``` + +可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。 + +支持该配置项的组件有：Text、Select、Chained-Select、TreeSelect。 + +## 选项标签字段 labelField + +默认渲染选项组，会获取每一项中的`label`变量作为展示文本，如果你的选中项中没有`label`字段，可能会有显示问题 + +例如下例中，options 中只有`text`和`value`字段而没有 value 字段，这时点开下拉框，你会发现选项无法正常显示。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "text":"A", + "value":"a" + }, + { + "text":"B", + "value":"b" + }, + { + "text":"C", + "value":"c" + } + ] + } + ] +} +``` + +这种情况下如果你想自定义该字段，则可以设置`labelField` + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "labelField": "text", + "options": [ + { + "text":"A", + "value":"a" + }, + { + "text":"B", + "value":"b" + }, + { + "text":"C", + "value":"c" + } + ] + } + ] +} +``` + +> 不推荐使用该方式，建议格式化好选项组数据结构 + +## 选项值字段 valueField + +默认渲染选项组，会获取每一项中的`value`变量作为表单项值，如果你的选中项中没有`value`字段，将会无法选中 + +例如下例中，options 中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "options": [ + { + "label":"A", + "val":"a" + }, + { + "label":"B", + "val":"b" + }, + { + "label":"C", + "val":"c" + } + ] + } + ] +} +``` + +这种情况下如果你想自定义该字段，则可以设置`valueField` + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "valueField": "val", + "options": [ + { + "label":"A", + "val":"a" + }, + { + "label":"B", + "val":"b" + }, + { + "label":"C", + "val":"c" + } + ] + } + ] +} +``` + +> 不推荐使用该方式，建议格式化好选项组数据结构 + +## 新增选项 + +部分选择器组件支持在前端进行新增选项的操作。 + +支持该功能的组件有：CheckBoxes、Select、Tree + +### 前端新增 creatable + +，可以配置`"creatable": true`，支持在前端临时新增选项。 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "creatable": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +点开下拉框，会看到选项列表底部有`新增选项`按钮，点击后会显示一个包含简单表单的弹框，点击提交可以新增选项，不同组件交互会有不同。 + +新增选项表单弹框的默认配置如下： + +```json +{ + "type": "dialog", + "title": "新增选项", + "body": { + "type": "form", + "controls": [ + { + "type": "text", + "name": "label", + "label": false, + "placeholder": "请输入名称" + } + ] + } +} +``` + +- 你可以配置`createBtnLabel`来自定义这个弹框的标题； +- 你也可以配置`optionLabel`，来替换`"选项"`这个字符，如我们配置`"optionLabel": "员工"`，标题会显示：`新增员工`； +- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label` + +### 自定义新增表单项 addControls + +默认只有一个文本框，也就是意味着，默认添加选项后，该选项`label`和`value`是一样的，如果你想自定义该表单中的表单项，你可以通过配置`addControls`属性 + +```schema:height="300" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "creatable": true, + "addControls": [ + { + "type": "text", + "name": "label", + "label": "选项标题" + }, + { + "type": "text", + "name": "value", + "label": "选项值" + } + ], + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +上例中你可以选项标题输入`D`，选项值输入`d`。实现自定义添加选项格式 + +不过在没配置保存接口时，`addControls`中务必需要有`labelField`和`valueField`所配置的`name`表单项才可以正确保存 + +> `addControls`属性格式为表单项数组，更多细节参考 [FormItem 表单项](./formitem)。 + +### 配置新增接口 addApi + +默认新增只会暂时把新增的值保存在前端，如果你想前端新增选项后，同时把该选项保存到后端，则可以配置保存接口`addApi`。 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "addApi": "https://houtai.baidu.com/api/mock2/form/saveForm", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +> 配置`addApi`实际上将该配置值设置给该表单的`api`属性。 +> +> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口 + +## 编辑选项 + +部分选择器组件支持在前端编辑选项 + +支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem + +### 前端编辑 editable + +配置`"editable": true`，支持在前端编辑选项。 + +```schema:height="300" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "editable": true, + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +点开下拉框，会看到每个选项右侧有一个编辑图标，点击后会显示一个编辑选项的弹框，修改后点击提交可以编辑选项标签。不同组件交互会有不同 + +编辑选项弹框的默认配置如下： + +```json +{ + "type": "dialog", + "title": "新增选项", + "body": { + "type": "form", + "controls": [ + { + "type": "text", + "name": "label", + "label": false, + "placeholder": "请输入名称" + } + ] + } +} +``` + +- 你也可以配置`optionLabel`，来替换`"选项"`这个字符，如我们配置`"optionLabel": "员工"`，标题会显示：`新增员工`； +- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label` + +### 自定义编辑表单项 editControls + +默认只能修改当前选项的`label`属性，如果你想要修改其他属性，可以配置`editControls`，自定义编辑表单项 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "editable": true, + "editControls": [ + { + "type": "text", + "name": "label", + "label": "选项标题" + }, + { + "type": "text", + "name": "value", + "label": "选项值" + } + ], + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +修改后重新选中该表单项，观察数据域中数据变化。 + +### 配置编辑接口 editApi + +默认编辑只会作用在前端，如果你想前端编辑选项后，同时把该选项保存到后端，则可以配置保存接口`editApi`。 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "editApi": "https://houtai.baidu.com/api/mock2/form/saveForm", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C",## 二级标题 + "value":"c" + } + ] + } + ] +} +``` + +> 配置`editApi`实际上将该配置值设置给编辑表单的`api`属性。 +> +> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口 + +## 删除选项 + +部分选择器组件，支持在前端进行编辑选项操作 + +支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem + +### 配置删除接口 deleteApi + +删除选项不支持在前端级别删除，我们认为是没有意义的，必须要配置`deleteApi`使用接口进行删除 + +配置`"removable": true`和`deleteApi`，支持在前端删除选项。 + +```schema:height="300" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "label": "选项", + "type": "select", + "name": "select", + "deleteApi": "https://houtai.baidu.com/api/mock2/form/saveForm", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +点开下拉框，鼠标悬浮在选项上，可以看到右侧会有删除图标，点击可请求删除接口进行删除 + +## 自动填充 autoFill + +一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，**只在单选时有效**，支持[数据映射](../../concepts/data-mapping) + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "select", + "label": "选项", + "name": "select", + "autoFill": { + "option": "${label}" + }, + "options": [ + { + "label": "Option A", + "value": "a" + }, + { + "label": "Option B", + "value": "b" + } + ] + }, + { + "type": "text", + "name": "option", + "label": "选中项" + } + ] +} +``` + +上例中我们配置了`"autoFill": {"option": "${label}"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option`的文本框中。 + +支持该配置项的有：ButtonGroup、List、NestedSelect、Picker、Radios、Select。 + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------ | --------------------------------- | --------- | ---------------------------------------------------------------------- | +| options | `Array`或`Array` | | 选项组，供用户选择 | +| source | `string`或 [API](../../types/api) | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 | +| multiple | `boolean` | `false` | 是否多选 | +| labelField | `boolean` | `"label"` | 标识选项中哪个字段是`label`值 | +| valueField | `boolean` | `"value"` | 标识选项中哪个字段是`value`值 | +| joinValues | `boolean` | `true` | 是否拼接`value`值 | +| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 | diff --git a/docs/components/form/panel.md b/docs/components/form/panel.md new file mode 100755 index 00000000..4c2ded15 --- /dev/null +++ b/docs/components/form/panel.md @@ -0,0 +1,56 @@ +--- +title: Panel 面板 +description: +type: 0 +group: null +menuName: Panel +icon: +order: 34 +--- + +还是为了布局，可以把一部分 [FormItem](./formItem) 合并到一个 panel 里面单独展示。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "panel", + "controls": [ + { + "name": "text", + "type": "text", + "label": "text" + }, + + { + "name": "text2", + "type": "text", + "label": "text2" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | ------------------------------------ | ------ | ------------------------------------------------------------------- | +| title | `string` | | panel 标题 | +| body | [SchemaNode](../../types/schemanode) | | 内容区 | +| bodyClassName | `string` | | body 的 className | +| footer | [SchemaNode](../../types/schemanode) | | 底部区 | +| footerClassName | `string` | | footer 的 className | +| controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 | + +- `title` panel 标题 +- `body` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。 +- `bodyClassName` body 的 className. +- `footer` [SchemaNode](../../types/schemanode) 可以是其他渲染模型。 +- `footerClassName` footer 的 className. +- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 diff --git a/docs/components/form/picker.md b/docs/components/form/picker.md new file mode 100755 index 00000000..adee4bf9 --- /dev/null +++ b/docs/components/form/picker.md @@ -0,0 +1,509 @@ +--- +title: Picker 列表选择器 +description: +type: 0 +group: null +menuName: Picker +icon: +order: 35 +--- + +列表选取。可以静态数据，或者通过接口拉取动态数据。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "picker", + "name": "picker", + "label": "picker", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + } + ] +} +``` + +## 配置 pickerSchema + +可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "picker", + "name": "type4", + "joinValues": true, + "valueField": "id", + "labelField": "engine", + "label": "多选", + "source": "https://houtai.baidu.com/api/sample", + "size": "lg", + "value": "4,5", + "multiple": true, + "pickerSchema": { + "mode": "table", + "name": "thelist", + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id", + "draggable": true, + "headerToolbar": { + "wrapWithPanel": false, + "type": "form", + "className": "text-right", + "target": "thelist", + "mode": "inline", + "controls": [ + { + "type": "text", + "name": "keywords", + "addOn": { + "type": "submit", + "label": "搜索", + "level": "primary", + "icon": "fa fa-search pull-left" + } + } + ] + }, + "columns": [ + { + "name": "engine", + "label": "Rendering engine", + "sortable": true, + "searchable": true, + "type": "text", + "toggled": true + }, + { + "name": "browser", + "label": "Browser", + "sortable": true, + "type": "text", + "toggled": true + }, + { + "name": "platform", + "label": "Platform(s)", + "sortable": true, + "type": "text", + "toggled": true + }, + { + "name": "version", + "label": "Engine version", + "quickEdit": true, + "type": "text", + "toggled": true + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "options": ["A", "B", "C", "D", "X"], + "saveImmediately": true + }, + "type": "text", + "toggled": true + }, + { + "type": "operation", + "label": "操作", + "width": 100, + "buttons": [ + { + "type": "button", + "icon": "fa fa-eye", + "actionType": "dialog", + "dialog": { + "title": "查看", + "body": { + "type": "form", + "controls": [ + { + "type": "static", + "name": "engine", + "label": "Engine" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "browser", + "label": "Browser" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "platform", + "label": "Platform(s)" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "version", + "label": "Engine version" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "grade", + "label": "CSS grade" + }, + { + "type": "divider" + }, + { + "type": "html", + "html": "

添加其他 Html 片段 需要支持变量替换（todo）.

" + } + ] + } + } + }, + { + "type": "button", + "icon": "fa fa-pencil", + "actionType": "dialog", + "dialog": { + "position": "left", + "size": "lg", + "title": "编辑", + "body": { + "type": "form", + "name": "sample-edit-form", + "api": "/api/sample/$id", + "controls": [ + { + "type": "text", + "name": "engine", + "label": "Engine", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "browser", + "label": "Browser", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "platform", + "label": "Platform(s)", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "version", + "label": "Engine version" + }, + { + "type": "divider" + }, + { + "type": "select", + "name": "grade", + "label": "CSS grade", + "options": ["A", "B", "C", "D", "X"] + } + ] + } + } + }, + { + "type": "button", + "icon": "fa fa-times text-danger", + "actionType": "ajax", + "confirmText": "您确认要删除?", + "api": "delete:https://houtai.baidu.com/api/sample/$id" + } + ], + "toggled": true + } + ] + } + } + ] +} +``` + +## 内嵌模式 + +可以配置`"embed": true`，实现内嵌 picker + +```schema:height="900" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "picker", + "name": "type4", + "joinValues": true, + "valueField": "id", + "labelField": "engine", + "label": "Picker", + "embed": true, + "source": "https://houtai.baidu.com/api/sample", + "size": "lg", + "value": "4,5", + "multiple": true, + "pickerSchema": { + "mode": "table", + "name": "thelist", + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id", + "draggable": true, + "headerToolbar": { + "wrapWithPanel": false, + "type": "form", + "className": "text-right", + "target": "thelist", + "mode": "inline", + "controls": [ + { + "type": "text", + "name": "keywords", + "addOn": { + "type": "submit", + "label": "搜索", + "level": "primary", + "icon": "fa fa-search pull-left" + } + } + ] + }, + "columns": [ + { + "name": "engine", + "label": "Rendering engine", + "sortable": true, + "searchable": true, + "type": "text", + "toggled": true + }, + { + "name": "browser", + "label": "Browser", + "sortable": true, + "type": "text", + "toggled": true + }, + { + "name": "platform", + "label": "Platform(s)", + "sortable": true, + "type": "text", + "toggled": true + }, + { + "name": "version", + "label": "Engine version", + "quickEdit": true, + "type": "text", + "toggled": true + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "options": ["A", "B", "C", "D", "X"], + "saveImmediately": true + }, + "type": "text", + "toggled": true + }, + { + "type": "operation", + "label": "操作", + "width": 100, + "buttons": [ + { + "type": "button", + "icon": "fa fa-eye", + "actionType": "dialog", + "dialog": { + "title": "查看", + "body": { + "type": "form", + "controls": [ + { + "type": "static", + "name": "engine", + "label": "Engine" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "browser", + "label": "Browser" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "platform", + "label": "Platform(s)" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "version", + "label": "Engine version" + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "grade", + "label": "CSS grade" + }, + { + "type": "divider" + }, + { + "type": "html", + "html": "

添加其他 Html 片段 需要支持变量替换（todo）.

" + } + ] + } + } + }, + { + "type": "button", + "icon": "fa fa-pencil", + "actionType": "dialog", + "dialog": { + "position": "left", + "size": "lg", + "title": "编辑", + "body": { + "type": "form", + "name": "sample-edit-form", + "api": "/api/sample/$id", + "controls": [ + { + "type": "text", + "name": "engine", + "label": "Engine", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "browser", + "label": "Browser", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "platform", + "label": "Platform(s)", + "required": true + }, + { + "type": "divider" + }, + { + "type": "text", + "name": "version", + "label": "Engine version" + }, + { + "type": "divider" + }, + { + "type": "select", + "name": "grade", + "label": "CSS grade", + "options": ["A", "B", "C", "D", "X"] + } + ] + } + } + }, + { + "type": "button", + "icon": "fa fa-times text-danger", + "actionType": "ajax", + "confirmText": "您确认要删除?", + "api": "delete:https://houtai.baidu.com/api/sample/$id" + } + ], + "toggled": true + } + ] + } + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| multiple | `boolean` | | 是否为多选。 | +| delimeter | `boolean` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `boolean` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `boolean` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | +| modalMode | `string` | `"dialog"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 | +| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 [CRUD](../crud) | +| embed | `boolean` | `false` | 是否使用内嵌模式 | diff --git a/docs/components/form/range.md b/docs/components/form/range.md new file mode 100755 index 00000000..c52d1601 --- /dev/null +++ b/docs/components/form/range.md @@ -0,0 +1,65 @@ +--- +title: Range 滑块 +description: +type: 0 +group: null +menuName: Range 范围 +icon: +order: 38 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "range", + "name": "range", + "label": "range" + } + ] +} +``` + +## 选择范围 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "range", + "name": "range", + "label": "range", + "multiple": true + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- | +| className | `string` | | css 类名 | +| min | `number` | | 最小值 | +| max | `number` | | 最大值 | +| step | `number` | | 步长 | +| multiple | `boolean` | `false` | 支持选择范围 | +| joinValuse | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交，开启`multiple`时有效 | +| delimiter | `string` | `,` | 分隔符 | +| unit | `string` | | 单位 | +| clearable | `boolean` | | 是否可清除 | +| showInput | `string` | | 是否显示输入框 | + + + + + + diff --git a/docs/components/form/rating.md b/docs/components/form/rating.md new file mode 100755 index 00000000..0ca9191f --- /dev/null +++ b/docs/components/form/rating.md @@ -0,0 +1,40 @@ +--- +title: Rating 评分 +description: +type: 0 +group: null +menuName: Rating 评分 +icon: +order: 37 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "rating", + "name": "rating", + "label": "评分" + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------- | --------- | ------- | ------------------ | +| half | `boolean` | `false` | 是否使用半星选择 | +| count | `number` | `5` | 共有多少星可供选择 | +| readOnly | `boolean` | `false` | 只读 | + + + + + + diff --git a/docs/components/form/repeat.md b/docs/components/form/repeat.md new file mode 100755 index 00000000..ae3f60b1 --- /dev/null +++ b/docs/components/form/repeat.md @@ -0,0 +1,38 @@ +--- +title: Repeat 重复频率选择器 +description: +type: 0 +group: null +menuName: Repeat 重复频率 +icon: +order: 39 +--- +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "repeat", + "name": "repeat", + "label": "重复频率" + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ | +| options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` | +| placeholder | `string` | `不重复` | 当不指定值时的说明。 | + + + + + diff --git a/docs/components/form/rich-text.md b/docs/components/form/rich-text.md new file mode 100755 index 00000000..9b1efd0f --- /dev/null +++ b/docs/components/form/rich-text.md @@ -0,0 +1,64 @@ +--- +title: Rich-Text 富文本编辑器 +description: +type: 0 +group: null +menuName: Rich-Text +icon: +order: 47 +--- + +## 基本用法 + +```schema:height="600" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "rich-text", + "name": "rich", + "label": "Rich Text" + } + ] +} +``` + +## 配置 buttons + +```js +[ + 'paragraphFormat', + 'quote', + 'color', + '|', + 'bold', + 'italic', + 'underline', + 'strikeThrough', + '|', + 'formatOL', + 'formatUL', + 'align', + '|', + 'insertLink', + 'insertImage', + 'insertTable', + '|', + 'undo', + 'redo', + 'html' +]; +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | +| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 | +| reciever | [API](../../types/api) | | 默认的图片保存 API | +| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` | +| options | `object` | | Object 类型，给富文本的配置信息。请参考 https://www.froala.com/wysiwyg-editor/docs/options | +| buttons | `Array` | `[ 'paragraphFormat', 'quote', 'color', ' | ', 'bold', 'italic', 'underline', 'strikeThrough', ' | ', 'formatOL', 'formatUL', 'align', ' | ', 'insertLink', 'insertImage', 'insertTable', ' | ', 'undo', 'redo', 'html' ]` | 精度，即小数点后几位 | diff --git a/docs/components/form/select.md b/docs/components/form/select.md new file mode 100755 index 00000000..f52821d8 --- /dev/null +++ b/docs/components/form/select.md @@ -0,0 +1,71 @@ +--- +title: Select 选择器 +description: +type: 0 +group: null +menuName: Select 选择器 +icon: +order: 48 +--- + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "select", + "type": "select", + "label": "选择框", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| autoComplete | [API](../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | +| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| checkAll | `boolean` | `false` | 是否支持全选 | +| checkAllLabel | `string` | `全选` | 全选的文字 | +| defaultCheckAll | `boolean` | `false` | 默认是否全选 | +| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | +| createBtnLabel | `string` | `"新增选项"` | [新增选项](./options#%E6%96%B0%E5%A2%9E%E9%80%89%E9%A1%B9) | +| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) | +| addApi | [API](../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) | +| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) | +| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) | +| editApi | [API](../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) | +| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) | +| deleteApi | [API](../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) | +| autoFill | `object` | | [自动填充](./options#%E8%87%AA%E5%8A%A8%E5%A1%AB%E5%85%85-autofill) | diff --git a/docs/components/form/service.md b/docs/components/form/service.md new file mode 100755 index 00000000..9981870f --- /dev/null +++ b/docs/components/form/service.md @@ -0,0 +1,171 @@ +--- +title: Service 功能容器 +description: +type: 0 +group: null +menuName: Service +icon: +order: 49 +--- + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "controls": [ + { + "type": "text", + "label": "时间", + "name": "date" + } + ] + } + ] +} +``` + +上例中我们在`text`表单项外，嵌套一层 service，用于初始化该表单项 + +> 一般初始化表单项是使用 form 的`initApi`配置，当你需要多个接口来初始化一个表单中的表单项时，可以考虑使用 service + +## 作为 FormItem 的不同点 + +除了支持非表单项时的[Service](../service)的功能以外。作为 FormItem 使用时最大的不同在于作为容器渲染器，他的孩子是优先用表单项还是非表单项。 + +比如放置一个 `{type: 'text'}`，是渲染一个文本输入框、还是一个文本展示？ + +两种应该都存在可能，所以作为表单项的 Service, 有两种用法，当把孩子节点放在 `controls` 里面时输出表单项，如果放在 `body` 底下时输出非表单项。 + +### 放在 body 属性下，输出纯展示类组件 + +```schema:height="200" scope="form-item" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "body": { + "type": "text", + "text": "现在是：${date}" + } +} +``` + +### 放在 controls 属性下，输出表单项 + +```schema:height="500" scope="form-item" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "controls": [ + { + "type": "text", + "label": "文本输入", + "name": "a" + }, + + { + "type": "date", + "label": "日期", + "name": "date", + "format": "YYYY-MM-DD" + } + ] +} +``` + +## 接口联动 + +Service 中的`api`和`schemaApi`都支持**接口联动**。 + +下面例子中，`数据模板`下拉框的值变化后，会触发 service 重新拉取 api 接口，从而更新数据源，变化表单项的值，更多用法查看 [接口联动](../../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。 + +```schema:height="300" scope="body" +{ + "title": "", + "type": "form", + "api": "https://houtai.baidu.com/api/mock/saveForm?waitSeconds=1", + "mode": "horizontal", + "controls": [ + { + "label": "数据模板", + "type": "select", + "name": "tpl", + "value": "tpl1", + "size": "sm", + "options": [ + { + "label": "模板1", + "value": "tpl1" + }, + { + "label": "模板2", + "value": "tpl2" + }, + { + "label": "模板3", + "value": "tpl3" + } + ], + "description": "修改下拉选择器查看效果" + }, + { + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/form/initData?tpl=${tpl}", + "controls": [ + { + "label": "名称", + "type": "text", + "name": "name" + }, + { + "label": "作者", + "type": "text", + "name": "author" + }, + { + "label": "请求时间", + "type": "datetime", + "name": "date" + } + ] + } + ], + "actions": [] +} +``` + +## 动态渲染表单项 + +默认 Service 可以通过配置`schemaApi` [动态渲染页面内容](../service#%E5%8A%A8%E6%80%81%E6%B8%B2%E6%9F%93%E9%A1%B5%E9%9D%A2)，但是如果想渲染表单项，请返回下面这种格式： + +```json +{ + "status": 0, + "msg": "", + "data": { + "controls": [ + { + "type": "text", + "name": "text", + "label": "文本输入" + } + ] + } +} +``` + +例如下例： + +```schema:height="400" scope="form-item" +{ + "type": "service", + "schemaApi": "https://houtai.baidu.com/api/mock2/service/schema?type=controls" +} +``` + +`schemaApi` 同样支持 []() diff --git a/docs/components/form/static.md b/docs/components/form/static.md new file mode 100755 index 00000000..58a333b2 --- /dev/null +++ b/docs/components/form/static.md @@ -0,0 +1,257 @@ +--- +title: Static 静态展示 +description: +type: 0 +group: null +menuName: Static 静态展示 +icon: +order: 52 +--- + +用来在表单中，展示静态数据 + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "name": "static", + "type": "static", + "label": "静态展示", + "value": "aaa" + } + ] +} +``` + +## 数据域变量映射 + +除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量 + +```schema:height="350" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "select", + "name": "select", + "label": "select", + "options": [ + { + "label":"A", + "value":"a" + }, + { + "label":"B", + "value":"b" + }, + { + "label":"C", + "value":"c" + } + ] + }, + { + "type": "static", + "name": "select", + "label": "选中的值是" + } + ] +} +``` + +## 展示其他组件 + +支持通过配置`type`为`static-xxx`的形式，展示其他 **非[表单项](./formitem)** 组件，例如： + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "static-json", + "name": "json", + "label": "静态展示JSON", + "value": { + "a": "aaa", + "b": "bbb" + } + } + ] +} +``` + +理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例： + +```schema:height="1500" scope="body" +{ + "type": "form", + "data": { + "id": 1, + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg" + } + ] + }, + "api": "/api/mock2/saveForm?waitSeconds=2", + "title": "表单项静态展示", + "mode": "horizontal", + "controls": [ + { + "type": "static", + "label": "文本", + "value": "文本" + }, + { + "type": "divider" + }, + { + "type": "static-tpl", + "label": "模板", + "tpl": "自己拼接 HTML 取变量 \\${id}: ${id}" + }, + { + "type": "divider" + }, + { + "type": "static-date", + "label": "日期", + "value": 1593327764 + }, + { + "type": "divider" + }, + { + "type": "static-datetime", + "label": "日期时间", + "value": 1593327764 + }, + { + "type": "divider" + }, + { + "type": "static-mapping", + "label": "映射", + "value": 2, + "map": { + "0": "一", + "1": "二", + "2": "三", + "3": "四", + "4": "五", + "*": "-" + } + }, + { + "type": "divider" + }, + { + "type": "static-progress", + "label": "进度", + "value": 66.66 + }, + { + "type": "divider" + }, + { + "type": "static-image", + "label": "图片", + "name": "image", + "thumbMode": "cover", + "thumbRatio": "4:3", + "title": "233", + "imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda", + "popOver": { + "title": "查看大图", + "body": "
" + } + }, + { + "type": "divider" + }, + { + "type": "static-image", + "label": "图片自带放大", + "name": "image", + "thumbMode": "cover", + "thumbRatio": "4:3", + "title": "233", + "imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda", + "enlargeAble": true, + "originalSrc": "${image}" + }, + { + "type": "static-images", + "label": "图片集", + "name": "images", + "thumbMode": "cover", + "thumbRatio": "4:3", + "enlargeAble": true, + "originalSrc": "${src}" + }, + { + "type": "divider" + }, + { + "type": "static-json", + "label": "JSON", + "value": { + "a": 1, + "b": 2, + "c": { + "d": 3 + } + } + }, + { + "type": "divider" + }, + { + "type": "static", + "label": "可复制", + "value": "文本", + "copyable": { + "content": "内容，支持变量 ${id}" + } + }, + { + "type": "divider" + }, + { + "type": "static", + "name": "text", + "label": "可快速编辑", + "value": "文本", + "quickEdit": true + } + ] +} +``` + +想要调整展示组件的配置，请查阅相应组件的文档。 + + + + + diff --git a/docs/components/form/subform.md b/docs/components/form/subform.md new file mode 100755 index 00000000..f9866e7b --- /dev/null +++ b/docs/components/form/subform.md @@ -0,0 +1,93 @@ +--- +title: SubForm 子表单 +description: +type: 0 +group: null +menuName: SubForm 子表单 +icon: +order: 50 +--- + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "type": "form", + "name": "form", + "label": "子Form", + "btnLabel": "设置子表单", + "form": { + "title": "配置子表单", + "controls": [ + { + "name": "a", + "label": "A", + "type": "text" + }, + + { + "name": "b", + "label": "B", + "type": "text" + } + ] + } + } + ] +} +``` + +## 多选模式 + +可以配置`"multiple": true`，实现多选模式 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "type": "form", + "name": "form2", + "label": "多选", + "multiple": true, + "maxLength": 3, + "btnLabel": "设置子表单", + "form": { + "title": "配置子表单", + "controls": [ + { + "name": "a", + "label": "A", + "type": "text" + }, + { + "name": "b", + "label": "B", + "type": "text" + } + ] + } + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------- | --------------------- | --------------------------- | ------------------------------------------------------ | +| multiple | `boolean` | `false` | 是否为多选模式 | +| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 | +| btnLabel | `string` | `"设置"` | 按钮默认名称 | +| minLength | `number` | `0` | 限制最小长度。 | +| maxLength | `number` | `0` | 限制最大长度。 | +| addButtonClassName | `string` | `btn-success btn-sm` | 新增按钮 CSS 类名 | +| editButtonClassName | `string` | `btn-info btn-addon btn-sm` | 修改按钮 CSS 类名 | +| form | [Form](../form/index) | | 子表单配置，同 [Form](../form/index) | diff --git a/docs/components/form/switch.md b/docs/components/form/switch.md new file mode 100755 index 00000000..e03d51bb --- /dev/null +++ b/docs/components/form/switch.md @@ -0,0 +1,81 @@ +--- +title: Switch 开关 +description: +type: 0 +group: null +menuName: Switch +icon: +order: 51 +--- +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "switch", + "type": "switch", + "label": "开关", + "option": "开关说明" + } + ] +} +``` + + +## 配置真假值 + +默认情况： +- 开关打开时，表单项值为：true +- 开关关闭时，表单项值为：false + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "name": "switch", + "type": "switch", + "label": "开关" + } + ] +} +``` + +如果你想调整这个值，可以配置`trueValue`和`falseValue` + +```schema:height="350" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "name": "switch", + "type": "switch", + "label": "开关", + "trueValue": 1, + "falseValue": 0 + } + ] +} +``` + +调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0` + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | -------- | --------- | -------- | +| option | `string` | | 选项说明 | +| trueValue | `any` | `true` | 标识真值 | +| falseValue | `any` | `"false"` | 标识假值 | + + + + + diff --git a/docs/components/form/table.md b/docs/components/form/table.md new file mode 100755 index 00000000..b792418c --- /dev/null +++ b/docs/components/form/table.md @@ -0,0 +1,251 @@ +--- +title: Table 表格 +description: +type: 0 +group: null +menuName: Table 表格 +icon: +order: 54 +--- + +## 基本用法 + +可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。 + +```schema:height="700" scope="body" +{ + "type": "form", + "debug": "true", + "data": { + "table": [ + { + "a": "a1", + "b": "b1" + }, + { + "a": "a2", + "b": "b2" + }, + { + "a": "a3", + "b": "b3" + } + ] + }, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type":"table", + "name":"table", + "columns":[ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ] + } + ] +} +``` + +我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据 + +## 可新增行 + +可以配置`addable`和`editable`指定可以新增且编辑行数据 + +```schema:height="700" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type":"table", + "name":"table", + "addable": true, + "editable": true, + "columns":[ + { + "name": "a", + "label": "A" + }, + { + "name": "b", + "label": "B" + } + ] + } + ] +} +``` + +### 按钮触发新增行 + +按钮上配置`"actionType": "add"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。 + +```schema:height="400" scope="body" +{ + "type": "form", + "data": { + "table": [ + { + "a": "a1", + "b": "b1" + }, + { + "a": "a2", + "b": "b2" + }, + { + "a": "a3", + "b": "b3" + } + ] + }, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "table", + "name": "table", + "label": "Table", + "columns": [ + { + "label": "A", + "name": "a" + }, + { + "label": "B", + "name": "b" + } + ] + }, + { + "type": "button", + "label": "Table新增一行", + "target": "table", + "actionType": "add" + } + ] +} +``` + +### 编辑行配置 + +还可以在列上配置`quickEdit`实现编辑配置，更多配置参考 [快速编辑](../crud#%E5%BF%AB%E9%80%9F%E7%BC%96%E8%BE%91) + +```schema:height="400" scope="body" +{ + "type": "form", + "data": { + "table": [ + { + "a": "a1", + "b": "b1" + }, + { + "a": "a2", + "b": "b2" + }, + { + "a": "a3", + "b": "b3" + } + ] + }, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "table", + "name": "table", + "label": "Table", + "columns": [ + { + "label": "A", + "name": "a", + "quickEdit": true + }, + { + "label": "B", + "name": "b", + "quickEdit": true + } + ] + } + ] +} +``` + +## 可拖拽 + +配置`"draggable": true`，实现可拖拽调整顺序 + +```schema:height="400" scope="body" +{ + "type": "form", + "data": { + "table": [ + { + "a": "a1", + "b": "b1" + }, + { + "a": "a2", + "b": "b2" + }, + { + "a": "a3", + "b": "b3" + } + ] + }, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "table", + "name": "table", + "label": "Table", + "draggable": true, + "columns": [ + { + "label": "A", + "name": "a" + }, + { + "label": "B", + "name": "b" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------------------- | ----------------------- | ---------------- | ---------------------------------------- | +| type | `string` | `"table"` | 指定为 Table 渲染器 | +| addable | `boolean` | `false` | 是否可增加一行 | +| editable | `boolean` | `false` | 是否可编辑 | +| removable | `boolean` | `false` | 是否可删除 | +| showAddBtn | `boolean` | `true` | 是否显示添加按钮 | +| addApi | [API](../../types/api) | - | 新增时提交的 API | +| updateApi | [API](../../types/api) | - | 修改时提交的 API | +| deleteApi | [API](../../types/api) | - | 删除时提交的 API | +| addBtnLabel | `string` | | 增加按钮名称 | +| addBtnIcon | `string` | `"fa fa-plus"` | 增加按钮图标 | +| updateBtnLabel | `string` | `""` | 更新按钮名称 | +| updateBtnIcon | `string` | `"fa fa-pencil"` | 更新按钮图标 | +| deleteBtnLabel | `string` | `""` | 删除按钮名称 | +| deleteBtnIcon | `string` | `"fa fa-minus"` | 删除按钮图标 | +| confirmBtnLabel | `string` | `""` | 确认编辑按钮名称 | +| confirmBtnIcon | `string` | `"fa fa-check"` | 确认编辑按钮图标 | +| cancelBtnLabel | `string` | `""` | 取消编辑按钮名称 | +| cancelBtnIcon | `string` | `"fa fa-times"` | 取消编辑按钮图标 | +| columns | `array` | [] | 列信息 | +| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 | +| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 | diff --git a/docs/components/form/tabs.md b/docs/components/form/tabs.md new file mode 100755 index 00000000..6367cb48 --- /dev/null +++ b/docs/components/form/tabs.md @@ -0,0 +1,71 @@ +--- +title: Tabs 选项卡 +description: +type: 0 +group: null +menuName: Tabs 选项卡 +icon: +order: 53 +--- + +有多组输入框时，也可以通过选项卡来分组。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "controls": [ + { + "type": "tabs", + "tabs": [ + { + "title": "基本配置", + "controls": [ + { + "name": "text1", + "type": "text", + "label": "文本1" + }, + + { + "name": "text2", + "type": "text", + "label": "文本2" + } + ] + }, + + { + "title": "其他配置", + "controls": [ + { + "name": "text3", + "type": "text", + "label": "文本3" + }, + + { + "name": "text4", + "type": "text", + "label": "文本4" + } + ] + } + ] +} + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | ------------------------------------ | ------ | ------------------- | +| tabs | `Array` | | tabs 内容 | +| toolbar | [SchemaNode](../../types/schemanode) | | tabs 中的工具栏 | +| toolbarClassName | `string` | | tabs 中工具栏的类名 | +| tabs[x].title | `string` | | Tab 标题 | +| tabs[x].body | [SchemaNode](../../types/schemanode) | | 内容容器 | +| tabs[x].controls | Array<[表单项](./formitem)> | | 表单项集合。 | diff --git a/docs/components/form/tag.md b/docs/components/form/tag.md new file mode 100755 index 00000000..d4f207f2 --- /dev/null +++ b/docs/components/form/tag.md @@ -0,0 +1,47 @@ +--- +title: Tag 标签选择器 +description: +type: 0 +group: null +menuName: Tag 标签选择器 +icon: +order: 55 +--- + +## 基本使用 + +```schema:height="350" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "tag", + "name": "tag", + "label": "标签", + "options": [ + "Aaron Rodgers", + "Tom Brady", + "Charlse Woodson", + "Aaron Jones" + ] + } + ] +} +``` + +## 属性表 + +除了支持 [普通表单项属性表](./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) | +| optionsTip | `Array`或`Array` | `"最近您使用的标签"` | 选项提示 | +| 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) | +| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 | +| resetValue | `string` | `""` | 删除后设置此配置项给定的值。 | diff --git a/docs/components/form/text.md b/docs/components/form/text.md new file mode 100755 index 00000000..e0ff0ed1 --- /dev/null +++ b/docs/components/form/text.md @@ -0,0 +1,151 @@ +--- +title: Text 输入框 +description: +type: 0 +group: null +menuName: Text 输入框 +icon: +order: 56 +--- + +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "text", + "type": "text", + "label": "text" + } + ] +} +``` + +## 不同类型 + +配置`type`可以支持不同格式的文本输入框 + +```schema:height="550" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "text", + "type": "text", + "label": "text" + }, + { + "type": "divider" + }, + { + "type": "url", + "name": "url", + "label": "链接" + }, + { + "type": "divider" + }, + { + "type": "email", + "name": "email", + "label": "邮箱" + }, + { + "type": "divider" + }, + { + "type": "password", + "name": "password", + "label": "密码" + } + ] +} +``` + +## 附加组件 + +可以配置`addOn`，附带附加组件 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "text", + "type": "text", + "label": "text", + "addOn": { + "type": "button", + "label": "搜索" + } + } + ] +} +``` + +## 选择器模式 + +配置`options`即可支持选择器模式。 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "text", + "type": "text", + "label": "text", + "options": [ + { + "label": "OptionA", + "value": "a" + }, + { + "label": "OptionB", + "value": "b" + }, + { + "label": "OptionC", + "value": "c" + }, + { + "label": "OptionD", + "value": "d" + } + ] + + } + ] +} +``` + +选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表 + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| autoComplete | `string`或 [API](../../types/api) | | [自动补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | +| multiple | `boolean` | | [是否多选](./options#%E5%A4%9A%E9%80%89-multiple) | +| delimeter | `string` | `,` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 | +| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 | +| addOn.label | `string` | | 文字说明 | +| addOn.xxx | `string` | | 其他参数请参考按钮文档 | +| trimContents | `boolean` | | 是否去除首尾空白文本。 | +| clearable | `boolean` | | 是否可清除 | +| resetValue | `string` | `""` | 清除后设置此配置项给定的值。 | diff --git a/docs/components/form/textarea.md b/docs/components/form/textarea.md new file mode 100755 index 00000000..021ac879 --- /dev/null +++ b/docs/components/form/textarea.md @@ -0,0 +1,40 @@ +--- +title: Textarea 多行文本输入框 +description: +type: 0 +group: null +menuName: Textarea 多行文本输入框 +icon: +order: 57 +--- +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "name": "textarea", + "type": "textarea", + "label": "多行文本" + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------ | --------- | ------ | ---------------------- | +| minRows | `number` | | 最小行数 | +| maxRows | `number` | | 最大行数 | +| trimContents | `boolean` | | 是否去除首尾空白文本。 | + + + + + + + diff --git a/docs/components/form/time.md b/docs/components/form/time.md new file mode 100755 index 00000000..74f4b4cc --- /dev/null +++ b/docs/components/form/time.md @@ -0,0 +1,159 @@ +--- +title: Time 时间 +description: +type: 0 +group: null +menuName: Time 时间 +icon: +order: 58 +--- +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间" + } + ] +} +``` + +## 显示格式 + +选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。 + +例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `HH时mm分`，即： + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间", + "inputFormat": "HH时mm分" + } + ] +} +``` + +调整时间，观察显示格式 + +## 值格式 + +选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间" + } + ] +} +``` + +如果你想要其他格式的日期值，，那么可以配置`format`参数用于调整表单项的值格式。 + +例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `HH:mm`，即： + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间", + "format": "HH:mm" + } + ] +} +``` + +调整时间，观察数据域中表单项值的变化 + +## 默认值 + +可以设置`value`属性，设置日期选择器的默认值 + +### 基本配置 + +配置符合当前 [值格式](./date#%E5%80%BC%E6%A0%BC%E5%BC%8F) 的默认值。 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间", + "value": "1591862818" + } + ] +} +``` + +### 相对值 + +`value` 还支持类似像`"+1hours"`这样的相对值，更加便捷的配置默认值 + +```schema:height="400" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "time", + "name": "time", + "label": "时间", + "value": "+1hours" + } + ] +} +``` + +上例中配置了`"value": "+1hours"`，默认就会选中一小时后。 + +支持的相对值关键字有： + +- `now`: 当前时间 +- `hour`或`hours`: 时 +- `minute`或`minutes`: 分 +- `second`或`seconds`: 秒 + +## 属性表 + +除了支持 [普通表单项属性表](./formitem#%E5%B1%9E%E6%80%A7%E8%A1%A8) 中的配置以外，还支持下面一些配置 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- | +| value | `string` | | [默认值](./date#%E9%BB%98%E8%AE%A4%E5%80%BC) | +| format | `string` | `X` | 时间选择器值格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 [moment](http://momentjs.com/) | +| placeholder | `string` | `"请选择时间"` | 占位文本 | +| clearable | `boolean` | `true` | 是否可清除 | +| timeConstrainst | `object` | `true` | 请参考： [react-datetime](https://github.com/YouCanBookMe/react-datetime) | + + + + + diff --git a/docs/components/form/tree.md b/docs/components/form/tree.md new file mode 100755 index 00000000..123e27ac --- /dev/null +++ b/docs/components/form/tree.md @@ -0,0 +1,497 @@ +--- +title: Tree 树形选择框 +description: +type: 0 +group: null +menuName: Tree 树形选择框 +icon: +order: 59 +--- + +## 基本使用 + +配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree", + "label": "Tree", + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +## 选择器样式 + +配置`"type": "tree-select"`可以实现选择器样式 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +## 选中父节点是否自动选中子节点 + +默认选中父节点会自动选中子节点，可以设置`"cascade": true`，不自动选中子节点 + +```schema:height="800" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree1", + "label": "默认自动选中子节点", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "type": "tree", + "name": "tree2", + "label": "不自动选中子节点", + "multiple": true, + "cascade": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 选中父节点，值是否包含子节点 + +默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`"withChildren": true` + +```schema:height="800" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree1", + "label": "默认不自动带上子节点的值", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "type": "tree", + "name": "tree2", + "label": "自动带上子节点的值", + "multiple": true, + "withChildren": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +也可以设置`onlyChildren`，实现只包含子节点的值 + +```schema:height="800" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree1", + "label": "默认不自动带上子节点的值", + "multiple": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + }, + { + "type": "divider" + }, + { + "type": "tree", + "name": "tree2", + "label": "只包含子节点的值", + "multiple": true, + "onlyChildren": true, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 默认展开 + +默认是展开所有子节点的，如果不想默认展开，则配置`"initiallyOpen": false` + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree1", + "label": "默认不自动带上子节点的值", + "initiallyOpen": false, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2" + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数。 + +下例中设置`"unfoldedLevel": 1`，默认展开第 1 层 + +```schema:height="500" scope="body" +{ + "type": "form", + "debug": true, + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree", + "name": "tree1", + "label": "默认不自动带上子节点的值", + "initiallyOpen": false, + "unfoldedLevel": 1, + "options": [ + { + "label": "A", + "value": "a" + }, + { + "label": "B", + "value": "b", + "children": [ + { + "label": "B-1", + "value": "b-1" + }, + { + "label": "B-2", + "value": "b-2", + "children": [ + { + "label": "B-2-1", + "value": "b-2-1" + }, + { + "label": "B-2-2", + "value": "b-2-2" + }, + { + "label": "B-2-3", + "value": "b-2-3" + } + ] + }, + { + "label": "B-3", + "value": "b-3" + } + ] + }, + { + "label": "C", + "value": "c" + } + ] + } + ] +} +``` + +## 属性表 + +当做选择器表单项使用时，除了支持 [普通表单项属性表](./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) | +| autoComplete | [API](../../../types/api) | | [自动提示补全](./options#%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8-autocomplete) | +| multiple | `boolean` | `false` | 是否多选 | +| delimeter | `string` | `false` | [拼接符](./options#%E6%8B%BC%E6%8E%A5%E7%AC%A6-delimiter) | +| labelField | `string` | `"label"` | [选项标签字段](./options#%E9%80%89%E9%A1%B9%E6%A0%87%E7%AD%BE%E5%AD%97%E6%AE%B5-labelfield) | +| valueField | `string` | `"value"` | [选项值字段](./options#%E9%80%89%E9%A1%B9%E5%80%BC%E5%AD%97%E6%AE%B5-valuefield) | +| 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) | +| creatable | `boolean` | `false` | [新增选项](./options#%E5%89%8D%E7%AB%AF%E6%96%B0%E5%A2%9E-creatable) | +| addControls | Array<[表单项](./formitem)> | | [自定义新增表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%96%B0%E5%A2%9E%E8%A1%A8%E5%8D%95%E9%A1%B9-addcontrols) | +| addApi | [API](../../types/api) | | [配置新增选项接口](./options#%E9%85%8D%E7%BD%AE%E6%96%B0%E5%A2%9E%E6%8E%A5%E5%8F%A3-addapi) | +| editable | `boolean` | `false` | [编辑选项](./options#%E5%89%8D%E7%AB%AF%E7%BC%96%E8%BE%91-editable) | +| editControls | Array<[表单项](./formitem)> | | [自定义编辑表单项](./options#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BC%96%E8%BE%91%E8%A1%A8%E5%8D%95%E9%A1%B9-editcontrols) | +| editApi | [API](../../types/api) | | [配置编辑选项接口](./options#%E9%85%8D%E7%BD%AE%E7%BC%96%E8%BE%91%E6%8E%A5%E5%8F%A3-editapi) | +| removable | `boolean` | `false` | [删除选项](./options#%E5%88%A0%E9%99%A4%E9%80%89%E9%A1%B9) | +| deleteApi | [API](../../types/api) | | [配置删除选项接口](./options#%E9%85%8D%E7%BD%AE%E5%88%A0%E9%99%A4%E6%8E%A5%E5%8F%A3-deleteapi) | +| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` | +| rootLabel | `boolean` | `"顶级"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 | +| showIcon | `boolean` | `true` | 是否显示图标 | +| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 | +| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 | +| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 | +| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 | +| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 | +| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 | +| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 | +| rootCreateTip | `string` | `"添加一级节点"` | 创建顶级节点的悬浮提示 | +| minLength | `number` | | 最少选中的节点数 | +| maxLength | `number` | | 最多选中的节点数 | diff --git a/docs/components/form/treeselect.md b/docs/components/form/treeselect.md new file mode 100755 index 00000000..6f459ca7 --- /dev/null +++ b/docs/components/form/treeselect.md @@ -0,0 +1,55 @@ +--- +title: TreeSelect 树形选择器 +description: +type: 0 +group: null +menuName: TreeSelect 树形选择器 +icon: +order: 60 +--- + +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "tree-select", + "name": "tree", + "label": "Tree", + "options": [ + { + "label": "Folder A", + "value": 1, + "children": [ + { + "label": "file A", + "value": 2 + }, + { + "label": "file B", + "value": 3 + } + ] + }, + { + "label": "file C", + "value": 4 + }, + { + "label": "file D", + "value": 5 + } + ] + } + ] +} +``` + +更多用法，见 [Tree](./tree) + + + + diff --git a/docs/components/grid.md b/docs/components/grid.md new file mode 100755 index 00000000..80c85125 --- /dev/null +++ b/docs/components/grid.md @@ -0,0 +1,77 @@ +--- +title: Grid 网格布局 +description: +type: 0 +group: ⚙ 组件 +menuName: Grid 格线组件 +icon: +order: 46 +--- + +## 基本用法 + +```schema:height="300" scope="body" +[ + { + "type": "grid", + "className": "b-a bg-dark lter", + "columns": [ + { + "type": "plain", + "text": "md: 3", + "md": 3, + "className": "b-r" + }, + + { + "type": "plain", + "text": "md: 9", + "md": 9 + } + ] + }, + + { + "type": "grid", + "className": "b-a m-t bg-dark lter", + "columns": [ + { + "type": "plain", + "text": "mdOffset: 3", + "mdOffset": 3 + } + ] + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------- | --------------------------------- | -------- | ----------------------- | +| type | `string` | `"grid"` | 指定为 Grid 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| columns | `Array` | | 列集合 | +| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 | +| columns[x].xs | `int` | | 宽度占比： 1 - 12 | +| columns[x].xsHidden | `boolean` | | 是否隐藏 | +| columns[x].xsOffset | `int` | | 偏移量 1 - 12 | +| columns[x].xsPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].xsPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].sm | `int` | | 宽度占比： 1 - 12 | +| columns[x].smHidden | `boolean` | | 是否隐藏 | +| columns[x].smOffset | `int` | | 偏移量 1 - 12 | +| columns[x].smPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].smPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].md | `int` | | 宽度占比： 1 - 12 | +| columns[x].mdHidden | `boolean` | | 是否隐藏 | +| columns[x].mdOffset | `int` | | 偏移量 1 - 12 | +| columns[x].mdPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].mdPush | `int` | | 靠右的距离占比： 1 - 12 | +| columns[x].lg | `int` | | 宽度占比： 1 - 12 | +| columns[x].lgHidden | `boolean` | | 是否隐藏 | +| columns[x].lgOffset | `int` | | 偏移量 1 - 12 | +| columns[x].lgPull | `int` | | 靠左的距离占比：1 - 12 | +| columns[x].lgPush | `int` | | 靠右的距离占比： 1 - 12 | + +更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props) diff --git a/docs/components/hbox.md b/docs/components/hbox.md new file mode 100755 index 00000000..d7842a2c --- /dev/null +++ b/docs/components/hbox.md @@ -0,0 +1,52 @@ +--- +title: HBox 布局 +description: +type: 0 +group: ⚙ 组件 +menuName: HBox +icon: +order: 48 +--- + +## 基本用法 + +```schema:height="300" scope="body" +[ + { + "type": "hbox", + "className": "b-a bg-dark lter", + "columns": [ + { + "type": "plain", + "text": "Col A", + "columnClassName": "wrapper-xs b-r" + }, + + "Col B" + ] + }, + + { + "type": "hbox", + "className": "b-a m-t bg-dark lter", + "columns": [ + { + "type": "plain", + "text": "w-md", + "columnClassName": "w-md wrapper-xs bg-primary b-r" + }, + "..." + ] + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------------------- | --------------------------------- | -------------- | -------------------- | +| type | `string` | `"hbox"` | 指定为 HBox 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| columns | `Array` | | 列集合 | +| columns[x] | [SchemaNode](../types/schemanode) | | 成员可以是其他渲染器 | +| columns[x].columnClassName | `string` | `"wrapper-xs"` | 列上类名 | diff --git a/docs/components/html.md b/docs/components/html.md new file mode 100755 index 00000000..f4c4e723 --- /dev/null +++ b/docs/components/html.md @@ -0,0 +1,30 @@ +--- +title: Html +description: +type: 0 +group: ⚙ 组件 +menuName: Html +icon: +order: 49 +--- + +## 基本用法 + +渲染一段 HTML + +```schema:height="200" +{ + "body": { + "type": "html", + "html": "支持 Html" + } +} +``` + +> 当需要获取数据域中变量时，使用 [Tpl](./tpl) 。 + + + + + + diff --git a/docs/components/icon.md b/docs/components/icon.md new file mode 100755 index 00000000..2b4d1244 --- /dev/null +++ b/docs/components/icon.md @@ -0,0 +1,33 @@ +--- +title: Icon 图标 +description: +type: 0 +group: ⚙ 组件 +menuName: Icon +icon: +order: 50 +--- +## 基本使用 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "icon", + "icon": "cloud" + } +} +``` + + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | -------- | ------ | ------------------------------ | +| type | `string` | `icon` | 指定组件类型 | +| className | `string` | | 外层 CSS 类名 | +| icon | `string` | | icon 名，只支持 fontawesome v4 | + + + + + + diff --git a/docs/components/iframe.md b/docs/components/iframe.md new file mode 100755 index 00000000..eb2cdb17 --- /dev/null +++ b/docs/components/iframe.md @@ -0,0 +1,34 @@ +--- +title: iFrame +description: +type: 0 +group: ⚙ 组件 +menuName: iFrame +icon: +order: 51 +--- +## 基本使用 + +内嵌外部站点，可用 iframe 来实现。 + +```schema:height="300" scope="body" +{ + "type": "iframe", + "src": "https://www.baidu.com" +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ---------- | -------------------- | +| type | `string` | `"iframe"` | 指定为 iFrame 渲染器 | +| className | `string` | | iFrame 的类名 | +| frameBorder | `Array` | | frameBorder | +| style | `object` | | 样式 | +| src | `string` | | iframe地址 | + + + + + diff --git a/docs/components/image.md b/docs/components/image.md new file mode 100755 index 00000000..51fdc796 --- /dev/null +++ b/docs/components/image.md @@ -0,0 +1,248 @@ +--- +title: Image 图片 +description: +type: 0 +group: ⚙ 组件 +menuName: Image 图片 +icon: +order: 52 +--- +## 基本使用 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + } +} +``` + +也可以配置`value`属性 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "image", + "value": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + } +} +``` + +## 配置标题和说明 + +```schema:height="220" +{ + "type": "page", + "body": { + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "这是标题", + "imageCaption": "这是一段说明" + } +} +``` + +## 配置缩略图 + +### 显示模式 + +```schema:height="800" scope="body" +{ + "type": "form", + "mode": "horizontal", + "data": { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + }, + "controls": [ + { + "type": "static-image", + "name": "image", + "label": "宽度占满", + "thumbMode": "w-full" + }, + { + "type": "static-image", + "name": "image", + "label": "高度占满", + "thumbMode": "h-full" + }, + { + "type": "static-image", + "name": "image", + "label": "颜色", + "label": "默认", + "thumbMode": "contain" + }, + { + "type": "static-image", + "name": "image", + "label": "覆盖", + "thumbMode": "cover" + } + ] +} +``` + +### 显示比例 + +```schema:height="600" scope="body" +{ + "type": "form", + "mode": "horizontal", + "data": { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + }, + "controls": [ + { + "type": "static-image", + "name": "image", + "label": "1比1", + "thumbRatio": "1:1" + }, + { + "type": "static-image", + "name": "image", + "label": "4比3", + "thumbRatio": "4:3" + }, + { + "type": "static-image", + "name": "image", + "label": "颜色", + "label": "16比9", + "thumbRatio": "16:9" + } + ] +} +``` + +## 放大功能 + +配置`"enlargeAble": true`，鼠标移动到图片上会显示可点击图标，点击可放大展示 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "enlargeAble": true + } +} +``` + +可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "originalSrc": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "enlargeAble": true + } +} +``` + +`enlargeTitle`和`enlargeCaption`可以配置放大预览中的标题和描述 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "image", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "originalSrc": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "enlargeAble": true, + "enlargeTitle": "这是一个标题", + "enlargeCaption": "这是一段描述" + } +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + }, + { + "id": "2", + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + }, + { + "id": "3", + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "image", + "label": "图片", + "type": "image" + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80" + }, + "controls": [ + { + "type": "static-image", + "name": "image", + "label": "颜色" + } + ] +} +``` + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------- | --------- | --------- | -------------------------------------------------------------------------------------- | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | +| className | `string` | | 外层 CSS 类名 | +| imageClassName | `string` | | 图片 CSS 类名 | +| title | `string` | | 标题 | +| imageCaption | `string` | | 描述 | +| placeholder | `string` | | 占位文本 | +| defaultImage | `string` | | 默认显示的图片地址 | +| src | `string` | | 缩略图地址 | +| originalSrc | `string` | | 原图地址 | +| enlargeAble | `boolean` | | 支持放大预览 | +| enlargeTitle | `string` | | 放大预览的标题 | +| enlargeCaption | `string` | | 放大预览的描述 | +| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` | +| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` | + + + + + + diff --git a/docs/components/images.md b/docs/components/images.md new file mode 100755 index 00000000..d3811182 --- /dev/null +++ b/docs/components/images.md @@ -0,0 +1,427 @@ +--- +title: Images 图片集 +description: +type: 0 +group: ⚙ 组件 +menuName: Images 图片集合 +icon: +order: 53 +--- + +图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。 + +## 基本用法 + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + }, + "body": { + "type": "images", + "source": "${images}" + } +} +``` + +也可以直接指定`value`字段： + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "images", + "value": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + } +} +``` + +## 图片集值是对象数组 + +除了支持纯文本数组以外，也支持对象数组， + +### 配置预览图地址 + +需要设置对象中预览图地址的`key`值为`image` + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa1", + "b": "bbb1" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa2", + "b": "bbb2" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa3", + "b": "bbb3" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa4", + "b": "bbb4" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa5", + "b": "bbb5" + } + ] + }, + "body": { + "type": "images", + "source": "${images}" + } +} +``` + +如果`key`值不是`image`，也可以在 **images组件** 上，通过配置`src`，使用数据映射，来获取图片地址 + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa1", + "b": "bbb1" + }, + { + "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa2", + "b": "bbb2" + }, + { + "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa3", + "b": "bbb3" + }, + { + "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa4", + "b": "bbb4" + }, + { + "img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "a": "aaa5", + "b": "bbb5" + } + ] + }, + "body": { + "type": "images", + "source": "${images}", + "src": "${img}" + } +} +``` + +### 配置原图地址 + +需要设置对象中原图地址的`key`值为`src` + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa1", + "b": "bbb1" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa2", + "b": "bbb2" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa3", + "b": "bbb3" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa4", + "b": "bbb4" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa5", + "b": "bbb5" + } + ] + }, + "body": { + "type": "images", + "source": "${images}", + "enlargeAble": true + } +} +``` + +如果原图数据的`key`值不是`src`，也可以在 **images组件** 上，通过配置`originalSrc`，使用数据映射，来获取原图片地址 + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa1", + "b": "bbb1" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa2", + "b": "bbb2" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa3", + "b": "bbb3" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa4", + "b": "bbb4" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg", + "a": "aaa5", + "b": "bbb5" + } + ] + }, + "body": { + "type": "images", + "source": "${images}", + "originalSrc": "${source}", + "enlargeAble": true + } +} +``` + +### 配置标题和说明 + +设置对象中标题的`key`值为`title`，说明的`key`为`description`或`caption`。 + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片1", + "description": "图片1的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片2", + "description": "图片2的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片3", + "description": "图片3的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片4", + "description": "图片4的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片5", + "description": "图片5的描述" + } + ] + }, + "body": { + "type": "images", + "source": "${images}" + } +} +``` + +## 配置放大预览 + +在 **images组件** 上，配置`enlargeAble`，支持放大预览 + +```schema:height="200" +{ + "type": "page", + "data": { + "images": [ + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片1", + "description": "图片1的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片2", + "description": "图片2的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片3", + "description": "图片3的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片4", + "description": "图片4的描述" + }, + { + "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "title": "图片5", + "description": "图片5的描述" + } + ] + }, + "body": { + "type": "images", + "source": "${images}", + "enlargeAble": true + } +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "images": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + }, + { + "id": "2", + "images": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + }, + { + "id": "3", + "images": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "images", + "label": "颜色", + "type": "images" + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "images": [ + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80", + "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80" + ] + }, + "controls": [ + { + "type": "static-images", + "name": "images", + "label": "图片集" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- | +| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`"images"`；在 Form 中用作静态展示，为`"static-images"` | +| className | `string` | | 外层 CSS 类名 | +| defaultImage | `string` | | 默认展示图片 | +| value | `string`或`Array`或`Array` | | 图片数组 | +| source | `string` | | 数据源 | +| delimiter | `string` | `,` | 分隔符，当value为字符串时，用该值进行分隔拆分 | +| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 | +| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 | +| enlargeAble | `boolean` | | 支持放大预览 | +| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` | +| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` | + + + + diff --git a/docs/components/json.md b/docs/components/json.md new file mode 100755 index 00000000..6e30cdd7 --- /dev/null +++ b/docs/components/json.md @@ -0,0 +1,100 @@ +--- +title: Json +description: +type: 0 +group: ⚙ 组件 +menuName: Json +icon: +order: 54 +--- +JSON 展示组件 + +## 基本用法 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "json", + "value": { + "a": "a", + "b": "b", + "c": { + "d": "d" + } + } + } +} +``` + +## 主题 + +可配置`jsonTheme`，指定显示主题，可选`twilight`和`eighties`，默认为`twilight`。 + +```schema:height="300" scope="body" +[ +{ + "type": "json", + "value": { + "a": "a", + "b": "b", + "c": { + "d": "d" + } + } +}, +{ + "type": "divider" +}, +{ + "type": "json", + "jsonTheme": "eighties", + "value": { + "a": "a", + "b": "b", + "c": { + "d": "d" + } + } +} +] +``` + + +## 配置默认展开层级 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "json", + "levelExpand": 0, + "value": { + "a": "a", + "b": "b", + "c": { + "d": "d" + } + } + } +} +``` + +如上，`levelExpand`配置为`0`，则默认不展开。 + + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ---------- | ------------------------------------------------------------------------------------ | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"json"`；在 Form 中用作静态展示，为`"static-json"` | +| className | `string` | | 外层 CSS 类名 | +| placeholder | `string` | `-` | 占位文本 | +| levelExpand | `number` | `1` | 默认展开的层级 | +| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` | + + + + + + diff --git a/docs/components/link.md b/docs/components/link.md new file mode 100755 index 00000000..3495443b --- /dev/null +++ b/docs/components/link.md @@ -0,0 +1,51 @@ +--- +title: Link 链接 +description: +type: 0 +group: ⚙ 组件 +menuName: Link +icon: +order: 55 +--- +## 基本用法 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "link", + "href": "https://www.baidu.com", + "body": "百度一下，你就知道" + } +} +``` + +## 新标签页打开 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "link", + "href": "https://www.baidu.com", + "body": "百度一下，你就知道", + "blank": true + } +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"link"`；在 Form 中用作静态展示，为`"static-link"` | +| body | `string` | | 标签内文本 | +| href | `string` | | 链接地址 | +| blank | `boolean` | | 是否在新标签页打开 | +| htmlTarget | `string` | | a标签的target | + + + + + + diff --git a/docs/components/list.md b/docs/components/list.md new file mode 100755 index 00000000..78b5991f --- /dev/null +++ b/docs/components/list.md @@ -0,0 +1,97 @@ +--- +title: List 列表 +description: +type: 0 +group: ⚙ 组件 +menuName: List +icon: +order: 56 +--- + +列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。 + +## 基本用法 + +```schema:height="400" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "body": [ + { + "type": "panel", + "title": "简单 List 示例", + "body": { + "type": "list", + "source": "$rows", + "listItem": { + "body": [ + { + "type": "hbox", + "columns": [ + { + "label": "Engine", + "name": "engine" + }, + + { + "name": "version", + "label": "Version" + } + ] + } + ], + "actions": [ + { + "type": "button", + "level": "link", + "label": "查看详情", + "actionType": "dialog", + "dialog": { + "title": "查看详情", + "body": { + "type": "form", + "controls": [ + { + "label": "Engine", + "name": "engine", + "type": "static" + }, + { + "name": "version", + "label": "Version", + "type": "static" + } + ] + } + } + } + ] + } + } + } + ] +} +``` + +或者你也可以使用 CRUD 的 [list 模式](./crud#list-%E5%88%97%E8%A1%A8%E6%A8%A1%E5%BC%8F) + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------------ | ---------------------------- | --------------------- | -------------------------------------------------------------------- | +| type | `string` | | `"list"` 指定为列表展示。 | +| title | `string` | | 标题 | +| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持[数据映射](../concepts/data-mapping) | +| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 | +| className | `string` | | 外层 CSS 类名 | +| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 | +| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 | +| listItem | `Array` | | 配置单条信息 | +| listItem.title | [模板](../concepts/template) | | 标题 | +| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 | +| listItem.subTitle | [模板](../concepts/template) | | 副标题 | +| listItem.avatar | [模板](../concepts/template) | | 图片地址 | +| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 | +| listItem.desc | [模板](../concepts/template) | | 描述 | +| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 | +| listItem.actions | Array<[Action](./action)> | | 按钮区域 | diff --git a/docs/components/mapping.md b/docs/components/mapping.md new file mode 100755 index 00000000..1af7db7b --- /dev/null +++ b/docs/components/mapping.md @@ -0,0 +1,133 @@ +--- +title: Mapping 映射 +description: +type: 0 +group: ⚙ 组件 +menuName: Mapping 映射 +icon: +order: 57 +--- +## 基本用法 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "mapping", + "value": "1", + "map": { + "1": "第一", + "2": "第二", + "3": "第三", + "*": "其他" + } + } +} +``` + +## 渲染 HTML + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "mapping", + "value": "2", + "map": { + "1": "漂亮", + "2": "开心", + "3": "惊吓", + "4": "紧张", + "*": "其他：${type}" + } + } +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "type": "1" + }, + { + "id": "2", + "type": "2" + }, + { + "id": "3", + "type": "3" + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "type", + "label": "映射", + "type": "mapping", + "map": { + "1": "漂亮", + "2": "开心", + "3": "惊吓", + "4": "紧张", + "*": "其他：${type}" + } + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "type": "2" + }, + "controls": [ + { + "type": "static-mapping", + "name": "type", + "label": "映射", + "map": { + "1": "漂亮", + "2": "开心", + "3": "惊吓", + "4": "紧张", + "*": "其他：${type}" + } + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ------ | -------------------------------------------------------------------------------------- | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | +| className | `string` | | 外层 CSS 类名 | +| placeholder | `string` | | 占位文本 | +| map | `object` | | 映射配置 | + + + + + diff --git a/docs/components/nav.md b/docs/components/nav.md new file mode 100755 index 00000000..489b7e74 --- /dev/null +++ b/docs/components/nav.md @@ -0,0 +1,75 @@ +--- +title: Nav 导航 +description: +type: 0 +group: ⚙ 组件 +menuName: Nav +icon: +order: 58 +--- + +用于展示链接导航 + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "nav", + "stacked": true, + "className": "w-md", + "links": [ + { + "label": "Nav 1", + "to": "/docs/index", + "icon": "fa fa-user", + "active": true + }, + { + "label": "Nav 2", + "to": "/docs/api" + }, + { + "label": "Nav 3", + "to": "/docs/renderers" + } + ] +} +``` + +## 横向摆放 + +```schema:height="300" scope="body" +{ + "type": "nav", + "stacked": false, + "links": [ + { + "label": "Nav 1", + "to": "/docs/index", + "icon": "fa fa-user" + }, + { + "label": "Nav 2", + "to": "/docs/api" + }, + { + "label": "Nav 3", + "to": "/docs/renderers" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------- | -------------------------------- | ------- | -------------------------------------- | +| type | `string` | `"nav"` | 指定为 Nav 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 | +| links | `Array` | | 链接集合 | +| links[x].label | `string` | | 名称 | +| links[x].to | [模板](../concepts/template) | | 链接地址 | +| links[x].icon | `string` | | 图标 | +| links[x].active | `boolean` | | 是否高亮 | +| links[x].activeOn | [表达式](../concepts/expression) | | 是否高亮的条件，留空将自动分析链接地址 | diff --git a/docs/components/page.md b/docs/components/page.md new file mode 100755 index 00000000..23e4b820 --- /dev/null +++ b/docs/components/page.md @@ -0,0 +1,150 @@ +--- +title: Page 页面 +description: +type: 0 +group: ⚙ 组件 +menuName: Page 页面 +icon: +order: 23 +--- + +Page 组件是 amis 页面 JSON 配置中，**唯一的** 顶级容器组件，是整个页面配置的入口组件。 + +## 基本用法 + +我们这里在内容区中简单渲染一段文字。 + +```schema:height="200" +{ + "type": "page", + "body": "Hello World!" +} +``` + +## 渲染组件 + +内容区同样可以渲染各种组件，这里我们渲染一个表单。 + +```schema:height="300" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + } + ] +} +``` + +## 在其他区域渲染组件 + +Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**侧边栏（`aside`）** 和 **工具栏（`toolbar`）部分**，你可以在这些区域配置你想要的组件和内容。 + +```schema:height="300" +{ + "type": "page", + "aside": [ + { + "type": "tpl", + "tpl": "这是侧边栏部分" + } + ], + "toolbar": [ + { + "type": "tpl", + "tpl": "这是工具栏部分" + } + ], + "body": [ + { + "type": "tpl", + "tpl": "这是内容区" + } + ] +} +``` + +> 不同区域都是`Page`的子节点，也就是说都可以使用`Page`下数据作用域。 + +## 页面初始化请求 + +通过配置`initApi`，可以在初始化页面时请求所配置的接口。 + +```schema:height="200" +{ + "type": "page", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "body": [ + { + "type": "tpl", + "tpl": "当前时间是：${date}" + } + ] +} +``` + +具体 API 规范查看 [API 文档](../types/api)。 + +## 轮训初始化接口 + +想要在页面渲染后，轮训请求初始化接口，步骤如下： + +1. 配置 initApi； +2. 配置 interval：单位为 ms，最低值 3000，低于该值按 3000 处理。 + +```schema:height="200" +{ + "type": "page", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "interval": 3000, + "body": [ + { + "type": "tpl", + "tpl": "当前时间是：${date}" + } + ] +} +``` + +如果希望在满足某个条件的情况下停止轮训，配置`stopAutoRefreshWhen`表达式。 + +```schema:height="200" +{ + "type": "page", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "stopAutoRefreshWhen": "data.time % 5", // 当时间戳能被5整除时，停止轮训 + "interval": 3000, + "body": [ + { + "type": "tpl", + "tpl": "当前时间戳是：${date}" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------- | --------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- | +| type | `string` | `"page"` | 指定为 Page 组件 | +| title | [SchemaNode](../types/schemanode) | | 页面标题 | +| subTitle | [SchemaNode](../types/schemanode) | | 页面副标题 | +| remark | [Remark](./remark) | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 | +| aside | [SchemaNode](../types/schemanode) | | 往页面的边栏区域加内容 | +| toolbar | [SchemaNode](../types/schemanode) | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 | +| body | [SchemaNode](../types/schemanode) | | 往页面的内容区域加内容 | +| className | `string` | | 外层 dom 类名 | +| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 | +| bodyClassName | `string` | `wrapper` | Body dom 类名 | +| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 | +| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 | +| initApi | [API](../types/api) | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 | +| initFetch | `boolean` | `true` | 是否起始拉取 initApi | +| initFetchOn | [表达式](../concepts/expression) | | 是否起始拉取 initApi, 通过表达式配置 | +| interval | `number` | `3000` | 刷新时间(最低 3000) | +| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 | +| stopAutoRefreshWhen | [表达式](../concepts/expression) | `""` | 通过表达式来配置停止刷新的条件 | diff --git a/docs/components/panel.md b/docs/components/panel.md new file mode 100755 index 00000000..e1f932fb --- /dev/null +++ b/docs/components/panel.md @@ -0,0 +1,105 @@ +--- +title: Panel 面板 +description: +type: 0 +group: ⚙ 组件 +menuName: Panel +icon: +order: 59 +--- + +可以把相关信息以面板的形式展示到一块。 + +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "panel", + "title": "面板标题", + "body": "面板内容" +} +``` + +## 底部配置按钮 + +可以通过配置`actions`数组，实现渲染底部按钮栏 + +```schema:height="200" scope="body" +{ + "type": "panel", + "title": "面板标题", + "body": "面板内容", + "actions": [ + { + "type": "button", + "label": "按钮 1", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + }, + + { + "type": "button", + "label": "按钮 2", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + } + ] +} +``` + +## 固定底部 + +有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`"affixFooter": true`，将底部部分贴在浏览器底部展示。 + +```schema:height="200" scope="body" +{ + "type": "panel", + "title": "面板标题", + "body": "面板内容", + "affixFooter": true, + "actions": [ + { + "type": "button", + "label": "按钮 1", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + }, + + { + "type": "button", + "label": "按钮 2", + "actionType": "dialog", + "dialog": { + "title": "提示", + "body": "对，你刚点击了！" + } + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------------------------- | -------------------------------------- | ------------------- | +| type | `string` | `"panel"` | 指定为 Panel 渲染器 | +| className | `string` | `"panel-default"` | 外层 Dom 的类名 | +| headerClassName | `string` | `"panel-heading"` | header 区域的类名 | +| footerClassName | `string` | `"panel-footer bg-light lter wrapper"` | footer 区域的类名 | +| actionsClassName | `string` | `"panel-footer"` | actions 区域的类名 | +| bodyClassName | `string` | `"panel-body"` | body 区域的类名 | +| title | [SchemaNode](../types/schemanode) | | 标题 | +| header | [SchemaNode](../types/schemanode) | | 头部容器 | +| body | [SchemaNode](../types/schemanode) | | 内容容器 | +| footer | [SchemaNode](../types/schemanode) | | 底部容器 | +| affixFooter | `boolean` | | 是否固定底部容器 | +| actions | Array<[Action](./action)> | | 按钮区域 | diff --git a/docs/components/progress.md b/docs/components/progress.md new file mode 100755 index 00000000..44adbef7 --- /dev/null +++ b/docs/components/progress.md @@ -0,0 +1,126 @@ +--- +title: Progress 进度条 +description: +type: 0 +group: ⚙ 组件 +menuName: Progress 进度条 +icon: +order: 60 +--- + +## 基本用法 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "progress", + "value": 60 + } +} +``` + +## 颜色映射 + +可以配置`map`，指定颜色映射，例如，默认的map配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` + +它意味着将进度条分成了5份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果 + +```schema:height="200" +{ + "type": "page", + "body": [ + { + "type": "progress", + "value": 40, + "map": ["bg-danger", "bg-success"] + }, + { + "type": "divider" + }, + { + "type": "progress", + "value": 60, + "map": ["bg-danger", "bg-success"] + } + ] +} +``` + +## 用作 Field 时 + +当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的Static-XXX 中时，可以设置`name`属性，映射同名变量 + +### Table 中的列类型 + +```schema:height="300" scope="body" +{ + "type": "table", + "data": { + "items": [ + { + "id": "1", + "progress": 20 + }, + { + "id": "2", + "progress": 40 + }, + { + "id": "3", + "progress": 60 + } + ] + }, + "columns": [ + { + "name": "id", + "label": "Id" + }, + + { + "name": "progress", + "label": "进度", + "type": "progress" + } + ] +} +``` + +List 的内容、Card 卡片的内容配置同上 + +### Form 中静态展示 + +```schema:height="300" scope="body" +{ + "type": "form", + "data": { + "progress": 60 + }, + "controls": [ + { + "type": "static-progress", + "name": "progress", + "label": "进度" + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | +| type | `string` | | 如果在 Table、Card 和 List 中，为`"color"`；在 Form 中用作静态展示，为`"static-color"` | +| className | `string` | | 外层 CSS 类名 | +| progressClassName | `string` | `progress-xs progress-striped active m-b-none` | 进度调 CSS 类名 | +| progressBarClassName | `string` | | 完成进度条 CSS 类名 | +| value | `string` | | 进度值 | +| placeholder | `string` | `-` | 占位文本 | +| showLabel | `boolean` | `true` | 是否展示进度文本 | +| map | `Array` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 | + + + + + diff --git a/docs/components/qrcode.md b/docs/components/qrcode.md new file mode 100755 index 00000000..6bbca35a --- /dev/null +++ b/docs/components/qrcode.md @@ -0,0 +1,97 @@ +--- +title: QRCode 二维码 +description: +type: 0 +group: ⚙ 组件 +menuName: QRCode 二维码 +icon: +order: 61 +--- + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "qr-code", + "codeSize": 128, + "value": "https://www.baidu.com" +} +``` + +> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节） + +## 配置背景色 + +```schema:height="300" scope="body" +[ + { + "type": "qr-code", + "codeSize": 128, + "backgroundColor": "#108cee", + "foregroundColor": "#000", + "value": "https://www.baidu.com" + } +] +``` + +## 配置前景色 + +```schema:height="300" scope="body" +[ + { + "type": "qr-code", + "codeSize": 128, + "backgroundColor": "#fff", + "foregroundColor": "#108cee", + "value": "https://www.baidu.com" + } +] +``` + +## 不同复杂度 + +```schema:height="300" scope="body" +{ + "type": "hbox", + "columns": [ + { + "type": "qr-code", + "codeSize": 128, + "level": "L", + "value": "https://www.baidu.com" + }, + { + "type": "qr-code", + "codeSize": 128, + "level": "M", + "value": "https://www.baidu.com" + }, + { + "type": "qr-code", + "codeSize": 128, + "level": "Q", + "value": "https://www.baidu.com" + }, + { + "type": "qr-code", + "codeSize": 128, + "level": "H", + "value": "https://www.baidu.com" + } + ] +} + +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------- | ---------------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| type | `string` | `"qr-code"` | 指定为 QRCode 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| qrcodeClassName | `string` | | 二维码 SVG 的类名 | +| codeSize | `number` | `128` | 二维码的宽高大小 | +| backgroundColor | `string` | `"#fff"` | 二维码背景色 | +| foregroundColor | `string` | `"#000"` | 二维码前景色 | +| level | `string` | `"L"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 | +| value | [模板](../concepts/template) | `"https://www.baidu.com"` | 扫描二维码后显示的文本，如果要显示某个页面请输入完整 url（`"http://..."`或`"https://..."`开头），支持使用 [模板](./concepts/template) | diff --git a/docs/components/remark.md b/docs/components/remark.md new file mode 100755 index 00000000..53b784b4 --- /dev/null +++ b/docs/components/remark.md @@ -0,0 +1,80 @@ +--- +title: Remark 标记 +description: +type: 0 +group: ⚙ 组件 +menuName: Remark +icon: +order: 62 +--- +用于展示颜色 + +## 基本用法 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "remark", + "content": "这是一段提醒" + } +} +``` + +## 可配置标题 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "remark", + "content": { + "title": "标题", + "body": "这是一段提醒" + } + } +} +``` + +## 弹出位置 + +```schema:height="200" scope="body" +[ + { + "type": "remark", + "content": "向上", + "placement": "top" + }, + { + "type": "remark", + "content": "向下", + "placement": "bottom" + }, + { + "type": "remark", + "content": "向左", + "placement": "left" + }, + { + "type": "remark", + "content": "向右", + "placement": "right" + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | -------- | ----------------------- | ------------- | +| type | `string` | | `remark` | +| className | `string` | | 外层 CSS 类名 | +| content | `string` | | 提示文本 | +| placement | `string` | | 弹出位置 | +| trigger | `string` | `['hover', 'focus']` | 触发条件 | +| icon | `string` | `fa fa-question-circle` | 图标 | + + + + + diff --git a/docs/components/service.md b/docs/components/service.md new file mode 100755 index 00000000..276cb7e6 --- /dev/null +++ b/docs/components/service.md @@ -0,0 +1,298 @@ +--- +title: Service 功能型容器 +description: +type: 0 +group: ⚙ 组件 +menuName: Service +icon: +order: 63 +--- + +amis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：[Table](./table)、[Cards](./cards)、[List](./list)等，他们需要使用某些配置项，例如`source`，通过[数据映射](../concepts/data-mapping)功能，在当前的 **数据链** 中获取数据，并进行数据展示。 + +而`Service`组件就是专门为该类组件而生，它的功能是：：**配置初始化接口，进行数据域的初始化，然后在`Service`内容器中配置子组件，这些子组件通过数据链的方法，获取`Service`所拉取到的数据** + +## 基本使用 + +最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过[数据链](../concepts/datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)进行获取使用。 + +```schema:height="200" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "body": { + "type": "panel", + "title": "$title", + "body": "现在是：${date}" + } +} +``` + +你可以通过查看网络面板看到，`service`接口返回的数据结构为： + +```json +{ + "status": 0, + "msg": "", + "data": { + "title": "Test Page Component", + "date": "2017-10-13" + } +} +``` + +在`service`的子组件中，就可以使用`${title}`和`${date}`展示数据 + +## 展示列表 + +另外一种使用较为频繁的场景是：serivce + table 进行列表渲染 + +```schema:height="400" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/crud/table?perPage=5", + "body": [ + { + "type": "table", + "title": "表格1", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + { + "name": "version", + "label": "Version" + } + ] + }, + { + "type": "table", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + { + "name": "version", + "label": "Version" + } + ] + } + ] +} +``` + +上例中 service 接口返回数据结构如下： + +```json +{ + "status": 0, + "msg": "ok", + "data": { + "count": 57, + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5 + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win XP", + "version": "6", + "grade": "A", + "id": 6 + }, + { + "engine": "Gecko", + "browser": "Firefox 1.0", + "platform": "Win 98+ / OSX.2+", + "version": "1.7", + "grade": "A", + "id": 7 + }, + { + "engine": "Gecko", + "browser": "Firefox 1.5", + "platform": "Win 98+ / OSX.2+", + "version": "1.8", + "grade": "A", + "id": 8 + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "1.8", + "grade": "A", + "id": 9 + }, + { + "engine": "Gecko", + "browser": "Firefox 3.0", + "platform": "Win 2k+ / OSX.3+", + "version": "1.9", + "grade": "A", + "id": 10 + } + ] + } +} +``` + +`table`中配置`source`属性为`${rows}`就可以获取到`rows`变量的数据，并用于展示。 + +## 动态渲染页面 + +`Service` 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染页面内容。 + +```schema:height="200" scope="body" +{ + "type": "service", + "schemaApi": "https://houtai.baidu.com/api/mock2/service/schema?type=tabs" +} +``` + +同样观察`schemaApi接口`返回的数据结构： + +```json +{ + "status": 0, + "msg": "", + "data": { + "type": "tabs", + "tabs": [ + { + "title": "TabA", + "body": "卡片A内容" + }, + { + "title": "TabB", + "body": "卡片B内容" + } + ] + } +} +``` + +它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。 + +## 接口联动 + +`api`和`schemaApi`都支持[接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8) + +```schema:height="300" scope="body" +{ + "title": "", + "type": "form", + "api": "https://houtai.baidu.com/api/mock/saveForm?waitSeconds=1", + "mode": "horizontal", + "controls": [ + { + "label": "数据模板", + "type": "select", + "name": "tpl", + "value": "tpl1", + "size": "sm", + "options": [ + { + "label": "模板1", + "value": "tpl1" + }, + { + "label": "模板2", + "value": "tpl2" + }, + { + "label": "模板3", + "value": "tpl3" + } + ], + "description": "请修改该下拉选择器查看效果" + }, + { + "type": "service", + "api": "https://houtai.baidu.com/api/mock2/form/initData?tpl=${tpl}", + "controls": [ + { + "label": "名称", + "type": "text", + "name": "name" + }, + { + "label": "作者", + "type": "text", + "name": "author" + }, + { + "label": "请求时间", + "type": "datetime", + "name": "date" + } + ] + } + ], + "actions": [] +} +``` + +上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据 + +更多相关见[接口联动](../concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8) + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------- | --------------------------------- | -------------- | ----------------------------------------------------------------------------- | +| type | `string` | `"service"` | 指定为 service 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| body | [SchemaNode](../types/schemanode) | | 内容容器 | +| api | [api](../types/api) | | 初始化数据域接口地址 | +| initFetch | `boolean` | | 是否默认拉取 | +| schemaApi | [api](../types/api) | | 用来获取远程 Schema 接口地址 | +| initFetchSchema | `boolean` | | 是否默认拉取 Schema | +| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 | +| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 | +| messages.fetchFailed | `string` | `"初始化失败"` | 接口请求失败时 toast 提示文字 | +| interval | `number` | | 轮训时间间隔(最低 3000) | +| silentPolling | `boolean` | `false` | 配置轮训时是否显示加载动画 | +| stopAutoRefreshWhen | [表达式](../concepts/expression) | | 配置停止轮训的条件 | diff --git a/docs/components/spinner.md b/docs/components/spinner.md new file mode 100755 index 00000000..dcdbd2c2 --- /dev/null +++ b/docs/components/spinner.md @@ -0,0 +1,24 @@ +--- +title: Spinner 加载中 +description: +type: 0 +group: ⚙ 组件 +menuName: Spinner +icon: +order: 64 +--- + +## 基本使用 + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "spinner" + } +} +``` + + + + diff --git a/docs/components/status.md b/docs/components/status.md new file mode 100755 index 00000000..23a12791 --- /dev/null +++ b/docs/components/status.md @@ -0,0 +1,31 @@ +--- +title: Status 状态 +description: +type: 0 +group: ⚙ 组件 +menuName: Status +icon: +order: 65 +--- + +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "status", + "value": 1 +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------- | -------- | ------ | ------------------------------- | +| type | `string` | | `"status"` 指定为 Status 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| placeholder | `string` | `-` | 占位文本 | + + + + + diff --git a/docs/components/switch.md b/docs/components/switch.md new file mode 100755 index 00000000..a19b4c76 --- /dev/null +++ b/docs/components/switch.md @@ -0,0 +1,33 @@ +--- +title: Switch 开关 +description: +type: 0 +group: ⚙ 组件 +menuName: Switch +icon: +order: 66 +--- +## 基本用法 + +```schema:height="300" +{ + "type": "page", + "body": { + "type": "switch", + "value": true + } +} +``` + + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | -------- | ------ | ------------------------------- | +| type | `string` | | `"switch"` 指定为 Dialog 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| trueValue | any | | 真值，当值为该值时，开关开启 | +| option | `string` | | 右侧选项文本 | + + + + + diff --git a/docs/components/table.md b/docs/components/table.md new file mode 100755 index 00000000..8d6d5586 --- /dev/null +++ b/docs/components/table.md @@ -0,0 +1,1032 @@ +--- +title: Table 表格 +description: +type: 0 +group: ⚙ 组件 +menuName: Table 表格 +icon: +order: 67 +--- + +表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。 + +## 基本用法 + +```schema:height="700" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "body": [ + { + "type": "table", + "title": "表格1", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "version", + "label": "Version" + } + ] + }, + + { + "type": "table", + "source": "$rows", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "version", + "label": "Version" + } + ] + } + ] +} +``` + +## 列配置 + +`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。 + +### 列类型 + +除了简单展示数据源所返回的数据以外，`list`的列支持除表单项以外所有组件类型，例如： + +```schema:height="600" +{ + "$schema": "https://houtai.baidu.com/v2/schemas/table.json#", + "type": "table", + "data": { + "items": [ + { + "id": "91264", + "text": "衡 阎", + "progress": 22, + "type": 4, + "boolean": true, + "list": [ + { + "title": "Forward Functionality Technician", + "description": "nisi ex eum" + }, + { + "title": "District Applications Specialist", + "description": "ipsam ratione voluptas" + }, + { + "title": "Future Operations Manager", + "description": "ducimus fugit debitis" + }, + { + "title": "Dynamic Solutions Associate", + "description": "saepe consequatur aut" + } + ], + "audio": "https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac", + "carousel": [ + { + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "html": "
carousel data in crud
" + }, + { + "image": "https://video-react.js.org/assets/poster.png" + } + ], + "date": 1591270438, + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", + "json": { + "id": 1, + "text": "text" + } + }, + { + "id": "34202", + "text": "吉 卢汉市", + "progress": 85, + "type": 1, + "boolean": true, + "list": [ + { + "title": "Dynamic Assurance Orchestrator", + "description": "ea ullam voluptates" + }, + { + "title": "Internal Division Assistant", + "description": "illum deleniti qui" + }, + { + "title": "International Usability Administrator", + "description": "sit voluptatem quia" + }, + { + "title": "Lead Optimization Orchestrator", + "description": "autem et blanditiis" + }, + { + "title": "Future Division Assistant", + "description": "dolor cupiditate sint" + }, + { + "title": "Forward Program Orchestrator", + "description": "quia distinctio voluptas" + }, + { + "title": "Human Implementation Technician", + "description": "consequatur quaerat ullam" + }, + { + "title": "National Identity Administrator", + "description": "ipsa et reiciendis" + }, + { + "title": "Regional Factors Planner", + "description": "sed deserunt natus" + }, + { + "title": "Human Data Administrator", + "description": "rerum consequatur odit" + } + ], + "audio": "https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac", + "carousel": [ + { + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "html": "
carousel data in crud
" + }, + { + "image": "https://video-react.js.org/assets/poster.png" + } + ], + "date": 1591270438, + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", + "json": { + "id": 1, + "text": "text" + } + }, + { + "id": "37701", + "text": "立辉安市", + "progress": 72, + "type": 2, + "boolean": false, + "list": [ + { + "title": "Corporate Metrics Liason", + "description": "aspernatur natus qui" + }, + { + "title": "Central Paradigm Analyst", + "description": "sequi numquam ad" + }, + { + "title": "International Data Administrator", + "description": "sed libero eum" + }, + { + "title": "Forward Optimization Assistant", + "description": "officiis accusantium dolorem" + }, + { + "title": "Senior Metrics Executive", + "description": "commodi sint quod" + }, + { + "title": "Corporate Quality Facilitator", + "description": "aut aperiam est" + }, + { + "title": "Forward Operations Producer", + "description": "sed corporis eaque" + }, + { + "title": "National Integration Analyst", + "description": "quasi ab cumque" + } + ], + "audio": "https://news-bos.cdn.bcebos.com/mvideo/%E7%9A%87%E5%90%8E%E5%A4%A7%E9%81%93%E4%B8%9C.aac", + "carousel": [ + { + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg" + }, + { + "html": "
carousel data in crud
" + }, + { + "image": "https://video-react.js.org/assets/poster.png" + } + ], + "date": 1591270438, + "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg", + "json": { + "id": 1, + "text": "text" + } + } + ] + }, + "affixHeader": false, + "syncLocation": false, + "columns": [ + { + "name": "id", + "label": "ID", + "type": "text" + }, + { + "name": "text", + "label": "文本", + "type": "text" + }, + { + "type": "image", + "label": "图片", + "name": "image" + }, + { + "name": "date", + "type": "date", + "label": "日期" + }, + { + "name": "progress", + "label": "进度", + "type": "progress" + }, + { + "name": "boolean", + "label": "状态", + "type": "status" + }, + { + "name": "boolean", + "label": "开关", + "type": "switch" + }, + { + "name": "type", + "label": "映射", + "type": "mapping", + "map": { + "1": "漂亮", + "2": "开心", + "3": "惊吓", + "4": "紧张", + "*": "其他：${type}" + } + }, + { + "name": "list", + "type": "list", + "label": "List", + "placeholder": "-", + "listItem": { + "title": "${title}", + "subTitle": "${description}" + } + } + ] +} +``` + +### 列宽 + +可以给列配置`width`属性，控制列宽，共有两种方式： + +#### 固定像素 + +可以配置数字，用于设置列宽像素，例如下面例子我们给`Rendering engine`列宽设置为`100px`。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "width": 100 + } + ] +} +``` + +#### 百分比 + +也可以百分比来指定列宽，例如下面例子我们给`Rendering engine`列宽设置为`50%`。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "width": "50%" + } + ] +} +``` + +### 默认是否显示 + +默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个栗子中 ID 这一栏。 + +```schema:height="600" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID", + "toggled": false + }, + + { + "name": "platform", + "label": "Platform" + } + ] + } + ] +} +``` + +### 可复制 + +可以在列上配置`"copyable": true`，会在该列的内容区里，渲染一个复制内容的图标，点击可复制该显示内容 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "copyable": true + } + ] +} +``` + +你也可以配置对象形式，可以自定义显示内容 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "copyable": { + "content": "复制的内容是：${engine}" + } + } + ] +} +``` + +### 弹出框 + +可以给列上配置`popover`属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "popOver": { + "body": { + "type": "tpl", + "tpl": "${engine}" + } + } + } + ] +} +``` + +### 表头样式 + +可以配置`"isHead": true`，来让当前列以表头的样式展示。应用场景是： + +1. 所有列`label`配置空字符串，不显示表头 +2. 配置`combineNum`，合并单元格，实现左侧表头的形式 +3. 列上配置`"isHead": true`，调整样式 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "affixHeader": false, + "combineNum": 1, + "columns": [ + { + "name": "engine", + "label": "", + "isHead": true + }, + { + "name": "browser", + "label": "" + }, + { + "name": "platform", + "label": "" + }, + { + "name": "version", + "label": "" + }, + { + "name": "grade", + "label": "" + } + ] +} +``` + +还可以配置"offset"，实现弹出框位置调整自定义 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine", + "popOver": { + "body": { + "type": "tpl", + "tpl": "偏了一点的popover" + }, + "offset": { + "y": 100 + } + } + } + ] +} +``` + +## 嵌套 + +当行数据中存在 children 属性时，可以自动嵌套显示下去。 + +```schema:height="400" scope="body" +{ + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 1001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 1002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 2001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 2002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.5", + "platform": "Win 95+", + "version": "5.5", + "grade": "A", + "id": 3, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 3001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 3002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 6", + "platform": "Win 98+", + "version": "6", + "grade": "A", + "id": 4, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 4001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 4002 + } + ] + }, + { + "engine": "Trident", + "browser": "Internet Explorer 7", + "platform": "Win XP SP2+", + "version": "7", + "grade": "A", + "id": 5, + "children": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.0", + "platform": "Win 95+", + "version": "4", + "grade": "X", + "id": 5001 + }, + { + "engine": "Trident", + "browser": "Internet Explorer 5.0", + "platform": "Win 95+", + "version": "5", + "grade": "C", + "id": 5002 + } + ] + } + ] + }, + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID" + }, + + { + "name": "platform", + "label": "Platform" + } + ] + } + ] +} +``` + +## 底部展示 (Footable) + +列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。 + +```schema:height="400" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "footable": true, + "columns": [ + { + "name": "engine", + "label": "Engine" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version", + "breakpoint": "*" + }, + + { + "name": "browser", + "label": "Browser", + "breakpoint": "*" + }, + + { + "name": "id", + "label": "ID", + "breakpoint": "*" + }, + + { + "name": "platform", + "label": "Platform", + "breakpoint": "*" + } + ] + } + ] +} +``` + +默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。 + +```json +{ + "footable": { + "expand": "first" + } +} +``` + +当配置成 `all` 时表示全部展开。 + +## 合并单元格 + +只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。 + +```schema:height="500" scope="body" +{ + "type": "service", + "data": { + "rows": [ + { + "engine": "Trident", + "browser": "Internet Explorer 4.2", + "platform": "Win 95+", + "version": "4", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "Internet Explorer 4.2", + "platform": "Win 95+", + "version": "4", + "grade": "B" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 95+", + "version": "4", + "grade": "C" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 98", + "version": "3", + "grade": "A" + }, + { + "engine": "Trident", + "browser": "AOL browser (AOL desktop)", + "platform": "Win 98", + "version": "4", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 1.0", + "platform": "Win 98+ / OSX.2+", + "version": "4", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 1.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "A" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "B" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "C" + }, + { + "engine": "Gecko", + "browser": "Firefox 2.0", + "platform": "Win 98+ / OSX.2+", + "version": "5", + "grade": "D" + } + ] + }, + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "combineNum": 3, + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + }, + { + "name": "grade", + "label": "CSS grade" + } + ] + } + ] +} +``` + +## 超级表头 + +超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。 + +```schema:height="430" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columns": [ + { + "name": "engine", + "label": "Engine", + "groupName": "分组1" + }, + + { + "name": "grade", + "label": "Grade", + "groupName": "分组1" + }, + + { + "name": "version", + "label": "Version", + "groupName": "分组2" + }, + + { + "name": "browser", + "label": "Browser", + "groupName": "分组2" + }, + + { + "name": "id", + "label": "ID", + "toggled": false, + "groupName": "分组2" + }, + + { + "name": "platform", + "label": "Platform", + "groupName": "分组2" + } + ] + } + ] +} +``` + +## 固定列 + +列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。 + +```schema:height="530" scope="body" +{ + "type": "service", + "api": "https://houtai.baidu.com/api/sample?perPage=5", + "className": "w-xxl", + "body": [ + { + "type": "table", + "source": "$rows", + "className": "m-b-none", + "columnsTogglable": false, + "columns": [ + { + "name": "engine", + "label": "Engine", + "fixed": "left" + }, + + { + "name": "grade", + "label": "Grade" + }, + + { + "name": "version", + "label": "Version" + }, + + { + "name": "browser", + "label": "Browser" + }, + + { + "name": "id", + "label": "ID" + }, + + { + "name": "platform", + "label": "Platform", + "fixed": "right" + } + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ---------------- | --------------------------------------------- | ------------------------- | ------------------------------------------------------- | +| type | `string` | | `"type"` 指定为 table 渲染器 | +| title | `string` | | 标题 | +| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | +| affixHeader | `boolean` | `true` | 是否固定表头 | +| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | +| placeholder | string | `暂无数据` | 当没数据的时候的文字提示 | +| className | `string` | `panel-default` | 外层 CSS 类名 | +| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | +| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | +| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | +| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | +| columns | Array<[Column](#%E5%88%97%E9%85%8D%E7%BD%AE)> | | 用来设置列信息 | +| combineNum | `number` | | 自动合并单元格 | diff --git a/docs/components/tabs.md b/docs/components/tabs.md new file mode 100755 index 00000000..94d48cbd --- /dev/null +++ b/docs/components/tabs.md @@ -0,0 +1,224 @@ +--- +title: Tabs 选项卡 +description: +type: 0 +group: ⚙ 组件 +menuName: Tabs +icon: +order: 68 +--- + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "tabs": [ + { + "title": "Tab 1", + "tab": "Content 1" + }, + + { + "title": "Tab 2", + "tab": "Content 2" + } + ] +} +``` + +## 展示模式 + +### 线型 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "mode": "line", + "tabs": [ + { + "title": "选项卡1", + "body": "选项卡内容1" + }, + { + "title": "选项卡2", + "body": "选项卡内容2" + }, + { + "title": "选项卡3", + "body": "选项卡内容3" + } + ] +} +``` + +### 卡片模式 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "mode": "card", + "tabs": [ + { + "title": "选项卡1", + "body": "选项卡内容1" + }, + { + "title": "选项卡2", + "body": "选项卡内容2" + }, + { + "title": "选项卡3", + "body": "选项卡内容3" + } + ] +} +``` + +### 选择器型 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "mode": "radio", + "tabs": [ + { + "title": "选项卡1", + "body": "选项卡内容1" + }, + { + "title": "选项卡2", + "body": "选项卡内容2" + }, + { + "title": "选项卡3", + "body": "选项卡内容3" + } + ] +} +``` + +## 配置顶部工具栏 + +配置`toolbar`实现顶部工具栏。 + +```schema:height="200" scope="body" +{ + "type": "tabs", + "toolbar": [ + { + "type": "button", + "label": "按钮", + "actionType": "dialog", + "dialog": { + "title": "弹窗标题", + "body": "你点击了" + } + } + ], + "tabs": [ + { + "title": "Tab 1", + "tab": "Content 1" + }, + + { + "title": "Tab 2", + "tab": "Content 2" + } + ] +} +``` + +## 配置 hash + +可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "tabs": [ + { + "title": "Tab 1", + "hash": "tab1", + "tab": "Content 1" + }, + + { + "title": "Tab 2", + "hash": "tab2", + "tab": "Content 2" + } + ] +} +``` + +## 默认显示某个选项卡 + +主要配置`activeKey`属性来实现该效果，共有下面两种方法： + +#### 配置 hash 值 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "activeKey": "tab2", + "tabs": [ + { + "title": "Tab 1", + "hash": "tab1", + "tab": "Content 1" + }, + + { + "title": "Tab 2", + "hash": "tab2", + "tab": "Content 2" + } + ] +} +``` + +#### 配置索引值 + +单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。 + +```schema:height="300" scope="body" +{ + "type": "tabs", + "activeKey": 1, + "tabs": [ + { + "title": "Tab 1", + "tab": "Content 1" + }, + + { + "title": "Tab 2", + "tab": "Content 2" + } + ] +} +``` + +## unmountOnExit + +如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`"unmountOnExit": true` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------------------- | --------------------------------- | ----------------------------------- | -------------------------------------------------------- | +| type | `string` | `"tabs"` | 指定为 Tabs 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| tabsClassName | `string` | | Tabs Dom 的类名 | +| tabs | `Array` | | tabs 内容 | +| toolbar | [SchemaNode](../types/schemanode) | | tabs 中的工具栏 | +| toolbarClassName | `string` | | tabs 中工具栏的类名 | +| tabs[x].title | `string` | | Tab 标题 | +| tabs[x].icon | `icon` | | Tab 的图标 | +| tabs[x].tab | [SchemaNode](../types/schemanode) | | 内容区 | +| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 | +| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 | +| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 | +| tabs[x].className | `string` | `"bg-white b-l b-r b-b wrapper-md"` | Tab 区域样式 | diff --git a/docs/components/tasks.md b/docs/components/tasks.md new file mode 100755 index 00000000..856a71e6 --- /dev/null +++ b/docs/components/tasks.md @@ -0,0 +1,76 @@ +--- +title: Tasks 任务操作集合 +description: +type: 0 +group: ⚙ 组件 +menuName: Tasks +icon: +order: 69 +--- + +任务操作集合，类似于 orp 上线。 + +## 基本用法 + +```schema:height="300" scope="body" +{ + "type": "tasks", + "name": "tasks", + "items": [ + { + "label": "hive 任务", + "key": "hive", + "status": 4, + "remark": "查看详情日志。" + }, + { + "label": "小流量", + "key": "partial", + "status": 4 + }, + { + "label": "全量", + "key": "full", + "status": 4 + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------- | ------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| type | `string` | `"tasks"` | 指定为 Tasks 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| tableClassName | `string` | | table Dom 的类名 | +| items | `Array` | | 任务列表 | +| items[x].label | `string` | | 任务名称 | +| items[x].key | `string` | | 任务键值，请唯一区分 | +| items[x].remark | `string` | | 当前任务状态，支持 html | +| items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 | +| checkApi | [API](../types/api) | | 返回任务列表，返回的数据请参考 items。 | +| submitApi | [API](../types/api) | | 提交任务使用的 API | +| reSubmitApi | [API](../types/api) | | 如果任务失败，且可以重试，提交的时候会使用此 API | +| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 | +| taskNameLabel | `string` | 任务名称 | 任务名称列说明 | +| operationLabel | `string` | 操作 | 操作列说明 | +| statusLabel | `string` | 状态 | 状态列说明 | +| remarkLabel | `string` | 备注 | 备注列说明 | +| btnText | `string` | 上线 | 操作按钮文字 | +| retryBtnText | `string` | 重试 | 重试操作按钮文字 | +| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className | +| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className | +| statusLabelMap | `array` | `["label-warning", "label-info", "label-success", "label-danger", "label-default", "label-danger"]` | 状态显示对应的类名配置 | +| statusTextMap | `array` | `["未开始", "就绪", "进行中", "出错", "已完成", "出错"]` | 状态显示对应的文字显示配置 | + +```schema:height="300" scope="body" +[ +{ + "type": "tasks", + "name": "tasks", + "checkApi": "https://houtai.baidu.com/api/mock2/task" +}, + +"为了演示，目前获取的状态都是随机出现的。"] +``` diff --git a/docs/components/tpl.md b/docs/components/tpl.md new file mode 100755 index 00000000..21739a2a --- /dev/null +++ b/docs/components/tpl.md @@ -0,0 +1,36 @@ +--- +title: Tpl 模板 +description: +type: 0 +group: ⚙ 组件 +menuName: Tpl +icon: +order: 70 +--- + +输出 [模板](../concepts/template) 的常用组件 + +## 基本用法 + +```schema:height="200" +{ + "data": { + "text": "World!" + }, + "type": "page", + "body": { + "type": "tpl", + "tpl": "Hello ${text}" + } +} +``` + +更多模板相关配置请看[模板文档](../concepts/template) + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | ---------------------------- | ------- | --------------- | +| type | `string` | `"tpl"` | 指定为 Tpl 组件 | +| className | `string` | | 外层 Dom 的类名 | +| tpl | [模板](../concepts/template) | | 配置模板 | diff --git a/docs/components/video.md b/docs/components/video.md new file mode 100755 index 00000000..71d94eb6 --- /dev/null +++ b/docs/components/video.md @@ -0,0 +1,39 @@ +--- +title: Video 视频 +description: +type: 0 +group: ⚙ 组件 +menuName: Video +icon: +order: 71 +--- +## 基本用法 + + +```schema:height="500" scope="body" +{ + "type": "video", + "src": "raw:https://amis.bj.bcebos.com/amis/2019-12/1577157317579/trailer_hd.mp4", + "poster": "raw:https://internal-amis-res.cdn.bcebos.com/images/2019-12/1577157239810/da6376bf988c.png" +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | --------- | --------- | ---------------------------------- | +| type | `string` | `"video"` | 指定为 video 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| src | `string` | | 视频地址 | +| isLive | `boolean` | false | 是否为直播，视频为直播时需要添加上 | +| poster | `string` | | 视频封面地址 | +| muted | `boolean` | | 是否静音 | +| autoPlay | `boolean` | | 是否自动播放 | +| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` | + + + + + + + diff --git a/docs/components/wizard.md b/docs/components/wizard.md new file mode 100755 index 00000000..25e38f7d --- /dev/null +++ b/docs/components/wizard.md @@ -0,0 +1,94 @@ +--- +title: Wizard 向导 +description: +type: 0 +group: ⚙ 组件 +menuName: Wizard 向导 +icon: +order: 73 +--- + +表单向导，能够配置多个步骤引导用户一步一步完成表单提交。 + +## 基本使用 + +```schema:height="400" scope="body" +{ + "type": "wizard", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=2", + "mode": "vertical", + "steps": [ + { + "title": "第一步", + "controls": [ + { + "name": "website", + "label": "网址", + "type": "url", + "required": true + }, + { + "name": "email", + "label": "邮箱", + "type": "email", + "required": true + } + ] + }, + { + "title": "Step 2", + "controls": [ + { + "name": "email2", + "label": "邮箱", + "type": "email", + "required": true + } + ] + }, + { + "title": "Step 3", + "controls": [ + "这是最后一步了" + ] + } + ] +} +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| ------------------- | -------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| type | `string` | `"wizard"` | 指定为 `Wizard` 组件 | +| mode | `string` | `"horizontal"` | 展示模式，选择：`horizontal` 或者 `vertical` | +| api | [API](../types/api) | | 最后一步保存的接口。 | +| initApi | [API](../types/api) | | 初始化数据接口 | +| initFetch | [API](../types/api) | | 初始是否拉取数据。 | +| initFetchOn | [表达式](../concepts/expression) | | 初始是否拉取数据，通过表达式来配置 | +| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 | +| actionNextLabel | `string` | `下一步` | 下一步按钮文本 | +| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 | +| actionFinishLabel | `string` | `完成` | 完成按钮文本 | +| className | `string` | | 外层 CSS 类名 | +| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 | +| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 | +| redirect | [模板](../concepts/template) | `3000` | 操作完后跳转。 | +| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 | +| steps | Array<[step](#step)> | | 数组，配置步骤信息 | + +### step + +| 属性名 | 类型 | 默认值 | 说明 | +| ----------------- | ---------------------------------- | ------ | --------------------------------------------------------------------------------------------- | +| title | `string` | | 步骤标题 | +| mode | `string` | | 展示默认，跟 [Form](./Form/Form.md) 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 | +| horizontal | `Object` | | 当为水平模式时，用来控制左右占比 | +| horizontal.label | `number` | | 左边 label 的宽度占比 | +| horizontal.right | `number` | | 右边控制器的宽度占比。 | +| horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 | +| api | [API](../types/api) | | 当前步骤保存接口，可以不配置。 | +| initApi | [API](../types/api) | | 当前步骤数据初始化接口。 | +| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 | +| initFetchOn | [表达式](../concepts/expression) | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 | +| controls | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。 | diff --git a/docs/components/wrapper.md b/docs/components/wrapper.md new file mode 100755 index 00000000..bf5c8fd3 --- /dev/null +++ b/docs/components/wrapper.md @@ -0,0 +1,89 @@ +--- +title: Wrapper 包裹容器 +description: +type: 0 +group: ⚙ 组件 +menuName: Wrapper +icon: +order: 72 +--- + +简单的一个包裹容器组件 + +## 基本用法 + +```schema:height="200" scope="body" +{ + "type": "wrapper", + "body": "内容", + "className": "b" +} +``` + +## 不同内边距 + +通过配置`size`属性，可以调整内边距 + +```schema:height="550" scope="body" +[ + { + "type": "wrapper", + "body": "默认内边距", + "className": "b" + }, + { + "type": "divider" + }, + { + "type": "wrapper", + "body": "极小的内边距", + "size": "xs", + "className": "b" + }, + { + "type": "divider" + }, + { + "type": "wrapper", + "body": "小的内边距", + "size": "sm", + "className": "b" + }, + { + "type": "divider" + }, + { + "type": "wrapper", + "body": "中等的内边距", + "size": "md", + "className": "b" + }, + { + "type": "divider" + }, + { + "type": "wrapper", + "body": "大的内边距", + "size": "lg", + "className": "b" + }, + { + "type": "divider" + }, + { + "type": "wrapper", + "body": "无内边距", + "size": "none", + "className": "b" + } +] +``` + +## 属性表 + +| 属性名 | 类型 | 默认值 | 说明 | +| --------- | --------------------------------- | ----------- | ---------------------------- | +| type | `string` | `"wrapper"` | 指定为 Wrapper 渲染器 | +| className | `string` | | 外层 Dom 的类名 | +| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` | +| body | [SchemaNode](../types/schemanode) | | 内容容器 | diff --git a/docs/concepts/action.md b/docs/concepts/action.md new file mode 100644 index 00000000..e64e0e82 --- /dev/null +++ b/docs/concepts/action.md @@ -0,0 +1,60 @@ +--- +title: 行为 +description: +type: 0 +group: 💡 概念 +menuName: 行为 +icon: +order: 12 +--- + +页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。 + +在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤： + +1. 添加一个 **行为按钮组件**； +2. 配置当前 **行为类型（actionType）**； +3. 根据当前行为类型，配置你想要的 **属性**。 + +## 如何配置行为？ + +### 通过行为按钮 + +```schema:height="100" scope="body" +{ + "type": "action", + "label": "发出一个请求", + "actionType": "ajax", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm" +} +``` + +1. 在`page`内容区中，添加一个`action`行为按钮组件 +2. 配置当前行为类型是 ajax（即发送一个 ajax 请求) +3. 配置请求 api，值为 API 类型 + +现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。 + +很简单是吧？我们再来一个例子： + +```schema:height="100" scope="body" +{ + "type": "action", + "label": "弹个框", + "actionType": "dialog", + "dialog": { + "title": "弹框", + "body": "Hello World!" + } +} +``` + +这次我们配置`actionType`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`Hello World!` + +> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件 + +完整的行为列表可以查看 [action](../components/action)组件 + +### 组件所支持的行为 + +一些特殊组件，例如 Chart 组件 中的图表点击行为，可以直接配置`clickAction`，来配置行为对象。 diff --git a/docs/concepts/data-mapping.md b/docs/concepts/data-mapping.md new file mode 100755 index 00000000..c20d548f --- /dev/null +++ b/docs/concepts/data-mapping.md @@ -0,0 +1,1401 @@ +--- +title: 数据映射 +description: +type: 0 +group: 💡 概念 +menuName: 数据映射 +icon: +order: 12 +--- + +数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。 + +## 模板字符串 + +```schema:height="200" +{ + "type": "page", + "data": { + "name": "rick" + }, + "body": { + "type": "tpl", + "tpl": "my name is ${name}" // 输出: my name is rick + } +} +``` + +**tip：** 默认 amis 在解析模板字符串时，遇到`$`字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本`"${xxx}"`或`"$xxx"`，那么需要在`$`前加转义字符`"\\"`，即`"\\${xxx}"` + +```schema:height="200" +{ + "type": "page", + "data": { + "name": "rick" + }, + "body": { + "type": "tpl", + "tpl": "my name is \\${name}" + } +} +``` + +## 支持链式取值 + +可以使用`.`进行链式取值 + +```schema:height="200" +{ + "type": "page", + "data": { + "name": "rick", + "company": { + "name": "baidu", + "department": "it" + } + }, + "body": { + "type": "tpl", + "tpl": "my name is ${name}, I work for ${company.name}" // 输出 my name is rick, I work for baidu + } +} +``` + +## 自定义 api 请求体数据格式 + +在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映射定制想要的数据格式： + +查看下面这种场景： + +```schema:height="350" scope="body" +{ + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "text", + "label": "邮箱：" + } + ] +} +``` + +当输入姓名：`rick` 和邮箱：`rick@gmail.com` 后，`form` 获取当前的数据域，提交后端接口的数据格式应该是这样的： + +```json +{ + "name": "rick", + "email": "rick@gmail.com" +} +``` + +遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改： + +```json +{ + "userName": "xxx", + "userEmail": "xxx@xxx.com" +} +``` + +这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的`name`属性为相应的字段以外，你可以配置`api`的`data`属性，使用**数据映射**轻松实现**数据格式的自定义：** + +```schema:height="350" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "data": { + "userName": "${name}", + "userEmail": "${email}" + } + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "text", + "label": "邮箱：" + } + ] +} +``` + +你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为： + +```json +{ + "userName": "rick", + "userEmail": "rick@gmail.com" +} +``` + +## 复杂配置 + +### 展开所配置的数据 + +可以使用`"&"`，作为数据映射 key，展开所配置的变量，例如： + +下面例子中，我们想在提交的时候，除了提交 `name` 和 `email` 变量以外，还想添加 `c` 下面的所有变量 `e`,`f`,`g`，但是按照之前所讲的， api 应该这么配置： + +```schema:height="350" scope="body" +{ + "type": "form", + "data": { + "a": "1", + "b": "2", + "c": { + "e": "3", + "f": "4", + "g": "5" + } + }, + "api": { + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "method": "post", + "data": { + "name": "${name}", + "email": "${email}", + "e": "${c.e}", + "f": "${c.f}", + "g": "${c.g}" + } + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "text", + "label": "邮箱：" + } + ] +} +``` + +点击提交查看网络面板数据，你会发现数据是符合预期的： + +```json +{ + "name": "rick", + "email": "rick@gmail.comn", + "e": "3", + "f": "4", + "g": "5" +} +``` + +但是当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用`"&"`标识符，来展开所配置变量： + +```schema:height="350" scope="body" +{ + "type": "form", + "data": { + "a": "1", + "b": "2", + "c": { + "e": "3", + "f": "4", + "g": "5" + } + }, + "api": { + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "method": "post", + "data": { + "name": "${name}", + "email": "${email}", + "&": "${c}" + } + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "text", + "label": "邮箱：" + } + ] +} +``` + +上例中我们 api.data 配置如下： + +```json +"data": { + "name": "${name}", + "email": "${email}", + "&": "${c}" +} +``` + +`"&"`标识符会将所配置的`c`变量的`value`值，展开并拼接在`data`中。查看网络面板可以看到数据如下： + +```json +{ + "name": "rick", + "email": "rick@gmail.comn", + "e": "3", + "f": "4", + "g": "5" +} +``` + +### 数组提取值 + +```schema:height="350" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "data": { + "items": { + "$table": { + "a": "${a}", + "c": "${c}" + } + } + } + }, + "controls": [ + { + "type": "table", + "name": "table", + "label": "table", + "columns": [ + { + "label": "A", + "name": "a" + }, + { + "label": "B", + "name": "b" + }, + { + "label": "C", + "name": "c" + } + ], + "value": [ + { + "a": "a1", + "b": "b1", + "c": "c1" + }, + { + "a": "a2", + "b": "b2", + "c": "c2" + }, + { + "a": "a3", + "b": "b3", + "c": "c3" + } + ] + } + ] +} +``` + +上例中的`api`的`data`配置格式如下： + +```json +"data": { + "items": { + "$table": { + "a": "${a}", + "c": "${c}" + } + } +} +``` + +这个配置的意思是，只提取`table`数组中的`a`变量和`c`变量，组成新的数组，赋值给`items`变量 + +点击提交，查看浏览器网络面板可以发现，表单的提交数据结构如下： + +```json +{ + "items": [ + { + "a": "a1", + "c": "c1" + }, + { + "a": "a2", + "c": "c2" + }, + { + "a": "a3", + "c": "c3" + } + ] +} +``` + +## 过滤器 + +过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下： + +``` +${xxx [ |filter1 |filter2...] } +``` + +下面我们会逐一介绍每一个过滤器的用法。 + +> 过滤器可以 [串联使用](#串联使用过滤器) + +### html + +用于显示 html 文本。 + +##### 基本用法 + +``` +${xxx | html} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "html": "
这是一段html
" + }, + "body": { + "type": "tpl", + "tpl": "html is: ${html|html}" + } +} +``` + +### raw + +不同场景下，在使用数据映射时，amis 可能默认会使用`html`过滤器对数据进行转义显示，这时如果想要输出原始文本，请配置`raw`过滤器。 + +##### 基本用法 + +使用`raw`可以直接输出原始文本 + +``` +${xxx | raw} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "html": "
这是一段html
" + }, + "body": { + "type": "tpl", + "tpl": "html is: ${html|raw}" + } +} +``` + +> **注意！！！** +> +> `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 HTML 片段，但是动态渲染 HTML 是非常危险的，容易导致 **XSS** 攻击。 +> +> 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。 + +### json + +用于将数据转换为`json`格式字符串 + +##### 基本用法 + +``` +${xxx | json[:tabSize]} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "info": { + "name": "rick", + "company": "baidu" + } + }, + "body": { + "type": "tpl", + "tpl": "my info is ${info|json}" // 输出: my info is { "name": "rick", "company": "baidu" } + } +} +``` + +##### 指定缩进数 + +``` +${xxx|json:4} // 指定缩进为4个空格 +``` + +### toJson + +与[json](#json)相反，用于将`json`格式的字符串，转换为`javascript`对象 + +``` +${xxx | toJson} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "info": "{\"name\": \"rick\", \"company\": \"baidu\"}" + }, + "body": { + "type": "tpl", + "tpl": "my info is ${info|toJson}" + } +} +``` + +对`Javascript`的直接输出会显示`[object Object]`，你可以使用 [json 过滤器](./data-mapping#json) 来格式化显示`json`文本。 + +### date + +日期格式化过滤器，用于把特定时间值按指定格式输出。 + +##### 基本用法 + +``` +${xxx | date[:format][:inputFormat]} +``` + +- **format**：需要展示的格式，默认为`'LLL'`，即本地化时间格式 +- **inputFormat**：指定该变量值的格式，默认为`'X'`，即时间戳 + +具体参数的配置需要参考 [moment](https://momentjs.com/docs/) + +```schema:height="200" +{ + "type": "page", + "data": { + "now": 1586865590 + }, + "body": { + "type": "tpl", + "tpl": "now is ${now|date}" // 输出: now is 2020年4月14日晚上7点59分 + } +} +``` + +##### 配置输出格式 + +例如你想将某一个时间值，以 `2020-04-14` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `YYYY-MM-DD`，即： + +```schema:height="200" +{ + "type": "page", + "data": { + "now": 1586865590 + }, + "body": { + "type": "tpl", + "tpl": "now is ${now|date:YYYY-MM-DD}" // 通过配置输出格式，输出: now is 2020-04-14 + } +} +``` + +##### 配置数据格式 + +如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`inputformat`参数用于解析当前时间值，例如： + +```schema:height="200" +{ + "type": "page", + "data": { + "now": "2020/4/14 19:59:50" // 查阅 moment 文档可知，需要配置数据格式为 "YYYY/MM/DD HH:mm:ss" + }, + "body": { + "type": "tpl", + "tpl": "now is ${now|date:LLL:YYYY/MM/DD HH\\:mm\\:ss}" // 配置输出格式和数据格式，输出: now is 2020年4月14日晚上7点59分 + } +} +``` + +> **注意：** 在过滤器参数中使用`:`字符，需要在前面加`\\`转义字符 + +### number + +自动给数字加千分位。 + +##### 基本用法 + +``` +${xxx | number} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "price": 233333333 + }, + "body": { + "type": "tpl", + "tpl": "price is ${price|number}" // 输出: price is 233,333,333 + } +} +``` + +### trim + +把变量值前后多余的空格去掉。 + +##### 基本用法 + +``` +${xxx | trim} +``` + +### percent + +##### 基本用法 + +``` +${xxx | percent[:decimals]} +``` + +- **decimals**：指定小数点后`n`位数，默认为`0` + +```schema:height="200" +{ + "type": "page", + "data": { + "value": 0.8232343 + }, + "body": { + "type": "tpl", + "tpl": "value is ${value|percent}" // 输出: value is 82% + } +} +``` + +##### 指定小数点后位数 + +```schema:height="200" +{ + "type": "page", + "data": { + "value": 0.8232343 + }, + "body": { + "type": "tpl", + "tpl": "value is ${value|percent:2}" // 保留小数点后4位，输出: value is 82.32% + } +} +``` + +### round + +四舍五入取整 + +``` +${xxx | round[:decimals]} +``` + +- **decimals**：指定小数点后`n`位小数，默认为`2` + +```schema:height="200" +{ + "type": "page", + "data": { + "number1": 2.3, + "number2": 2.6 + }, + "body": { + "type": "tpl", + "tpl": "number1 is ${number1|round}, number2 is ${number2|round}" // 输出: number1 is 2.30, number2 is 2.60 + } +} +``` + +##### 指定小数点后位数 + +```schema:height="200" +{ + "type": "page", + "data": { + "number": 2.6 + }, + "body": { + "type": "tpl", + "tpl": "number is ${number|round:0}" // 保留小数点后0位，输出: number is 3 + } +} +``` + +### truncate + +当超出若干个字符时，后面的部分直接显示某串字符 + +##### 基本用法 + +``` +${xxx | truncate[:length][:mask]} +``` + +- **length**：指定多长的字符后省略，默认为`200` +- **mask**：省略时显示的字符，默认为`"..."` + +```schema:height="200" +{ + "type": "page", + "data": { + "text": "这是一段非常长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文字" + }, + "body": { + "type": "tpl", + "tpl": "text is ${text|truncate:10}" // 输出: text is 这是一段非常长长长长... + } +} +``` + +### url_encode + +效果同 [encodeURIComponent() - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) + +##### 基本用法 + +``` +${xxx | url_encode} +``` + +### url_decode + +效果同 [decodeURIComponent() - JavaScript | MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent) + +##### 基本用法 + +``` +${xxx | url_decode} +``` + +### default + +当变量值为空时，显示其他值代替。 + +##### 基本用法 + +``` +${xxx | default[:defaultValue]} +``` + +- **defaultValue**：显示的默认值 + +```schema:height="200" +{ + "type": "page", + "data": { + "value": "" // 或者是 null 或 undefined + }, + "body": { + "type": "tpl", + "tpl": "value is ${value|default:-}" // 输出: value is - + } +} +``` + +### split + +可以将字符传通过分隔符分离成数组 + +##### 基本用法 + +``` +${xxx | split[:delimiter]} +``` + +- **delimiter**：分隔值，默认为`,` + +```schema:height="200" +{ + "type": "page", + "data": { + "array": "a,b,c" + }, + "body": { + "type": "tpl", + "tpl": "array is ${array|split|json}" // 输出: array is ["a", "b", "c"] + } +} +``` + +### join + +当变量值是数组时，可以把内容连接起来。 + +##### 基本用法 + +``` +${xxx | join[:glue]} +``` + +- **glue**：连接符，默认为`空字符` + +```schema:height="200" +{ + "type": "page", + "data": { + "array": ["a", "b", "c"] + }, + "body": { + "type": "tpl", + "tpl": "array is ${array|join}" // 输出: array is abc + } +} +``` + +##### 配置连接符 + +```schema:height="200" +{ + "type": "page", + "data": { + "array": ["a", "b", "c"] + }, + "body": { + "type": "tpl", + "tpl": "array is ${array|join:-}" // 输出: array is a,b,c + } +} +``` + +### first + +获取数组中的第一个值 + +##### 基本用法 + +``` +${xxx | first} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "array": ["a", "b", "c"] + }, + "body": { + "type": "tpl", + "tpl": "first element is ${array|first}" // 输出: first element is a + } +} +``` + +### last + +获取数组中的最后一个值 + +##### 基本用法 + +``` +${xxx | last} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "array": ["a", "b", "c"] + }, + "body": { + "type": "tpl", + "tpl": "last element is ${array|last}" // 输出: last element is c + } +} +``` + +### nth + +获取数组中的第`n`个值 + +##### 基本用法 + +``` +${xxx | nth[:nth]} +``` + +- **nth**：指定获取第几个值 + +```schema:height="200" +{ + "type": "page", + "data": { + "array": ["a", "b", "c"] + }, + "body": { + "type": "tpl", + "tpl": "second element is ${array|nth:1}" // 输出: second element is b + } +} +``` + +**注意：** nth 配置`0`为获取第一个元素。 + +### pick + +获取对象或数组中符合条件的筛选值 + +##### 基本用法 + +``` +${xxx | pick[:path]} +``` + +- **path:** 指定筛选的模板，默认为`&`，即返回原数据 + +##### 在对象中获取某个 key 值 + +```schema:height="200" +{ + "type": "page", + "data": { + "object": { + "a": 1, + "b": 2, + "c": 3 + } + }, + "body": { + "type": "tpl", + "tpl": "a value of object is ${object|pick:a}" // 输出: a value of object is 1 + } +} +``` + +##### 遍历对象数组获取指定值 + +```schema:height="200" +{ + "type": "page", + "data": { + "array": [ + { + "a": 1, + "b": 2, + "c": 3 + }, + { + "a": 10, + "b": 20, + "c": 30 + }, + { + "a": 100, + "b": 200, + "c": 300 + } + ] + }, + "body": { + "type": "tpl", + "tpl": "new array is ${array|pick:a|json}" // 输出: new array is [1, 10 ,100] + } +} +``` + +##### 遍历数组对象，并自定义 key + +```schema:height="200" +{ + "type": "page", + "data": { + "array": [ + { + "aaa": 1, + "bbb": 2, + "ccc": 3 + }, + { + "aaa": 10, + "bbb": 20, + "ccc": 30 + }, + { + "aaa": 100, + "bbb": 200, + "ccc": 300 + } + ] + }, + "body": { + "type": "tpl", + "tpl": "new array is ${array|pick:a~aaa,b~bbb|json}" + // 输出: new array is [ { "a": 1, "b": 2 }, { "a": 10, "b": 20 }, { "a": 100, "b": 200 } ] + } +} +``` + +### str2date + +@todo + +### duration + +秒值格式化成时间格式 + +##### 基本用法 + +``` +${xxx | duration} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "time1": 2, + "time2": 67, + "time3": 1111111 + }, + "body": [ + { + "type": "tpl", + "tpl": "time1 is ${time1|duration}" + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "time2 is ${time2|duration}" + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "time3 is ${time3|duration}" + } + ] +} +``` + +### asArray + +将数据包成数组 + +##### 基本用法 + +``` +${xxx | asArray} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "value": "a" + }, + "body": { + "type": "tpl", + "tpl": "new value is ${value|asArray|json}" // 输出: new value is ["a"] + } +} +``` + +### lowerCase + +将字符串转小写 + +##### 基本用法 + +``` +${xxx | lowerCase} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "text": "World" + }, + "body": { + "type": "tpl", + "tpl": "Hello ${text|lowerCase}" // 输出: Hello world + } +} +``` + +### upperCase + +将字符串转大写 + +##### 基本用法 + +``` +${xxx | upperCase} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "text": "World" + }, + "body": { + "type": "tpl", + "tpl": "Hello ${text|upperCase}" // 输出: Hello WORLD + } +} +``` + +### base64Encode + +base64 加密 + +##### 基本用法 + +``` +${xxx | base64Encode} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "text": "World" + }, + "body": { + "type": "tpl", + "tpl": "Hello ${text|base64Encode}" // 输出: Hello V29ybGQ= + } +} +``` + +### base64Decode + +base64 解密 + +##### 基本用法 + +``` +${xxx | base64Decode} +``` + +```schema:height="200" +{ + "type": "page", + "data": { + "text": "V29ybGQ=" + }, + "body": { + "type": "tpl", + "tpl": "Hello ${text|base64Decode}" // 输出: Hello World + } +} +``` + +### isTrue + +真值条件过滤器 + +##### 基本用法 + +``` +${xxx | isTrue[:trueValue][:falseValue] +``` + +- **trueValue**: 如果变量为 [真](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)，即返回该值； +- **falseValue**: 如果变量为 [假](https://developer.mozilla.org/en-US/docs/Glossary/Falsy)，则返回该值。 + +> 配置`trueValue`和`falseValue`时，如果想要返回当前数据域中某个变量的值，那么参数可以直接配置变量名而不需要在两边添加引号；如果想返回某字符串，那么需要给参数两边添加单引号或双引号， +> +> 例如 `${xxx|isTrue:'foo':bar}`，当 `xxx` 变量为真，那么会返回 **字符串`'foo'`**，如果不为真，那么返回数据域中 **变量`bar`** 的值。 + +```schema:height="200" +{ + "type": "page", + "data": { + "value1": true, + "value2": false + }, + "body": [ + { + "type": "tpl", + "tpl": "value1：${value1|isTrue:'是真':'是假'}" // 输出: value是真 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "value2：${value2|isTrue:'是真':'是假'}" // 输出: value是真 + } + ] +} +``` + +##### 返回数据域中变量 + +参数中不添加引号，可以直接返回数据域中变量值 + +```schema:height="200" +{ + "type": "page", + "data": { + "value1": true, + "value2": false, + "trueValue": "这个值是真的", + "falseValue": "这个值是假的" + }, + "body": [ + { + "type": "tpl", + "tpl": "value1：${value1|isTrue:trueValue:falseValue}" // 输出: value是真 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "value2：${value2|isTrue:trueValue:falseValue}" // 输出: value是真 + } + ] +} +``` + +### isFalse + +假值条件过滤器 + +##### 基本用法 + +``` +${xxx | isFalse[:falseValue][:trueValue] +``` + +用法与 [isTrue 过滤器](#istrue) 相同，判断逻辑相反 + +### isMatch + +模糊匹配条件过滤器 + +##### 基本用法 + +``` +${xxx | isMatch[:matchParam][:trueValue][:falseValue] +``` + +- **matchParam**: 匹配关键字参数 + - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号； + - 如果想模糊匹配某个变量值，那么参数不需要添加引号。 +- **trueValue**: 如果模糊匹配成功，即返回该值； +- **falseValue**: 如果模糊匹配失败，则返回该值。 + +```schema:height="200" +{ + "type": "page", + "data": { + "text1": "Hello", + "text2": "World" + }, + "body": [ + { + "type": "tpl", + "tpl": "${text1|isMatch:'hello':'匹配':'不匹配'}" // 输出: 匹配 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "${text2|isMatch:'hello':'匹配':'不匹配'}" // 输出: 匹配 + } + ] +} +``` + +##### 返回数据域中变量 + +参数中不添加引号，可以直接返回数据域中变量值 + +```schema:height="200" +{ + "type": "page", + "data": { + "text1": "Hello", + "text2": "World", + "matchValue": "这个值匹配上了", + "notmatchValue": "这个值没有匹配上" + }, + "body": [ + { + "type": "tpl", + "tpl": "${text1|isMatch:'hello':matchValue:notmatchValue}" // 输出: 匹配 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "${text2|isMatch:'hello':matchValue:notmatchValue}" // 输出: 匹配 + } + ] +} +``` + +### notMatch + +##### 基本用法 + +``` +${xxx | notMatch[:matchParam][:trueValue][:falseValue] +``` + +用法与 [isMatch](#isMatch) 相同，判断逻辑相反。 + +### isEquals + +全等匹配过滤器 + +##### 基本用法 + +``` +${xxx | isEquals[:equalsValue][:trueValue][:falseValue] +``` + +- **equalsValue**: 全等匹配关键字参数 + - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号； + - 如果想判断等于某个变量值，那么参数不需要添加引号。 +- **trueValue**: 如果模糊匹配成功，即返回该值； +- **falseValue**: 如果模糊匹配失败，则返回该值。 + +```schema:height="200" +{ + "type": "page", + "data": { + "text1": "Hello", + "text2": "hello" + }, + "body": [ + { + "type": "tpl", + "tpl": "${text1|isEquals:'Hello':'等于':'不等于'}" // 输出: 等于 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "${text2|isEquals:'Hello':'等于':'不等于'}" // 输出: 等于 + } + ] +} +``` + +##### 返回数据域中变量 + +参数中不添加引号，可以直接返回数据域中变量值 + +```schema:height="200" +{ + "type": "page", + "data": { + "text1": "Hello", + "text2": "hello", + "equalsValue": "这个值等于'Hello'", + "notequalsValue": "这个值不等于'Hello'" + }, + "body": [ + { + "type": "tpl", + "tpl": "${text1|isEquals:'Hello':equalsValue:notequalsValue}" // 输出: 等于 + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "${text2|isEquals:'Hello':equalsValue:notequalsValue}" // 输出: 等于 + } + ] +} +``` + +### notEquals + +不全等匹配过滤器 + +##### 基本用法 + +``` +${xxx | notEquals[:equalsValue][:trueValue][:falseValue] +``` + +用法与 [isEquals](#isEquals) 相同，判断逻辑相反。 + +### filter + +过滤数组，操作对象为数组，当目标对象不是数组时将无效。 + +##### 基本用法 + +``` +${xxx | filter[:keys][:directive][:arg1]} +``` + +- **keys**: 参与过滤的字段集合 +- **directive**: 用于过滤数组的指令，包含下面这几种 + - `isTrue` 目标值为真通过筛选。 + - `isFalse` 目标值为假时通过筛选。 + - `match` 模糊匹配后面的参数。`${xxx|filter:a,b:match:keywords}` 表示 xxx 里面的成员，如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值，则通过筛选。 + - `equals` 相对于模糊匹配，这个就相对精确匹配了，用法跟 `match` 一样。 +- **arg1**: 字符串或变量名 + + 比如: `${xxx|filter:readonly:isTrue}` 将 xxx 数组中 readonly 为 true 的成员提取出来。 + 再来个栗子：`${xxx|filter:a,b:match:keywords}` 将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量，也可以写固定值如：`${xxx|filter:a,b:match:'123'}` + +## 串联使用过滤器 + +使用单一的过滤器可能无法满足你的所有需求，幸运的是 amis 支持串联使用过滤器，而前一个过滤器的值会作为下一个过滤器的入参，进行下一步处理。语法如下: + +``` +${xxx|filter1|filter2|...} +``` + +##### 先拆分字符串，再获取第 n 个值 + +```schema:height="200" +{ + "type": "page", + "data": { + "value":"a,b,c" + }, + "body": { + "type": "tpl", + "tpl": "${value|split|first}" // 输出: a + } +} +``` + +上例子中`${value|split|first}`，会经历下面几个步骤： + +1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`["a", "b", "c"]`； +2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`"a"` +3. 输出`"a"` diff --git a/docs/concepts/datascope-and-datachain.md b/docs/concepts/datascope-and-datachain.md new file mode 100755 index 00000000..dee03496 --- /dev/null +++ b/docs/concepts/datascope-and-datachain.md @@ -0,0 +1,318 @@ +--- +title: 数据域与数据链 +description: +type: 0 +group: 💡 概念 +menuName: 数据域与数据链 +icon: +order: 10 +--- + +## 基本的数据展示 + +我们再看之前的 Hello World 示例： + +```json +{ + "type": "page", + "body": "Hello World!" +} +``` + +目前我们只是在 `Page` 组件中渲染一串固定的文本，如果我们想要 **通过接口拉取想要的数据，并展示到 `Page` 组件的内容区** 呢？ + +## 添加初始化接口 + +```json +{ + "type": "page", + "initApi": "/api/mock2/page/initData", + "body": "date is ${date}" +} +``` + +接口返回的数据结构如下： + +```json +{ + "status": 0, + "msg": "", + "data": { + "title": "Test Page Component", + "date": "2017-10-13" + } +} +``` + +渲染后页面如下： + +```schema:height="200" +{ + "type": "page", + "initApi": "https://houtai.baidu.com/api/mock2/page/initData", + "body": "date is ${date}" +} +``` + +## 发生了什么? + +我们可以看到，输出结果不变，但是我们这次渲染的是接口返回的数据： + +1. 首先我们给 `Page` 组件配置了`initApi`属性，该属性会在组件初始化时，请求所该属性所配置的接口 +2. 接口请求成功后，`Page` 会把接口返回的`data`内数据存到当前的数据域中 +3. `Page` 在渲染 `body` 所配置的文本时，会解析文本内容，当解析到模板变量`${text}`时，amis 会把尝试在当前组件的数据域中获取`text`变量值，并替换掉`${text}`，最后渲染解析后的文本。 + +> 下一节我们会介绍[模板](./template)，`body`属性自身支持模板语法，amis 中支持模板语法的组件还有很多 + +## 数据域 + +前面我们提到了**数据域**这个概念，它是 amis 中最重要的概念之一。 + +还是通过最简单的示例进行讲解： + +```json +{ + "type": "page", + "body": "Hello ${text}" +} +``` + +上面的配置要做的很简单：使用 `Page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。 + +毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello` + +```schema:height="200" +{ + "type": "page", + "body": "Hello ${text}" +} +``` + +因为当前 `Page` 组件的数据域中是没有任何数据的，相比之前的示例，区别在于前面我们为 `Page` 组件配置了初始化接口，它会将接口返回的数据存入数据域中以供组件使用。 + +再观察下面这段配置： + +```schema:height="200" +{ + "data": { + "text": "World!" + }, + "type": "page", + "body": "Hello ${text}" +} +``` + +再次查看渲染结果，顺利输出了 `Hello World!` + +相信你可能已经猜到，**组件的`data`属性值是数据域的一种形式**，实际上当我们没有显式的配置数据域时，可以假想成这样： + +```schema:height="200" +{ + "data": {}, // 空的数据域 + "type": "page", + "body": "Hello ${text}" +} +``` + +> amis 中大部分组件都具有数据域。 +> +> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 **[数据链](./datascope-and-datachain#%E6%95%B0%E6%8D%AE%E9%93%BE)** + +## 数据链 + +相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。 + +**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时： + +1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程； +2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`； +3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。 + +> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化 + +继续来看这个例子： + +```schema:height="200" +{ + "type": "page", + "data": { + "name": "zhangsan", + "age": 20 + }, + "body": [ + { + "type": "tpl", + "tpl": "my name is ${name}" + }, + { + "type": "service", + "data": { + "name": "lisi" + }, + "body": { + "type": "tpl", + "tpl": "my name is ${name}, I'm ${age} years old" + } + } + ] +} +``` + +上面的配置项形成了如下的组件树和数据链： + +组件树： + +``` +page + ├─ tpl + └─ service + └─ tpl +``` + +数据链： + +```json +{ + "name": "zhangsan", + "age": 20, + "__sub": { + "name": "lisi" + } +} +``` + +> `__sub` 字段只是为了方便理解。 + +首先，`page`组件下的`tpl`组件，在渲染`my name is ${name}`时，首先会在`page`的数据域中，尝试寻找`name`变量，在当前数据域中，`name`变量为`zhangsan`，因此寻找变量结束，通过数据映射渲染，输出：`my name is zhangsan`，渲染结束； + +然后，`service`组件开始渲染，`service`组件内子组件`tpl`，它配置的模板字符串是：`my name is ${name}, I'm ${age} years old`，它会在`service`的数据域中，尝试寻找`name`和`age`变量。 + +由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。 + +很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi, I'm 20 years old`，渲染结束。 + +> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的[模板](./template)和[表达式章节](./expression)中一一介绍。 + +## 初始化数据域 + +通过上面的介绍你可能发现，初始化数据域有两种方式： + +### 1. 配置组件初始化接口 + +想要将自己的服务中的数据保存到某个组件的数据域中，最好的方式就是为当前组件配置初始化接口： + +```json +{ + "type": "page", + "initApi": "/api/initData", + "body": "Hello ${text}" +} +``` + +接口必须按照下面的格式返回： + +```json +{ + "status": 0, + "msg": "", + "data": { + "text": "World!" + ...其他字段 + } +} +``` + +**注意：** + +1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 [**Service 组件**](./service) 来辅助实现数据域初始化； +2. **`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段； +3. `data`必须返回一个具有`key-value`结构的对象 + +```json +{ + "status": 0, + "msg": "", + "data": { // 正确 + "text": "World!" + } +} + +// 直接返回字符串或者数组都是无效的 +{ + "status": 0, + "msg": "", + "data": "some string" // 错误，使用 key 包装 +} +{ + "status": 0, + "msg": "", + "data": ["a", "b"] // 错误，使用 key 包装 +} +``` + +> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看[API 文档](../types/api) + +### 2. 显式配置 data 属性值 + +另一种初始化当前数据域的方式是显式的设置组件的`data`属性值： + +```schema:height="200" +{ + "data": { + "text": "World!", + "name": "amis" + }, + "type": "page", + "body": "Hello ${text}, my name is ${name}." +} +``` + +### 同时配置 + +在同时配置 **初始化接口** 和 **`data`属性** 时，数据域将会合并`data`属性值和初始化接口返回的数据 + +## 更新数据域 + +部分组件的某些交互或行为会对当前组件的数据域进行更新： + +```schema:height="400" +{ + "type": "page", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/mock2/form/saveForm", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "type": "text", + "name": "age", + "label": "年龄：" + }, + { + "type": "static-tpl", + "tpl": "生成的id为：${id}" + } + ] + } +} +``` + +`/api/saveForm`接口会保存当前表单提交的数据，并返回后端服务生成的`id`，并返回到前端，格式如下; + +```json +{ + "status": 0, + "msg": "保存成功", + "data": { + "id": 1 + } +} +``` + +这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。 + +> 具有类似特征的组件还有`Formula`等 diff --git a/docs/concepts/expression.md b/docs/concepts/expression.md new file mode 100755 index 00000000..a4d1c3ce --- /dev/null +++ b/docs/concepts/expression.md @@ -0,0 +1,39 @@ +--- +title: 表达式 +description: +type: 0 +group: 💡 概念 +menuName: 表达式 +icon: +order: 13 +--- +一般来说，属性名类似于`xxxOn`的配置项，都可以使用表达式进行配置，表达式具有如下的语法： + +```json +{ + "type": "tpl", + "tpl": "当前作用域中变量 show 是 1 的时候才可以看得到我哦~", + "visibleOn": "data.show === 1" +} +``` + +其中：`data.show === 1` 就是表达式。 + +## 表达式语法 + +> 表达式语法实际上是 JavaScript 代码，更多 JavaScript 知识查看 [这里](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript)。 + +在 amis 的实现过程中，当正则匹配到某个组件存在`xxxOn`语法的属性名时，会尝试进行下面步骤（以上面配置为例）： + +1. 提取`visibleOn`配置项配置的 JavaScript 语句`data.show === 1`，并以当前组件的数据域为这段代码的数据作用域，执行这段js代码； +2. 之后将执行结果赋值给`visible`并添加到组件属性中 +3. 执行渲染。当前示例中：`visible`代表着是否显示当前组件； + +组件不同的配置项会有不同的效果，请大家在组件文档中多留意。 + +> 表达式的执行结果预期应该是`boolean`类型值，如果不是，amis 会根据 JavaScript 的规则将结果视作`boolean`类型进行判断 + + + + + diff --git a/docs/concepts/linkage.md b/docs/concepts/linkage.md new file mode 100755 index 00000000..f5ceb69d --- /dev/null +++ b/docs/concepts/linkage.md @@ -0,0 +1,347 @@ +--- +title: 联动 +description: +type: 0 +group: 💡 概念 +menuName: 联动 +icon: +order: 14 +--- + +上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。 + +## 基本联动 + +元素的联动是页面开发中很常见的功能之一，类似于： + +- 某个条件下显示或隐藏某个组件 +- 某个条件下请求接口 +- 某个条件下轮训接口停止轮训 +- 等等... + +> 联动配置项一般都是 [表达式](./expression) + +### 组件配置联动 + +控制组件的显隐，表单项的禁用状态等，看下面这个例子： + +```schema:height="300" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "radios", + "name": "foo", + "label": false, + "options": [ + { + "label": "类型1", + "value": 1 + }, + { + "label": "类型2", + "value": 2 + } + ] + }, + { + "type": "text", + "name": "text1", + "label": false, + "placeholder": "选中 类型1 时可见", + "visibleOn": "data.foo == 1" + }, + { + "type": "text", + "name": "text2", + "label": false, + "placeholder": "选中 类型2 时不可点", + "disabledOn": "data.foo == 2" + } + ] +} +``` + +上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果： + +1. 只要当`radio`选中`类型1`时，才会显示`text1`； +2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态` + +> **注意：** +> +> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值 +> +> 如果想要在提交时去掉某个隐藏的字段，可以通过 [数据映射](./data-mapping) 配置自定义数据体 + +### 接口联动 + +#### 基本使用 + +接口联动是另外一种很常见的场景，查看下面这个例子： + +```schema:height="250" scope="body" +{ + "title": "", + "type": "form", + "mode": "horizontal", + "controls": [ + { + "label": "选项1", + "type": "radios", + "name": "a", + "inline": true, + "options": [ + { + "label": "选项A", + "value": 1 + }, + { + "label": "选项B", + "value": 2 + }, + { + "label": "选项C", + "value": 3 + } + ] + }, + { + "label": "选项2", + "type": "select", + "size": "sm", + "name": "b", + "source": "https://houtai.baidu.com/api/mock2/options/level2?a=${a}", + "description": "切换选项1的值，会触发选项2的source 接口重新拉取" + } + ], + "actions": [] +} +``` + +上面例子我们实现了这个逻辑：每次选择`选项1`的时候，会触发`选项2`的`source`配置的接口重新请求，并返回不同的下拉选项。 + +是如何做到的？ + +实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。 + +```json +{ + "initApi": "/api/initData?query=${query}" +} +``` + +> **tip:** +> +> 触发所引用变量值发生变化的方式有以下几种： +> +> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值； +> 2. 通过[组件间联动](./linkage#%E7%BB%84%E4%BB%B6%E9%97%B4%E8%81%94%E5%8A%A8)，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果 +> +> 接口联动一般只适用于初始化接口，例如： +> +> - `form`组件中的`initApi`； +> - `select`组件中的`source`选项源接口； +> - `service`组件中的`api`和`schemaApi`； +> - `crud`组件中的`api`； +> - 等等... + +#### 配置请求条件 + +默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。 + +```schema:height="250" scope="body" +{ + "title": "", + "type": "form", + "mode": "horizontal", + "controls": [ + { + "label": "选项1", + "type": "radios", + "name": "a", + "inline": true, + "options": [ + { + "label": "选项A", + "value": 1 + }, + { + "label": "选项B", + "value": 2 + }, + { + "label": "选项C", + "value": 3 + } + ] + }, + { + "label": "选项2", + "type": "select", + "size": "sm", + "name": "b", + "source": { + "method": "get", + "url": "https://houtai.baidu.com/api/mock2/options/level2?a=${a}", + "sendOn": "data.a === 2" + }, + "description": "只有选项1选择B的时候，才触发选项2的source接口重新拉取" + } + ], + "actions": [] +} +``` + +更多用法，见：[Api-配置请求条件](../types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%9D%A1%E4%BB%B6) + +#### 主动触发 + +上面示例有个问题，就是数据一旦变化就会出发重新拉取，而输入框的频繁变化值会导致频繁的拉取？没关系，也可以配置主动拉取如： + +```schema:height="300" scope="body" +{ + "type": "form", + "name": "my_form", + "controls": [ + { + "type": "text", + "name": "keyword", + "addOn": { + "label": "搜索", + "type": "button", + "actionType": "reload", + "target": "my_form.select" + } + }, + { + "type": "select", + "name": "select", + "label": "Select", + "source": { + "method": "get", + "url": "https://houtai.baidu.com/api/mock2/form/getOptions?waitSeconds=1", + "data": { + "a": "${keyword}" + } + } + } + ] +} +``` + +1. 通过`api`对象形式，将获取变量值配置到`data`请求体中。 +2. 配置搜索按钮，并配置该行为是刷新目标组件，并配置目标组件`target` +3. 这样我们只有在点击搜索按钮的时候，才会将`keyword`值发送给`select`组件，重新拉取选项 + +### 其他联动 + +还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。 + +## 组件间联动 + +联动很可能会出现跨组件的形式，思考下面这种场景： + +有一个表单`form`组件，还有一个列表组件`crud`，我们想要把`form`提交的数据，可以用作`crud`的查询条件，并请求`crud`的接口，由于`form`和`crud`位于同一层级，因此没法使用数据链的方式进行取值。 + +```schema:height="800" scope="body" +[ + { + "title": "查询条件", + "type": "form", + "controls": [ + { + "type": "text", + "name": "keywords", + "label": "关键字：" + } + ], + "submitText": "搜索" + }, + { + "type": "crud", + "api": "https://houtai.baidu.com/api/sample", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + } + ] + } +] +``` + +现在更改配置如下： + +```schema:height="800" scope="body" +[ + { + "title": "查询条件", + "type": "form", + "target": "my_crud", + "controls": [ + { + "type": "text", + "name": "keywords", + "label": "关键字：" + } + ], + "submitText": "搜索" + }, + { + "type": "crud", + "name": "my_crud", + "api": "https://houtai.baidu.com/api/sample", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "name": "engine", + "label": "Rendering engine" + }, + { + "name": "browser", + "label": "Browser" + }, + { + "name": "platform", + "label": "Platform(s)" + }, + { + "name": "version", + "label": "Engine version" + } + ] + } +] +``` + +我们进行两个调整： + +1. 为`crud`组件设置了`name`属性为`my_crud` +2. 为`form`组件配置了`target`属性为`crud`的`name`：**`my_crud`** + +更改配置后，提交表单时，如果有配置提交接口，会先请求提交，之后 amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。 + +> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 [crud -> filter](../components/crud) 文档。 + +我们再来一个例子，这次我们实现两个`form`之间的联动： + +事实上，**组件间联动也可以实现上述任意的 [基本联动效果](./linkage#%E5%9F%BA%E6%9C%AC%E8%81%94%E5%8A%A8)（显隐联动、接口联动等其他联动）。** diff --git a/docs/concepts/schema.md b/docs/concepts/schema.md new file mode 100755 index 00000000..cd0e4e3e --- /dev/null +++ b/docs/concepts/schema.md @@ -0,0 +1,124 @@ +--- +title: 配置与组件 +description: 配置与组件 +type: 0 +group: 💡 概念 +menuName: 配置与组件 +icon: +order: 9 +--- +## 最简单的 amis 配置 + +一个最简单的 amis 配置看起来是这样的： + +```json +{ + "type": "page", + "body": "Hello World!" +} +``` + +请观察上面的代码，这是一段普通的 JSON 格式文本，它的含义是： + +1. `type`是每一个amis节点中，最重要的一个字段，它会告诉 amis 当前节点需要渲染的是`Page`组件 +2. 而`body`字段会被看作是`Page`组件的属性，将该属性值所配置的内容，渲染到`Page`组件的内容区中 + +上面配置通过 amis 的处理，会渲染出一个简单的页面，并在页面中展示文字：`Hello World!`，就像下面这样： + +```schema:height="200" +{ + "type": "page", + "body": "Hello World!" +} +``` + +后续章节中，你会经常看到例如上面这样，支持**实时编辑配置预览效果**的页面配置预览工具，它可以帮助你更直观的看到具体配置所展示的页面效果。 + +> 配置中，`$schema` 这个字段可以忽略，它是指定当前 JSON 配置是符合指定路径 https://houtai.baidu.com/v2/schemas/page.json 的 JSON SCHEMA 文件描述的。 +> +> 该实时编辑器就是通过该描述文件，实现输入提示的功能。 + +## 组件 + +上面提到，`type`字段会告诉 amis 当前节点渲染的组件为`Page`，`Page` 属于 amis 内置组件之一。 + +组件节点的配置永远都是由 **`type`字段** （用于标识当前是哪个组件）和 **若干属性值** 构成的。 + +``` +{ + "type": "xxx", + ...若干属性值 +} +``` + +## 组件树 + +这次我们看一个稍微复杂一点的配置： + +```json +{ + "type": "page", + "body": { + "type": "tpl", + "tpl": "Hello World!" + } +} +``` + +该配置渲染页面如下： + +```schema:height="200" +{ + "type": "page", + "body": { + "type": "tpl", + "tpl": "Hello World!" + } +} +``` + +看起来和之前的示例没啥区别，但是发现和之前不同的地方了吗？ + +这次 `Page` 组件的 `body` 属性值，我们配置了一个对象，**通过`type`指明`body`内容区内会渲染一个叫`Tpl`的组件**，它是一个模板渲染组件，这里我们先只是配置一段固定文字。 + +它是 `Page` 的子节点。 + +再来观察下面这个配置: + +```schema:height="320" scope="body" +[ + { + "type": "tpl", + "tpl": "Hello World!" + }, + { + "type": "divider" + }, + { + "type": "form", + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名" + } + ] + } +] +``` + +我们通过数组的形式，在内容区配置`tpl`和`form`组件。 + +没错，`body` 属性支持数组结构，这也就意味着你可以 **通过组件树的形式** 渲染出足够复杂的页面。 + +具有`body`这类属性的组件一般称为**容器型组件**，就如名字所形容的，这类组件可以作为容器，在他们的子节点配置若干其他类型的组件，amis 中还有很多类似的组件，例如`Form`、`Service`等，后续我们会逐一进行介绍。 + +> **注意：** +> +> `Page`是一个特殊的容器组件，它是 amis 页面配置中 **必须也是唯一的顶级节点** + + + + + + diff --git a/docs/concepts/style.md b/docs/concepts/style.md new file mode 100755 index 00000000..4e61663d --- /dev/null +++ b/docs/concepts/style.md @@ -0,0 +1,706 @@ +--- +title: 样式 +description: +type: 0 +group: 💡 概念 +menuName: 样式 +icon: +order: 18 +--- +amis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。 + +## 图标 + +amis 集成了 [fontawesome](http://fontawesome.io/icons/)，所以关于图标部分，请前往 [fontawesome](http://fontawesome.io/icons/) 查看。 + +## 布局 + +水平布局可以考虑用 Bootstrap 的 [Grids](http://getbootstrap.com/css/#grid) 或者用 `hobx` 加 `col` + +```html +
+
Col A
+
Col B
+
Col C
+
+``` + +## 宽高 + +```css +.w-1x { + width: 1em; +} +.w-2x { + width: 2em; +} +.w-3x { + width: 3em; +} +.w-xxs { + width: 60px; +} +.w-xs { + width: 90px; +} +.w-sm { + width: 150px; +} +.w { + width: 200px; +} +.w-md { + width: 240px; +} +.w-lg { + width: 280px; +} +.w-xl { + width: 320px; +} +.w-xxl { + width: 360px; +} +.w-full { + width: 100%; +} +.w-auto { + width: auto; +} +.h-auto { + height: auto; +} +.h-full { + height: 100% !important; + max-height: none !important; +} +``` + +```html +
+
w-1x
+
w-2x
+
w-3x
+
w-xxs
+
w-xs
+
w-sm
+
w
+
...
+
+
+
w-md
+
w-lg
+
w-xl
+
...
+
+
+
w-xxl
+
...
+
+``` + +## 外边距 + +```css +.m-xxs { + margin: 2px 4px; +} +.m-xs { + margin: 5px; +} +.m-sm { + margin: 10px; +} +.m { + margin: 15px; +} +.m-md { + margin: 20px; +} +.m-lg { + margin: 30px; +} +.m-xl { + margin: 50px; +} +.m-n { + margin: 0 !important; +} +.m-l-none { + margin-left: 0 !important; +} +.m-l-xs { + margin-left: 5px; +} +.m-l-sm { + margin-left: 10px; +} +.m-l { + margin-left: 15px; +} +.m-l-md { + margin-left: 20px; +} +.m-l-lg { + margin-left: 30px; +} +.m-l-xl { + margin-left: 40px; +} +.m-l-xxl { + margin-left: 50px; +} +.m-l-n-xxs { + margin-left: -1px; +} +.m-l-n-xs { + margin-left: -5px; +} +.m-l-n-sm { + margin-left: -10px; +} +.m-l-n { + margin-left: -15px; +} +.m-l-n-md { + margin-left: -20px; +} +.m-l-n-lg { + margin-left: -30px; +} +.m-l-n-xl { + margin-left: -40px; +} +.m-l-n-xxl { + margin-left: -50px; +} +.m-t-none { + margin-top: 0 !important; +} +.m-t-xxs { + margin-top: 1px; +} +.m-t-xs { + margin-top: 5px; +} +.m-t-sm { + margin-top: 10px; +} +.m-t { + margin-top: 15px; +} +.m-t-md { + margin-top: 20px; +} +.m-t-lg { + margin-top: 30px; +} +.m-t-xl { + margin-top: 40px; +} +.m-t-xxl { + margin-top: 50px; +} +.m-t-n-xxs { + margin-top: -1px; +} +.m-t-n-xs { + margin-top: -5px; +} +.m-t-n-sm { + margin-top: -10px; +} +.m-t-n { + margin-top: -15px; +} +.m-t-n-md { + margin-top: -20px; +} +.m-t-n-lg { + margin-top: -30px; +} +.m-t-n-xl { + margin-top: -40px; +} +.m-t-n-xxl { + margin-top: -50px; +} +.m-r-none { + margin-right: 0 !important; +} +.m-r-xxs { + margin-right: 1px; +} +.m-r-xs { + margin-right: 5px; +} +.m-r-sm { + margin-right: 10px; +} +.m-r { + margin-right: 15px; +} +.m-r-md { + margin-right: 20px; +} +.m-r-lg { + margin-right: 30px; +} +.m-r-xl { + margin-right: 40px; +} +.m-r-xxl { + margin-right: 50px; +} +.m-r-n-xxs { + margin-right: -1px; +} +.m-r-n-xs { + margin-right: -5px; +} +.m-r-n-sm { + margin-right: -10px; +} +.m-r-n { + margin-right: -15px; +} +.m-r-n-md { + margin-right: -20px; +} +.m-r-n-lg { + margin-right: -30px; +} +.m-r-n-xl { + margin-right: -40px; +} +.m-r-n-xxl { + margin-right: -50px; +} +.m-b-none { + margin-bottom: 0 !important; +} +.m-b-xxs { + margin-bottom: 1px; +} +.m-b-xs { + margin-bottom: 5px; +} +.m-b-sm { + margin-bottom: 10px; +} +.m-b { + margin-bottom: 15px; +} +.m-b-md { + margin-bottom: 20px; +} +.m-b-lg { + margin-bottom: 30px; +} +.m-b-xl { + margin-bottom: 40px; +} +.m-b-xxl { + margin-bottom: 50px; +} +.m-b-n-xxs { + margin-bottom: -1px; +} +.m-b-n-xs { + margin-bottom: -5px; +} +.m-b-n-sm { + margin-bottom: -10px; +} +.m-b-n { + margin-bottom: -15px; +} +.m-b-n-md { + margin-bottom: -20px; +} +.m-b-n-lg { + margin-bottom: -30px; +} +.m-b-n-xl { + margin-bottom: -40px; +} +.m-b-n-xxl { + margin-bottom: -50px; +} +``` + +## 内边距 + +```css +.wrapper-xs { + padding: 5px; +} +.wrapper-sm { + padding: 10px; +} +.wrapper { + padding: 15px; +} +.wrapper-md { + padding: 20px; +} +.wrapper-lg { + padding: 30px; +} +.wrapper-xl { + padding: 50px; +} +.padder-xs { + padding-left: 5px; + padding-right: 5px; +} +.padder-sm { + padding-left: 10px; + padding-right: 10px; +} +.padder-lg { + padding-left: 30px; + padding-right: 30px; +} +.padder-md { + padding-left: 20px; + padding-right: 20px; +} +.padder { + padding-left: 15px; + padding-right: 15px; +} +.padder-v-xs { + padding-top: 5px; + padding-bottom: 5px; +} +.padder-v-sm { + padding-top: 10px; + padding-bottom: 10px; +} +.padder-v-lg { + padding-top: 30px; + padding-bottom: 30px; +} +.padder-v-md { + padding-top: 20px; + padding-bottom: 20px; +} +.padder-v { + padding-top: 15px; + padding-bottom: 15px; +} +.no-padder { + padding: 0 !important; +} +.pull-in { + margin-left: -15px; + margin-right: -15px; +} +.pull-out { + margin: -10px -15px; +} +``` + +## 边框 + +```css +.b { + border: 1px solid rgba(0, 0, 0, 0.05); +} +.b-a { + border: 1px solid @border-color; +} +.b-t { + border-top: 1px solid @border-color; +} +.b-r { + border-right: 1px solid @border-color; +} +.b-b { + border-bottom: 1px solid @border-color; +} +.b-l { + border-left: 1px solid @border-color; +} +.b-light { + border-color: @brand-light; +} +.b-dark { + border-color: @brand-dark; +} +.b-black { + border-color: @brand-dark; +} +.b-primary { + border-color: @brand-primary; +} +.b-success { + border-color: @brand-success; +} +.b-info { + border-color: @brand-info; +} +.b-warning { + border-color: @brand-warning; +} +.b-danger { + border-color: @brand-danger; +} +.b-white { + border-color: #fff; +} +.b-dashed { + border-style: dashed !important; +} +.b-l-light { + border-left-color: @brand-light; +} +.b-l-dark { + border-left-color: @brand-dark; +} +.b-l-black { + border-left-color: @brand-dark; +} +.b-l-primary { + border-left-color: @brand-primary; +} +.b-l-success { + border-left-color: @brand-success; +} +.b-l-info { + border-left-color: @brand-info; +} +.b-l-warning { + border-left-color: @brand-warning; +} +.b-l-danger { + border-left-color: @brand-danger; +} +.b-l-white { + border-left-color: #fff; +} +.b-l-2x { + border-left-width: 2px; +} +.b-l-3x { + border-left-width: 3px; +} +.b-l-4x { + border-left-width: 4px; +} +.b-l-5x { + border-left-width: 5px; +} +.b-2x { + border-width: 2px; +} +.b-3x { + border-width: 3px; +} +.b-4x { + border-width: 4px; +} +.b-5x { + border-width: 5px; +} +``` + +## 圆角 + +```css +.r { + border-radius: @border-radius-base @border-radius-base @border-radius-base + @border-radius-base; +} +.r-2x { + border-radius: @border-radius-base * 2; +} +.r-3x { + border-radius: @border-radius-base * 3; +} +.r-l { + border-radius: @border-radius-base 0 0 @border-radius-base; +} +.r-r { + border-radius: 0 @border-radius-base @border-radius-base 0; +} +.r-t { + border-radius: @border-radius-base @border-radius-base 0 0; +} +.r-b { + border-radius: 0 0 @border-radius-base @border-radius-base; +} +``` + +## 字体相关 + +```css +.font-normal { + font-weight: normal; +} +.font-thin { + font-weight: 300; +} +.font-bold { + font-weight: 700; +} +.text-3x { + font-size: 3em; +} +.text-2x { + font-size: 2em; +} +.text-lg { + font-size: @font-size-lg; +} +.text-md { + font-size: @font-size-md; +} +.text-base { + font-size: @font-size-base; +} +.text-sm { + font-size: @font-size-sm; +} +.text-xs { + font-size: @font-size-xs; +} +.text-xxs { + text-indent: -9999px; +} +.text-ellipsis { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.text-u-c { + text-transform: uppercase; +} +.text-l-t { + text-decoration: line-through; +} +.text-u-l { + text-decoration: underline; +} +.text-left { + text-align: left; +} +.text-center { + text-align: center; +} +.text-right { + text-align: right; +} +``` + +## 定位 + +```css +.pos-rlt { + position: relative; +} +.pos-stc { + position: static !important; +} +.pos-abt { + position: absolute; +} +.pos-fix { + position: fixed; +} +``` + +## 背景 + +```html +
+
bg-white
+
bg-dark
+
bg-info
+
bg-success
+
bg-warning
+
bg-danger
+
bg-primary
+
+``` + +## 其他 + +```css +.show { + visibility: visible; +} +.line { + *width: 100%; + height: 2px; + margin: 10px 0; + font-size: 0; + overflow: hidden; + background-color: transparent; + border-width: 0; + border-top: 1px solid @border-color; +} +.line-xs { + margin: 0; +} +.line-lg { + margin-top: 15px; + margin-bottom: 15px; +} +.line-dashed { + border-style: dashed; + background: transparent; +} +.no-line { + border-width: 0; +} +.no-border, +.no-borders { + border-color: transparent; + border-width: 0; +} +.no-radius { + border-radius: 0; +} +.block { + display: block; +} +.block.hide { + display: none; +} +.inline { + display: inline-block !important; +} +.none { + display: none; +} +.pull-none { + float: none; +} +.rounded { + border-radius: 500px; +} +.clear { + display: block; + overflow: hidden; +} +.no-bg { + background-color: transparent; + color: inherit; +} +.no-select { + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +``` + + + + + diff --git a/docs/concepts/template.md b/docs/concepts/template.md new file mode 100755 index 00000000..82e6a5e3 --- /dev/null +++ b/docs/concepts/template.md @@ -0,0 +1,118 @@ +--- +title: 模板 +description: +type: 0 +group: 💡 概念 +menuName: 模板 +icon: +order: 11 +--- +为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。 + + +## 模板字符串 + +### 普通文本 +配置一段普通文本并输出 + +```schema:height="200" +{ + "type": "page", + "body": "Hello World!" // 输出 Hello World! +} +``` + +### 文本中获取变量 + +可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下 + +```schema:height="200" +{ + "data": { + "text": "World!" + }, + "type": "page", + "body": "Hello ${text}" // 输出 Hello World! +} +``` + +更多`${xxx}`语法相关介绍，移步 [数据映射](./data-mapping)。 + +### 渲染html + +使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 HTML + +```schema:height="200" +{ + "data": { + "text": "World!" + }, + "type": "page", + "body": "

Hello

${text}" +} +``` + +## JavaScript 模板引擎 + +amis 还支持用 JavaScript 模板引擎进行组织输出，内部采用 [lodash template](https://lodash.com/docs/4.17.15#template) 进行实现。 + +```schema:height="300" +{ + "type": "page", + "data": { + "user": "no one", + "items": [ + "A", + "B", + "C" + ] + }, + "body": [ + { + "type": "tpl", + "tpl": "User: <%= data.user %>" + }, + { + "type": "divider" + }, + { + "type": "tpl", + "tpl": "<% if (data.items && data.items.length) { %>Array: <% data.items.forEach(function(item) { %> <%= item %> <% }); %><% } %>" + } + ] +} +``` + +> 注意到了吗？ +> +> 在 JavaScript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值 +> +> 要注意使用模板的时候在不同的场景下要使用正确的取值方式。 + + +仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。 +- `formatDate(value, format='LLL', inputFormat='')`格式化时间格式，关于 format 请前往 [moment](https://momentjs.com/docs/) 文档页面。 +- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。 +- `formatNumber(number)` 格式化数字格式，加上千分位。 +- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。 + +下面 filters 中的方法也可以使用如： `<%= date(data.xxx, 'YYYY-MM-DD') %>` + +## 注意事项 + +#### 1. 模板字符串 和 模板引擎 不可以交叉使用 + +例如： +```json +{ + "type": "tpl", + "tpl": "${data.xxx === 'a'}" //错误！ +} +``` + + + + + + + diff --git a/docs/index.md b/docs/index.md new file mode 100644 index 00000000..0447762c --- /dev/null +++ b/docs/index.md @@ -0,0 +1,218 @@ +--- +title: 介绍 +description: ddsaad +type: 0 +group: 💡 概念 +menuName: 介绍 +icon: +order: 8 +--- + +## 什么是 amis + +amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以节省页面开发工作量，极大提升开发前端页面的效率。 + +## 为什么要做 amis？🤔 + +在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES 6 语法，最好还了解状态管理（比如 Redux），如果没接触过函数式编程，一开始入门就很困难，而它还有巨大的 [生态](https://github.com/markerikson/redux-ecosystem-links)，相关的库有 2347 个。 + +然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack 了。。。 + +而有时候你只是为了做个普通的增删改查界面，用于系统管理，类似下面这种： + +```schema:height="900" +{ + "title": "浏览器内核对 CSS 的支持情况", + "remark": "嘿，不保证数据准确性", + "type": "page", + "body": { + "type": "crud", + "draggable": true, + "api": "https://houtai.baidu.com/api/sample", + "keepItemSelectionOnPageChange": true, + "filter": { + "title": "筛选", + "submitText": "", + "controls": [ + { + "type": "text", + "name": "keywords", + "placeholder": "关键字", + "addOn": { + "label": "搜索", + "type": "submit" + } + } + ] + }, + "bulkActions": [ + { + "label": "批量删除", + "actionType": "ajax", + "api": "delete:https://houtai.baidu.com/api/sample/${ids|raw}", + "confirmText": "确定要批量删除?" + }, + { + "label": "批量修改", + "actionType": "dialog", + "dialog": { + "title": "批量编辑", + "name": "sample-bulk-edit", + "body": { + "type": "form", + "api": "https://houtai.baidu.com/api/sample/bulkUpdate2", + "controls": [ + { + "type": "hidden", + "name": "ids" + }, + { + "type": "text", + "name": "engine", + "label": "Engine" + } + ] + } + } + } + ], + "quickSaveApi": "https://houtai.baidu.com/api/sample/bulkUpdate", + "quickSaveItemApi": "https://houtai.baidu.com/api/sample/$id", + "filterTogglable": true, + "headerToolbar": [ + "filter-toggler", + "bulkActions", + { + "type": "tpl", + "tpl": "一共有 ${count} 行数据。", + "className": "v-middle" + }, + { + "type": "columns-toggler", + "align": "right" + }, + { + "type": "drag-toggler", + "align": "right" + }, + { + "type": "pagination", + "align": "right" + } + ], + "footerToolbar": ["statistics", "switch-per-page", "pagination"], + "columns": [ + { + "name": "id", + "label": "ID", + "width": 20, + "sortable": true, + "type": "text" + }, + { + "name": "engine", + "label": "Rendering engine", + "sortable": true, + "searchable": true, + "type": "text", + "remark": "Trident 就是 IE，Gecko 就是 Firefox" + }, + { + "name": "platform", + "label": "Platform(s)", + "popOver": { + "body": { + "type": "tpl", + "tpl": "就是为了演示有个叫 popOver 的功能" + }, + "offset": { + "y": 50 + } + }, + "sortable": true, + "type": "text" + }, + { + "name": "grade", + "label": "CSS grade", + "quickEdit": { + "mode": "inline", + "type": "select", + "options": ["A", "B", "C", "D", "X"] + }, + "type": "text" + }, + { + "type": "operation", + "label": "操作", + "width": 100, + "buttons": [ + { + "type": "button", + "icon": "fa fa-times text-danger", + "actionType": "ajax", + "tooltip": "删除", + "confirmText": "您确认要删除?", + "api": "delete:https://houtai.baidu.com/api/sample/$id" + } + ] + } + ] + } +} +``` + +这个界面虽然用 Bootstrap 也能快速搭起来，但要想体验好就需要加很多细节功能，比如： + +- 数据动态加载 +- 编辑单行数据 +- 批量删除和修改 +- 查询某列 +- 按某列排序 +- 隐藏某列 +- 开启整页内容拖拽排序 +- 表格有分页（页数还会同步到地址栏，刷新页面试试） +- 如果往下拖动还有首行冻结来方便查看表头等 + 全部实现这些需要大量的代码。 + +然而上面也看到了，在 amis 里只需要 150 行 JSON 配置（嘿，其中 40 多行只有一个括号），你不需要了解 React/Vue、Webpack，甚至不需要了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发 + +这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，而不是越来越复杂。 + +## 用 JSON 写页面有什么好处 ❓ + +为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 JSON 来配置，它的独特好处是： + +- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `JavaScript`，就能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的； +- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 `Angular/Vue/React` 版本现在都废弃了，当年流行的 `Gulp` 也被 `Webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高，同时还能享受 amis 升级带来的界面改进； +- 可以 **完全** 使用 [可视化页面编辑器](https://fex-team.github.io/amis-editor/#/edit/0) 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。 + +> JSON 是一种轻量级的数据交换格式，简洁和清晰的层次结构使得它成为理想的数据交换语言。它易于人阅读和编写，同时也易于机器解析和生成，能够有效地提升网络传输效率。 +> +> 更多关于 JSON 的知识，可以阅读[百度百科](https://baike.baidu.com/item/JSON) + +## amis 的其它亮点 ✨ + +- **提供完整的界面解决方案**：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能； +- **内置 100+ 种 UI 组件**：包括其它 UI 框架都会不提供的富文本编辑器、代码编辑器等，能满足各种页面组件展现的需求，而且对于特殊的展现形式还可以通过 [自定义组件](./start/custom.md) 来扩充； +- **容器支持无限级嵌套**：可以通过组合来满足各种布局需求； +- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，在 4 年多的时间里创建了 **3w** 多页面，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求。 + +## amis 不适合做什么？😶 + +使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis： + +- 大量定制 UI，尤其是面向普通客户（toC）的产品页面 + - JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。 +- 有极为复杂的交互，或者对交互有很特殊的要求 + - 有些复杂的前端功能，比如可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。 + - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。 + +## 阅读建议 👆 + +- 如果你是第一次接触 amis 的新同学，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识 +- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 [组件文档](./components/component) + +## 让我们马上开始吧！ + +点击页面底部的下一篇，继续后续部分的阅读。 diff --git a/docs/start/custom.md b/docs/start/custom.md new file mode 100644 index 00000000..442ef584 --- /dev/null +++ b/docs/start/custom.md @@ -0,0 +1,433 @@ +--- +title: 自定义 +--- + +如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法： + +1. 临时扩展，适合无需复用的组件。 +2. 注册自定义类型，适合需要在很多地方复用的组件。 + +> 注意，自定义组件只支持 npm 方式，不支持 SDK + +## 临时扩展 + +amis 的 JSON 配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子： + +```jsx +{ + "type": "page", + "title": "自定义组件示例", + "body": { + "type": "form", + "controls": [ + { + "type": "text", + "label": "用户名", + "name": "usename" + }, + { + "name": "mycustom", + "children": ({ + value, + onChange + }) => ( +
+

这个是个自定义组件

+

当前值：{value}

+ onChange(Math.round(Math.random() * 10000)) + }>随机修改 +
+ ) + } + ] + } +} +``` + +其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 React 的 Render 方法一样，即 jsx，在这个方法里你可以写任意 JavaScript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onChange`，`value` 就是组件的值，`onChange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数。 + +与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。 + +这种扩展方式既简单又灵活，但它是写在配置中的，如果需要在很多地方，可以使用下面的「注册自定义类型」方式： + +## 注册自定义类型 + +注册自定义类型需要了解 amis 的工作原理。 + +### 工作原理 + +amis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component` 然后，然后把其他属性作为 `props` 传递过去完成渲染。 + +拿一个表单页面来说，如果用 React 组件开发一般长这样。 + +```jsx + +
+ +``` + +把以上配置方式换成 amis JSON, 则是： + +```json +{ + "type": "page", + "title": "页面标题", + "subTitle": "副标题", + "body": { + "type": "form", + "title": "用户登录", + "controls": [ + { + "type": "text", + "name": "username", + "label": "用户名" + } + ] + } +} +``` + +那么，amis 是如何将 JSON 转成组件的呢？直接根据节点的 type 去跟组件一一对应？这样会重名，比如在表格里面展示的类型 `text` 跟表单里面的 `text` 是完全不一样的，一个负责展示，一个却负责输入。所以说一个节点要被什么组件渲染，还需要携带上下文（context）信息。 + +如何携带上下文（context）信息？amis 中是用节点的路径（path）来作为上下文信息。从上面的例子来看，一共有三个节点，path 信息分别是。 + +- `page` 页面节点 +- `page/body/form` 表单节点 +- `page/body/form/controls/0/text` 文本框节点。 + +根据 path 的信息就能很容易注册组件跟节点对应了。 + +Page 组件的示例代码 + +```jsx +@Renderer({ + test: /^page$/ + // ... 其他信息隐藏了 +}) +export class PageRenderer extends React.Component { + // ... 其他信息隐藏了 + render() { + const { + title, + body, + render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。 + } = this.props; + return ( +
+

{title}

+
+ {render('body', body) /*渲染孩子节点*/} +
+
+ ); + } +} +``` + +Form 组件的示例代码 + +```jsx +@Renderer({ + test: /(^|\/)form$/ + // ... 其他信息隐藏了 +}) +export class FormRenderer extends React.Component { + // ... 其他信息隐藏了 + render() { + const { + title, + controls, + render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。 + } = this.props; + return ( + + {controls.map((control, index) => ( +
+ {render(`${index}/control`, control)} +
+ ))} +
+ ); + } +} +``` + +Text 组件的示例代码 + +```jsx +@Renderer({ + test: /(^|\/)form(?:\/\d+)?\/control(?\/\d+)?\/text$/ + // ... 其他信息隐藏了 +}) +export class FormItemTextRenderer extends React.Component { + // ... 其他信息隐藏了 + render() { + const { + label, + name, + onChange + } = this.props; + return ( +
+
+ ); + } +} +``` + +那么渲染过程就是根据节点 path 信息，跟组件池中的组件 `test` (检测) 信息做匹配，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `render` 方法去完成渲染，`{render('body', body)}`，他的工作就是拿子节点的 path 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。 + +### 编写自定义组件 + +了解了基本原理后，来看个简单的例子： + +```jsx +import * as React from 'react'; +import {Renderer} from 'amis'; + +@Renderer({ + test: /(^|\/)my\-renderer$/ +}) +class CustomRenderer extends React.Component { + render() { + const {tip} = this.props; + return
这是自定义组件：{tip}
; + } +} +``` + +有了以上这段代码后，就可以这样使用了。 + +```json +{ + "type": "page", + "title": "自定义组件示例", + "body": { + "type": "my-renderer", + "tip": "简单示例" + } +} +``` + +看了前面[amis 工作原理](#工作原理)应该不难理解，这里注册一个 React 组件，当节点的 path 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。 + +如果这个组件还能通过 `children` 属性添加子节点，则需要使用下面这种写法： + +```jsx +import * as React from 'react'; +import {Renderer} from 'amis'; + +@Renderer({ + test: /(^|\/)my\-renderer2$/ +}) +class CustomRenderer extends React.Component { + render() { + const {tip, body, render} = this.props; + return ( +
+

这是自定义组件：{tip}

+ {body ? ( +
+ {render('body', body, { + // 这里的信息会作为 props 传递给子组件，一般情况下都不需要这个 + })} +
+ ) : null} +
+ ); + } +} +``` + +有了以上这段代码后，就可以这样使用了。 + +```json +{ + "type": "page", + "title": "自定义组件示例", + "body": { + "type": "my-renderer2", + "tip": "简单示例", + "body": { + "type": "form", + "controls": [ + { + "type": "text", + "label": "用户名", + "name": "usename" + } + ] + } + } +} +``` + +跟第一个列子不同的地方是，这里多了个 `render` 方法，这个方法就是专门用来渲染子节点的。来看下参数说明： + +- `region` 区域名称，你有可能有多个区域可以作为容器，请不要重复。 +- `node` 子节点。 +- `props` 可选，可以通过此对象跟子节点通信等。 + +### 表单项的扩展 + +以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 `FormItem` 注解，而不是 `Renderer`。 原因是如果用 `FormItem` 是不用关心：label 怎么摆，表单验证器怎么实现，如何适配表单的 3 中展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。 + +```jsx +import * as React from 'react'; +import {FormItem} from 'amis'; + +@FormItem({ + type: 'custom' +}) +class MyFormItem extends React.Component { + render() { + const {value, onChange} = this.props; + + return ( +
+

这个是个自定义组件

+

当前值：{value}

+ onChange(Math.round(Math.random() * 10000))} + > + 随机修改 + +
+ ); + } +} +``` + +有了以上这段代码后，就可以这样使用了。 + +```json +{ + "type": "page", + "title": "自定义组件示例", + "body": { + "type": "form", + "controls": [ + { + "type": "text", + "label": "用户名", + "name": "usename" + }, + + { + "type": "custom", + "label": "随机值", + "name": "random" + } + ] + } +} +``` + +> 注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 `strictMode`: `false` 来关闭。 + +表单项开发主要关心两件事。 + +1. 呈现当前值。如以上例子，通过 `this.props.value` 判定如果勾选了则显示`已勾选`，否则显示`请勾选`。 +2. 接收用户交互，通过 `this.props.onChange` 修改表单项值。如以上例子，当用户点击按钮时，切换当前选中的值。 + +至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。 + +需要注意，获取或者修改的是什么值跟配置中 `type` 并列的 `name` 属性有关，也就是说直接关联某个变量，自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据，或者设置其他数据可以看下以下说明： + +- `获取其他数据` 可以通过 `this.props.data` 查看，作用域中所有的数据都在这了。 +- `设置其他数据` 可以通过 `this.props.onBulkChange`， 比如: `this.props.onBulkChange({a: 1, b: 2})` 等于同时设置了两个值。当做数据填充的时候，这个方法很有用。 + +### 其它高级定制 + +下面是一些不太常用的 amis 扩展方式及技巧。 + +#### 自定义验证器 + +如果 amis [自带的验证](../components/form/formitem.md)能满足需求了，则不需要关心。组件可以有自己的验证逻辑。 + +```jsx +import * as React from 'react'; +import {FormItem} from 'amis'; +import * as cx from 'classnames'; + +@FormItem({ + type: 'custom-checkbox' +}) +export default class CustomCheckbox extends React.Component { + validate() { + // 通过 this.props.value 可以知道当前值。 + + return isValid ? '' : '不合法，说明不合法原因。'; + } + // ... 其他省略了 +} +``` + +上面的栗子只是简单说明，另外可以做`异步验证`，validate 方法可以返回一个 promise。 + +#### OptionsControl + +如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多，用户配置配置 source 可通过 API 拉取选项，你可以用 OptionsControl 取代 FormItem 这个注解。 + +用法是一样，功能方面主要多了以下功能。 + +- 可以配置 options，options 支持配置 visibleOn hiddenOn 等表达式 +- 可以配置 `source` 换成动态拉取 options 的功能，source 中有变量依赖会自动重新拉取。 +- 下发了这些 props，可以更方便选项。 + - `options` 不管是用户配置的静态 options 还是配置 source 拉取的，下发到组件已经是最终的选项了。 + - `selectedOptions` 数组类型，当前用户选中的选项。 + - `loading` 当前选项是否在加载 + - `onToggle` 切换一个选项的值 + - `onToggleAll` 切换所有选项的值，类似于全选。 + +#### 组件间通信 + +关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个[栗子](../concepts/linkage)。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。 + +```js +import * as React from 'react'; +import {Renderer, ScopedContext} from 'amis'; +@Renderer({ + test: /(?:^|\/)my\-renderer$/ +}) +export class CustomRenderer extends React.Component { + static contextType = ScopedContext; + + componentWillMount() { + const scoped = this.context; + scoped.registerComponent(this); + } + + componentWillUnmount() { + const scoped = this.context; + scoped.unRegisterComponent(this); + } + + // 其他部分省略了。 +} +``` + +把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getComponentByName("xxxName")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxName`）。 + +#### 其他功能方法 + +自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。 + +- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))` +- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))` +- `env.alert` 用 Modal 实现的弹框，个人觉得更美观。 +- `env.notify` toast 某个消息 如： `this.props.env.notify("error", "出错了")` +- `env.jumpTo` 页面跳转。 diff --git a/docs/start/getting-started.md b/docs/start/getting-started.md new file mode 100644 index 00000000..b5d2f607 --- /dev/null +++ b/docs/start/getting-started.md @@ -0,0 +1,276 @@ +--- +title: 快速开始 +description: +--- + +## npm + +### 安装 + +``` +npm i amis +``` + +### 使用 + +可以在 React Component 这么使用（TypeScript）。 + +```tsx +import * as React from 'react'; +import { + render as renderAmis +} from 'amis'; + +class MyComponent extends React.Component { + render() { + return ( +
+

通过 amis 渲染页面

+ {renderAmis({ + // schema + // 这里是 amis 的 Json 配置。 + type: 'page', + title: '简单页面', + body: '内容' + }, { + // props + }, { + // env + // 这些是 amis 需要的一些接口实现 + // 可以参考本项目里面的 Demo 部分代码。 + + updateLocation: (location:string/*目标地址*/, replace:boolean/*是replace，还是push？*/) => { + // 用来更新地址栏 + }, + + jumpTo: (location:string/*目标地址*/) => { + // 页面跳转， actionType: link、url 都会进来。 + }, + + fetcher: ({ + url, + method, + data, + config + }:{ + url:string/*目标地址*/, + method:'get' | 'post' | 'put' | 'delete'/*发送方式*/, + data: object | void/*数据*/, + config: object/*其他配置*/ + }) => { + // 用来发送 Ajax 请求，建议使用 axios + }, + notify: (type:'error'|'success'/**/, msg:string/*提示内容*/) => { + // 用来提示用户 + }, + alert: (content:string/*提示信息*/) => { + // 另外一种提示，可以直接用系统框 + }, + confirm: (content:string/*提示信息*/) => { + // 确认框。 + } + });} +
+ ); + } +} +``` + +`(schema:Schema, props?:any, env?: any) => JSX.Element` + +参数说明： + +- `schema` 即页面配置，请前往[基本用法](./basic.md)了解. +- `props` 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如： + + ```jsx + () => + renderAmis(schema, { + data: { + username: 'amis' + } + }); + ``` + + 这样，内部所有组件都能拿到 `username` 这个变量的值。 + +- `env` 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。 + + - `session: string` 默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。 + - `fetcher: (config: fetcherConfig) => Promise` 用来实现 ajax 发送。 + + 示例 + + ```js + fetcher: ({ + url, + method, + data, + responseType, + config, + headers + }: any) => { + config = config || {}; + config.withCredentials = true; + responseType && (config.responseType = responseType); + + if (config.cancelExecutor) { + config.cancelToken = new (axios as any).CancelToken(config.cancelExecutor); + } + + config.headers = headers || {}; + + if (method !== 'post' && method !== 'put' && method !== 'patch') { + if (data) { + config.params = data; + } + + return (axios as any)[method](url, config); + } else if (data && data instanceof FormData) { + // config.headers = config.headers || {}; + // config.headers['Content-Type'] = 'multipart/form-data'; + } else if (data + && typeof data !== 'string' + && !(data instanceof Blob) + && !(data instanceof ArrayBuffer) + ) { + data = JSON.stringify(data); + // config.headers = config.headers || {}; + config.headers['Content-Type'] = 'application/json'; + } + + return (axios as any)[method](url, data, config); + } + ``` + + - `isCancel: (e:error) => boolean` 判断 ajax 异常是否为一个 cancel 请求。 + + 示例 + + ```js + isCancel: (value: any) => (axios as any).isCancel(value) + ``` + + - `notify: (type:string, msg: string) => void` 用来实现消息提示。 + - `alert: (msg:string) => void` 用来实现警告提示。 + - `confirm: (msg:string) => boolean | Promise` 用来实现确认框。 + - `jumpTo: (to:string, action?: Action, ctx?: object) => void` 用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。 + - `updateLocation: (location:any, replace?:boolean) => void` 地址替换，跟 jumpTo 类似。 + - `isCurrentUrl: (link:string) => boolean` 判断目标地址是否为当前页面。 + - `theme: 'default' | 'cxd'` 目前支持两种主题。 + - `copy: (contents:string, options?: {shutup: boolean}) => void` 用来实现，内容复制。 + - `getModalContainer: () => HTMLElement` 用来决定弹框容器。 + - `loadRenderer: (chema:any, path:string) => Promise` 可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。 + - `affixOffsetTop: number` 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。 + - `affixOffsetBottom: number` 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。 + - `richTextToken: string` 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。 + +## SDK + +SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持 [自定义组件](./custom)，只能使用 amis 内置的组件。 + +JSSDK 的代码从以下地址获取： + +- JS： https://houtai.baidu.com/v2/jssdk +- CSS： https://houtai.baidu.com/v2/csssdk + +然后在页面中插入下面的代码就能渲染出来了： + +```js +(function () { + var amis = amisRequire('amis/embed'); + amis.embed( + '#container', + { + type: 'page', + title: 'AMIS Demo', + body: 'This is a simple amis page.' + }, + { + // props 一般不用传。 + }, + { + // env + fetcher: () => { + // 可以不传，用来实现 ajax 请求 + }, + + jumpTo: () => { + // 可以不传，用来实现页面跳转 + }, + + updateLocation: () => { + // 可以不传，用来实现地址栏更新 + }, + + isCurrentUrl: () => { + // 可以不传，用来判断是否目标地址当前地址。 + }, + + copy: () => { + // 可以不传，用来实现复制到剪切板 + }, + + notify: () => { + // 可以不传，用来实现通知 + }, + + alert: () => { + // 可以不传，用来实现提示 + }, + + confirm: () => { + // 可以不传，用来实现确认框。 + } + } + ); +})(); +``` + +注意：以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，如果你的页面已经完成功能回归，请直接使用某个固定地址，这样才不会因为 amis 升级而导致你的页面不可用。 + +另外，sdk 代码也伴随 npm 一起发布了，不使用 CDN 版本，直接替换成 npm 包里面的 `amis/sdk.js` 和 `amis/sdk.css` 即可。 + +完整示例: + +```html + + + + + AMIS Demo + + + + + + + +
+ + + + +``` diff --git a/docs/types/api.md b/docs/types/api.md new file mode 100755 index 00000000..14e0ec95 --- /dev/null +++ b/docs/types/api.md @@ -0,0 +1,598 @@ +--- +title: API +description: +type: 0 +group: 🔧 类型 +menuName: API +icon: +order: 20 +--- + +API 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置 + +## 简单配置 + +如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下： + +``` +[:] +``` + +- **method**：get、post、put、delete，默认为 get +- **url**：接口地址，即模板字符串 + +示例： + +```json +{ + "api": "get:/api/initData", // get 请求 + "api": "post:/api/initData", // post 请求 + "api": "put:/api/initData", // put 请求 + "api": "delete:/api/initData" // delete 请求 +} +``` + +## 接口返回格式（重要） + +所有配置在 amis 组件中的接口，都要符合下面的返回格式 + +```json +{ + "status": 0, + "msg": "", + "data": { + ...其他字段 + } +} +``` + +- **status**: 返回 `0`，表示当前接口正确返回，否则按错误请求处理； +- **msg**: 返回接口处理信息，主要用于表单提交或请求失败时的 `toast` 显示； +- **data**: 必须返回一个具有 `key-value` 结构的对象。 + +**`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段； + +### 正确的格式 + +```json +{ + "status": 0, + "msg": "", + "data": { + // 正确 + "text": "World!" + } +} +``` + +### 错误的格式 + +直接返回字符串或者数组都是不推荐的 + +```json +{ + "status": 0, + "msg": "", + "data": "some string" // 错误，使用 key 包装 +} +``` + +### 不推荐的格式 + +部分组件为了可以兼容，支持下面这种直接返回数组的用法，但并不推荐这种方式。 + +```json +{ + "status": 0, + "msg": "", + "data": ["a", "b"] // 不推荐，使用 key 包装 +} +``` + +## 复杂配置 + +API 还支持配置对象类型 + +### 基本用法 + +```json +{ + "api": { + "method": "get", + "url": "xxxx", + "data": { + xxx + }, + ... // 其他配置 + } +} +``` + +### 配置请求方式 + +可以配置`method`指定接口的请求方式，支持：`get`、`post`、`put`、`delete`。 + +> `method`值留空时： +> +> - 在初始化接口中，默认为`get`请求 +> - 在`form`提交接口，默认为`post`请求 + +### 配置请求地址 + +可以配置`url`指定接口请求地址，支持[模板字符串](../concepts/template)。 + +### 配置请求数据 + +可以配置`data`，配置自定义接口请求数据体。 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "data": { + "myName": "${name}", + "myEmail": "${email}" + } + + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] +} +``` + +支持[数据映射](./data-mapping) + +> 当`method`配置为`get`时，`data`中的值默认会添加到请求路径中 + +### 配置请求数据格式 + +可以配置`dataType`，来指定请求的数据体格式，默认为`json` + +> 下面例子中 api 没有配置`data`属性，因为`form`会默认将所有表单项的值进行提交。 + +#### application/json + +默认是`application/json`，不需要额外配置 + +```schema:height="330" scope="body" +{ + "type": "form", + "title": "默认JSON格式", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "data":{ + "&": "$$" // 获取表单数据域中的所有值 + } + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +#### application/x-www-form-urlencoded + +配置`"dataType": "form"`，可配置发送体格式为`application/x-www-form-urlencoded` + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "dataType": "form" + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +#### multipart/form-data + +配置`"dataType": "form-data"`，可配置发送体格式为`multipart/form-data` + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "dataType": "form-data" + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +当表单项中文件类型数据，则自动使用`multipart/form-data`数据体 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm" + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "file", + "type": "file", + "label": "附件：", + "asBlob": true + } + ] + } +``` + +> `asBlob`配置项会指定当前 File 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。 + +### 配置自定义请求头 + +可以配置`headers`对象，添加自定义请求头 + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "headers": { + "my-header": "aaa" + } + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +### 配置请求条件 + +可以配置表达式`sendOn`来实现：当符合某个条件的情况下，接口才触发请求 + +```schema:height="250" scope="body" +{ + "title": "", + "type": "form", + "mode": "horizontal", + "controls": [ + { + "label": "选项1", + "type": "radios", + "name": "a", + "inline": true, + "options": [ + { + "label": "选项A", + "value": 1 + }, + { + "label": "选项B", + "value": 2 + }, + { + "label": "选项C", + "value": 3 + } + ] + }, + { + "label": "选项2", + "type": "select", + "size": "sm", + "name": "b", + "source": { + "method": "get", + "url": "https://houtai.baidu.com/api/mock2/options/level2?a=${a}", + "sendOn": "data.a === 2" + }, + "description": "只有选项1选择B的时候，才触发选项2的source接口重新拉取" + } + ], + "actions": [] +} +``` + +查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` [表达式](../concepts/expression)，实现根据条件请求接口。 + +### 配置接口缓存 + +当你在某种情况下，需要非常频繁的请求同一个接口，例如列表中，每一行中都有一个 Service 进行数据拉取操作， + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "type": "service", + "label": "数据", + "api": "https://houtai.baidu.com/api/mock2/page/initData", + "body": { + "type": "tpl", + "tpl": "当前日期是：${date}" + } + } + ] +} +``` + +如上，如果你打开浏览器网络面板，会发现`/api/mock2/page/initData`接口将重复请求多次，次数为你当前列表的数据条数。 + +这往往并不理想，你可以设置`cache`来设置缓存时间，单位是毫秒，在设置的缓存时间内，同样的请求将不会重复发起，而是会获取缓存好的请求响应数据。 + +```schema:height="600" scope="body" +{ + "type": "crud", + "api": "https://houtai.baidu.com/api/sample?waitSeconds=1", + "columns": [ + { + "name": "id", + "label": "ID" + }, + { + "type": "service", + "label": "数据", + "api": { + "method": "get", + "url": "https://houtai.baidu.com/api/mock2/page/initData", + "cache": 2000 + }, + "body": { + "type": "tpl", + "tpl": "当前日期是：${date}" + } + } + ] +} +``` + +这下我们再打开网络面板，发现只有一条请求了 + +### 配置请求适配器 + +amis 的 API 配置，如果无法配置出你想要的请求结构，那么可以配置`requestAdaptor`发送适配器 + +**发送适配器**是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去： + +#### 字符串形式 + +如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式，如下： + +```schema:height="330" scope="body" +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "requestAdaptor": "return {\n ...api,\n data: {\n ...api.data, // 获取暴露的 api 中的 data 变量\n foo: 'bar' // 新添加数据\n }\n}" + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "email", + "type": "email", + "label": "邮箱：" + } + ] + } +``` + +上例中的适配器实际上是如下代码的字符串形式： + +```js +return { + ...api, + data: { + ...api.data, // 获取暴露的 api 中的 data 变量 + foo: 'bar' // 新添加数据 + } +}; +``` + +#### 函数形式 + +如果你的使用环境为 js 文件，则可以直接传入函数，如下： + +```js +const schema = { + type: 'form', + api: { + method: 'post', + url: 'https://houtai.baidu.com/api/mock2/form/saveForm', + requestAdaptor: function (api) { + return { + ...api, + data: { + ...api.data, // 获取暴露的 api 中的 data 变量 + foo: 'bar' // 新添加数据 + } + }; + } + }, + controls: [ + { + type: 'text', + name: 'name', + label: '姓名：' + }, + { + name: 'text', + type: 'email', + label: '邮箱：' + } + ] +}; +``` + +上面例子中，我们获取暴露的`api`对象中的`data`变量，并且为其添加了一个新的字段`foo`，并且一起返回出去就可以了，这样我们的请求数据体中就会加上我们这个新的字段。 + +`api`变量中一般会包含下面几个属性： + +- **url**：当前接口 Api 地址 +- **method**：当前请求的方式 +- **data**：请求的数据体 +- **headers**：请求的头部信息 + +你也可以使用`debugger`自行进行调试。 + +### 配置接收适配器 + +同样的，如果后端返回的响应结构不符合 amis 的[接口格式要求](#%E6%8E%A5%E5%8F%A3%E8%BF%94%E5%9B%9E%E6%A0%BC%E5%BC%8F-%E9%87%8D%E8%A6%81-)，而后端不方便调整时，可以配置`adaptor`实现接收适配器 + +**接受欧适配器**是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。 + +例如：接口正确返回的格式中，会返回`"code": 200`，而 amis 中，接口返回格式需要`"status": 0`，这时候就需要接收适配器进行调整结构。 + +#### 字符串形式 + +如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式，如下： + +```json +{ + "type": "form", + "api": { + "method": "post", + "url": "https://houtai.baidu.com/api/mock2/form/saveForm", + "adaptor": "return {\n ...payload,\n status: payload.code === 200 ? 0 : payload.code\n}" + }, + "controls": [ + { + "type": "text", + "name": "name", + "label": "姓名：" + }, + { + "name": "file", + "type": "file", + "label": "附件：", + "asBlob": true + } + ] +} +``` + +上例中的适配器实际上是如下代码的字符串形式： + +```js +return { + ...payload, + status: payload.code === 200 ? 0 : payload.code +}; +``` + +#### 函数形式 + +如果你的使用环境为 js 文件，则可以直接传入函数，如下： + +```js +const schema = { + type: 'form', + api: { + method: 'post', + url: 'https://houtai.baidu.com/api/mock2/form/saveForm', + adaptor: function (payload, response) { + return { + ...payload, + status: payload.code === 200 ? 0 : payload.code + }; + } + }, + controls: [ + { + type: 'text', + name: 'name', + label: '姓名：' + }, + { + name: 'email', + type: 'email', + label: '邮箱：' + } + ] +}; +``` + +### replaceData + +返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。 + +### 属性表 + +| 字段名 | 说明 | 类型 | 备注 | +| -------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| method | 请求方式 | 字符串 | 支持：get、post、put、delete | +| url | 请求地址 | [模板字符串](https://suda.bce.baidu.com/docs/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | - | +| data | 请求数据 | 对象或字符串 | 支持数据映射 | +| dataType | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 | +| qsOptions | -- | 对象或字符串 | 当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayFormat: 'indices', encodeValuesOnly: true }` | +| headers | 请求头 | 对象 | - | +| sendOn | 请求条件 | [表达式](../concepts/expression) | - | +| cache | 接口缓存时间 | 整型数字 | - | +| requestAdaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： | +| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 | +| replaceData | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 | diff --git a/docs/types/definitions.md b/docs/types/definitions.md new file mode 100755 index 00000000..e38e2491 --- /dev/null +++ b/docs/types/definitions.md @@ -0,0 +1,111 @@ +--- +title: Definitions +description: +type: 0 +group: ⚙ 组件 +menuName: Definitions +icon: +order: 40 +--- + +`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。注意 definitions 只能在顶级节点中定义，定义在其他位置，将引用不到。 + +```schema:height="300" +{ + "definitions": { + "aa": { + "type": "text", + "name": "jack", + "value": "ref value", + "labelRemark": "通过\\$ref引入的组件" + } + }, + "type": "page", + "title": "引用", + "body": [ + { + "type": "form", + "api": "api/xxx", + "actions": [], + "controls": [ + { + "$ref": "aa" + } + ] + } + ] +} +``` + +`Definitions` 最大的作用其实是能够实现对数据格式的递归引用。来看这个栗子吧。 + +```schema:height="600" +{ + "definitions": { + "options": { + "type": "combo", + "multiple": true, + "multiLine": true, + "name": "options", + "controls": [ + { + "type": "group", + "controls": [ + { + "label": "名称", + "name": "label", + "type": "text", + "required": true + }, + { + "label": "值", + "name": "value", + "type": "text", + "required": true + } + ] + }, + { + "label": "包含子选项", + "type": "switch", + "name": "hasChildren", + "mode": "inline", + "className": "block" + }, + { + "$ref": "options", + "label": "子选项", + "name": "children", + "visibleOn": "this.hasOwnProperty('hasChildren') && this.hasChildren", + "addButtonText": "新增子选项" + } + ] + } + }, + "type": "page", + "title": "引用", + "body": [ + { + "type": "form", + "api": "api/xxx", + "actions": [], + "controls": [ + { + "$ref": "options", + "label": "选项" + }, + + { + "type": "static", + "label": "当前值", + "tpl": "
${options|json}
" + } + ] + } + ] +} +``` + + + + diff --git a/docs/types/schemanode.md b/docs/types/schemanode.md new file mode 100755 index 00000000..80f20d22 --- /dev/null +++ b/docs/types/schemanode.md @@ -0,0 +1,144 @@ +--- +title: SchemaNode +description: +type: 0 +group: 🔧 类型 +menuName: SchemaNode 配置节点 +icon: +order: 19 +--- + +SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema（配置）`以及`SchemaArray（配置数组）`三种类型 + +## 模板 + +```json +{ + "type": "page", + "data": { + "text": "World" + }, + "body": "Hello ${text}!" // 输出 Hello World! +} +``` + +上例中的`body`属性所配置的属性值`"Hello ${text}!"`就是一个模板 + +更多使用说明见 [模板文档](../concepts/template) + +## Schema 配置 + +`Schema`，即**组件的 JSON 配置** + +**它至少需要一个`type`字段，用以标识当前`Schema`的类型。** + +```json +{ + "type": "page", + "data": { + "text": "World" + }, + "body": { + "type": "tpl", + "tpl": "Hello ${text}!" // 输出 Hello World! + } +} +``` + +`type`, `data`, `body`这三个字段组成的`JSON`对象，便是一个`Schema`，它由`type`字段作为标识，指明当前 `Schema` 是 `Page`组件节点 + +而通过查看 [Page 组件属性表](../components/page) 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。 + +> amis 可以通过该方法，在`Schema`中嵌套配置其他`SchemaNode`，从而搭建非常复杂的页面应用。 + +### 配置显隐 + +所有的`Schema`类型都可以通过配置`visible`或`hidden`，`visibleOn`或`hiddenOn`来控制组件的显隐，下面是两种方式 + +##### 静态配置 + +通过配置`"hidden": true`或者`"visible": false`来隐藏组件 + +```schema:height="300" scope="body" +[ + { + "type": "form", + "controls": [ + { + "type": "text", + "label": "姓名", + "name": "name" + } + ] + }, + { + "type": "form", + "hidden": true, + "controls": [ + { + "type": "text", + "label": "姓名", + "name": "name" + } + ] + } +] +``` + +下面那个表单被隐藏了。 + +##### 通过条件配置显隐 + +你也通过 [表达式](../concepts/expression) 配置`hiddenOn`，来实现在某个条件下禁用当前组件. + +```schema:height="400" scope="body" +{ + "type": "form", + "controls": [ + { + "type": "number", + "label": "数量", + "name": "number", + "value": 0, + "description": "调整数量大小查看效果吧！" + }, + { + "type": "text", + "label": "文本", + "name": "text", + "hiddenOn": "data.number > 1", + "description": "当数量大于1的时候，该文本框会隐藏" + } + ] +} +``` + +为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐 + +> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别 + +## SchemaArray 配置数组 + +明白了何为`Schema`之后，你就会很轻松理解`SchemaArray`，它其实就是支持通过数组配置`Schema`，从而在某一节点层级下，配置多个组件 + +```json +{ + "type": "page", + "data": { + "name": "amis" + "age": 1 + }, + "body": [ + { + "type":"tpl", + "tpl": "my name is ${name}" // 输出 Hello World! + }, + { + "type":"tpl", + "tpl": "I am ${age} years old!" // 输出 Hello World! + } + ] +} +``` + +非常容易看出来，我们给`body`属性，配置了数组结构的`Schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果 diff --git a/examples/components/App.tsx b/examples/components/App.tsx new file mode 100644 index 00000000..ff76bb8c --- /dev/null +++ b/examples/components/App.tsx @@ -0,0 +1,424 @@ +import React from 'react'; +import NotFound from '../../src/components/404'; +import Layout from '../../src/components/Layout'; +import AsideNav from '../../src/components/AsideNav'; +import {AlertComponent, ToastComponent} from '../../src/components/index'; +import {mapTree} from '../../src/utils/helper'; +import {Icon} from '../../src/components/icons'; +import '../../src/locale/en'; +import { + Router, + Route, + IndexRoute, + browserHistory, + hashHistory, + Link, + Redirect, + withRouter +} from 'react-router'; +import Select from '../../src/components/Select'; +import DocSearch from './DocSearch'; +import {groupBy} from 'lodash'; +import classnames from 'classnames'; +import Doc, {docs} from './Doc'; +import Example, {examples} from './Example'; + +let PathPrefix = '/examples'; +let ContextPath = ''; + +if (process.env.NODE_ENV === 'production') { + PathPrefix = ''; + ContextPath = '/amis'; +} + +const themes = [ + { + label: '默认主题', + ns: 'a-', + value: 'default' + }, + + { + label: '百度云舍', + ns: 'cxd-', + value: 'cxd' + }, + { + label: 'Dark', + ns: 'dark-', + value: 'dark' + } +]; + +const locales = [ + { + label: '中文', + value: 'zh-cn' + }, + + { + label: 'English', + value: 'en' + } +]; + +@withRouter +export class App extends React.PureComponent { + state = { + asideFolded: localStorage.getItem('asideFolded') === 'true', + offScreen: false, + headerVisible: true, + themeIndex: 0, + themes: themes, + theme: themes[localStorage.getItem('themeIndex') || 0], + locale: localStorage.getItem('locale') || '', + navigations: [], + scrollTop: 0 + }; + + constructor(props) { + super(props); + + this.toggleAside = this.toggleAside.bind(this); + this.setAsideFolded = this.setAsideFolded.bind(this); + this.setHeaderVisible = this.setHeaderVisible.bind(this); + this.setNavigations = this.setNavigations.bind(this); + } + + componentDidMount() { + if (this.state.theme.value !== 'default') { + document.querySelectorAll('link[title]').forEach(item => { + item.disabled = true; + }); + document.querySelector( + `link[title=${this.state.theme.value}]` + ).disabled = false; + } + document.addEventListener('scroll', this.handleScroll.bind(this)); + } + + componentDidUpdate(preProps, preState) { + const props = this.props; + + if (preState.theme.value !== this.state.theme.value) { + document.querySelector( + `link[title=${preState.theme.value}]` + ).disabled = true; + document.querySelector( + `link[title=${this.state.theme.value}]` + ).disabled = false; + } + + if (props.location.pathname !== preProps.location.pathname) { + this.setState( + { + offScreen: false + }, + () => window.scrollTo(0, 0) + ); + + const pageURL = props.location.pathname; + _hmt && _hmt.push(['_trackPageview', pageURL]); + } + } + + componentWillUnmount() { + document.removeEventListener('scroll', this.handleScroll.bind(this)); + } + + handleScroll(e) { + this.setState({ + scrollTop: e.target.scrollingElement.scrollTop + }); + } + + toggleAside() { + this.setAsideFolded(!this.state.asideFolded); + } + + setAsideFolded(folded = false) { + localStorage.setItem('asideFolded', JSON.stringify(folded)); + this.setState({ + asideFolded: folded + }); + } + + setHeaderVisible(visible = false) { + this.setState({ + headerVisible: visible + }); + } + + renderAside() { + return ( + { + return null; + }} + /> + ); + } + + setNavigations(items) { + this.setState({ + navigations: items + }); + } + + toggleOpen(e, item) { + e.stopPropagation(); + e.preventDefault(); + + const navigations = mapTree(this.state.navigations, i => { + const defaultOpen = + i.isOpen ?? + (Array.isArray(i.children) && + i.children.length && + !!~i.children.findIndex(item => item.path === location.pathname)); + return { + ...i, + isOpen: item.label === i.label ? !defaultOpen : defaultOpen + }; + }); + + this.setState({ + navigations + }); + } + + renderHeader() { + const location = this.props.location; + const theme = this.state.theme; + + if (location.pathname === '/edit') { + return ( +
+
AMis 可视化编辑器
+
+ ); + } + + return ( + <> +
+ {/* */} + +
+ + AMIS +
+
+ +
+
    + + 文档 + + + 示例 + +
+ +
+ { + this.setState({theme}); + localStorage.setItem( + 'themeIndex', + this.state.themes.indexOf(theme) + ); + }} + /> +
+
+
+ +
+ + ); + } + + renderNavigation(navs, parent?: any) { + const pathname = location.pathname; + return navs.map(nav => { + const path = nav.path; + const hasChildren = Array.isArray(nav.children) && nav.children.length; + const isOpen = + nav.isOpen || + (nav.isOpen !== false && + hasChildren && + !!~nav.children.findIndex(item => item.path === pathname)); + + return ( +
+ { + browserHistory.push( + `${path || (hasChildren && nav.children[0].path)}` + ); + !isOpen && this.toggleOpen(e, nav); + }} + // to={`${path || (hasChildren && nav.children[0].path)}`} + > + {nav.label} + {hasChildren ? ( + this.toggleOpen(e, nav)} + > + ) : null} + + + {isOpen + ? this.renderNavigation(nav.children || [], { + ...nav, + path + }) + : null} +
+ ); + }); + } + + render() { + const theme = this.state.theme; + const navigations = this.state.navigations; + + return ( + + + + +
+
+
+ {navigations.map(item => ( +
+
+ {item.label || '其他'} +
+ {this.renderNavigation(item.children)} +
+ ))} +
+
+ + {/* 完了加个动画吧 */} +
450 ? 'visible' : ''}`} + onClick={() => scrollTo({top: 0})} + > + +
+ + {React.cloneElement(this.props.children, { + ...this.props.children.props, + setNavigations: this.setNavigations, + setAsideFolded: this.setAsideFolded, + setHeaderVisible: this.setHeaderVisible, + theme: theme.value, + classPrefix: theme.ns, + locale: this.state.locale + })} +
+ + ); + } +} + +function navigations2route(pathPrefix = PathPrefix, navigations) { + let routes = []; + + navigations.forEach(root => { + root.children && + mapTree(root.children, item => { + if (item.path && item.component) { + routes.push( + + ); + } else if (item.path && item.getComponent) { + routes.push( + + ); + } + }); + }); + + return routes; +} + +export default function entry({pathPrefix}) { + PathPrefix = pathPrefix || PathPrefix; + return ( + + + + + + + + {navigations2route('/docs', docs)} + + + {navigations2route('/examples', examples)} + + + + + + ); +} diff --git a/examples/components/CRUD/Table.jsx b/examples/components/CRUD/Table.jsx index 0128826b..40735d8d 100644 --- a/examples/components/CRUD/Table.jsx +++ b/examples/components/CRUD/Table.jsx @@ -118,7 +118,10 @@ export default { } ], quickSaveApi: '/api/sample/bulkUpdate', - quickSaveItemApi: '/api/sample/$id', + quickSaveItemApi: { + url: '/api/sample/$id', + data: {requestUrl: '$requestUrl', apiAlias: '$apiAlias'} + }, filterTogglable: true, headerToolbar: [ 'filter-toggler', @@ -210,16 +213,14 @@ export default { }, { name: 'grade', - label: 'CSS grade', - quickEdit: { - mode: 'inline', - type: 'select', - inputClassName: 'w-xs', - options: ['A', 'B', 'C', 'D', 'X'], - saveImmediately: true - }, + label: '操作', type: 'text', - toggled: true + remark: '应用日志可编辑 设置备注', + quickEdit: { + type: 'text', + required: true, + saveImmediately: true + } }, { type: 'operation', diff --git a/examples/components/Doc.jsx b/examples/components/Doc.jsx deleted file mode 100644 index 72424879..00000000 --- a/examples/components/Doc.jsx +++ /dev/null @@ -1,80 +0,0 @@ -import React from 'react'; -import makeMarkdownRenderer from './MdRenderer'; - -export default { - // prefix: ({classnames: cx}) =>
  • , - label: '文档', - children: [ - { - label: 'AMIS 是什么？', - icon: 'fa fa-home', - path: '/docs/intro', - getComponent: (location, cb) => - require(['../../docs/intro.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - { - label: '快速开始', - icon: 'fa fa-flash', - path: '/docs/getting-started', - getComponent: (location, cb) => - require(['../../docs/getting_started.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - { - label: '基本用法', - icon: 'fa fa-file', - path: '/docs/basic', - getComponent: (location, cb) => - require(['../../docs/basic.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - { - label: '高级用法', - icon: 'fa fa-rocket', - path: '/docs/advanced', - getComponent: (location, cb) => - require(['../../docs/advanced.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - // {{renderer-docs}} - - { - label: '动态数据', - path: '/docs/api', - icon: 'fa fa-cloud', - getComponent: (location, cb) => - require(['../../docs/api.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - { - label: '定制功能', - path: '/docs/custom', - icon: 'fa fa-cubes', - getComponent: (location, cb) => - require(['../../docs/custom.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }, - - { - label: '定制样式', - path: '/docs/style', - icon: 'fa fa-laptop', - getComponent: (location, cb) => - require(['../../docs/style.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - } - ] -}; diff --git a/examples/components/Doc.tsx b/examples/components/Doc.tsx new file mode 100644 index 00000000..854ed45e --- /dev/null +++ b/examples/components/Doc.tsx @@ -0,0 +1,1020 @@ +import React from 'react'; +import makeMarkdownRenderer from './MdRenderer'; +import {flattenTree, filterTree, mapTree} from '../../src/utils/helper'; + +export const docs = [ + { + // prefix: ({classnames: cx}) =>
  • , + label: '📌 开始', + children: [ + { + label: '介绍', + path: '/docs/index', + getComponent: (location, cb) => + require(['../../docs/index.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: '快速开始', + path: '/docs/start/getting-started', + getComponent: (location, cb) => + require(['../../docs/start/getting-started.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + + { + label: '自定义', + path: '/docs/start/custom', + getComponent: (location, cb) => + require(['../../docs/start/custom.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + + // { + // label: '基本用法', + // icon: 'fa fa-file', + // path: '/docs/basic', + // getComponent: (location, cb) => + // require(['../../docs/basic.md'], doc => { + // cb(null, makeMarkdownRenderer(doc)); + // }) + // }, + + // { + // label: '高级用法', + // icon: 'fa fa-rocket', + // path: '/docs/advanced', + // getComponent: (location, cb) => + // require(['../../docs/advanced.md'], doc => { + // cb(null, makeMarkdownRenderer(doc)); + // }) + // } + ] + }, + + { + label: '💡 概念', + children: [ + { + label: '配置与组件', + path: '/docs/concepts/schema', + getComponent: (location, cb) => + require(['../../docs/concepts/schema.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '数据域与数据链', + path: '/docs/concepts/datascope-and-datachain', + getComponent: (location, cb) => + require(['../../docs/concepts/datascope-and-datachain.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '模板', + path: '/docs/concepts/template', + getComponent: (location, cb) => + require(['../../docs/concepts/template.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '数据映射', + path: '/docs/concepts/data-mapping', + getComponent: (location, cb) => + require(['../../docs/concepts/data-mapping.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '表达式', + path: '/docs/concepts/expression', + getComponent: (location, cb) => + require(['../../docs/concepts/expression.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '联动', + path: '/docs/concepts/linkage', + getComponent: (location, cb) => + require(['../../docs/concepts/linkage.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '行为', + path: '/docs/concepts/action', + getComponent: (location, cb) => + require(['../../docs/concepts/action.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: '样式', + path: '/docs/concepts/style', + getComponent: (location, cb) => + require(['../../docs/concepts/style.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + }, + + { + label: '🎼 类型', + children: [ + { + label: 'SchemaNode', + path: '/docs/types/schemanode', + getComponent: (location, cb) => + require(['../../docs/types/schemanode.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'API', + path: '/docs/types/api', + getComponent: (location, cb) => + require(['../../docs/types/api.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + }, + + { + label: '⚙ 组件', + children: [ + { + label: '组件介绍', + path: '/docs/components/component', + getComponent: (location, cb) => + require(['../../docs/components/component.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Page 页面', + path: '/docs/components/page', + getComponent: (location, cb) => + require(['../../docs/components/page.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Form 表单', + // path: '/docs/components/form/index', + // getComponent: (location, cb) => + // require(['../../docs/components/form/index.md'], doc => { + // cb(null, makeMarkdownRenderer(doc)); + // }), + children: [ + // @todo 完了想办法把这个放上面，暂时先这样 + { + label: 'Form 表单', + path: '/docs/components/form/index', + getComponent: (location, cb) => + require(['../../docs/components/form/index.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'FormItem 表单项', + path: '/docs/components/form/formitem', + getComponent: (location, cb) => + require(['../../docs/components/form/formitem.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Options 选择器表单项', + path: '/docs/components/form/options', + getComponent: (location, cb) => + require(['../../docs/components/form/options.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Array 数组输入框', + path: '/docs/components/form/array', + getComponent: (location, cb) => + require(['../../docs/components/form/array.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button 按钮', + path: '/docs/components/form/button', + getComponent: (location, cb) => + require(['../../docs/components/form/button.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button-Toolbar 按钮工具栏', + path: '/docs/components/form/button-toolbar', + getComponent: (location, cb) => + require(['../../docs/components/form/button-toolbar.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button-Group 按钮集合', + path: '/docs/components/form/button-group', + getComponent: (location, cb) => + require(['../../docs/components/form/button-group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Chain-Select 链式下拉框', + path: '/docs/components/form/chain-select', + getComponent: (location, cb) => + require(['../../docs/components/form/chain-select.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Checkbox 勾选框', + path: '/docs/components/form/checkbox', + getComponent: (location, cb) => + require(['../../docs/components/form/checkbox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Checkboxes 复选框', + path: '/docs/components/form/checkboxes', + getComponent: (location, cb) => + require(['../../docs/components/form/checkboxes.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'City 城市选择器', + path: '/docs/components/form/city', + getComponent: (location, cb) => + require(['../../docs/components/form/city.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Color 颜色选择器', + path: '/docs/components/form/color', + getComponent: (location, cb) => + require(['../../docs/components/form/color.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Combo 组合', + path: '/docs/components/form/combo', + getComponent: (location, cb) => + require(['../../docs/components/form/combo.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Date 日期选择器', + path: '/docs/components/form/date', + getComponent: (location, cb) => + require(['../../docs/components/form/date.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Datetime 日期时间选择器', + path: '/docs/components/form/datetime', + getComponent: (location, cb) => + require(['../../docs/components/form/datetime.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Date-Range 日期范围选择器', + path: '/docs/components/form/date-range', + getComponent: (location, cb) => + require(['../../docs/components/form/date-range.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Datetime-Range 日期时间范围', + path: '/docs/components/form/datetime-range', + getComponent: (location, cb) => + require(['../../docs/components/form/datetime-range.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'DiffEditor 对比编辑器', + path: '/docs/components/form/diff-editor', + getComponent: (location, cb) => + require(['../../docs/components/form/diff-editor.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Editor 编辑器', + path: '/docs/components/form/editor', + getComponent: (location, cb) => + require(['../../docs/components/form/editor.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'FieldSet 表单项集合', + path: '/docs/components/form/fieldset', + getComponent: (location, cb) => + require(['../../docs/components/form/fieldset.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'File 文件上传', + path: '/docs/components/form/file', + getComponent: (location, cb) => + require(['../../docs/components/form/file.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Formula 公式', + path: '/docs/components/form/formula', + getComponent: (location, cb) => + require(['../../docs/components/form/formula.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Grid 网格', + path: '/docs/components/form/grid', + getComponent: (location, cb) => + require(['../../docs/components/form/grid.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Group 表单项组', + path: '/docs/components/form/group', + getComponent: (location, cb) => + require(['../../docs/components/form/group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'HBox', + path: '/docs/components/form/hbox', + getComponent: (location, cb) => + require(['../../docs/components/form/hbox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Hidden 隐藏字段', + path: '/docs/components/form/hidden', + getComponent: (location, cb) => + require(['../../docs/components/form/hidden.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Image 图片', + path: '/docs/components/form/image', + getComponent: (location, cb) => + require(['../../docs/components/form/image.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Input-Group 输入框组合', + path: '/docs/components/form/input-group', + getComponent: (location, cb) => + require(['../../docs/components/form/input-group.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'List 列表', + path: '/docs/components/form/list', + getComponent: (location, cb) => + require(['../../docs/components/form/list.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Matrix 矩阵', + path: '/docs/components/form/matrix', + getComponent: (location, cb) => + require(['../../docs/components/form/matrix.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'NestedSelect 级联选择器', + path: '/docs/components/form/nestedselect', + getComponent: (location, cb) => + require(['../../docs/components/form/nestedselect.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Number 数字输入框', + path: '/docs/components/form/number', + getComponent: (location, cb) => + require(['../../docs/components/form/number.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Panel 面板', + path: '/docs/components/form/panel', + getComponent: (location, cb) => + require(['../../docs/components/form/panel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Picker 列表选择器', + path: '/docs/components/form/picker', + getComponent: (location, cb) => + require(['../../docs/components/form/picker.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Radios 单选框', + path: '/docs/components/form/radios', + getComponent: (location, cb) => + require(['../../docs/components/form/radios.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Rating 评分', + path: '/docs/components/form/rating', + getComponent: (location, cb) => + require(['../../docs/components/form/rating.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Range 滑块', + path: '/docs/components/form/range', + getComponent: (location, cb) => + require(['../../docs/components/form/range.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Repeat 重复频率选择器', + path: '/docs/components/form/repeat', + getComponent: (location, cb) => + require(['../../docs/components/form/repeat.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Rich-Text 富文本编辑器', + path: '/docs/components/form/rich-text', + getComponent: (location, cb) => + require(['../../docs/components/form/rich-text.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Select 选择器', + path: '/docs/components/form/select', + getComponent: (location, cb) => + require(['../../docs/components/form/select.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Service 功能容器', + path: '/docs/components/form/service', + getComponent: (location, cb) => + require(['../../docs/components/form/service.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'SubForm 子表单', + path: '/docs/components/form/subform', + getComponent: (location, cb) => + require(['../../docs/components/form/subform.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Switch 开关', + path: '/docs/components/form/switch', + getComponent: (location, cb) => + require(['../../docs/components/form/switch.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Static 静态展示', + path: '/docs/components/form/static', + getComponent: (location, cb) => + require(['../../docs/components/form/static.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tabs 选项卡', + path: '/docs/components/form/tabs', + getComponent: (location, cb) => + require(['../../docs/components/form/tabs.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Table 表格', + path: '/docs/components/form/table', + getComponent: (location, cb) => + require(['../../docs/components/form/table.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tag 标签选择器', + path: '/docs/components/form/tag', + getComponent: (location, cb) => + require(['../../docs/components/form/tag.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Text 输入框', + path: '/docs/components/form/text', + getComponent: (location, cb) => + require(['../../docs/components/form/text.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Textarea 多行输入框', + path: '/docs/components/form/textarea', + getComponent: (location, cb) => + require(['../../docs/components/form/textarea.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Time 时间', + path: '/docs/components/form/time', + getComponent: (location, cb) => + require(['../../docs/components/form/time.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tree 树形选择框', + path: '/docs/components/form/tree', + getComponent: (location, cb) => + require(['../../docs/components/form/tree.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'TreeSelect 树形选择器', + path: '/docs/components/form/treeselect', + getComponent: (location, cb) => + require(['../../docs/components/form/treeselect.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + }, + { + label: 'CRUD 增删改查', + path: '/docs/components/crud', + getComponent: (location, cb) => + require(['../../docs/components/crud.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Action 行为按钮', + path: '/docs/components/action', + getComponent: (location, cb) => + require(['../../docs/components/action.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Alert 提示', + path: '/docs/components/alert', + getComponent: (location, cb) => + require(['../../docs/components/alert.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Audio 音频', + path: '/docs/components/audio', + getComponent: (location, cb) => + require(['../../docs/components/audio.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Button 按钮', + path: '/docs/components/button', + getComponent: (location, cb) => + require(['../../docs/components/button.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'ButtonGroup 按钮组', + path: '/docs/components/buttongroup', + getComponent: (location, cb) => + require(['../../docs/components/buttongroup.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Card 卡片', + path: '/docs/components/card', + getComponent: (location, cb) => + require(['../../docs/components/card.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Cards 卡片组', + path: '/docs/components/component', + getComponent: (location, cb) => + require(['../../docs/components/component.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Carousel 轮播图', + path: '/docs/components/carousel', + getComponent: (location, cb) => + require(['../../docs/components/carousel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Chart 图表', + path: '/docs/components/chart', + getComponent: (location, cb) => + require(['../../docs/components/chart.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Collapse 折叠器', + path: '/docs/components/collapse', + getComponent: (location, cb) => + require(['../../docs/components/collapse.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Color 颜色', + path: '/docs/components/color', + getComponent: (location, cb) => + require(['../../docs/components/color.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Container 容器', + path: '/docs/components/container', + getComponent: (location, cb) => + require(['../../docs/components/container.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Date 日期时间', + path: '/docs/components/date', + getComponent: (location, cb) => + require(['../../docs/components/date.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Dialog 对话框', + path: '/docs/components/dialog', + getComponent: (location, cb) => + require(['../../docs/components/dialog.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Divider 分割线', + path: '/docs/components/divider', + getComponent: (location, cb) => + require(['../../docs/components/divider.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Drawer 抽屉', + path: '/docs/components/drawer', + getComponent: (location, cb) => + require(['../../docs/components/drawer.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'DropDownButton', + path: '/docs/components/dropdown-button', + getComponent: (location, cb) => + require(['../../docs/components/dropdown-button.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Each 循环渲染器', + path: '/docs/components/each', + getComponent: (location, cb) => + require(['../../docs/components/each.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Grid 网格布局', + path: '/docs/components/grid', + getComponent: (location, cb) => + require(['../../docs/components/grid.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'HBox 布局', + path: '/docs/components/hbox', + getComponent: (location, cb) => + require(['../../docs/components/hbox.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Html', + path: '/docs/components/html', + getComponent: (location, cb) => + require(['../../docs/components/html.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Icon 图标', + path: '/docs/components/icon', + getComponent: (location, cb) => + require(['../../docs/components/icon.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'iFrame', + path: '/docs/components/iframe', + getComponent: (location, cb) => + require(['../../docs/components/iframe.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Image 图片', + path: '/docs/components/image', + getComponent: (location, cb) => + require(['../../docs/components/image.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Images 图片集', + path: '/docs/components/images', + getComponent: (location, cb) => + require(['../../docs/components/images.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Json', + path: '/docs/components/json', + getComponent: (location, cb) => + require(['../../docs/components/json.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Link 链接', + path: '/docs/components/link', + getComponent: (location, cb) => + require(['../../docs/components/link.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'List 列表', + path: '/docs/components/list', + getComponent: (location, cb) => + require(['../../docs/components/list.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Mapping 映射', + path: '/docs/components/mapping', + getComponent: (location, cb) => + require(['../../docs/components/mapping.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Nav 导航', + path: '/docs/components/nav', + getComponent: (location, cb) => + require(['../../docs/components/nav.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Panel 面板', + path: '/docs/components/panel', + getComponent: (location, cb) => + require(['../../docs/components/panel.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Progress 进度条', + path: '/docs/components/progress', + getComponent: (location, cb) => + require(['../../docs/components/progress.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'QRCode 二维码', + path: '/docs/components/qrcode', + getComponent: (location, cb) => + require(['../../docs/components/qrcode.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Remark 标记', + path: '/docs/components/remark', + getComponent: (location, cb) => + require(['../../docs/components/remark.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Service 功能型容器', + path: '/docs/components/service', + getComponent: (location, cb) => + require(['../../docs/components/service.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Spinner 加载中', + path: '/docs/components/spinner', + getComponent: (location, cb) => + require(['../../docs/components/spinner.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Status 状态', + path: '/docs/components/status', + getComponent: (location, cb) => + require(['../../docs/components/status.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Switch 开关', + path: '/docs/components/switch', + getComponent: (location, cb) => + require(['../../docs/components/switch.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Table 表格', + path: '/docs/components/table', + getComponent: (location, cb) => + require(['../../docs/components/table.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tabs 选项卡', + path: '/docs/components/tabstabs', + getComponent: (location, cb) => + require(['../../docs/components/tabs.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tasks 任务操作集合', + path: '/docs/components/tasks', + getComponent: (location, cb) => + require(['../../docs/components/tasks.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Tpl 模板', + path: '/docs/components/tpl', + getComponent: (location, cb) => + require(['../../docs/components/tpl.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Video 视频', + path: '/docs/components/video', + getComponent: (location, cb) => + require(['../../docs/components/video.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Wrapper 包裹容器', + path: '/docs/components/wrapper', + getComponent: (location, cb) => + require(['../../docs/components/wrapper.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + }, + { + label: 'Wizard 向导', + path: '/docs/components/wizard', + getComponent: (location, cb) => + require(['../../docs/components/wizard.md'], doc => { + cb(null, makeMarkdownRenderer(doc)); + }) + } + ] + } +]; + +export default class Doc extends React.PureComponent { + state = { + prevDoc: null, + nextDoc: null + }; + + componentDidMount() { + this.props.setNavigations(docs); + this.setDocFooter(); + } + + componentDidUpdate(preProps) { + if (this.props.location.pathname !== preProps.location.pathname) { + this.props.setNavigations(docs); + this.setDocFooter(); + } + } + + setDocFooter() { + const newDocs = mapTree(docs, doc => ({ + ...doc, + children: + Array.isArray(doc.children) && doc.children.length + ? doc.children.map(item => ({ + ...item, + group: doc.group || doc.label + })) + : null + })); + const flattenDocs = flattenTree(newDocs).filter(i => !!i.path); + const docIndex = flattenDocs.findIndex(d => d.path === location.pathname); + this.setState({ + prevDoc: flattenDocs[docIndex - 1], + nextDoc: flattenDocs[docIndex + 1] + }); + } + + render() { + return ( + <> + {React.cloneElement(this.props.children, { + ...this.props.children.props, + theme: this.props.theme, + classPrefix: this.props.classPrefix, + locale: this.props.locale, + prevDoc: this.state.prevDoc, + nextDoc: this.state.nextDoc + })} + + ); + } +} diff --git a/examples/components/DocSearch.jsx b/examples/components/DocSearch.jsx index cd98a502..fae19dfd 100644 --- a/examples/components/DocSearch.jsx +++ b/examples/components/DocSearch.jsx @@ -5,7 +5,7 @@ const FormComponent = makeSchemaRenderer({ type: 'form', mode: 'inline', wrapWithPanel: false, - className: 'pull-right m-t-sm m-r', + className: ':Doc-search', controls: [ { type: 'input-group', @@ -13,15 +13,15 @@ const FormComponent = makeSchemaRenderer({ controls: [ { type: 'icon', - addOnclassName: 'no-bg', + addOnclassName: 'no-bg no-border p-r-none p-l', className: 'text-sm', icon: 'search', vendor: 'iconfont' }, { type: 'text', - placeholder: '搜索文档', - inputClassName: 'b-l-none p-l-none', + placeholder: '搜索...', + inputClassName: 'no-border', name: 'docsearch' } ] diff --git a/examples/components/App.jsx b/examples/components/Example.tsx similarity index 50% rename from examples/components/App.jsx rename to examples/components/Example.tsx index 72742cf4..888219b0 100644 --- a/examples/components/App.jsx +++ b/examples/components/Example.tsx @@ -1,22 +1,4 @@ import React from 'react'; -import NotFound from '../../src/components/404'; -import NotFound from '../../src/components/404'; -import Layout from '../../src/components/Layout'; -import AsideNav from '../../src/components/AsideNav'; -import {AlertComponent, ToastComponent} from '../../src/components/index'; -import {mapTree} from '../../src/utils/helper'; -import {Icon} from '../../src/components/icons'; -import '../../src/locale/en'; -import { - Router, - Route, - IndexRoute, - browserHistory, - hashHistory, - Link, - Redirect, - withRouter -} from 'react-router'; import makeSchemaRenderer from './SchemaRender'; import SimplePageSchema from './Page/Simple'; @@ -44,7 +26,6 @@ import FormulaFormSchema from './Form/Formula'; import CustomFormSchema from './Form/Custom'; import FormLayoutTestSchema from './Form/layoutTest'; import Definitions from './Form/Definitions'; -import Docs from './Doc'; import TableCrudSchema from './CRUD/Table'; import ItemActionsSchema from './CRUD/ItemActions'; @@ -95,6 +76,9 @@ import TestComponent from './Test'; import Select from '../../src/components/Select'; import Button from '../../src/components/Button'; import DocSearch from './DocSearch'; +import {groupBy} from 'lodash'; +import classnames from 'classnames'; +import Doc, {docs} from './Doc'; let PathPrefix = '/examples'; let ContextPath = ''; @@ -104,8 +88,7 @@ if (process.env.NODE_ENV === 'production') { ContextPath = '/amis'; } -const navigations = [ - Docs, +export const examples = [ { prefix: ({classnames: cx}) =>
  • , label: '示例', @@ -118,17 +101,17 @@ const navigations = [ children: [ { label: '简单页面', - path: 'pages/simple', + path: '/examples/pages/simple', component: makeSchemaRenderer(SimplePageSchema) }, { label: '初始化出错', - path: 'pages/error', + path: '/examples/pages/error', component: makeSchemaRenderer(ErrorPageSchema) }, { label: '表单页面', - path: 'pages/form', + path: '/examples/pages/form', component: makeSchemaRenderer(FormPageSchema) } ] @@ -140,139 +123,139 @@ const navigations = [ children: [ { label: '表单展示模式', - path: 'form/mode', + path: '/examples/form/mode', component: makeSchemaRenderer(ModeFormSchema) }, { label: '所有类型汇总', - path: 'form/full', + path: '/examples/form/full', component: makeSchemaRenderer(FullFormSchema) }, { label: '静态展示', - path: 'form/static', + path: '/examples/form/static', component: makeSchemaRenderer(StaticFormSchema) }, { label: '输入提示', - path: 'form/hint', + path: '/examples/form/hint', component: makeSchemaRenderer(HintFormSchema) }, { label: 'FieldSet', - path: 'form/fieldset', + path: '/examples/form/fieldset', component: makeSchemaRenderer(FieldSetFormSchema) }, { label: 'Tabs', - path: 'form/tabs', + path: '/examples/form/tabs', component: makeSchemaRenderer(TabsFormSchema) }, { label: 'FieldSet Tabs 组合', - path: 'form/fields-tabs', + path: '/examples/form/fields-tabs', component: makeSchemaRenderer(FieldSetInTabsFormSchema) }, { label: '动态数据', - path: 'form/remote', + path: '/examples/form/remote', component: makeSchemaRenderer(RemoteFormSchema) }, { label: '显隐状态联动', - path: 'form/reaction', + path: '/examples/form/reaction', component: makeSchemaRenderer(ReactionFormSchema) }, { label: '表单验证', - path: 'form/validation', + path: '/examples/form/validation', component: makeSchemaRenderer(ValidationFormSchema) }, { label: '组合类型', - path: 'form/combo', + path: '/examples/form/combo', component: makeSchemaRenderer(ComboFormSchema) }, { label: '穿梭器', - path: 'form/transfer', + path: '/examples/form/transfer', component: makeSchemaRenderer(TransferFormSchema) }, { label: '多功能选择器', - path: 'form/picker', + path: '/examples/form/picker', component: makeSchemaRenderer(PickerFormSchema) }, { label: '子表单', - path: 'form/sub-form', + path: '/examples/form/sub-form', component: makeSchemaRenderer(SubFormSchema) }, { label: 'JSon Schema表单', - path: 'form/json-schema', + path: '/examples/form/json-schema', component: JSONSchemaForm }, { label: '富文本', - path: 'form/rich-text', + path: '/examples/form/rich-text', component: makeSchemaRenderer(RichTextSchema) }, { label: '代码编辑器', - path: 'form/ide', + path: '/examples/form/ide', component: makeSchemaRenderer(EditorSchema) }, { label: '自定义组件', - path: 'form/custom', + path: '/examples/form/custom', component: makeSchemaRenderer(CustomFormSchema) }, { label: '表格编辑', - path: 'form/table', + path: '/examples/form/table', component: makeSchemaRenderer(TableFormSchema) }, { label: '公式示例', - path: 'form/formula', + path: '/examples/form/formula', component: makeSchemaRenderer(FormulaFormSchema) }, { label: '引用', - path: 'form/definitions', + path: '/examples/form/definitions', component: makeSchemaRenderer(Definitions) } // { // label: '布局测试', - // path: 'form/layout-test', + // path: '/examples/form/layout-test', // component: makeSchemaRenderer(FormLayoutTestSchema) // }, // { // label: '测试', - // path: 'form/test', + // path: '/examples/form/test', // component: makeSchemaRenderer(TestFormSchema) // }, ] @@ -284,87 +267,87 @@ const navigations = [ children: [ { label: '表格模式', - path: 'crud/table', + path: '/examples/crud/table', component: makeSchemaRenderer(TableCrudSchema) }, { label: '卡片模式', - path: 'crud/grid', + path: '/examples/crud/grid', component: makeSchemaRenderer(GridCrudSchema) }, { label: '列表模式', - path: 'crud/list', + path: '/examples/crud/list', component: makeSchemaRenderer(ListCrudSchema) }, { label: '加载更多模式', - path: 'crud/load-more', + path: '/examples/crud/load-more', component: makeSchemaRenderer(LoadMoreSchema) }, { label: '操作交互显示', - path: 'crud/item-actions', + path: '/examples/crud/item-actions', component: makeSchemaRenderer(ItemActionsSchema) }, { label: '列类型汇总', - path: 'crud/columns', + path: '/examples/crud/columns', component: makeSchemaRenderer(FieldsCrudSchema) }, { label: '可折叠', - path: 'crud/footable', + path: '/examples/crud/footable', component: makeSchemaRenderer(FootableCrudSchema) }, { label: '嵌套', - path: 'crud/nested', + path: '/examples/crud/nested', component: makeSchemaRenderer(NestedCrudSchema) }, { label: '合并单元格', - path: 'crud/merge-cell', + path: '/examples/crud/merge-cell', component: makeSchemaRenderer(MergeCellSchema) }, { label: '表头分组', - path: 'crud/header-group', + path: '/examples/crud/header-group', component: makeSchemaRenderer(HeaderGroupSchema) }, { label: '表头隐藏', - path: 'crud/header-hide', + path: '/examples/crud/header-hide', component: makeSchemaRenderer(HeaderHideSchema) }, { label: '带边栏', - path: 'crud/aside', + path: '/examples/crud/aside', component: makeSchemaRenderer(AsideCrudSchema) }, { label: '固定表头/列', - path: 'crud/fixed', + path: '/examples/crud/fixed', component: makeSchemaRenderer(FixedCrudSchema) }, { label: '键盘操作编辑', - path: 'crud/keyboards', + path: '/examples/crud/keyboards', component: makeSchemaRenderer(KeyboardsCrudSchema) }, { label: '操作并下一个', - path: 'crud/jump-next', + path: '/examples/crud/jump-next', component: makeSchemaRenderer(JumpNextCrudSchema) }, { label: '一次性加载', - path: 'crud/load-once', + path: '/examples/crud/load-once', component: makeSchemaRenderer(LoadOnceTableCrudSchema) } // { // label: '测试', - // path: 'crud/test', + // path: '/examples/crud/test', // component: makeSchemaRenderer(TestCrudSchema) // } ] @@ -376,12 +359,12 @@ const navigations = [ children: [ { label: '对话框', - path: 'dialog/simple', + path: '/examples/dialog/simple', component: makeSchemaRenderer(SimpleDialogSchema) }, { label: '侧边弹出', - path: 'dialog/drawer', + path: '/examples/dialog/drawer', component: makeSchemaRenderer(DrwaerSchema) } ] @@ -393,28 +376,28 @@ const navigations = [ children: [ { label: '常规选项卡', - path: 'tabs/normal', + path: '/examples/tabs/normal', component: makeSchemaRenderer(NormalTabSchema) }, { label: '表单中选项卡分组', - path: 'tabs/form', + path: '/examples/tabs/form', component: makeSchemaRenderer(FormTabSchema) }, { label: '选项卡页面1', - path: 'tabs/tab1', + path: '/examples/tabs/tab1', component: makeSchemaRenderer(Tab1Schema) }, { label: '选项卡页面2', - path: 'tabs/tab2', + path: '/examples/tabs/tab2', component: makeSchemaRenderer(Tab2Schema) }, { label: '选项卡页面3', - path: 'tabs/tab3', + path: '/examples/tabs/tab3', component: makeSchemaRenderer(Tab3Schema) } ] @@ -426,32 +409,32 @@ const navigations = [ children: [ { label: '地址栏变化自动更新', - path: 'linkpage/page', + path: '/examples/linkpage/page', component: makeSchemaRenderer(PageLinkPageSchema) }, { label: '选项联动', - path: 'linkpage/options-local', + path: '/examples/linkpage/options-local', component: makeSchemaRenderer(OptionsLocalPageSchema) }, { label: '选项远程联动', - path: 'linkpage/options', + path: '/examples/linkpage/options', component: makeSchemaRenderer(OptionsPageSchema) }, { label: '表单和表单联动', - path: 'linkpage/form', + path: '/examples/linkpage/form', component: makeSchemaRenderer(FormLinkPageSchema) }, { label: '表单自动更新', - path: 'linkpage/form2', + path: '/examples/linkpage/form2', component: makeSchemaRenderer(Form2LinkPageSchema) }, { label: '表单和列表联动', - path: 'linkpage/crud', + path: '/examples/linkpage/crud', component: makeSchemaRenderer(CRUDLinkPageSchema) } ] @@ -463,17 +446,17 @@ const navigations = [ children: [ { label: '动态加载数据', - path: 'services/data', + path: '/examples/services/data', component: makeSchemaRenderer(ServicesDataSchema) }, { label: '动态加载页面', - path: 'services/schema', + path: '/examples/services/schema', component: makeSchemaRenderer(ServicesSchemaSchema) }, { label: '动态加载部分表单', - path: 'services/form', + path: '/examples/services/form', component: makeSchemaRenderer(ServicesFormSchema) } ] @@ -482,437 +465,91 @@ const navigations = [ { label: '向导', icon: 'fa fa-desktop', - path: 'wizard', + path: '/examples/wizard', component: makeSchemaRenderer(WizardSchema) }, { label: '排版', icon: 'fa fa-columns', - path: 'horizontal', + path: '/examples/horizontal', component: makeSchemaRenderer(HorizontalSchema) }, { label: '图表', icon: 'fa fa-bar-chart', - path: 'chart', + path: '/examples/chart', component: makeSchemaRenderer(ChartSchema) }, { label: '轮播图', icon: 'fa fa-pause', - path: 'carousel', + path: '/examples/carousel', component: makeSchemaRenderer(CarouselSchema) }, { label: '音频', icon: 'fa fa-volume-up', - path: 'audio', + path: '/examples/audio', component: makeSchemaRenderer(AudioSchema) }, { label: '视频', icon: 'fa fa-video-camera', - path: 'video', + path: '/examples/video', component: makeSchemaRenderer(VideoSchema) }, { label: '异步任务', icon: 'fa fa-tasks', - path: 'task', + path: '/examples/task', component: makeSchemaRenderer(TasksSchema) }, { label: 'IFrame', icon: 'fa fa-cloud', - path: 'iframe', + path: '/examples/iframe', component: makeSchemaRenderer(IFrameSchema) - }, - { - label: 'SDK', - icon: 'fa fa-rocket', - path: 'sdk', - component: SdkTest - }, - - { - label: 'Test', - icon: 'fa fa-code', - path: 'test', - component: TestComponent } + + // 放到使用中 + // { + // label: 'SDK', + // icon: 'fa fa-rocket', + // path: '/examples/sdk', + // component: SdkTest + // } + + // { + // label: 'Test', + // icon: 'fa fa-code', + // path: '/examples/test', + // component: TestComponent + // } ] } ]; -function isActive(link, location) { - return !!(link && link === location.pathname); -} - -const themes = [ - { - label: '默认主题', - ns: 'a-', - value: 'default' - }, - - { - label: '百度云舍', - ns: 'cxd-', - value: 'cxd' - }, - { - label: 'Dark', - ns: 'dark-', - value: 'dark' - } -]; - -const locales = [ - { - label: '默认', - value: 'zh-cn' - }, - - { - label: 'English', - value: 'en' - } -]; - -@withRouter -export class App extends React.PureComponent { - state = { - asideFolded: localStorage.getItem('asideFolded') === 'true', - offScreen: false, - headerVisible: true, - themeIndex: 0, - themes: themes, - theme: themes[localStorage.getItem('themeIndex') || 0], - locale: localStorage.getItem('locale') || '' - }; - - constructor(props) { - super(props); - - this.toggleAside = this.toggleAside.bind(this); - this.setAsideFolded = this.setAsideFolded.bind(this); - this.setHeaderVisible = this.setHeaderVisible.bind(this); - } - +export default class Example extends React.PureComponent { componentDidMount() { - if (this.state.theme.value !== 'default') { - document.querySelectorAll('link[title]').forEach(item => { - item.disabled = true; - }); - document.querySelector( - `link[title=${this.state.theme.value}]` - ).disabled = false; - } + this.props.setNavigations(examples); } - componentDidUpdate(preProps, preState) { - const props = this.props; - - if (preState.theme.value !== this.state.theme.value) { - document.querySelector( - `link[title=${preState.theme.value}]` - ).disabled = true; - document.querySelector( - `link[title=${this.state.theme.value}]` - ).disabled = false; - } - - if (props.location.pathname !== preProps.location.pathname) { - this.setState( - { - offScreen: false - }, - () => window.scrollTo(0, 0) - ); - - const pageURL = props.location.pathname; - _hmt && _hmt.push(['_trackPageview', pageURL]); - } - } - - toggleAside() { - this.setAsideFolded(!this.state.asideFolded); - } - - setAsideFolded(folded = false) { - localStorage.setItem('asideFolded', JSON.stringify(folded)); - this.setState({ - asideFolded: folded - }); - } - - setHeaderVisible(visible = false) { - this.setState({ - headerVisible: visible - }); - } - - renderAside() { - const location = this.props.location; - - if (location.pathname === '/edit') { - return null; - } - - const theme = this.state.theme; - - return ( - { - let children = []; - - if (link.children) { - children.push( - toggleExpand(link, e)} - > - - - ); - } - - link.badge && - children.push( - - {link.badge} - - ); - - link.icon && - children.push( - - ); - - children.push( - - {link.label} - - ); - - return link.path ? ( - - {children} - - ) : ( - toggleExpand(link) : null}> - {children} - - ); - }} - isActive={link => - isActive( - link.path && link.path[0] === '/' - ? ContextPath + link.path - : `${ContextPath}${PathPrefix}/${link.path}`, - location - ) - } - /> - ); - } - - renderHeader() { - const location = this.props.location; - const theme = this.state.theme; - - if (location.pathname === '/edit') { - return ( -
    -
    AMis 可视化编辑器
    -
    - ); - } - - return ( -
    -
    - -
    - - AMis Renderer -
    -
    -
    -
    -
    - - - -
    -
    - -
    - 语言： - { - { - this.setState({theme}); - localStorage.setItem( - 'themeIndex', - this.state.themes.indexOf(theme) - ); - }} - /> - } -
    - - -
    -
    - ); + componentDidUpdate() { + this.props.setNavigations(examples); } render() { - // const pathname = this.props.location.pathname; - const theme = this.state.theme; return ( - - - + <> {React.cloneElement(this.props.children, { ...this.props.children.props, - setAsideFolded: this.setAsideFolded, - setHeaderVisible: this.setHeaderVisible, - theme: theme.value, - classPrefix: theme.ns, - locale: this.state.locale + theme: this.props.theme, + classPrefix: this.props.classPrefix, + locale: this.props.locale })} - + ); } } - -function navigations2route(pathPrefix = PathPrefix) { - let routes = []; - - navigations.forEach(root => { - root.children && - mapTree(root.children, item => { - if (item.path && item.component) { - routes.push( - - ); - } else if (item.path && item.getComponent) { - routes.push( - - ); - } - }); - }); - - return routes; -} - -export default function entry({pathPrefix}) { - PathPrefix = pathPrefix || PathPrefix; - let history = browserHistory; - - // if (process.env.NODE_ENV === 'production') { - // history = hashHistory; - // } - - return ( - - - - - {navigations2route(PathPrefix)} - - - - ); -} diff --git a/examples/components/MdRenderer.jsx b/examples/components/MdRenderer.jsx deleted file mode 100644 index bf3a8377..00000000 --- a/examples/components/MdRenderer.jsx +++ /dev/null @@ -1,230 +0,0 @@ -/* eslint-disable no-unused-vars */ -import React from 'react'; -import ReactDOM from 'react-dom'; -import {render} from '../../src/index'; -import axios from 'axios'; -import TitleBar from '../../src/components/TitleBar'; -import LazyComponent from '../../src/components/LazyComponent'; -import Overlay from '../../src/components/Overlay'; -import PopOver from '../../src/components/PopOver'; -import NestedLinks from '../../src/components/AsideNav'; -import {Portal} from 'react-overlays'; - -class CodePreview extends React.Component { - state = { - PlayGround: null - }; - componentDidMount() { - require(['./Play'], component => - this.setState({ - PlayGround: component.default - })); - } - - render() { - const { - container, - height, - setAsideFolded, - setHeaderVisible, - ...rest - } = this.props; - - const PlayGround = this.state.PlayGround; - // 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级 - - return ( -
    - - {PlayGround ? ( - this.refs.span} - placement="bottom" - show - > - -
    - -
    -     -     - ) : null} -
    - ); - } -} - -function isActive(link, location) { - return !!(link.fullPath && link.fullPath === location.hash); -} - -export default function(doc) { - return class extends React.Component { - static displayName = 'MarkdownRenderer'; - ref = null; - doms = []; - constructor(props) { - super(props); - this.divRef = this.divRef.bind(this); - this.handleClick = this.handleClick.bind(this); - } - - componentDidMount() { - this.renderSchema(); - - if (location.hash && location.hash.length > 1) { - // 禁用自动跳转 - if (window.history && 'scrollRestoration' in window.history) { - window.history.scrollRestoration = 'manual'; - } - - const dom = document.querySelector( - `[name="${location.hash.substring(1)}"]` - ); - dom && dom.scrollIntoView(); - } - } - - componentDidUpdate() { - this.renderSchema(); - } - - componentWillUnmount() { - this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom)); - } - - handleClick(e) { - const href = e.target.getAttribute('href'); - if (href && href[0] !== '#' && !/^http/.test(href)) { - e.preventDefault(); - this.props.push(href); - } - } - - divRef(ref) { - this.ref = ref; - - if (ref) { - ref.innerHTML = doc.html; - } - } - - renderSchema() { - const scripts = document.querySelectorAll('script[type="text/schema"]'); - if (!scripts && !scripts.length) { - return; - } - - for (let i = 0, len = scripts.length; i < len; i++) { - let script = scripts[i]; - let props = {}; - [].slice.apply(script.attributes).forEach(item => { - props[item.name] = item.value; - }); - - let dom = document.createElement('div'); - let height = props.height ? parseInt(props.height, 10) : 200; - dom.setAttribute('class', 'doc-play-ground'); - dom.setAttribute('style', `height: ${height}px;`); - script.parentNode.replaceChild(dom, script); - - this.doms.push(dom); - ReactDOM.unstable_renderSubtreeIntoContainer( - this, - ReactDOM.findDOMNode(this)} - height={height} - component={CodePreview} - code={script.innerText} - scope={props.scope} - unMountOnHidden - placeholder="加载中，请稍后。。。" - />, - dom - ); - } - } - - render() { - const {location} = this.props; - - return ( -
    - {doc.title ? : null} -
    - Doc -
    - {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( - document.querySelector('#asideInner')}> - { - let children = []; - - if (link.children) { - children.push( - - ); - } - - link.badge && - children.push( - - {link.badge} - - ); - - depth === 1 && - children.push( - - ); - - children.push( - - {link.label} - - ); - - return link.fragment ? ( - {children} - ) : ( - toggleExpand(link) : null} - > - {children} - - ); - }} - isActive={link => isActive(link, location)} - /> - - ) : null} -
    - ); - } - }; -} diff --git a/examples/components/MdRenderer.tsx b/examples/components/MdRenderer.tsx new file mode 100644 index 00000000..31f16430 --- /dev/null +++ b/examples/components/MdRenderer.tsx @@ -0,0 +1,247 @@ +/* eslint-disable no-unused-vars */ +import React from 'react'; +import ReactDOM from 'react-dom'; +import {render} from '../../src/index'; +import axios from 'axios'; +import TitleBar from '../../src/components/TitleBar'; +import LazyComponent from '../../src/components/LazyComponent'; +import Overlay from '../../src/components/Overlay'; +import PopOver from '../../src/components/PopOver'; +import NestedLinks from '../../src/components/AsideNav'; +import {Portal} from 'react-overlays'; +import classnames from 'classnames'; +import {Link} from 'react-router'; + +class CodePreview extends React.Component { + state = { + PlayGround: null + }; + componentDidMount() { + require(['./Play'], component => + this.setState({ + PlayGround: component.default + })); + } + + render() { + const { + container, + height, + setAsideFolded, + setHeaderVisible, + ...rest + } = this.props; + + const PlayGround = this.state.PlayGround; + // 不要放在 .markdown-body 下面，因为样式会干扰，复写又麻烦，所以通过 Overlay 渲染到同级 + + return ( +
    + + {PlayGround ? ( + this.refs.span} + placement="bottom" + show + > + +
    + +
    +     +     + ) : null} +
    + ); + } +} + +function isActive(link, location) { + return !!(link.fullPath && link.fullPath === location.hash); +} + +class Preview extends React.Component { + static displayName = 'MarkdownRenderer'; + ref = null; + doms = []; + constructor(props) { + super(props); + this.divRef = this.divRef.bind(this); + this.handleClick = this.handleClick.bind(this); + } + + componentDidMount() { + this.renderSchema(); + + if (location.hash && location.hash.length > 1) { + // 禁用自动跳转 + if (window.history && 'scrollRestoration' in window.history) { + window.history.scrollRestoration = 'manual'; + } + + const dom = document.querySelector( + `[name="${location.hash.substring(1)}"]` + ); + dom && dom.scrollIntoView(); + } + } + + componentDidUpdate() { + this.renderSchema(); + } + + componentWillUnmount() { + this.doms.forEach(dom => ReactDOM.unmountComponentAtNode(dom)); + } + + handleClick(e) { + const href = e.target.getAttribute('href'); + if (href && href[0] !== '#' && !/^http/.test(href)) { + e.preventDefault(); + this.props.push(href); + } + } + + divRef(ref) { + this.ref = ref; + + if (ref) { + ref.innerHTML = this.props.doc.html; + } + } + + renderSchema() { + const scripts = document.querySelectorAll('script[type="text/schema"]'); + if (!scripts && !scripts.length) { + return; + } + + for (let i = 0, len = scripts.length; i < len; i++) { + let script = scripts[i]; + let props = {}; + [].slice.apply(script.attributes).forEach(item => { + props[item.name] = item.value; + }); + + let dom = document.createElement('div'); + let height = props.height ? parseInt(props.height, 10) : 200; + dom.setAttribute('class', 'doc-play-ground'); + dom.setAttribute('style', `height: ${height}px;`); + script.parentNode.replaceChild(dom, script); + + this.doms.push(dom); + ReactDOM.unstable_renderSubtreeIntoContainer( + this, + ReactDOM.findDOMNode(this)} + height={height} + component={CodePreview} + code={script.innerText} + scope={props.scope} + unMountOnHidden + placeholder="加载中，请稍后。。。" + />, + dom + ); + } + } + + render() { + return ( +
    +
    + Doc +
    +
    + ); + } +} + +export default function (doc) { + return class extends React.Component { + renderHeading(children) { + return children.map((child, idx) => ( +
    + {child.label} + + {child.children && child.children.length + ? this.renderHeading(child.children) + : null} +
    + )); + } + + render() { + const {prevDoc, nextDoc} = this.props; + + return ( + <> +
    + {doc.title ? ( +
    +

    {doc.title}

    +
    + ) : null} + + + +
    +
    + {prevDoc ? ( + +
    + +
    + +
    +
    + 上一篇 - {prevDoc.group || '其他'} +
    +
    {prevDoc.label}
    +
    + + ) : null} + + {nextDoc ? ( + +
    +
    + 下一篇 - {nextDoc.group || '其他'} +
    +
    {nextDoc.label}
    +
    + +
    + +
    + + ) : null} +
    +
    +
    + {doc.toc && doc.toc.children && doc.toc.children.length > 1 ? ( +
    +
    +
    + {this.renderHeading(doc.toc.children)} +
    +
    +
    + ) : null} + + ); + } + }; +} diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx index 03e66f19..37481321 100644 --- a/examples/components/Play.jsx +++ b/examples/components/Play.jsx @@ -179,8 +179,14 @@ export default class PlayGround extends React.Component { renderPreview() { const schema = this.state.schema; + const props = { + ...this.schemaProps, + theme: this.props.theme, + locale: this.props.locale + }; + if (!this.props.useIFrame) { - return render(schema, this.schemaProps, this.env); + return render(schema, props, this.env); } return ( @@ -190,7 +196,7 @@ export default class PlayGround extends React.Component { frameBorder={0} initialContent={this.frameTemplate} > - {render(schema, this.schemaProps, this.env)} + {render(schema, props, this.env)} ); } @@ -262,7 +268,7 @@ export default class PlayGround extends React.Component { -
    +
    {this.renderEditor()}
    diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index a377da4e..e417fe58 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -8,6 +8,7 @@ import LazyComponent from '../../src/components/LazyComponent'; import {default as DrawerContainer} from '../../src/components/Drawer'; import {Portal} from 'react-overlays'; import {withRouter} from 'react-router'; +import copy from 'copy-to-clipboard'; function loadEditor() { return new Promise(resolve => require(['../../src/components/Editor'], component => @@ -30,6 +31,10 @@ export default function (schema) { this.setState({ open: !this.state.open }); + copyCode = () => { + copy(JSON.stringify(schema)); + toast.success('页面配置JSON已复制到粘贴板'); + }; close = () => this.setState({ open: false @@ -178,41 +183,50 @@ export default function (schema) { const ns = this.props.classPrefix; const showCode = this.props.showCode; return ( -
    - {showCode !== false ? ( - - {this.state.open ? this.renderCode() : null} - - ) : null} - {this.renderSchema()} - {showCode !== false ? ( - document.querySelector('#headerLeftBtns')} - > - - - ←点击这里查看源码 - - + {this.state.open ? this.renderCode() : null} + + ) : null} + {this.renderSchema()} +
    + {showCode !== false ? ( + //
    + //
    + // 查看页面配置 + //
    + //
    + // 复制页面配置 + //
    + //
    + ) : null} - + ); } } diff --git a/examples/doc.css b/examples/doc.css index 40fbbe1a..3438f2e9 100644 --- a/examples/doc.css +++ b/examples/doc.css @@ -14,7 +14,7 @@ word-wrap: break-word; box-sizing: border-box; min-width: 200px; - max-width: 980px; + /* max-width: 980px; */ /* margin: 0 auto; */ padding: 25px 45px 25px; } @@ -42,7 +42,7 @@ font-weight: bolder; } -.markdown-body > h1 { +.markdown-body>h1 { font-size: 2em; margin: 0.67em 0; } @@ -138,38 +138,38 @@ content: ""; } -.markdown-body > h1, -.markdown-body > h2, -.markdown-body > h3, -.markdown-body > h4, -.markdown-body > h5, -.markdown-body > h6 { +.markdown-body>h1, +.markdown-body>h2, +.markdown-body>h3, +.markdown-body>h4, +.markdown-body>h5, +.markdown-body>h6 { margin-top: 0; margin-bottom: 0; line-height: 1.5; } -.markdown-body > h1 { +.markdown-body>h1 { font-size: 30px; } -.markdown-body > h2 { +.markdown-body>h2 { font-size: 21px; } -.markdown-body > h3 { +.markdown-body>h3 { font-size: 16px; } -.markdown-body > h4 { +.markdown-body>h4 { font-size: 14px; } -.markdown-body > h5 { +.markdown-body>h5 { font-size: 12px; } -.markdown-body > h6 { +.markdown-body>h6 { font-size: 11px; } @@ -282,95 +282,95 @@ outline: none; } -.markdown-body > h1, -.markdown-body > h2, -.markdown-body > h3, -.markdown-body > h4, -.markdown-body > h5, -.markdown-body > h6 { +.markdown-body>h1, +.markdown-body>h2, +.markdown-body>h3, +.markdown-body>h4, +.markdown-body>h5, +.markdown-body>h6 { margin-top: 1em; margin-bottom: 16px; font-weight: bold; line-height: 1.4; } -.markdown-body > h1 .octicon-link, -.markdown-body > h2 .octicon-link, -.markdown-body > h3 .octicon-link, -.markdown-body > h4 .octicon-link, -.markdown-body > h5 .octicon-link, -.markdown-body > h6 .octicon-link { +.markdown-body>h1 .octicon-link, +.markdown-body>h2 .octicon-link, +.markdown-body>h3 .octicon-link, +.markdown-body>h4 .octicon-link, +.markdown-body>h5 .octicon-link, +.markdown-body>h6 .octicon-link { color: #000; vertical-align: middle; visibility: hidden; } -.markdown-body > h1:hover .anchor, -.markdown-body > h2:hover .anchor, -.markdown-body > h3:hover .anchor, -.markdown-body > h4:hover .anchor, -.markdown-body > h5:hover .anchor, -.markdown-body > h6:hover .anchor { +.markdown-body>h1:hover .anchor, +.markdown-body>h2:hover .anchor, +.markdown-body>h3:hover .anchor, +.markdown-body>h4:hover .anchor, +.markdown-body>h5:hover .anchor, +.markdown-body>h6:hover .anchor { text-decoration: none; } -.markdown-body > h1:hover .anchor .octicon-link, -.markdown-body > h2:hover .anchor .octicon-link, -.markdown-body > h3:hover .anchor .octicon-link, -.markdown-body > h4:hover .anchor .octicon-link, -.markdown-body > h5:hover .anchor .octicon-link, -.markdown-body > h6:hover .anchor .octicon-link { +.markdown-body>h1:hover .anchor .octicon-link, +.markdown-body>h2:hover .anchor .octicon-link, +.markdown-body>h3:hover .anchor .octicon-link, +.markdown-body>h4:hover .anchor .octicon-link, +.markdown-body>h5:hover .anchor .octicon-link, +.markdown-body>h6:hover .anchor .octicon-link { visibility: visible; } -.markdown-body > h1 { +.markdown-body>h1 { padding-bottom: 0.3em; font-size: 2.25em; line-height: 1.2; border-bottom: 1px solid #dee5e7; } -.markdown-body > h1 .anchor { +.markdown-body>h1 .anchor { line-height: 1; } -.markdown-body > h2 { +.markdown-body>h2 { padding-bottom: 0.3em; font-size: 1.75em; line-height: 1.225; border-bottom: 1px solid #dee5e7; } -.markdown-body > h2 .anchor { +.markdown-body>h2 .anchor { line-height: 1; } -.markdown-body > h3 { +.markdown-body>h3 { font-size: 1.5em; line-height: 1.43; } -.markdown-body > h3 .anchor { +.markdown-body>h3 .anchor { line-height: 1.2; } -.markdown-body > h4 { +.markdown-body>h4 { font-size: 1.25em; } -.markdown-body > h4 .anchor { +.markdown-body>h4 .anchor { line-height: 1.2; } -.markdown-body > h5 { +.markdown-body>h5 { font-size: 1em; } -.markdown-body > h5 .anchor { +.markdown-body>h5 .anchor { line-height: 1.1; } -.markdown-body > h6 { +.markdown-body>h6 { font-size: 1em; color: #777; } @@ -486,6 +486,7 @@ border: 1px solid #ddd; box-shadow: 0 8px 18px 0 rgba(0, 0, 0, 0.3); } + @media (min-width: 1200px) { .markdown-body img { max-width: 800px; @@ -498,7 +499,7 @@ padding-bottom: 0.2em; margin: 0; font-size: 85%; - background-color: rgba(0,0,0,0.04); + background-color: rgba(0, 0, 0, 0.04); border-radius: 3px; } @@ -750,10 +751,10 @@ padding-left: 0 !important; } -.markdown-body > .amis-preview { +.markdown-body>.amis-preview { margin-bottom: 15px; } .amis-doc pre { margin-top: 15px; -} +} \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 711f734f..e02c8e92 100644 --- a/examples/index.html +++ b/examples/index.html @@ -2,7 +2,7 @@ - AMis Renderer + amis - 低代码前端框架 .tab-content { bottom: 50px; } + +.app-wrapper { + .a-Layout, + .cxd-Layout, + .dark-Layout { + padding-top: 100px; + + &::before { + background-color: #fff; + } + + &-header { + height: 64px; + box-shadow: none; + + &::before { + position: fixed; + height: 64px; + content: ''; + z-index: -1; + left: 0; + right: 0; + background: #fff; + box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1); + } + } + + &-brandBar, + &-searchBar { + position: relative; + + &::before { + top: 50%; + right: 0; + height: 32px; + content: ' '; + position: absolute; + transform: translateY(-50%); + border-left: 1px solid #e8ebee; + width: 1px; + } + } + + &-brandBar { + background-color: transparent; + width: 200px; + + .a-Layout-brand, + .cxd-Layout-brand, + .dark-Layout-brand { + color: #333; + height: 64px; + line-height: 64px; + font-size: 24px; + padding: 0; + font-weight: 400; + + i { + color: #108cee; + } + } + } + + &-headerBar { + height: 64px; + padding-right: 20px; + + &-links { + height: 64px; + line-height: 64px; + font-size: 14px; + padding-left: 30px; + + > a { + display: inline-block; + color: #333; + padding: 0px 22px; + text-decoration: none; + font-weight: 500; + + &.is-active { + color: #108cee; + position: relative; + + &::before { + content: ''; + border-bottom: 2px solid #108cee; + position: absolute; + width: 100%; + left: 0; + bottom: 0; + } + } + } + } + } + + &-searchBar { + width: 220px; + + .Doc-search { + top: 15px; + } + + &::before { + left: 0; + } + } + } +} + +.Doc { + height: 100%; + + .anchor { + padding-top: 100px; + margin-top: -100px; + } + + a { + text-decoration: none; + } + + &-nav, + &-toc { + margin-top: 30px; + } + + &-nav, + &-toc { + a { + display: inline-block; + width: 100%; + padding: 5px 10px; + } + + > div { + scrollbar-width: none; + /* Firefox */ + -ms-overflow-style: none; + /* IE 10+ */ + + &::-webkit-scrollbar-track { + box-shadow: none !important; + background-color: transparent; + } + + &::-webkit-scrollbar { + width: 3px !important; + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: transparent; + } + } + } + + &-nav { + width: 200px; + } + + &-toc { + margin: 30px 0; + width: 220px; + } + + &-navigation { + &-item { + padding-left: 20px; + border-left: 1px solid #e8ebee; + position: relative; + + > a { + font-size: 16px; + font-weight: 700; + color: #666; + padding-left: 0; + padding-right: 20px; + + &:hover { + color: #999; + } + } + + i { + font-size: 12px; + padding: 5px; + position: absolute; + right: 15px; + top: 0; + } + + &.is-top { + padding-left: 0; + border-left: 0; + display: block; + cursor: pointer; + + > a { + color: #333; + + &:hover { + color: #000; + } + } + } + + &.is-active { + > a { + color: #108cee; + + &:hover { + color: #108cee; + } + } + } + } + + .Doc-navigationGroup { + margin-bottom: 30px; + + &-name { + color: #999; + font-weight: 700; + margin-bottom: 10px; + } + } + } + + &-headingList { + font-size: 12px; + font-weight: 500; + border-left: 1px solid #e8ebee; + + &-item { + padding-left: 15px; + + a { + color: #666; + cursor: pointer; + &:hover { + color: #333; + } + } + + &.is-active { + &::before { + content: ' '; + border-left: 2px solid #108cee; + } + > a { + color: #108cee; + } + } + } + } + + &-content { + position: relative; + + .Doc-title { + // margin-top: 50px; + padding-left: 40px; + + h1 { + margin: 0; + font-size: 40px; + font-weight: bold; + } + } + + .markdown-body { + > *:first-child { + margin-top: 36px !important; + } + + > h1, + > h2 { + border-top: 1px solid #e0e7ec; + border-bottom: 0; + padding-bottom: 0; + padding-top: 35px; + margin: 55px 0 35px; + } + + > p, + > blockquote, + > ul, + > ol, + > dl, + > table, + > pre { + margin-bottom: 30px; + } + } + } + + &-footer { + margin: 60px 40px 80px; + padding-bottom: 25px; + border-bottom: 2px solid #e0e8ef; + + .Doc-navLinks { + display: flex; + justify-content: space-between; + + &--prev, + &--next { + display: flex; + justify-content: space-between; + width: 330px; + height: 80px; + border: 1px solid #e8ebee; + border-radius: 3px; + padding: 20px; + transition: border-color ease-out 0.3s, color ease-out 0.3s; + box-shadow: #e8ebee 0px 3px 8px 0px; + color: #666; + + &:hover { + border-color: #108cee; + color: #108cee; + + .Doc-navLinks-title { + color: #108cee; + } + } + + &:first-child:nth-last-child(1) { + flex: 1; + } + } + + &-icon { + line-height: 40px; + } + + &-body { + .Doc-navLinks-subtitle { + font-size: 12px; + } + + .Doc-navLinks-title { + font-size: 16px; + font-weight: bold; + color: #333; + transition: color ease-out 0.3s; + } + } + } + } + + .is-flipped { + transform: rotateX(180deg); + } + + > .schema-wrapper { + position: relative; + + > .a-Page, + > .cxd-Page, + > .dark-Page { + padding: 0 45px; + } + } +} + +.Backtop { + position: fixed; + right: 40px; + bottom: 40px; + width: 44px; + height: 44px; + text-align: center; + line-height: 44px; + border: 1px solid #e8ebee; + border-radius: 50%; + box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + cursor: pointer; + color: #666; + font-size: 16px; + transition: all 0.3s ease-in-out; + opacity: 0; + z-index: -2; + + &:hover { + color: #108cee; + } + + &.visible { + opacity: 1; + z-index: 0; + } +} + +@include media-breakpoint-up(lg) { + .Doc { + display: flex; + flex-direction: row; + + &-content, + .schema-wrapper { + flex: 1 auto; + width: 0; + } + + &-toc > div { + position: fixed; + width: 220px; + top: 100px; + bottom: 21px; + overflow: auto; + } + + &-nav > div { + position: fixed; + width: 200px; + top: 100px; + bottom: 0; + overflow-y: auto; + border-right: 1px solid #e8ebee; + } + } + + .app-wrapper { + .a-Layout, + .cxd-Layout, + .dark-Layout { + &-header { + display: flex; + flex-direction: row; + + &Bar { + flex: 1 auto; + width: 0; + } + } + + &-brandBar > div { + width: 220px; + position: fixed; + } + + &-searchBar > div { + width: 220px; + } + } + } +} + +@media screen and (min-width: 1640px) { + .Doc { + &-toc { + width: 1px; + } + + &-nav { + width: 1px; + + > div { + margin-left: -199px; + } + } + } + + .app-wrapper { + .a-Layout, + .cxd-Layout, + .dark-Layout { + &-brandBar { + width: 1px; + > div { + margin-left: -220px; + } + } + + &-searchBar { + width: 1px; + } + } + } +} diff --git a/fis-conf.js b/fis-conf.js index 38db0c28..7f7f9670 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -155,7 +155,7 @@ fis.on('compile:optimizer', function (file) { fis.match('{*.ts,*.jsx,*.tsx,/src/**.js,/src/**.ts}', { parser: [ - docsGennerator, + // docsGennerator, fis.plugin('typescript', { importHelpers: true, esModuleInterop: true, @@ -224,7 +224,7 @@ if (fis.project.currentMedia() === 'publish') { publishEnv.match('/src/**.{jsx,tsx,js,ts}', { parser: [ - docsGennerator, + // docsGennerator, fis.plugin('typescript', { importHelpers: true, sourceMap: true, @@ -331,7 +331,7 @@ if (fis.project.currentMedia() === 'publish') { env.match('{*.ts,*.jsx,*.tsx,/src/**.js,/src/**.ts}', { parser: [ - docsGennerator, + // docsGennerator, fis.plugin('typescript', { importHelpers: true, esModuleInterop: true, @@ -668,7 +668,7 @@ if (fis.project.currentMedia() === 'publish') { return fis.util.md5('amis' + path); }, parser: [ - docsGennerator, + // docsGennerator, fis.plugin('typescript', { sourceMap: false, importHelpers: true, @@ -690,82 +690,82 @@ if (fis.project.currentMedia() === 'publish') { }); } -function docsGennerator(contents, file) { - if (file.subpath !== '/examples/components/Doc.jsx') { - return contents; - } +// function docsGennerator(contents, file) { +// if (file.subpath !== '/examples/components/Doc.tsx') { +// return contents; +// } - return contents.replace('// {{renderer-docs}}', function () { - const dir = path.join(__dirname, 'docs/renderers'); - const files = []; +// return contents.replace('// {{renderer-docs}}', function () { +// const dir = path.join(__dirname, 'docs/renderers'); +// const files = []; - let fn = (dir, colleciton, prefix = '') => { - const entries = fs.readdirSync(dir); +// let fn = (dir, colleciton, prefix = '') => { +// const entries = fs.readdirSync(dir); - entries.forEach(entry => { - const subdir = path.join(dir, entry); +// entries.forEach(entry => { +// const subdir = path.join(dir, entry); - if (fs.lstatSync(subdir).isDirectory()) { - let files = []; - fn(subdir, files, path.join(prefix, entry)); - colleciton.push({ - name: entry, - children: files, - path: path.join(prefix, entry) - }); - } else if (/\.md$/.test(entry)) { - colleciton.push({ - name: path.basename(entry, '.md'), - path: path.join(prefix, entry) - }); - } - }); - }; +// if (fs.lstatSync(subdir).isDirectory()) { +// let files = []; +// fn(subdir, files, path.join(prefix, entry)); +// colleciton.push({ +// name: entry, +// children: files, +// path: path.join(prefix, entry) +// }); +// } else if (/\.md$/.test(entry)) { +// colleciton.push({ +// name: path.basename(entry, '.md'), +// path: path.join(prefix, entry) +// }); +// } +// }); +// }; - let fn2 = item => { - if (item.children) { - const child = item.children.find( - child => child.name === `${item.name}.md` - ); - return `{ - label: '${item.name}', - ${ - child - ? `path: '/docs/renderers/${child.path.replace( - /\.md$/, - '' - )}',` - : '' - } - children: [ - ${item.children.map(fn2).join(',\n')} - ] - }`; - } +// let fn2 = item => { +// if (item.children) { +// const child = item.children.find( +// child => child.name === `${item.name}.md` +// ); +// return `{ +// label: '${item.name}', +// ${ +// child +// ? `path: '/docs/renderers/${child.path.replace( +// /\.md$/, +// '' +// )}',` +// : '' +// } +// children: [ +// ${item.children.map(fn2).join(',\n')} +// ] +// }`; +// } - return `{ - label: '${item.name}', - path: '/docs/renderers/${item.path.replace(/\.md$/, '')}', - getComponent: (location, cb) => - require(['../../docs/renderers/${item.path}'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }) - }`; - }; +// return `{ +// label: '${item.name}', +// path: '/docs/renderers/${item.path.replace(/\.md$/, '')}', +// getComponent: (location, cb) => +// require(['../../docs/renderers/${item.path}'], doc => { +// cb(null, makeMarkdownRenderer(doc)); +// }) +// }`; +// }; - fn(dir, files); +// fn(dir, files); - return `{ - label: '渲染器手册', - icon: 'fa fa-diamond', - path: '/docs/renderers', - getComponent: (location, cb) => - require(['../../docs/renderers.md'], doc => { - cb(null, makeMarkdownRenderer(doc)); - }), - children: [ - ${files.map(fn2).join(',\n')} - ] - },`; - }); -} +// return `{ +// label: '渲染器手册', +// icon: 'fa fa-diamond', +// path: '/docs/renderers', +// getComponent: (location, cb) => +// require(['../../docs/renderers.md'], doc => { +// cb(null, makeMarkdownRenderer(doc)); +// }), +// children: [ +// ${files.map(fn2).join(',\n')} +// ] +// },`; +// }); +// } diff --git a/scss/layout/_layout.scss b/scss/layout/_layout.scss index aa6d1e65..d5d29b2b 100644 --- a/scss/layout/_layout.scss +++ b/scss/layout/_layout.scss @@ -9,7 +9,7 @@ body { } .#{$ns}Layout { - height: auto; + height: 100%; min-height: 100%; width: 100%; position: relative; @@ -152,6 +152,7 @@ body { &-body { padding-bottom: $Layout-header-height; width: 100%; + height: 100%; } &--noFooter &-body {