mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
1.2.x 文档&示例配置调整 (#2064)
* 补充容错 * fix: form 中 name 关联顶层数据初始化失效 * 更新 examples * 文档调整 * 删除多余的文档, 调整 schema * schema 调整 * schema 调整 * control 类型容器 control 改成 body * 修复一个选项加载的bug * form 注册直接用 type
This commit is contained in:
liaoxuezhi
GitHub
parent
df1a4bb54b
commit
65ac422ed6
@ -33,32 +33,37 @@ exports[`Renderer:button-toolbar 1`] = `
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-ButtonToolbar"
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
<div
|
||||
class="a-ButtonToolbar a-Form-control"
|
||||
>
|
||||
<span>
|
||||
OpenDialog
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="reset"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OpenDialog
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="reset"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
@ -143,32 +148,37 @@ exports[`Renderer:button-toolbar 2`] = `
|
||||
data-role="form-item"
|
||||
>
|
||||
<div
|
||||
class="a-ButtonToolbar"
|
||||
class="a-Form-item a-Form-item--normal"
|
||||
data-role="form-item"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
<div
|
||||
class="a-ButtonToolbar a-Form-control"
|
||||
>
|
||||
<span>
|
||||
OpenDialog
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="reset"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
OpenDialog
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="reset"
|
||||
>
|
||||
<span>
|
||||
Reset
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
|
||||
@ -441,8 +441,6 @@ exports[`Form:initData:super 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Form:initData:super 2`] = `Object {}`;
|
||||
|
||||
exports[`Form:initData:without-super 1`] = `
|
||||
<div>
|
||||
<div
|
||||
|
||||
@ -93,7 +93,14 @@ test('Form:initData:super', async () => {
|
||||
await wait(300);
|
||||
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchSnapshot();
|
||||
expect(onSubmit.mock.calls[0][0]).toMatchInlineSnapshot(
|
||||
`
|
||||
Object {
|
||||
"a": 1,
|
||||
"b": 2,
|
||||
}
|
||||
`
|
||||
);
|
||||
});
|
||||
|
||||
test('Form:initData:without-super', async () => {
|
||||
|
||||
@ -3,24 +3,25 @@
|
||||
exports[`Renderer:button-toolbar 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="a-ButtonToolbar show"
|
||||
class="a-Alert a-Alert--danger"
|
||||
>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮1
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
class="a-Button a-Button--default"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
按钮2
|
||||
</span>
|
||||
</button>
|
||||
<h3>
|
||||
TypeError: Cannot read property 'id' of undefined
|
||||
</h3>
|
||||
<pre>
|
||||
<code>
|
||||
|
||||
in class_1 (created by WithRootStore(class_1))
|
||||
in WithRootStore(class_1) (created by Renderer)
|
||||
in Renderer (created by RootRenderer)
|
||||
in RootRenderer (created by Root)
|
||||
in ImageGallery (created by I18N(ImageGallery))
|
||||
in I18N(ImageGallery) (created by Themeable(I18N(ImageGallery)))
|
||||
in Themeable(I18N(ImageGallery)) (created by Root)
|
||||
in Root (created by Scoped(Root))
|
||||
in Scoped(Root)
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -17,7 +17,7 @@ Action 行为按钮，是触发页面行为的主要方法之一
|
||||
```schema: scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"dialog": {
|
||||
"title": "弹框",
|
||||
@ -37,26 +37,26 @@ Action 行为按钮，是触发页面行为的主要方法之一
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "默认尺寸"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "极小",
|
||||
"size": "xs"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "小",
|
||||
"size": "sm"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "中等",
|
||||
"size": "md"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "大",
|
||||
"size": "lg"
|
||||
}
|
||||
@ -73,46 +73,46 @@ Action 行为按钮，是触发页面行为的主要方法之一
|
||||
"type": "button-toolbar",
|
||||
"buttons": [
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "默认"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "主要",
|
||||
"level": "primary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "次要",
|
||||
"level": "secondary"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "成功",
|
||||
"level": "success"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "警告",
|
||||
"level": "warning"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "危险",
|
||||
"level": "danger"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "浅色",
|
||||
"level": "light"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "深色",
|
||||
"level": "dark"
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"label": "链接",
|
||||
"level": "link"
|
||||
}
|
||||
@ -127,7 +127,7 @@ Action 行为按钮，是触发页面行为的主要方法之一
|
||||
```schema: scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
@ -142,7 +142,7 @@ icon 也可以是 url 地址，比如
|
||||
```schema: scope="body"
|
||||
{
|
||||
"label": "弹框",
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"icon": "https://suda.cdn.bcebos.com/images%2F2021-01%2Fdiamond.svg",
|
||||
"dialog": {
|
||||
@ -157,7 +157,7 @@ icon 也可以是 url 地址，比如
|
||||
```schema: scope="body"
|
||||
{
|
||||
"label": "",
|
||||
"type": "action",
|
||||
"type": "button",
|
||||
"actionType": "dialog",
|
||||
"icon": "fa fa-plus",
|
||||
"dialog": {
|
||||
@ -326,10 +326,10 @@ icon 也可以是 url 地址，比如
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "phone",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"required": true,
|
||||
"label": "手机号",
|
||||
"addOn": {
|
||||
@ -445,9 +445,9 @@ icon 也可以是 url 地址，比如
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
@ -466,7 +466,7 @@ icon 也可以是 url 地址，比如
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"name": "myForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "group",
|
||||
@ -484,9 +484,9 @@ icon 也可以是 url 地址，比如
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "groupName",
|
||||
"label": "分组名"
|
||||
}
|
||||
@ -520,9 +520,9 @@ icon 也可以是 url 地址，比如
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
}
|
||||
@ -580,15 +580,15 @@ icon 也可以是 url 地址，比如
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "username",
|
||||
"placeholder": "请输入用户名",
|
||||
"label": "用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"placeholder": "请输入密码"
|
||||
@ -621,16 +621,16 @@ icon 也可以是 url 地址，比如
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "username",
|
||||
"placeholder": "请输入用户名",
|
||||
"label": "用户名",
|
||||
"value": "rick"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"placeholder": "请输入密码"
|
||||
|
||||
@ -22,15 +22,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "基本信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -43,15 +43,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "工作信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "cname",
|
||||
"label": "公司名称："
|
||||
},
|
||||
{
|
||||
"name": "caddress",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "公司地址："
|
||||
}
|
||||
]
|
||||
@ -64,35 +64,35 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "兴趣爱好",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "interest1",
|
||||
"label": "兴趣爱好1："
|
||||
},
|
||||
{
|
||||
"name": "interest2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好2："
|
||||
},
|
||||
{
|
||||
"name": "interest3",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好3："
|
||||
},
|
||||
{
|
||||
"name": "interest4",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好4："
|
||||
},
|
||||
{
|
||||
"name": "interest5",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好5："
|
||||
},
|
||||
{
|
||||
"name": "interest6",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好6："
|
||||
}
|
||||
]
|
||||
@ -123,15 +123,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "基本信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -145,15 +145,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "工作信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "cname",
|
||||
"label": "公司名称："
|
||||
},
|
||||
{
|
||||
"name": "caddress",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "公司地址："
|
||||
}
|
||||
]
|
||||
@ -167,35 +167,35 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "兴趣爱好",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "interest1",
|
||||
"label": "兴趣爱好1："
|
||||
},
|
||||
{
|
||||
"name": "interest2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好2："
|
||||
},
|
||||
{
|
||||
"name": "interest3",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好3："
|
||||
},
|
||||
{
|
||||
"name": "interest4",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好4："
|
||||
},
|
||||
{
|
||||
"name": "interest5",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好5："
|
||||
},
|
||||
{
|
||||
"name": "interest6",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好6："
|
||||
}
|
||||
]
|
||||
@ -221,15 +221,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "基本信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -242,15 +242,15 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "工作信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "cname",
|
||||
"label": "公司名称："
|
||||
},
|
||||
{
|
||||
"name": "caddress",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "公司地址："
|
||||
}
|
||||
]
|
||||
@ -263,35 +263,35 @@ order: 68
|
||||
{
|
||||
"type": "form",
|
||||
"title": "兴趣爱好",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "interest1",
|
||||
"label": "兴趣爱好1："
|
||||
},
|
||||
{
|
||||
"name": "interest2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好2："
|
||||
},
|
||||
{
|
||||
"name": "interest3",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好3："
|
||||
},
|
||||
{
|
||||
"name": "interest4",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好4："
|
||||
},
|
||||
{
|
||||
"name": "interest5",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好5："
|
||||
},
|
||||
{
|
||||
"name": "interest6",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "兴趣爱好6："
|
||||
}
|
||||
]
|
||||
|
||||
@ -84,7 +84,7 @@ order: 32
|
||||
"title": "查看详情",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine",
|
||||
|
||||
@ -339,23 +339,23 @@ api 返回支持两种格式，一种是直接返回完整 echarts 配置，数
|
||||
"className": "m-b",
|
||||
"wrapWithPanel": false,
|
||||
"mode": "inline",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "date",
|
||||
"type": "input-date",
|
||||
"label": "开始日期",
|
||||
"name": "starttime",
|
||||
"value": "-8days",
|
||||
"maxDate": "${endtime}"
|
||||
},
|
||||
{
|
||||
"type": "date",
|
||||
"type": "input-date",
|
||||
"label": "结束日期",
|
||||
"name": "endtime",
|
||||
"value": "-1days",
|
||||
"minDate": "${starttime}"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "条件",
|
||||
"name": "name",
|
||||
"addOn": {
|
||||
|
||||
@ -72,7 +72,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"color": "#108cee"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-color",
|
||||
"name": "color",
|
||||
|
||||
@ -117,14 +117,14 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "post:/api/sample",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
}
|
||||
@ -244,14 +244,14 @@ CRUD，即增删改查组件，主要用来展现数据列表，并支持各类
|
||||
"type": "form",
|
||||
"initApi": "/api/sample/${id}",
|
||||
"api": "post:/api/sample/${id}",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "browser",
|
||||
"label": "Browser"
|
||||
}
|
||||
@ -335,7 +335,7 @@ List 模式支持 [List](./list) 中的所有功能。
|
||||
"title": "编辑能力（权限）",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id"
|
||||
@ -343,7 +343,7 @@ List 模式支持 [List](./list) 中的所有功能。
|
||||
{
|
||||
"name": "name",
|
||||
"label": "权限名称",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
@ -411,7 +411,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
"tabs": [
|
||||
{
|
||||
"title": "基本信息",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id"
|
||||
@ -420,7 +420,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
"name": "name",
|
||||
"label": "帐号",
|
||||
"disabled": true,
|
||||
"type": "text"
|
||||
"type": "input-text"
|
||||
},
|
||||
{
|
||||
"type": "divider"
|
||||
@ -428,7 +428,7 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"disabled": true
|
||||
},
|
||||
{
|
||||
@ -444,11 +444,11 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
},
|
||||
{
|
||||
"title": "角色信息",
|
||||
"controls": []
|
||||
"body": []
|
||||
},
|
||||
{
|
||||
"title": "设置权限",
|
||||
"controls": []
|
||||
"body": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -478,9 +478,9 @@ Cards 模式支持 [Cards](./cards) 中的所有功能。
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
|
||||
"filter": {
|
||||
"title": "条件搜索",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"placeholder": "通过关键字搜索"
|
||||
}
|
||||
@ -1203,13 +1203,13 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "ids"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -1297,13 +1297,13 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "ids"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -1601,9 +1601,9 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
|
||||
"filter": {
|
||||
"title": "条件搜索",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"placeholder": "通过关键字搜索"
|
||||
}
|
||||
@ -1698,9 +1698,9 @@ crud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -1898,9 +1898,9 @@ CRUD 中不限制有多少个单条操作、添加一个操作对应的添加一
|
||||
"loadDataOnce": true,
|
||||
"source": "${rows | filter:engine:match:keywords}",
|
||||
"filter":{
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"label": "引擎"
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@ order: 26
|
||||
body: {
|
||||
type: 'form',
|
||||
title: 'custom 组件',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'custom',
|
||||
name: 'myName',
|
||||
@ -65,16 +65,16 @@ onUpdate 是在数据变更的时候调用，注意这个数据变更会包含
|
||||
body: {
|
||||
type: 'form',
|
||||
title: 'custom 组件',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
name: 'email',
|
||||
label: '邮箱',
|
||||
type: 'text'
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
name: 'username',
|
||||
label: '用户名',
|
||||
type: 'text'
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
type: 'custom',
|
||||
@ -109,7 +109,7 @@ onUnmount 是在组件销毁的时候执行，可以在这里做资源清理，
|
||||
body: {
|
||||
type: 'form',
|
||||
title: 'custom 组件',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'custom',
|
||||
name: 'my-custom',
|
||||
|
||||
@ -72,7 +72,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"color": "#108cee"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-color",
|
||||
"name": "color",
|
||||
|
||||
@ -127,9 +127,9 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -187,9 +187,9 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
{
|
||||
"type": "form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine2",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -336,16 +336,16 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "username",
|
||||
"required": true,
|
||||
"placeholder": "请输入用户名",
|
||||
"label": "用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"required": true,
|
||||
@ -391,16 +391,16 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"required": true,
|
||||
"label": "用户名",
|
||||
"placeholder": "请输入用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"placeholder": "请输入密码",
|
||||
@ -447,16 +447,16 @@ Dialog 弹框 主要由 [Action](./action) 触发，主要展示一个对话框
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"required": true,
|
||||
"label": "用户名",
|
||||
"placeholder": "请输入用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"required": true,
|
||||
@ -513,16 +513,16 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"required": true,
|
||||
"label": "用户名",
|
||||
"placeholder": "请输入用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"required": true,
|
||||
@ -586,16 +586,16 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"required": true,
|
||||
"label": "用户名",
|
||||
"placeholder": "请输入用户名"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码",
|
||||
"required": true,
|
||||
@ -617,7 +617,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "点击确认，请求接口，接口请求成功后，关闭弹框"
|
||||
@ -644,7 +644,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "点击确认，请求接口，接口请求成功后，关闭弹框"
|
||||
@ -682,7 +682,7 @@ feedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData?waitSeconds=1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "tpl",
|
||||
"tpl": "这是一个简单的弹框"
|
||||
|
||||
@ -103,7 +103,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"each": ["A", "B", "C"]
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "each",
|
||||
"label": "静态展示each",
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
---
|
||||
title: AnchorNav 锚点导航
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: AnchorNav 锚点导航
|
||||
icon:
|
||||
order: 53
|
||||
---
|
||||
|
||||
有多组表单输入框时，可以通过锚点导航来分组，方便定位查看。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
{
|
||||
"type": "anchor-nav",
|
||||
"links": [
|
||||
{
|
||||
"title": "员工基本信息",
|
||||
"controls": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "员工基本信息",
|
||||
"controls": [
|
||||
{
|
||||
"name": "name",
|
||||
"type": "text",
|
||||
"label": "用户名"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "age",
|
||||
"type": "text",
|
||||
"label": "年龄"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "在职信息",
|
||||
"controls": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "在职信息",
|
||||
"controls": [
|
||||
{
|
||||
"name": "home",
|
||||
"type": "text",
|
||||
"label": "居住地址"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "address",
|
||||
"type": "text",
|
||||
"label": "工作地址"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "教育经历",
|
||||
"controls": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "教育经历",
|
||||
"controls": [
|
||||
{
|
||||
"name": "school1",
|
||||
"type": "text",
|
||||
"label": "经历1"
|
||||
},
|
||||
{
|
||||
"name": "school2",
|
||||
"type": "text",
|
||||
"label": "经历2"
|
||||
},
|
||||
{
|
||||
"name": "school2",
|
||||
"type": "text",
|
||||
"label": "经历2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "紧急联系人信息",
|
||||
"controls": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "紧急联系人信息",
|
||||
"controls": [
|
||||
{
|
||||
"name": "contact1",
|
||||
"type": "text",
|
||||
"label": "联系人1"
|
||||
},
|
||||
{
|
||||
"name": "contact2",
|
||||
"type": "text",
|
||||
"label": "联系人2"
|
||||
},
|
||||
{
|
||||
"name": "contact3",
|
||||
"type": "text",
|
||||
"label": "联系人3"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 更多功能
|
||||
|
||||
请参考[这里](../anchor-nav)。
|
||||
|
||||
## 属性表
|
||||
|
||||
请参考[这里](../anchor-nav#属性表)。
|
||||
@ -15,9 +15,9 @@ order: 5
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "test",
|
||||
"label": "Text"
|
||||
},
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Button 按钮
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Button
|
||||
icon:
|
||||
order: 4
|
||||
---
|
||||
|
||||
按钮用于实现点击时触发行为，比如弹窗等，更多请参考 [Action](../action)，在 `form` 中还支持提交和重置功能的按钮。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"type": "action",
|
||||
"actionType": "dialog",
|
||||
"label": "按钮",
|
||||
"dialog": {
|
||||
"title": "弹框标题",
|
||||
"body": "这是一个弹框"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 提交表单
|
||||
|
||||
请配置`"actionType": "submit"`或`"type": "submit"`按钮，可以触发表单提交行为，
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"type": "submit",
|
||||
"label": "提交"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 重置表单
|
||||
|
||||
请配置`"actionType": "reset"`或`"type": "reset"`按钮，可以触发表单提交行为。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"type": "reset",
|
||||
"label": "重置"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
见 [Action 行为按钮](../action)
|
||||
@ -17,7 +17,7 @@ order: 7
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "select3",
|
||||
"type": "chained-select",
|
||||
|
||||
@ -15,7 +15,7 @@ order: 8
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "checkbox",
|
||||
@ -37,7 +37,7 @@ order: 8
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "checkbox",
|
||||
@ -53,7 +53,7 @@ order: 8
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkbox",
|
||||
"type": "checkbox",
|
||||
|
||||
@ -16,7 +16,7 @@ order: 9
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkboxes",
|
||||
"type": "checkboxes",
|
||||
@ -52,7 +52,7 @@ order: 9
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkboxes",
|
||||
"type": "checkboxes",
|
||||
@ -89,7 +89,7 @@ order: 9
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "checkboxes1",
|
||||
"type": "checkboxes",
|
||||
@ -153,7 +153,7 @@ order: 9
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "checkboxes",
|
||||
"name": "checkboxes",
|
||||
|
||||
@ -352,7 +352,7 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
|
||||
## 唯一验证
|
||||
|
||||
可以在配置的`controls`项上，配置`"unique": true`，指定当前表单项不可重复
|
||||
可以在配置的`body`项上，配置`"unique": true`，指定当前表单项不可重复
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
@ -752,30 +752,30 @@ combo 还有一个作用是增加层级，比如返回的数据是一个深层
|
||||
|
||||
当做选择器表单项使用时，除了支持 [普通表单项属性表](./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 的方式。 |
|
||||
| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |
|
||||
| addable | `boolean` | `false` | 是否可新增 |
|
||||
| removable | `boolean` | `false` | 是否可删除 |
|
||||
| deleteApi | [API](../../../docs/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<string>` | `true` | 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------------------ | ------------------------------ | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| formClassName | `string` | | 单组表单项的类名 |
|
||||
| items | Array<[表单项](./formitem)> | | 组合展示的表单项 |
|
||||
| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 |
|
||||
| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 |
|
||||
| multiple | `boolean` | `false` | 是否多选 |
|
||||
| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 |
|
||||
| minLength | `number` | | 最少添加的条数 |
|
||||
| maxLength | `number` | | 最多添加的条数 |
|
||||
| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 items 的 length 为 1 且 multiple 为 true 的时候才有效。 |
|
||||
| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 |
|
||||
| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |
|
||||
| addable | `boolean` | `false` | 是否可新增 |
|
||||
| removable | `boolean` | `false` | 是否可删除 |
|
||||
| deleteApi | [API](../../../docs/types/api) | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |
|
||||
| deleteConfirmText | `string` | `"确认要删除？"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |
|
||||
| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\$id 字段 |
|
||||
| draggableTip | `string` | `"可通过拖动每行中的【交换】按钮进行顺序调整"` | 可拖拽的提示文字 |
|
||||
| addButtonText | `string` | `"新增"` | 新增按钮文字 |
|
||||
| scaffold | `object` | `{}` | 单组表单项初始值 |
|
||||
| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 |
|
||||
| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`items`为符合该条件后渲染的`schema` |
|
||||
| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 |
|
||||
| noBorder | `boolean` | `false` | 单组表单项是否显示边框 |
|
||||
| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 |
|
||||
| syncFields | `Array<string>` | `true` | 配置同步字段。只有 strictMode 为 false 时有效。如果 combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`["os"]` |
|
||||
|
||||
@ -15,7 +15,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -167,7 +167,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -200,7 +200,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -236,7 +236,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -270,7 +270,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -303,7 +303,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -336,7 +336,7 @@ type Value = ValueGroup;
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
@ -364,7 +364,7 @@ type Value = ValueGroup;
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "condition-builder",
|
||||
"label": "条件组件",
|
||||
|
||||
@ -14,7 +14,7 @@ order: 17
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
@ -34,7 +34,7 @@ order: 17
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "diff",
|
||||
@ -64,7 +64,7 @@ order: 17
|
||||
"value1": "hello world",
|
||||
"value2": "hello wrold"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "diff-editor",
|
||||
"name": "value2",
|
||||
|
||||
@ -16,7 +16,7 @@ order: 19
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "editor",
|
||||
"name": "editor",
|
||||
@ -36,7 +36,7 @@ order: 19
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "editor",
|
||||
"name": "editor",
|
||||
@ -55,7 +55,7 @@ order: 19
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "json-editor",
|
||||
"name": "editor",
|
||||
|
||||
@ -12,26 +12,26 @@ FieldSet 是用于分组展示表单项的一种容器型组件，可以折叠
|
||||
|
||||
## 基本用法
|
||||
|
||||
可以通过配置标题`title`和表单项数组`controls`，实现多个表单项分组展示
|
||||
可以通过配置标题`title`和表单项数组`body`，实现多个表单项分组展示
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "基本配置",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
@ -49,9 +49,9 @@ FieldSet 是用于分组展示表单项的一种容器型组件，可以折叠
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
},
|
||||
@ -62,16 +62,16 @@ FieldSet 是用于分组展示表单项的一种容器型组件，可以折叠
|
||||
"type": "fieldSet",
|
||||
"title": "基本配置",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
@ -88,21 +88,21 @@ FieldSet 是用于分组展示表单项的一种容器型组件，可以折叠
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "基本配置",
|
||||
"collapsable": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
@ -119,22 +119,22 @@ FieldSet 是用于分组展示表单项的一种容器型组件，可以折叠
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "基本配置",
|
||||
"collapsable": true,
|
||||
"collapsed": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
@ -153,7 +153,7 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "fieldSet",
|
||||
"title": "展开更多设置",
|
||||
@ -161,16 +161,16 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文
|
||||
"titlePosition": "bottom",
|
||||
"collapsable": true,
|
||||
"collapsed": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
@ -187,7 +187,7 @@ fieldSet 的另一种标题展现样式，不同的是展开的时候收起文
|
||||
| headingClassName | `string` | | 标题 CSS 类名 |
|
||||
| bodyClassName | `string` | | 内容区域 CSS 类名 |
|
||||
| title | [SchemaNode](../../../docs/types/schemanode) | | 标题 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| body | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) 中的模式 |
|
||||
| collapsable | `boolean` | `false` | 是否可折叠 |
|
||||
| collapsed | `booelan` | `false` | 默认是否折叠 |
|
||||
|
||||
@ -38,7 +38,7 @@ order: 1
|
||||
- `type`: **必填属性**，标识表单项类型
|
||||
- `label`: 标识表单项的标签
|
||||
|
||||
> 所有表单项都只可以配置在`form`组件中，即`form`的`controls`属性中。
|
||||
> 所有表单项都只可以配置在`form`组件中，即`form`的`body`属性中。
|
||||
|
||||
## 表单项展示
|
||||
|
||||
|
||||
@ -17,19 +17,19 @@ order: 22
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
@ -50,19 +50,19 @@ order: 22
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
@ -85,22 +85,22 @@ order: 22
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "a",
|
||||
"label": "A"
|
||||
},
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"name": "sum",
|
||||
"label": "和",
|
||||
"disabled": true,
|
||||
@ -141,7 +141,7 @@ order: 22
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "radios",
|
||||
@ -159,7 +159,7 @@ order: 22
|
||||
"description": "radios 变化会自动清空 B"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "b",
|
||||
"label": "B"
|
||||
},
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
title: Grid 水平布局
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Grid
|
||||
icon:
|
||||
order: 23
|
||||
---
|
||||
|
||||
支持 Form 内部再用 grid 布局进行渲染组件。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/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](../../docs/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)
|
||||
@ -15,17 +15,17 @@ order: 24
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text1",
|
||||
"label": "文本1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text2",
|
||||
"label": "文本2"
|
||||
}
|
||||
@ -36,19 +36,19 @@ order: 24
|
||||
},
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text3",
|
||||
"label": "文本3"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text4",
|
||||
"label": "文本4"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text5",
|
||||
"label": "文本5"
|
||||
}
|
||||
@ -67,9 +67,9 @@ order: 24
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
},
|
||||
@ -79,15 +79,15 @@ order: 24
|
||||
{
|
||||
"type": "group",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text1",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text2",
|
||||
"label": "文本2"
|
||||
}
|
||||
@ -103,9 +103,9 @@ order: 24
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
},
|
||||
@ -114,14 +114,14 @@ order: 24
|
||||
},
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text1",
|
||||
"label": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text2",
|
||||
"label": false
|
||||
}
|
||||
@ -137,9 +137,9 @@ order: 24
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本"
|
||||
},
|
||||
@ -149,14 +149,14 @@ order: 24
|
||||
{
|
||||
"type": "group",
|
||||
"label": "文本组",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text1",
|
||||
"label": false
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text2",
|
||||
"label": false
|
||||
}
|
||||
@ -172,7 +172,7 @@ order: 24
|
||||
| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |
|
||||
| className | `string` | | CSS 类名 |
|
||||
| label | `string` | | group 的标签 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| body | Array<[表单项](./formitem)> | | 表单项集合 |
|
||||
| mode | `string` | | 展示默认，同 [Form](./index#%E8%A1%A8%E5%8D%95%E5%B1%95%E7%A4%BA) 中的模式 |
|
||||
| gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` |
|
||||
| direction | `string` | `"horizontal"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
title: HBox
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: HBox
|
||||
icon:
|
||||
order: 25
|
||||
---
|
||||
|
||||
表单内部也可以使用 HBox 布局，实现左右排列。更推荐 [Group](./group)
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: 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](../../../docs/types/schemanode) 支持属性以外，还支持以下几种属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | --------------------------- | ------ | ---------------------------------------------------------------------------- |
|
||||
| columnClassName | `string` | | 配置列的 CSS 类名 |
|
||||
| controls | Array<[表单项](./formitem)> | | 表单项数组，如果配置了表单集合，同时没有指定 type 类型，则优先展示表单集合。 |
|
||||
@ -10,27 +10,27 @@ order: 26
|
||||
|
||||
## 基本用法
|
||||
|
||||
默认表单提交，在没有 [自定义 API 请求数据](../../../docs/types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE) 的情况下，只会发送 `controls` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件
|
||||
默认表单提交，在没有 [自定义 API 请求数据](../../../docs/types/api#%E9%85%8D%E7%BD%AE%E8%AF%B7%E6%B1%82%E6%95%B0%E6%8D%AE) 的情况下，只会发送 `body` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "id",
|
||||
"value": 1
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
|
||||
@ -38,7 +38,7 @@ order: 11
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "input-color",
|
||||
"name": "color",
|
||||
|
||||
@ -14,7 +14,7 @@ order: 31
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect",
|
||||
@ -92,7 +92,7 @@ order: 31
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect",
|
||||
@ -112,7 +112,7 @@ order: 31
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect",
|
||||
@ -133,7 +133,7 @@ order: 31
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect1",
|
||||
@ -219,7 +219,7 @@ order: 31
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "nested-select",
|
||||
"name": "nestedSelect1",
|
||||
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
title: Panel 面板
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Panel
|
||||
icon:
|
||||
order: 34
|
||||
---
|
||||
|
||||
展现上将多个 [表单项](./formItem) 放同一个容器下。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "panel",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text",
|
||||
"label": "text"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"label": "text2"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------------- | -------------------------------------------- | ------ | ------------------------------------------------------------------- |
|
||||
| title | `string` | | panel 标题 |
|
||||
| body | [SchemaNode](../../../docs/types/schemanode) | | 内容区 |
|
||||
| bodyClassName | `string` | | body 的 className |
|
||||
| footer | [SchemaNode](../../../docs/types/schemanode) | | 底部区 |
|
||||
| footerClassName | `string` | | footer 的 className |
|
||||
| controls | Array<表单项> | | `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。 |
|
||||
|
||||
- `title` panel 标题
|
||||
- `body` [SchemaNode](../../../docs/types/schemanode) 可以是其他渲染模型。
|
||||
- `bodyClassName` body 的 className.
|
||||
- `footer` [SchemaNode](../../../docs/types/schemanode) 可以是其他渲染模型。
|
||||
- `footerClassName` footer 的 className.
|
||||
- `controls` 跟 `body` 二选一，如果设置了 controls 优先显示表单集合。
|
||||
@ -14,9 +14,9 @@ order: 35
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"name": "password",
|
||||
"label": "密码"
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@ order: 35
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "picker",
|
||||
"name": "picker",
|
||||
@ -51,7 +51,7 @@ order: 35
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "picker",
|
||||
"name": "type4",
|
||||
@ -75,9 +75,9 @@ order: 35
|
||||
"className": "text-right",
|
||||
"target": "thelist",
|
||||
"mode": "inline",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"addOn": {
|
||||
"type": "submit",
|
||||
@ -143,7 +143,7 @@ order: 35
|
||||
"title": "查看",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static",
|
||||
"name": "engine",
|
||||
@ -204,9 +204,9 @@ order: 35
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"required": true
|
||||
@ -215,7 +215,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"required": true
|
||||
@ -224,7 +224,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"required": true
|
||||
@ -233,7 +233,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
@ -275,7 +275,7 @@ order: 35
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "picker",
|
||||
"name": "type4",
|
||||
@ -300,9 +300,9 @@ order: 35
|
||||
"className": "text-right",
|
||||
"target": "thelist",
|
||||
"mode": "inline",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"addOn": {
|
||||
"type": "submit",
|
||||
@ -368,7 +368,7 @@ order: 35
|
||||
"title": "查看",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static",
|
||||
"name": "engine",
|
||||
@ -429,9 +429,9 @@ order: 35
|
||||
"type": "form",
|
||||
"name": "sample-edit-form",
|
||||
"api": "/api/sample/$id",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine",
|
||||
"required": true
|
||||
@ -440,7 +440,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "browser",
|
||||
"label": "Browser",
|
||||
"required": true
|
||||
@ -449,7 +449,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "platform",
|
||||
"label": "Platform(s)",
|
||||
"required": true
|
||||
@ -458,7 +458,7 @@ order: 35
|
||||
"type": "divider"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "version",
|
||||
"label": "Engine version"
|
||||
},
|
||||
|
||||
@ -15,7 +15,7 @@ order: 36
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "radios",
|
||||
"type": "radios",
|
||||
@ -50,7 +50,7 @@ order: 36
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "radios",
|
||||
"type": "radios",
|
||||
@ -86,7 +86,7 @@ order: 36
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "radios",
|
||||
"type": "radios",
|
||||
|
||||
@ -17,7 +17,7 @@ order: 48
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项",
|
||||
"type": "select",
|
||||
|
||||
@ -1,198 +0,0 @@
|
||||
---
|
||||
title: Service 功能容器
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Service
|
||||
icon:
|
||||
order: 49
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
{
|
||||
"type": "service",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/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: scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
|
||||
"body": {
|
||||
"type": "text",
|
||||
"text": "现在是：${date}"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 放在 controls 属性下，输出表单项
|
||||
|
||||
```schema: scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/page/initData",
|
||||
"controls": [
|
||||
{
|
||||
"type": "text",
|
||||
"label": "文本输入",
|
||||
"name": "a"
|
||||
},
|
||||
|
||||
{
|
||||
"type": "date",
|
||||
"label": "日期",
|
||||
"name": "date",
|
||||
"format": "YYYY-MM-DD"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 接口联动
|
||||
|
||||
Service 中的`api`和`schemaApi`都支持**接口联动**。
|
||||
|
||||
下面例子中，`数据模板`下拉框的值变化后，会触发 service 重新拉取 api 接口，从而更新数据源，变化表单项的值，更多用法查看 [接口联动](../../../docs/concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"title": "",
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/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": "<span class=\"text-danger\">修改下拉选择器查看效果</span>"
|
||||
},
|
||||
{
|
||||
"type": "service",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/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: scope="form-item"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/service/schema?type=controls"
|
||||
}
|
||||
```
|
||||
|
||||
`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"data": {
|
||||
"a": "b" // 这样返回的选项会选中第二个选项B
|
||||
},
|
||||
"controls": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "a",
|
||||
"label": "选项",
|
||||
"options": [
|
||||
{"label": "A", "value": "a"},
|
||||
{"label": "B", "value": "b"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 通过 WebSocket 实时更新数据
|
||||
|
||||
请参考 [service](../../service) 中的内容。
|
||||
@ -15,7 +15,7 @@ order: 52
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "static",
|
||||
"type": "static",
|
||||
@ -33,7 +33,7 @@ order: 52
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "select",
|
||||
@ -69,7 +69,7 @@ order: 52
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
@ -117,7 +117,7 @@ order: 52
|
||||
"api": "/api/mock2/saveForm?waitSeconds=2",
|
||||
"title": "表单项静态展示",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static",
|
||||
"label": "文本",
|
||||
@ -258,7 +258,7 @@ order: 52
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "static",
|
||||
"type": "static",
|
||||
|
||||
@ -14,7 +14,7 @@ order: 51
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "switch",
|
||||
@ -36,7 +36,7 @@ order: 51
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "switch",
|
||||
@ -52,7 +52,7 @@ order: 51
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "switch",
|
||||
@ -73,7 +73,7 @@ order: 51
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "switch",
|
||||
"type": "switch",
|
||||
|
||||
@ -13,7 +13,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "组合穿梭器",
|
||||
"type": "tabs-transfer",
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
---
|
||||
title: Tabs 选项卡
|
||||
description:
|
||||
type: 0
|
||||
group: null
|
||||
menuName: Tabs 选项卡
|
||||
icon:
|
||||
order: 53
|
||||
---
|
||||
|
||||
有多组输入框时，也可以通过选项卡来分组。
|
||||
|
||||
## 基本用法
|
||||
|
||||
```schema: 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 只是展示，如果希望把当前 tab 作为值提交给后端，则可以配置 `name` 来同步，意味着切换 tab 会写入值，如果外部修改了这个值，tabs 也会相应的切换到对应的 tab。
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "tabs",
|
||||
"value": "tab2",
|
||||
"label": "Tabs值",
|
||||
"mode": "normal",
|
||||
"options": [
|
||||
{
|
||||
"label": "基本信息",
|
||||
"value": "tab1"
|
||||
},
|
||||
{
|
||||
"label": "其他信息",
|
||||
"value": "tab2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "tabs",
|
||||
"name": "tabs",
|
||||
"tabs": [
|
||||
{
|
||||
"title": "基本配置",
|
||||
"value": "tab1",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text1",
|
||||
"type": "text",
|
||||
"label": "文本1"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text2",
|
||||
"type": "text",
|
||||
"label": "文本2"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"title": "其他配置",
|
||||
"value": "tab2",
|
||||
"controls": [
|
||||
{
|
||||
"name": "text3",
|
||||
"type": "text",
|
||||
"label": "文本3"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "text4",
|
||||
"type": "text",
|
||||
"label": "文本4"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 更多功能
|
||||
|
||||
请参考[这里](../tabs)。
|
||||
|
||||
## 属性表
|
||||
|
||||
请参考[这里](../tabs#属性表)。
|
||||
@ -14,7 +14,7 @@ order: 57
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "textarea",
|
||||
"type": "textarea",
|
||||
|
||||
@ -13,7 +13,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "默认",
|
||||
"type": "transfer",
|
||||
@ -57,7 +57,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "分组",
|
||||
"type": "transfer",
|
||||
@ -114,7 +114,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "表格形式",
|
||||
"type": "transfer",
|
||||
@ -173,7 +173,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "树型展示",
|
||||
"type": "transfer",
|
||||
@ -231,7 +231,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "级联选择",
|
||||
"type": "transfer",
|
||||
@ -289,7 +289,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "带搜索",
|
||||
"type": "transfer",
|
||||
@ -349,7 +349,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "延时加载",
|
||||
"type": "transfer",
|
||||
@ -399,7 +399,7 @@ icon:
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "关联选择模式",
|
||||
"type": "transfer",
|
||||
|
||||
@ -14,7 +14,7 @@ order: 60
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "tree-select",
|
||||
"name": "tree",
|
||||
|
||||
@ -17,7 +17,7 @@ order: 30
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "uuid",
|
||||
"name": "uuid"
|
||||
@ -37,7 +37,7 @@ order: 30
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"debug": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "uuid",
|
||||
"name": "uuid",
|
||||
|
||||
@ -60,7 +60,7 @@ order: 52
|
||||
"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": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-image",
|
||||
"name": "image",
|
||||
@ -99,7 +99,7 @@ order: 52
|
||||
"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": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-image",
|
||||
"name": "image",
|
||||
@ -234,7 +234,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"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": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-image",
|
||||
"name": "image",
|
||||
|
||||
@ -444,7 +444,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80"
|
||||
]
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-images",
|
||||
"name": "images",
|
||||
|
||||
@ -122,7 +122,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
}
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-json",
|
||||
"name": "json",
|
||||
|
||||
@ -50,7 +50,7 @@ order: 56
|
||||
"title": "查看详情",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "Engine",
|
||||
"name": "engine",
|
||||
|
||||
@ -102,7 +102,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"type": "2"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-mapping",
|
||||
"name": "type",
|
||||
@ -127,7 +127,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"type": true
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-mapping",
|
||||
"name": "type",
|
||||
@ -149,7 +149,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"type": true
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-mapping",
|
||||
"name": "type",
|
||||
@ -175,7 +175,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"type": "2"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "mapping",
|
||||
"name": "type",
|
||||
@ -205,7 +205,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"type": "2"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "mapping",
|
||||
"name": "type",
|
||||
|
||||
@ -32,10 +32,10 @@ order: 58
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "editor",
|
||||
"name": "md",
|
||||
|
||||
@ -29,9 +29,9 @@ Page 组件是 amis 页面 JSON 配置中顶级容器组件，是整个页面配
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
}
|
||||
@ -138,9 +138,9 @@ Page 默认将页面分为几个区域，分别是**内容区（`body`）**、**
|
||||
},
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本框",
|
||||
"name": "text"
|
||||
}
|
||||
|
||||
@ -97,7 +97,7 @@ List 的内容、Card 卡片的内容配置同上
|
||||
"data": {
|
||||
"progress": 60
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "static-progress",
|
||||
"name": "progress",
|
||||
|
||||
@ -13,7 +13,7 @@ order: 36
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "radios",
|
||||
"type": "radios",
|
||||
|
||||
@ -216,6 +216,61 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
|
||||
它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。
|
||||
|
||||
## 动态渲染表单项
|
||||
|
||||
默认 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": {
|
||||
"type": "container",
|
||||
"body": [
|
||||
{
|
||||
"type": "input-text",
|
||||
"name": "text",
|
||||
"label": "文本输入"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
例如下例：
|
||||
|
||||
```schema: scope="form-item2"
|
||||
{
|
||||
"type": "service",
|
||||
"schemaApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/service/schema?type=controls"
|
||||
}
|
||||
```
|
||||
|
||||
`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口
|
||||
|
||||
```json
|
||||
{
|
||||
"status": 0,
|
||||
"msg": "",
|
||||
"data": {
|
||||
"data": {
|
||||
"a": "b" // 这样返回的选项会选中第二个选项B
|
||||
},
|
||||
"body": [
|
||||
{
|
||||
"type": "select",
|
||||
"name": "a",
|
||||
"label": "选项",
|
||||
"options": [
|
||||
{"label": "A", "value": "a"},
|
||||
{"label": "B", "value": "b"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 接口联动
|
||||
|
||||
`api`和`schemaApi`都支持[接口联动](../../docs/concepts/linkage#%E6%8E%A5%E5%8F%A3%E8%81%94%E5%8A%A8)
|
||||
@ -226,7 +281,7 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock/saveForm?waitSeconds=1",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "数据模板",
|
||||
"type": "select",
|
||||
@ -252,20 +307,20 @@ amis 中部分组件，作为展示组件，自身没有**使用接口初始化
|
||||
{
|
||||
"type": "service",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/initData?tpl=${tpl}",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "名称",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name"
|
||||
},
|
||||
{
|
||||
"label": "作者",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "author"
|
||||
},
|
||||
{
|
||||
"label": "请求时间",
|
||||
"type": "datetime",
|
||||
"type": "input-datetime",
|
||||
"name": "date"
|
||||
}
|
||||
]
|
||||
|
||||
@ -133,7 +133,7 @@ order: 68
|
||||
"body": {
|
||||
"type": "form",
|
||||
"initApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/steps/steps",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "steps",
|
||||
"source": "${steps}",
|
||||
@ -153,7 +153,7 @@ order: 68
|
||||
"type": "page",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "steps",
|
||||
"name": "steps",
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
---
|
||||
title: Switch 开关
|
||||
description:
|
||||
type: 0
|
||||
group: ⚙ 组件
|
||||
menuName: Switch
|
||||
icon:
|
||||
order: 66
|
||||
---
|
||||
|
||||
## 基本用法
|
||||
|
||||
常见的用法是放 CRUD 中
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
|
||||
"quickSaveItemApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
"name": "id",
|
||||
"type": "switch",
|
||||
"label": "switch"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| --------- | -------- | ------ | ------------------------------- |
|
||||
| type | `string` | | `"switch"` 指定为 Dialog 渲染器 |
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| trueValue | any | | 真值，当值为该值时，开关开启 |
|
||||
| option | `string` | | 右侧选项文本 |
|
||||
@ -34,7 +34,7 @@ order: 70
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "static",
|
||||
"type": "static",
|
||||
|
||||
@ -20,35 +20,35 @@ order: 73
|
||||
"steps": [
|
||||
{
|
||||
"title": "第一步",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "website",
|
||||
"label": "网址",
|
||||
"type": "url",
|
||||
"type": "input-url",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "email2",
|
||||
"label": "邮箱",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"title": "Step 3",
|
||||
"controls": [
|
||||
"body": [
|
||||
"这是最后一步了"
|
||||
]
|
||||
}
|
||||
@ -76,7 +76,8 @@ order: 73
|
||||
| redirect | [模板](../../docs/concepts/template) | `3000` | 操作完后跳转。 |
|
||||
| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |
|
||||
| steps | Array<[step](#step)> | | 数组，配置步骤信息 |
|
||||
| startStep | `string` | `1` | 起始默认值，从第几步开始。可支持模版，但是只有在组件创建时渲染模版并设置当前步数，在之后组件被刷新时，当前step不会根据startStep改变 |
|
||||
| startStep | `string` | `1` | 起始默认值，从第几步开始。可支持模版，但是只有在组件创建时渲染模版并设置当前步数，在之后组件被刷新时，当前 step 不会根据 startStep 改变 |
|
||||
|
||||
### step
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
@ -91,4 +92,4 @@ order: 73
|
||||
| initApi | [API](../../docs/types/api) | | 当前步骤数据初始化接口。 |
|
||||
| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 |
|
||||
| initFetchOn | [表达式](../../docs/concepts/expression) | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |
|
||||
| controls | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。 |
|
||||
| body | Array<[FormItem](./form/formItem)> | | 当前步骤的表单项集合，请参考 [FormItem](./form/formItem)。 |
|
||||
|
||||
@ -71,15 +71,15 @@ order: 12
|
||||
{
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -117,15 +117,15 @@ order: 12
|
||||
"userEmail": "${email}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -172,15 +172,15 @@ order: 12
|
||||
"g": "${c.g}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -222,15 +222,15 @@ order: 12
|
||||
"&": "${c}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -276,9 +276,9 @@ order: 12
|
||||
}
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "table",
|
||||
"type": "input-table",
|
||||
"name": "table",
|
||||
"label": "table",
|
||||
"columns": [
|
||||
@ -1603,7 +1603,7 @@ ${xxx | map[:filterName][:...args]}
|
||||
"test": "${combo2|pick:text|map:toInt|map:date:LLL:x}"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "combo",
|
||||
"name": "combo2",
|
||||
@ -1617,7 +1617,7 @@ ${xxx | map[:filterName][:...args]}
|
||||
"text": "2696865590000"
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
"items": [
|
||||
{
|
||||
"name": "text",
|
||||
"type": "text"
|
||||
|
||||
@ -125,7 +125,7 @@ order: 10
|
||||
1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程；
|
||||
2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`；
|
||||
3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。
|
||||
4. 但是如果url中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 `${id}` 取地址栏参数。
|
||||
4. 但是如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 `${id}` 取地址栏参数。
|
||||
|
||||
> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化
|
||||
|
||||
@ -341,14 +341,14 @@ page
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "age",
|
||||
"label": "年龄："
|
||||
},
|
||||
|
||||
@ -28,7 +28,7 @@ order: 14
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "foo",
|
||||
@ -45,14 +45,14 @@ order: 14
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text1",
|
||||
"label": false,
|
||||
"placeholder": "选中 类型1 时可见",
|
||||
"visibleOn": "this.foo == 1"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "text2",
|
||||
"label": false,
|
||||
"placeholder": "选中 类型2 时不可点",
|
||||
@ -84,7 +84,7 @@ order: 14
|
||||
"title": "",
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"type": "radios",
|
||||
@ -154,7 +154,7 @@ order: 14
|
||||
"title": "",
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"type": "radios",
|
||||
@ -202,9 +202,9 @@ order: 14
|
||||
{
|
||||
"type": "form",
|
||||
"name": "my_form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keyword",
|
||||
"addOn": {
|
||||
"label": "搜索",
|
||||
@ -248,9 +248,9 @@ order: 14
|
||||
{
|
||||
"title": "查询条件",
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"label": "关键字："
|
||||
}
|
||||
@ -294,9 +294,9 @@ order: 14
|
||||
"title": "查询条件",
|
||||
"type": "form",
|
||||
"target": "my_crud",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"label": "关键字："
|
||||
}
|
||||
@ -355,22 +355,22 @@ order: 14
|
||||
"title": "form1",
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Email",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "email"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Company",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "company"
|
||||
}
|
||||
],
|
||||
@ -389,22 +389,22 @@ order: 14
|
||||
"name": "form2",
|
||||
"mode": "horizontal",
|
||||
"api": "/api/mock2/form/saveForm",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "MyName",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "MyEmail",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "email"
|
||||
},
|
||||
|
||||
{
|
||||
"label": "Company",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "company"
|
||||
}
|
||||
]
|
||||
|
||||
@ -89,9 +89,9 @@ order: 9
|
||||
},
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名"
|
||||
}
|
||||
@ -132,7 +132,7 @@ Page
|
||||
"type": "form",
|
||||
"panelClassName": "mb-0",
|
||||
"title": "",
|
||||
"controls": [{
|
||||
"body": [{
|
||||
"type": "select",
|
||||
"label": "区域",
|
||||
"name": "businessLineId",
|
||||
@ -142,7 +142,7 @@ Page
|
||||
"checkAll": false
|
||||
}, {
|
||||
"label": "时间范围",
|
||||
"type": "date-range",
|
||||
"type": "input-date-range",
|
||||
"name": "dateRange",
|
||||
"inline": true,
|
||||
"value": "-1month,+0month",
|
||||
|
||||
@ -54,10 +54,10 @@ import {addRule} from 'amis';
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "id",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "id"
|
||||
}
|
||||
]
|
||||
@ -72,7 +72,7 @@ import {addRule} from 'amis';
|
||||
{
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"name": "idIsNumber",
|
||||
"type": "switch",
|
||||
@ -80,13 +80,13 @@ import {addRule} from 'amis';
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "id",
|
||||
"hiddenOn": "data.idIsNumber"
|
||||
},
|
||||
{
|
||||
"name": "id",
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "id",
|
||||
"visibleOn": "data.idIsNumber"
|
||||
}
|
||||
@ -113,7 +113,7 @@ let amisScoped = amis.embed('#root', {
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/saveForm',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'switch',
|
||||
label: 'id 是数字',
|
||||
|
||||
@ -12,9 +12,9 @@ amis 的配置最终会转成 React 组件来执行，所以如果只是想在
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
},
|
||||
@ -126,9 +126,9 @@ class CustomRenderer extends React.Component {
|
||||
"tip": "简单示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
}
|
||||
@ -183,9 +183,9 @@ class MyFormItem extends React.Component {
|
||||
"title": "自定义组件示例",
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "用户名",
|
||||
"name": "usename"
|
||||
},
|
||||
|
||||
@ -42,9 +42,9 @@ title: 自定义组件 - SDK
|
||||
{
|
||||
"type": "form",
|
||||
"title": "custom 组件",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "username",
|
||||
"label": "姓名"
|
||||
},
|
||||
@ -97,7 +97,7 @@ let amisScoped = amis.embed('#root', {
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/saveForm',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'my-custom', // 注意这个的 type 对应之前注册的 test
|
||||
|
||||
@ -25,10 +25,10 @@ let amisScoped = amis.embed(
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/saveForm',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'name'
|
||||
}
|
||||
]
|
||||
@ -72,8 +72,8 @@ import 'amis/lib/locale/en-US';
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [{
|
||||
"type": "text",
|
||||
"body": [{
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名：",
|
||||
"en-US": {
|
||||
|
||||
@ -14,9 +14,9 @@ amis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json
|
||||
<Page title="页面标题" subTitle="副标题">
|
||||
<Form
|
||||
title="用户登录"
|
||||
controls={[
|
||||
body={[
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'username',
|
||||
label: '用户名'
|
||||
}
|
||||
@ -35,9 +35,9 @@ amis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json
|
||||
"body": {
|
||||
"type": "form",
|
||||
"title": "用户登录",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "username",
|
||||
"label": "用户名"
|
||||
}
|
||||
@ -52,7 +52,7 @@ amis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json
|
||||
|
||||
- `page` 页面节点
|
||||
- `page/body/form` 表单节点
|
||||
- `page/body/form/controls/0/text` 文本框节点。
|
||||
- `page/body/form/body/0/text` 文本框节点。
|
||||
|
||||
根据 path 的信息就能很容易注册组件跟节点对应了。
|
||||
|
||||
@ -107,12 +107,12 @@ export class FormRenderer extends React.Component {
|
||||
render() {
|
||||
const {
|
||||
title,
|
||||
controls,
|
||||
body,
|
||||
render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。
|
||||
} = this.props;
|
||||
return (
|
||||
<form className="form">
|
||||
{controls.map((control, index) => (
|
||||
{body.map((control, index) => (
|
||||
<div className="form-item" key={index}>
|
||||
{render(`${index}/control`, control)}
|
||||
</div>
|
||||
|
||||
@ -7,9 +7,9 @@ title: 移动端定制
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [{
|
||||
"body": [{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱：",
|
||||
"mobile": {
|
||||
"name": "phone",
|
||||
@ -25,20 +25,20 @@ title: 移动端定制
|
||||
|
||||
请点击上方切换到移动端预览效果。
|
||||
|
||||
`mobile` 属性可以出现在配置中的任意地方，替换父节点的任意属性，比如前面的例子可以写成放在 `form` 上替换所有 `controls`
|
||||
`mobile` 属性可以出现在配置中的任意地方，替换父节点的任意属性，比如前面的例子可以写成放在 `form` 上替换所有 `body`
|
||||
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [{
|
||||
"body": [{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}],
|
||||
"mobile": {
|
||||
"controls": [{
|
||||
"body": [{
|
||||
"name": "phone",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "电话：",
|
||||
"validations": {
|
||||
"isPhoneNumber": true
|
||||
|
||||
@ -22,10 +22,10 @@ let amisJSON = {
|
||||
console.log('form', values);
|
||||
return false; // 这样可以禁掉 amis 后续的默认行为
|
||||
},
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
onChange: value => {
|
||||
console.log('Name', value);
|
||||
@ -60,7 +60,7 @@ let amisScoped = amis.embed('#root', {
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/saveForm',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'button',
|
||||
label: '按钮',
|
||||
|
||||
@ -34,9 +34,9 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
"filter": {
|
||||
"title": "筛选",
|
||||
"submitText": "",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "keywords",
|
||||
"placeholder": "关键字",
|
||||
"addOn": {
|
||||
@ -64,13 +64,13 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
"body": {
|
||||
"type": "form",
|
||||
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "hidden",
|
||||
"name": "ids"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "engine",
|
||||
"label": "Engine"
|
||||
}
|
||||
@ -132,6 +132,7 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
"name": "platform",
|
||||
"label": "平台",
|
||||
"popOver": {
|
||||
"trigger": "hover",
|
||||
"body": {
|
||||
"type": "tpl",
|
||||
"tpl": "就是为了演示有个叫 popOver 的功能"
|
||||
@ -143,12 +144,8 @@ amis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可
|
||||
{
|
||||
"name": "grade",
|
||||
"label": "CSS 等级",
|
||||
"quickEdit": {
|
||||
"mode": "inline",
|
||||
"type": "select",
|
||||
"options": ["A", "B", "C", "D", "X"]
|
||||
},
|
||||
"type": "text"
|
||||
"type": "select",
|
||||
"options": ["A", "B", "C", "D", "X"]
|
||||
},
|
||||
{
|
||||
"type": "operation",
|
||||
|
||||
@ -62,15 +62,15 @@ SDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及
|
||||
type: 'form',
|
||||
mode: 'horizontal',
|
||||
api: '/saveForm',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
label: 'Name',
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'name'
|
||||
},
|
||||
{
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
type: 'input-email',
|
||||
name: 'email'
|
||||
}
|
||||
]
|
||||
@ -164,10 +164,10 @@ let amisScoped = amis.embed(
|
||||
"body": {
|
||||
"type": "form",
|
||||
"name": "form1",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "Name",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name1"
|
||||
}
|
||||
]
|
||||
@ -290,8 +290,8 @@ import {toast} from 'amis/lib/components/Toast';
|
||||
|
||||
class MyComponent extends React.Component<any, any> {
|
||||
render() {
|
||||
let amisScoped;
|
||||
let theme = 'default';
|
||||
let amisScoped;
|
||||
let theme = 'default';
|
||||
return (
|
||||
<div>
|
||||
<p>通过 amis 渲染页面</p>
|
||||
|
||||
@ -28,14 +28,14 @@ title: 快速开始
|
||||
},
|
||||
"body": {
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"label": "密码",
|
||||
"name": "password"
|
||||
}
|
||||
@ -65,15 +65,15 @@ title: 快速开始
|
||||
{
|
||||
"type": "form",
|
||||
"panelClassName": "border-solid border-2 border-blue-500 rounded-xl shadow-lg",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"className": "text-green-700",
|
||||
"label": "文本框",
|
||||
"name": "text"
|
||||
},
|
||||
{
|
||||
"type": "password",
|
||||
"type": "input-password",
|
||||
"label": "密码",
|
||||
"name": "password"
|
||||
}
|
||||
|
||||
@ -150,15 +150,15 @@ API 还支持配置对象类型
|
||||
}
|
||||
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -201,15 +201,15 @@ API 还支持配置对象类型
|
||||
"&": "$$$$" // 获取表单数据域中的所有值
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -228,15 +228,15 @@ API 还支持配置对象类型
|
||||
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"dataType": "form"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -255,15 +255,15 @@ API 还支持配置对象类型
|
||||
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"dataType": "form-data"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -279,15 +279,15 @@ API 还支持配置对象类型
|
||||
"method": "post",
|
||||
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "file",
|
||||
"type": "file",
|
||||
"type": "input-file",
|
||||
"label": "附件：",
|
||||
"asBlob": true
|
||||
}
|
||||
@ -311,15 +311,15 @@ API 还支持配置对象类型
|
||||
"my-header": "aaa"
|
||||
}
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -335,7 +335,7 @@ API 还支持配置对象类型
|
||||
"title": "",
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"type": "radios",
|
||||
@ -542,15 +542,15 @@ function (api) {
|
||||
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"requestAdaptor": "return {\n ...api,\n data: {\n ...api.data, // 获取暴露的 api 中的 data 变量\n foo: 'bar' // 新添加数据\n }\n}"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "email",
|
||||
"type": "email",
|
||||
"type": "input-email",
|
||||
"label": "邮箱："
|
||||
}
|
||||
]
|
||||
@ -593,15 +593,15 @@ const schema = {
|
||||
};
|
||||
}
|
||||
},
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '姓名：'
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
type: 'email',
|
||||
type: 'input-email',
|
||||
label: '邮箱：'
|
||||
}
|
||||
]
|
||||
@ -649,15 +649,15 @@ function (payload, response) {
|
||||
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm",
|
||||
"adaptor": "return {\n ...payload,\n status: payload.code === 200 ? 0 : payload.code\n}"
|
||||
},
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "name",
|
||||
"label": "姓名："
|
||||
},
|
||||
{
|
||||
"name": "file",
|
||||
"type": "file",
|
||||
"type": "input-file",
|
||||
"label": "附件：",
|
||||
"asBlob": true
|
||||
}
|
||||
@ -695,15 +695,15 @@ const schema = {
|
||||
};
|
||||
}
|
||||
},
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'name',
|
||||
label: '姓名：'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
type: 'email',
|
||||
type: 'input-email',
|
||||
label: '邮箱：'
|
||||
}
|
||||
]
|
||||
@ -759,7 +759,7 @@ Content-Disposition: attachment; filename="download.pdf"
|
||||
"title": "监听表单内部的修改",
|
||||
"initApi": "/api/mock2/form/initData?tpl=${tpl}",
|
||||
"actions": [],
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "数据模板",
|
||||
"type": "select",
|
||||
@ -825,7 +825,7 @@ Content-Disposition: attachment; filename="download.pdf"
|
||||
"title": "",
|
||||
"type": "form",
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "选项1",
|
||||
"type": "radios",
|
||||
|
||||
@ -25,7 +25,7 @@ amis 中大部分的组件都支持配置 className 和 xxxClassName，他可以
|
||||
"actions": [],
|
||||
"debug": true,
|
||||
"mode": "horizontal",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "radios",
|
||||
"name": "status",
|
||||
|
||||
@ -16,7 +16,7 @@ order: 40
|
||||
{
|
||||
"definitions": {
|
||||
"aa": {
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"name": "jack",
|
||||
"value": "ref value",
|
||||
"labelRemark": "通过<code>\\$ref</code>引入的组件"
|
||||
@ -29,7 +29,7 @@ order: 40
|
||||
"type": "form",
|
||||
"api": "api/xxx",
|
||||
"actions": [],
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"$ref": "aa"
|
||||
}
|
||||
@ -51,20 +51,20 @@ order: 40
|
||||
"multiple": true,
|
||||
"multiLine": true,
|
||||
"name": "options",
|
||||
"controls": [
|
||||
"items": [
|
||||
{
|
||||
"type": "group",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"label": "名称",
|
||||
"name": "label",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"required": true
|
||||
},
|
||||
{
|
||||
"label": "值",
|
||||
"name": "value",
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"required": true
|
||||
}
|
||||
]
|
||||
@ -93,7 +93,7 @@ order: 40
|
||||
"type": "form",
|
||||
"api": "api/xxx",
|
||||
"actions": [],
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"$ref": "options",
|
||||
"label": "选项"
|
||||
|
||||
@ -63,9 +63,9 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
[
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "姓名",
|
||||
"name": "name"
|
||||
}
|
||||
@ -74,9 +74,9 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
{
|
||||
"type": "form",
|
||||
"hidden": true,
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "姓名",
|
||||
"name": "name"
|
||||
}
|
||||
@ -94,16 +94,16 @@ SchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema
|
||||
```schema: scope="body"
|
||||
{
|
||||
"type": "form",
|
||||
"controls": [
|
||||
"body": [
|
||||
{
|
||||
"type": "number",
|
||||
"type": "input-number",
|
||||
"label": "数量",
|
||||
"name": "number",
|
||||
"value": 0,
|
||||
"description": "调整数量大小查看效果吧！"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"type": "input-text",
|
||||
"label": "文本",
|
||||
"name": "text",
|
||||
"hiddenOn": "this.number > 1",
|
||||
|
||||
@ -93,8 +93,8 @@ const viewModes = [
|
||||
const docVersions = [
|
||||
{
|
||||
label: '1.2.x',
|
||||
disabled: true,
|
||||
value: ''
|
||||
value: '',
|
||||
url: '/zh-CN/docs/start/1-2-0'
|
||||
},
|
||||
{
|
||||
label: '1.1.x 文档',
|
||||
@ -356,8 +356,10 @@ export class App extends React.PureComponent<{
|
||||
value={docVersions[0].value}
|
||||
options={docVersions}
|
||||
onChange={doc => {
|
||||
if (doc.url) {
|
||||
if (doc.url && /^https?\:\/\//.test(doc.url)) {
|
||||
window.open(doc.url);
|
||||
} else {
|
||||
window.location.href = doc.url;
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '音频播放器',
|
||||
body: [
|
||||
{
|
||||
@ -14,7 +13,7 @@ export default {
|
||||
title: '',
|
||||
actions: [],
|
||||
className: 'b v-middle inline w-lg h-xs',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'card',
|
||||
className: 'v-middle w inline no-border',
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '带边栏联动',
|
||||
aside: {
|
||||
type: 'form',
|
||||
wrapWithPanel: false,
|
||||
target: 'window', // 直接修改location，当然也可以直接指向某个组件。
|
||||
submitOnInit: true,
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'tree',
|
||||
type: 'input-tree',
|
||||
name: 'cat',
|
||||
inputClassName: 'no-border',
|
||||
submitOnChange: true,
|
||||
@ -59,9 +58,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: 'post:/api/sample',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -70,7 +69,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -79,7 +78,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -88,7 +87,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -96,7 +95,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
@ -115,9 +114,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -147,13 +146,13 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
@ -227,7 +226,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -287,9 +286,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -298,7 +297,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -307,7 +306,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -316,7 +315,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -324,7 +323,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '带边栏联动',
|
||||
aside: {
|
||||
type: 'nav',
|
||||
@ -27,9 +26,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -59,13 +58,13 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
@ -139,7 +138,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -199,9 +198,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -210,7 +209,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -219,7 +218,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -228,7 +227,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -236,7 +235,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'http://amis.baidu.com/v2/schemas/page.json#',
|
||||
title: '动态表格',
|
||||
subTitle: '返回表格数据的同时返回列信息',
|
||||
body: {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'CSV 导出的是原始数据，而 Excel 是尽可能还原展现效果',
|
||||
body: {
|
||||
type: 'crud',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查列类型汇总',
|
||||
body: {
|
||||
type: 'crud',
|
||||
|
||||
@ -276,7 +276,6 @@ const table = {
|
||||
};
|
||||
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '固顶和列固定示例',
|
||||
remark: 'bla bla bla',
|
||||
body: [
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '开启单条底部展示功能',
|
||||
body: {
|
||||
type: 'crud',
|
||||
@ -75,7 +74,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -137,9 +136,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -148,7 +147,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -157,7 +156,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -166,7 +165,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
@ -15,9 +14,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -47,13 +46,13 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
@ -83,7 +82,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -143,9 +142,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -154,7 +153,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -163,7 +162,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -172,7 +171,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -180,7 +179,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '支持表头分组，通过在 cloumn 上设置 groupName 实现。',
|
||||
body: {
|
||||
type: 'table',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '当 column 每一项的 label 值都为空字符时，可以隐藏表头',
|
||||
body: [
|
||||
{
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
@ -38,7 +37,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -100,9 +99,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -111,7 +110,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -120,7 +119,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -129,7 +128,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -171,13 +170,13 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'hidden',
|
||||
name: 'ids'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '操作并下一个',
|
||||
remark: '当存在下一条时，支持直接打开下一条操作。',
|
||||
body: {
|
||||
@ -78,9 +77,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -89,7 +88,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -98,7 +97,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -107,7 +106,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -115,7 +114,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: 'Table 全键盘操作示例',
|
||||
remark: 'bla bla bla',
|
||||
body: [
|
||||
@ -29,7 +28,7 @@ export default {
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
quickEdit: {
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
required: true,
|
||||
mode: 'inline'
|
||||
},
|
||||
@ -41,7 +40,7 @@ export default {
|
||||
label: 'Browser',
|
||||
sortable: true,
|
||||
quickEdit: {
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
required: true
|
||||
},
|
||||
type: 'text',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
@ -14,9 +13,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -49,10 +48,10 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{type: 'hidden', name: 'ids'},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
@ -73,7 +72,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -133,9 +132,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -144,7 +143,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -153,7 +152,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -162,7 +161,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -170,7 +169,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '增删改查示例',
|
||||
remark: 'bla bla bla',
|
||||
body: {
|
||||
@ -14,9 +13,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -49,10 +48,10 @@ export default {
|
||||
body: {
|
||||
type: 'form',
|
||||
api: '/api/sample/bulkUpdate2',
|
||||
controls: [
|
||||
body: [
|
||||
{type: 'hidden', name: 'ids'},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine'
|
||||
}
|
||||
@ -75,7 +74,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -135,9 +134,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -146,7 +145,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -155,7 +154,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -164,7 +163,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
@ -172,7 +171,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'grade',
|
||||
label: 'CSS grade'
|
||||
}
|
||||
@ -196,18 +195,21 @@ export default {
|
||||
quickEdit: true,
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
},
|
||||
[
|
||||
{
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
},
|
||||
{
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
}
|
||||
],
|
||||
{
|
||||
type: 'hbox',
|
||||
columns: [
|
||||
{
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
},
|
||||
{
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
labelClassName: 'w-sm pull-left text-muted'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'version',
|
||||
label: 'Engine version',
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '一次性加载，前端分页，前端排序',
|
||||
body: {
|
||||
type: 'crud',
|
||||
@ -8,9 +7,9 @@ export default {
|
||||
filter: {
|
||||
title: '条件搜索',
|
||||
submitText: '',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'keywords',
|
||||
placeholder: '通过关键字搜索',
|
||||
addOn: {
|
||||
@ -77,7 +76,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -140,9 +139,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -151,7 +150,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -160,7 +159,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -169,7 +168,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title:
|
||||
'支持自动合并单元格，从左到右，可配置从左侧起多少列内启动自动合并单元格，当前配置 3',
|
||||
body: {
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '支持多层嵌套，列数据中有 children 字段即可。（建议不超过10层）',
|
||||
body: {
|
||||
type: 'crud',
|
||||
@ -74,7 +73,7 @@ export default {
|
||||
title: '查看',
|
||||
body: {
|
||||
type: 'form',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'static',
|
||||
name: 'engine',
|
||||
@ -136,9 +135,9 @@ export default {
|
||||
type: 'form',
|
||||
name: 'sample-edit-form',
|
||||
api: '/api/sample/$id',
|
||||
controls: [
|
||||
body: [
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'engine',
|
||||
label: 'Engine',
|
||||
required: true
|
||||
@ -147,7 +146,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'browser',
|
||||
label: 'Browser',
|
||||
required: true
|
||||
@ -156,7 +155,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'platform',
|
||||
label: 'Platform(s)',
|
||||
required: true
|
||||
@ -165,7 +164,7 @@ export default {
|
||||
type: 'divider'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
type: 'input-text',
|
||||
name: 'version',
|
||||
label: 'Engine version'
|
||||
},
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
export default {
|
||||
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
|
||||
title: '列展示详情',
|
||||
body: {
|
||||
type: 'crud',
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user