官网中的一些内容，需要去测试才能真正明白他的意思，这篇文章总结一下自己学习amis组件对于其中一些属性的测试。
有错误，望指出。
tasks 任务操作集合
"body": {
"type": "tasks",
"name": "tasks",
// 如果通过api去获取数据并展示，data直接返回展示的列表数据即可。类型为数组
"checkApi": "/api/test/tasks",
// 这个api是配置当操作返回5时，再次发送数据请求的api
reSubmitApi: "/api/test/tasks",
// 这个是配置当操作返回0 ，1， 3， 4时，再次发送请求数据的api
submitApi: "/api/test/tasks",
}
上面提到api返回格式
直接返回一个数组，但是需要配置好属性格式。
res.json(
resultType(0, '请求成功', [
{
"label": "hive 任务",
"key": "hive",
"status": 5,
"remark": "查看详情<a target=\"_blank\" href=\"http://www.baidu.com\">日志</a>。"
},
{
"label": "小流量",
"key": "partial",
"status": 4
},
{
"label": "全量",
"key": "full",
"status": 4
}
])
)
wizard 向导
// 请求默认是post
"api": {
url: "/api/test/wizard",
method: "get"
},
// 请求组件中使用到的数据，初始化数据api
initApi: "/api/test/initwizard",
// 是否初始化请求数据initApi是否发送
// initFetch: false,
// 将数据提交给form组件，并且不会触发initApi
target: "form",
"steps": [
{
// 配置api可以显示保存并下一步
api: "/api/test",
}
]
其他的事件和动作也是挺好理解的，没有具体的场景，就不去测试了。
onEvent: {
stepSubmitFail: {
actions: {
actionType: "toast",
args: {
msg: "保存失败"
}
}
},
}
一个案例
{
"type": "page",
"body":[
{
type: "form",
name: "form",
body: [
{
type: "input-text",
name: "website"
},
{
type: "input-text",
name: "email"
},
{
type: "input-text",
name: "email2"
},
]
},
{
"type": "wizard",
// 请求默认是post
"api": {
url: "/api/test/wizard",
method: "get"
},
// 请求组件中使用到的数据，初始化数据api
initApi: "/api/test/initwizard",
// 是否初始化请求数据initApi是否发送
// initFetch: false,
// 将数据提交给form组件，并且不会触发initApi
target: "form",
"mode": "horizontal", // vertical
"steps": [
{
"title": "第一步",
"body": [
{
"name": "website",
"label": "网址",
"type": "input-url",
},
{
"name": "email",
"label": "邮箱",
"type": "input-email",
}
]
},
{
"title": "Step 2",
"body": [
{
"name": "email2",
"label": "邮箱",
"type": "input-email",
}
]
},
{
"title": "Step 3",
"body": [
"这是最后一步了"
]
}
]
}
]
}
Toast 轻提示
轻提示就不介绍了，主要是介绍一下将amis当做组件库使用在jdk环境下如何修改全局的toast提示。
notify(type, msg) {
// msg是后端返回的msg字段
// type error || success
amisLib.toast[type](msg, {
timeout: 1000
});
},
dialog 对话框
默认情况下crud内部的dialog组件都会继承crud中的数据域的，如果crud中filter表单数据中的字段和dialog中表单数据中的字段相同，可能会相互影响，这时，我们就可以通过在dialog中自己配置数据域，并将其冲突的属性删除。
"data": {
"&": "$$",
"status": "__undefined"
},
具体案例，请查看这里
dialog组件下的actions按钮行为会影响dialog内部表单的行为。
下面这里actions中配置的submit行为会将dialog中的表单提交
"dialog": {
"title": "在弹框中的表单",
"actions": [
{
"label": "提交表单后不关闭",
"actionType": "submit",
"close": false,
"primary": true,
"type": "button"
},
{
"label": "ajax请求后不关闭",
"actionType": "ajax",
"primary": true,
"type": "button",
"api": "/amis/api/mock2/form/saveForm?waitSeconds=2"
}
],
"body": {
"type": "form",
"api": "/amis/api/mock2/form/saveForm?waitSeconds=2",
"body": [
{
"type": "input-text",
"name": "text",
"required": true,
"label": "用户名",
"placeholder": "请输入用户名"
},
{
"type": "input-password",
"name": "password",
"label": "密码",
"required": true,
"placeholder": "请输入密码"
},
{
"type": "checkbox",
"name": "rememberMe",
"label": "记住登录"
}
]
}
}
请注意actions属性并不是只能定义confirm 和 cancel动作的，其他相关的动作也是可以定义的，如上例。
Tpl 模板
tpl属性是支持html格式的
status 状态
在进行crud, list， table中状态展示时，我还是推荐直接使用map组件来自定义，不要使用status，因为他不能直接使用html定义。
type: 'map',
map: {
"0": "<span class='text-danger'><span class='fa fa-times-circle m-1'></span>失败</span>",
"1": "<span class='text-success'><span class='fa fa-check-circle m-1'></span>成功</span>"
},
因为labelMap只能映射文本。
"type": "status",
"map": {
"0": "fa fa-check-circle text-danger",
"1": "fa fa-times-circle text-success"
},
// labelMap只能映射文本，不能解析html
// 数据映射的时候不能使用过滤器
// "labelMap": {
// "0": "${'<span class='text-danger'>失败</span>' | raw}",
// "1": "${'<span class='text-success'>成功</span>' | raw}"
// },
"labelMap": {
"0": "<span class='text-danger'>失败</span>",
"1": "<span class='text-success'>成功</span>"
},
Property 属性表
label，content支持amis所有的组件。
动态内容。我们可以通过service组件结合，请求数据，通过配置source属性来展示数据。
{
"type": "page",
"body": {
type: "service",
api: "/api/test/property",
body: {
"type": "property",
"title": "${title}",
"source": "${items}"
}
}
}
数据格式
{
"title": "",
"items": [
{
"label": "",
"content": "",
"span": 2
}
]
}
单元格中属性样式的调整
"labelStyle": {
// 水平方向的排布
"textAlign": "left",
// 垂直方方向的排布
"verticalAlign": "middle"
},
"contentStyle": {
// 水平方向的排布
"textAlign": "left",
// 垂直方方向的排布
"verticalAlign": "middle"
},
Steps 步骤条
远程拉取，基本都是通过绑定source属性。
需要注意的只是格式问题。
{
"status": 0,
"msg": "",
"data": {
"steps": [
{
"title": "First",
"subTitle": "this is sub title",
"value": "first"
},
{
"title": "Secord",
"description": "this is description",
"value": "secord"
},
{
"title": "Last",
"value": "last"
}
]
}
}
value属性从0开始的
progress 进度条
可以通过map属性来映射不同范围内填充进度条的颜色。
0-30表示一种颜色，30以后表示另一种颜色。感觉这样划分很奇怪，30-60阶段范围很突兀。
"map": [
{
"value": 30,
"color": "#007bff"
},
{
"value": 60,
"color": "#fad733"
}
]
这个组件有一个用处就是用在列表展示中。
{
"name": "progress", // 映射的数据
"label": "进度",
"type": "progress" // 指定进度条组件
}
mapping 映射
用途之一是，使用在列表项中。
{
"name": "type",
"label": "映射",
"type": "mapping",
"map": {
"1": "<span class='label label-info'>漂亮</span>",
"2": "<span class='label label-success'>开心</span>",
"3": "<span class='label label-danger'>惊吓</span>",
"4": "<span class='label label-warning'>紧张</span>",
"*": "其他：${type}"
}
}
该组件也可以通过source去绑定请求回来的数据做页面展示。
{
"type": "mapping",
"name": "type",
"label": "映射",
"source": "${zidian}"
// 或者直接请求一个api
// "source": "/amis/api/mapping"
}
json
开启json修改和增加，我们需要指定name属性，这个属性必须指定，否则不具有修改，删除，增加功能。
Images 图片集
每个图片item的属性
Array<{
image: string; // 小图，预览图
src?: string; // 原图
title?: string; // 标题
description?: string; // 描述
[propName: string]: any; // 还可以有其他数据
}>;
如果数据中对应的字段无image属性，我们可以将属性映射成src
{
"type": "page",
"data": {
"images": [
{
"img": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
}
]
},
"body": {
"type": "images",
"source": "${images}",
"src": "${img}"
}
}
如果数据中对应的字段无src，来预览原图，我们可以设置originalSrc属性。
如果想要预览原图，我们还需要设置enlargeAble: true
{
"type": "page",
"data": {
"images": [
{
"image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
"source": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg",
}
]
},
"body": {
"type": "images",
"source": "${images}",
"originalSrc": "${source}",
"enlargeAble": true
}
}
Icon 图标
图标可以直接通过class引入，也可以通过定义icon组件来使用。
amis库主要是使用fontawesome字体图标库的。以至于对于不同版本的fontawesome，图标前缀是不同的。
// v4 用fa 表示前缀
fa fa-cloud
// v5 用 far/fas 等表示前缀
far fa-address-book
// v6 用 fa-regular / fa-solid
fa-regular fa-address-book
calendar 日历日程
主要是介绍一下自定义日程展示吧。
我们在获取日程数据的时候，获取时间的属性是time,内容字段可以自定义。
{
"type": "page",
"body": {
"type": "calendar",
"value": "1638288000",
// scheduleClassNames: [],
"schedules": [
{
"startTime": "2021-12-11 05:14:00",
"endTime": "2021-12-11 06:14:00",
"content1": "这是一个日程"
},
{
"startTime": "2021-12-21 05:14:00",
"endTime": "2021-12-22 05:14:00",
// 自定义content字段名，下面映射的数据字段也必须时这个。
"content1": "这是一个日程2"
}
],
"scheduleAction": {
"actionType": "drawer",
"drawer": {
"title": "日程",
"body": {
"type": "table",
// 下面的字段必须是time, content1
"columns": [
{
"name": "time",
"label": "时间"
},
{
"name": "content1",
"label": "内容"
}
],
// 这个绑定的就是calendar组件中的值，time, content1
"data": "${scheduleData}"
}
}
}
}
}
scheduleClassNames属性可以设置每个日程期间展示的图标颜色。
scheduleClassNames: ['bg-secondary', 'bg-warning', 'bg-danger', 'bg-success', 'bg-info']
