AMIS的组件学习使用

部分代码片段

{
	"id": "filterForm",
	"className": " xysd-zbkb-pubquery",
	"labelWidth": 130,
	"body": [
		{
			"type": "grid",
			"className": "xysd-grid-query-input",
			"columns": [
				{
					"md": 8,
					"body": [
						{
							"type": "input-group",
							"className": "xysd-pubquery-searchKeyWords",
							"body": [
								{
									"label": "",
									"name": "keyWords",
									"type": "input-text",
									"placeholder": "请输入信息标题、内容相关的关键字检索。多关键词，、；隔开"
								},
								{
									"label": "查询",
									"type": "button",
									"icon": "fa fa-search",
									"level": "primary",
									"align": "right",
									"size": "lg",
									"onEvent": {
										"click": {
											"actions": [
												{
													"actionType": "submit",
													"componentId": "filterForm"
												}
											]
										}
									}
								}
							]
						}
					]
				},
				{
					"md": 4,
					"body": [
						{
							"type": "tpl",
							"tpl": "<div class='xysd-pubquery-moreQuery-btn' οnclick='handleCollapse(`xysd-pubquery-moreQuery`,`xysd-pubquery-moreQuery-ss`)'>更多查询</div>"
						}
					]
				}
			]
		},
		{
			"type": "wrapper",
			"className": "xysd-pubquery-moreQuery xysd-pubquery-moreQuery-ss",
			"body": [
				{
					"type": "group",
					"mode": "horizontal",
					"body": [
						{
							"type": "input-date-range",
							"name": "reportTime",
							"label": "首报时间",
							"columnRatio": 3,
							"format": "YYYY-MM-DD"
						},
						{
							"initiallyOpen": false,
							"label": "首报单位",
							"columnRatio": 3,
							"multiple": true,
							"name": "firstReportOrgIds",
							"onlyLeaf": true,
							"searchable": true,
							"selectMode": "tree",
							"showOutline": true,
							"hideNodePathLabel": true,
							"source": {
								"method": "get",
								"url": "/zbxxgl/api/sysdatas/getptv/tree/open?ptvType=zbxtbsdw"
							},
							"type": "tree-select",
							"hideNodePathLabel": true,
							"initiallyOpen": false,
							"unfoldedLevel": 1,
							"onlyChildren": true
						},
						{
							"label": "报送形式",
							"columnRatio": 3,
							"type": "select",
							"clearable": true,
							"name": "reportType",
							"options": [
								{
									"label": "快报",
									"value": "kb"
								},
								{
									"label": "短信",
									"value": "dx"
								}
							]
						},
						{
							"format": "YYYY-MM-DD",
							"label": "事发/接警时间",
							"columnRatio": 3,
							"name": "incidentTime",
							"type": "input-date-range",
							"value": "${YEAR(NOW())}-1-1,${YEAR(NOW())}-12-31"
						}
					]
				},
				{
					"type": "group",
					"mode": "horizontal",
					"body": [
						{
							"label": "事件类型",
							"columnRatio": 3,
							"multiple": true,
							"checkAll": true,
							"name": "eventTypeIds",
							"source": {
								"method": "get",
								"url": "/zbxxgl/api/sysdatas/get?dataKeys=dicZbxtKbSjlxList"
							},
							"type": "select"
						},
						{
							"columnRatio": 2,
							"initiallyOpen": false,
							"label": "事发地点",
							"className": "xysd-grid-scroll-select",
							"multiple": true,
							"name": "siteTypeIds",
							"searchable": true,
							"selectMode": "tree",
							"showOutline": true,
							"source": {
								"method": "get",
								"url": "/zbxxgl/api/sysdatas/getdict/tree/bytype?dictType=zbxtshudi&hidden=0"
							},
							"type": "tree-select",
							"unfoldedLevel": 2
						},
						{
							"label": "",
							"columnRatio": 1,
							"name": "detailedSite",
							"type": "input-text",
							"className": "hiddenLabel"
						},
						{
							"label": "受伤人数",
							"columnRatio": 2,
							"type": "select",
							"clearable": true,
							"name": "injuredNumWay",
							"options": [
								{
									"label": ">",
									"value": ">"
								},
								{
									"label": "<",
									"value": "<"
								},
								{
									"label": "=",
									"value": "="
								},
								{
									"label": ">=",
									"value": ">="
								},
								{
									"label": "<=",
									"value": "<="
								}
							]
						},
						{
							"label": "",
							"columnRatio": 1,
							"name": "injuredNum",
							"type": "input-number",
							"className": "hiddenLabel"
						},
						{
							"label": "亡人数",
							"columnRatio": 2,
							"type": "select",
							"clearable": true,
							"name": "deathNumWay",
							"options": [
								{
									"label": ">",
									"value": ">"
								},
								{
									"label": "<",
									"value": "<"
								},
								{
									"label": "=",
									"value": "="
								},
								{
									"label": ">=",
									"value": ">="
								},
								{
									"label": "<=",
									"value": "<="
								}
							]
						},
						{
							"label": "",
							"columnRatio": 1,
							"name": "deathNum",
							"type": "input-number",
							"className": "hiddenLabel"
						}
					]
				},
				{
					"type": "group",
					"mode": "horizontal",
					"body": [
						{
							"label": "提出就医需求数",
							"columnRatio": 2,
							"type": "select",
							"clearable": true,
							"name": "medicineNumWay",
							"options": [
								{
									"label": ">",
									"value": ">"
								},
								{
									"label": "<",
									"value": "<"
								},
								{
									"label": "=",
									"value": "="
								},
								{
									"label": ">=",
									"value": ">="
								},
								{
									"label": "<=",
									"value": "<="
								}
							]
						},
						{
							"label": "",
							"columnRatio": 1,
							"name": "medicineNum",
							"type": "input-number",
							"className": "hiddenLabel"
						},
						{
							"label": "涉事人数",
							"columnRatio": 2,
							"type": "select",
							"clearable": true,
							"name": "involveNumWay",
							"options": [
								{
									"label": ">",
									"value": ">"
								},
								{
									"label": "<",
									"value": "<"
								},
								{
									"label": "=",
									"value": "="
								},
								{
									"label": ">=",
									"value": ">="
								},
								{
									"label": "<=",
									"value": "<="
								}
							]
						},
						{
							"label": "",
							"columnRatio": 1,
							"name": "involveNum",
							"type": "input-number",
							"className": "hiddenLabel"
						},
						{
							"label": "敏感身份",
							"columnRatio": 3,
							"multiple": true,
							"checkAll": true,
							"name": "identityTypeIds",
							"source": {
								"method": "get",
								"url": "/zbxxgl/api/sysdatas/getdict/bytype?dictType=zbxtmgsf"
							},
							"type": "select"
						},
						{
							"initiallyOpen": false,
							"label": "报送单位",
							"columnRatio": 3,
							"multiple": true,
							"name": "reportOrgIds",
							"joinValues": true,
							"onlyLeaf": true,
							"searchable": true,
							"selectMode": "tree",
							"showOutline": true,
							"hideNodePathLabel": true,
							"source": {
								"method": "get",
								"url": "/zbxxgl/api/sysdatas/getptv/tree/open?ptvType=zbxtbsdw"
							},
							"type": "tree-select",
							"unfoldedLevel": 1,
							"onlyChildren": true
						},
						{
							"type": "hidden",
							"name": "ids",
							"id": "ids"
						}
					]
				}
			]
		}
	],
	"title": "",
	"submitText": "",
	"actions": []
}

最终效果图

Wrapper

是一个包裹容器组件，相当于div。可以自定义样式

//项目种一般使用className
//样式单独定义在一个css文件,在html页面使用link标签引入即可
//当然如果是非常简单的样式，也可以使用style，两者选择其一即可
//建议项目中使用className
{
        "type": "wrapper",
        "body": "内容",
        "className": "xysd-pubquery-moreQuery xysd-pubquery-moreQuery-ss",
        "style": {
          "color": "red",
          "fontSize": "30px"
        }
      }

在这里插入图片描述

group

Group 组件用于在一行展示多个表单项

//同样支持className
{
	"type": "group",
	"mode": "horizontal",//让label和后面的组件在同一行
	"body": [
		{
			"type": "input-date-range",
			"name": "reportTime",
			"label": "首报时间",
			"columnRatio": 3,
			"format": "YYYY-MM-DD"
		},
		{
			"initiallyOpen": false,
			"label": "首报单位",
			"columnRatio": 3,
			"multiple": true,
			"name": "firstReportOrgIds",
			"onlyLeaf": true,
			"searchable": true,
			"selectMode": "tree",
			"showOutline": true,
			"hideNodePathLabel": true,
			"source": {
				"method": "get",
				"url": "/zbxxgl/api/sysdatas/getptv/tree/open?ptvType=zbxtbsdw"
			},
			"type": "tree-select",
			"hideNodePathLabel": true,
			"initiallyOpen": false,
			"unfoldedLevel": 1,
			"onlyChildren": true
		},
		{
			"label": "报送形式",
			"columnRatio": 3,
			"type": "select",
			"clearable": true,
			"name": "reportType",
			"options": [
				{
					"label": "快报",
					"value": "kb"
				},
				{
					"label": "短信",
					"value": "dx"
				}
			]
		},
		{
			"format": "YYYY-MM-DD",
			"label": "事发/接警时间",
			"columnRatio": 3,
			"name": "incidentTime",
			"type": "input-date-range",
			"value": "${YEAR(NOW())}-1-1,${YEAR(NOW())}-12-31"
		}
	]
}

tree-select

树形选择器

{
	"columnRatio": 2,//这个配置可以将当前行平分为12格(Group组件)
	"initiallyOpen": false,//默认是否展开所有子节点(InputTree)
	"label": "事发地点",
	"className": "xysd-grid-scroll-select",
	"multiple": true,//多选
	"name": "siteTypeIds",//这是后端接口参数名
	"searchable": true,//支持搜索，这里的搜索只是在后端返回值的基础上进行数据的查找，不会走后端接口(Select组件)
	"selectMode": "tree",//搜索之后下拉项按照属性结构展示(Select组件)
	"showOutline": true,//控制是否显示展开线(InputTree组件)
	"source": {//配置后端接口
		"method": "get",
		"url": "/zbxxgl/api/sysdatas/getdict/tree/bytype?dictType=zbxtshudi&hidden=0"
	},
	"type": "tree-select",
	"unfoldedLevel": 2,//层级比较多，可以指定展开指定的层级(InputTree组件)
	"hideNodePathLabel": true,//这个可以控制选中的节点是否已全层级的方式显示，true为只显示所选当前节点
	"onlyLeaf": true,//只能选择子节点
	"onlyChildren": true//只会显示最末层级节点
}
//其他一些通用属性参考InputTree组件

Select

选择器

{
	"label": "敏感身份",
	"columnRatio": 3,
	"multiple": true,//多选
	"checkAll": true,//全选
	"name": "identityTypeIds",//后端接口参数
	"source": {//后端接口
		"method": "get",
		"url": "/zbxxgl/api/sysdatas/getdict/bytype?dictType=zbxtmgsf"
	},
	"type": "select",
	"selectMode":"tree",//下拉项展示格式tree是树形格式，group 分组形式，table表格格式
	"clearable":true//单选模式下是否可以清空
}

{
	"label": "受伤人数",
	"columnRatio": 2,
	"type": "select",
	"clearable": true,
	"name": "injuredNumWay",
	//也可以通过options属性指定下拉项
	"options": [
		{
			"label": ">",
			"value": ">"
		},
		{
			"label": "<",
			"value": "<"
		},
		{
			"label": "=",
			"value": "="
		},
		{
			"label": ">=",
			"value": ">="
		},
		{
			"label": "<=",
			"value": "<="
		}
	]
}

其他属性参考
属性表

InputDateRange

日期范围选择器

{
	"type": "input-date-range",
	"name": "reportTime",
	"label": "首报时间",
	"columnRatio": 3,
	"format": "YYYY-MM-DD",//传参数据格式
	"displayFormat":"YYYY-MM-DD"//日期显示格式
	"placeholder":"请选择日期"//占位符
}
{
	"format": "YYYY-MM-DD",
	"label": "事发/接警时间",
	"columnRatio": 3,
	"name": "incidentTime",
	"type": "input-date-range",
	"value": "${YEAR(NOW())}-1-1,${YEAR(NOW())}-12-31"//value可以设置默认值，也可以通过函数设置默认值
}

属性表

inputGroup

输入框组合

{
	"type": "input-group",
	"className": "xysd-pubquery-searchKeyWords",
	"body": [
		{
			"label": "",
			"name": "keyWords",
			"type": "input-text",
			"placeholder": "请输入信息标题、内容相关的关键字检索。多关键词，、；隔开"
		},
		{
			"label": "查询",
			"type": "button",
			"icon": "fa fa-search",
			"level": "primary",
			"align": "right",
			"size": "lg",
			"onEvent": {
				"click": {
					"actions": [
						{
							"actionType": "submit",
							"componentId": "filterForm"
						}
					]
				}
			}
		}
	]
}

Grid

水平分栏
这里主要就是使用分栏 md 属性

{
	"type": "grid",
	"className": "xysd-grid-query-input",
	"columns": [
		{
			"md": 8,
			"body": [
				{
					"type": "input-group",
					"className": "xysd-pubquery-searchKeyWords",
					"body": [
						{
							"label": "",
							"name": "keyWords",
							"type": "input-text",
							"placeholder": "请输入信息标题、内容相关的关键字检索。多关键词，、；隔开"
						},
						{
							"label": "查询",
							"type": "button",
							"icon": "fa fa-search",
							"level": "primary",
							"align": "right",
							"size": "lg",
							"onEvent": {
								"click": {
									"actions": [
										{
											"actionType": "submit",
											"componentId": "filterForm"
										}
									]
								}
							}
						}
					]
				}
			]
		},
		{
			"md": 4,
			"body": [
				{
					"type": "tpl",
					"tpl": "<div class='xysd-pubquery-moreQuery-btn' οnclick='handleCollapse(`xysd-pubquery-moreQuery`,`xysd-pubquery-moreQuery-ss`)'>更多查询</div>"
				}
			]
		}
	]
}

Page

Page 组件是 amis 页面 JSON 配置中顶级容器组件，是整个页面配置的入口组件

{
	"type": "page",
	"title": "离京报备登记",//标题，在页面的左上角
	"body": {
		"type": "service",//引用外部的一个json文件
		"schemaApi": {
			"url": "/zbxxgl/amis/fetchSchema",
			"data": {
				"path": "#/pc/html/ljbb/dj"
			},
			"method": "post"
		}
	},
	"id": "u:88fac01c5570",
	"asideResizor": false,//页面的边栏区域宽度是否可调整
	"pullRefresh": {//下拉刷新配置（仅用于移动端）
		"disabled": true
	},
	"regions": [//定义页面整体分布 头，身体，底部
		"body",
		"header",
		"toolbar"
	],
	"toolbar": [//往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部
		{//这个是报备记录查询
			"label": "",
			"type": "button",
			"className": "btn-bbjlcx",
			"icon": "",
			"iconClassName": "text-white text-xl",
			"onEvent": {
				"click": {
					"weight": 0,
					"actions": [
						{
							"args": {
								"url": "/zbxxgl/pc/index.html#/pc/html/ljbb/bsdw_ljcx"
							},
							"actionType": "url",
							"blank": false
						}
					]
				}
			}
		},
		{//这个是点击跳转首页
			"label": "",
			"type": "button",
			"className": "btn-backhome",
			"icon": "fa fa-times-circle",
			"iconClassName": "text-white text-xl",
			"onEvent": {
				"click": {
					"weight": 0,
					"actions": [
						{
							"args": {
								"url": "/zbxxgl/pc/index.html#/pc/bsdw/portal"
							},
							"actionType": "url",
							"blank": false
						}
					]
				}
			}
		}
	]
}

效果图

在这里插入图片描述

Service 功能型容器

Service组件就是专门为该类组件而生，它的功能是：配置初始化接口，进行数据域的初始化，然后在Service内容器中配置子组件，这些子组件通过数据链的方法，获取Service所拉取到的数据

//这是在一个页面中嵌入service组件的定义
{
	"type": "service",
	"schemaApi": {//用来获取远程 Schema 接口地址
		"url": "/zbxxgl/amis/fetchSchema",
		"data": {
			"path": "#/pc/html/ljbb/dj"
		},
		"method": "post"
	}
}
//这个是上面service组件的实现
{
	"type": "service",
	"api": {//初始化数据域接口地址
		"method": "get",
		"url": "/zbxxgl/api/leaveStation/getCurrentIsSldParty"
	},
	"body": [
		
	]
}

Form

主要作用是提交或者展示表单数据

{
	"type": "form",
	"panelClassName": "form-dj",
	"debug": false,//调试
	"id": "myForm",
	"title": "",
	"initApi": {//初始化数据
		"method": "get",
		"url": "/zbxxgl/api/leaveStation/get?id=${id}"
	},
	"body": [
		{
			"type": "service",
			"api": "/zbxxgl/api/leaveStation/getInfo?dataKeys=leaveUser",
			"body": [
				{
					"type": "hidden",
					"id": "sccg",
					"name": "sccg",
					"value": false
				},
				{
					"type": "grid",
					"columns": [
						{
							"md": 4,
							"body": []
						},
						{
							"body": []
						}
					]
				}
			]
		}
	],
	"mode": "horizontal",//表单显示方式 normal inline horizontal
	"actions": [//表单行为 按钮
		{
			"type": "button",
			"label": "上报",
			"size": "lg",
			"block": false,
			"actionType": "submit",
			"api": {
				"url": "/zbxxgl/api/leaveStation/report",
				"method": "post",
				"messages": {
					"success": "成功",
					"failed": "失败"
				}
			},
			"level": "primary",
			"visibleOn": "${ privilegeDTO.report}",
			"confirmText": "是否确认上报？上报后信息无法删除！"
		}
	]
}

属性表

Hidden

对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 hidden 组件

{
	"type": "service",
	"api": "/zbxxgl/api/leaveStation/getInfo?dataKeys=leaveUser",
	"body": [
		{
			"type": "hidden",
			"id": "sccg",
			"name": "sccg",
			"value": false
		}
	]
}

Tpl 模板

{
	"type": "tpl",
	"className": "method-title-sub",
	"tpl": "方式一：智能填写"
}

{
	"type": "tpl",
	"className": "method-content",
	"style": {
		"margin-bottom": "10px"
	},
	"tpl": "填写电子版离京外出审批表（模板可通过本系统下载），履行线下请假审批程序，领导签批后，将已填写的电子版审批表上传至系统，系统自动识别表格内容至右侧在线表单，核对修改完善表单信息后，在审批信息处注明“X月X日由XX领导批准”（无需提交离京报备表及审批证明材料扫描件），提交上报。"
}

divider 分割线

{
	"type": "divider",
	"title": "Text",
	"titlePosition": "left",
	"color": "red",
	"lineStyle": "dashed",
	"direction": "vertical"
}

{
	"type": "divider",
	"title": "Text",
	"titlePosition": "center",
	"color": "blue",
	"lineStyle": "solid",
	"direction": "horizontal",
	"style": {
		"margin": "0px"
	}
}

在这里插入图片描述

button 按钮

button 实际上是 action 的别名，更多用法见 action

"actions":[
	{
		"type": "button",
		"label": "导出审批表",
		"hiddenOn": "${sccg}",
		"visibleOn": "${oneIdentyQuery==1 || privilegeDTO.isDcztZBS}",
		"id": "dcsb_button",
		"size": "lg",
		"level": "primary",
		"actionType": "download",
		"required": [],
		"api": {
			"method": "post",
			"url": "/zbxxgl/api/leaveStation/export?orgIdentityTypeId=${oneOrgIdentityTypeId}",
			"messages": {
				"success": "成功",
				"failed": "失败"
			}
		}
	},
	{
		"type": "button",
		"label": "导出审批表",
		"visibleOn": "${oneIdentyQuery==0 && !privilegeDTO.isDcztZBS}",
		"size": "lg",
		"level": "primary",
		"onEvent": {
			"click": {
				"actions": [
					{
						"actionType": "dialog",
						"args": {
							"dialog": {
								"type": "dialog",
								"id": "dialogSubmit",
								"title": "请选择审批表模板",
								"className": "xysd-dialog-padding",
								"actions": [],
								"body": [
									{
										"type": "form",
										"id": "mergeForm",
										"body": [
											{
												"type": "select",
												"name": "orgIdentityTypeId",
												"source": "/zbxxgl/api/leaveStation/getMoreIdentity",
												"required": true,
												"label": false
											},
											{
												"type": "wrapper",
												"className": "flex justify-end xysd-handle-btn-margin",
												"body": [
													{
														"type": "button",
														"label": "确认",
														"level": "primary",
														"onEvent": {
															"click": {
																"actions": [
																	{
																		"actionType": "custom",
																		"script": "window.amisScoped.getComponentById('mergeForm').validate().then(function(res){if(res){console.log(event.data);doAction([{\t\"actionType\": \"download\",\t\"args\": {\"api\": {\t\"method\": \"post\",\t\"url\": \"/zbxxgl/api/leaveStation/export\",\t\"messages\": {\t\t\"success\": \"成功\",\t\t\"failed\": \"失败\"\t},\t\"data\": {\t\t...event.data.__super.__super\t,\t\t\"orgIdentityTypeId\": event.data.orgIdentityTypeId}}}},{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"actionType\": \"cancel\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"componentId\": \"dialogSubmit\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}])}})"
																	}
																]
															}
														}
													},
													{
														"type": "button",
														"label": "取消",
														"onEvent": {
															"click": {
																"actions": [
																	{
																		"actionType": "cancel",
																		"componentId": "dialogSubmit"
																	}
																]
															}
														}
													}
												]
											}
										]
									}
								]
							}
						}
					}
				]
			}
		}
	},
	{
		"type": "submit",
		"label": "${privilegeDTO.isDcztZBS ? '保存': '暂存'}",
		"size": "lg",
		"visibleOn": "${ privilegeDTO.save}",
		"api": {
			"url": "/zbxxgl/api/leaveStation/save",
			"method": "post",
			"dataType": "json",
			"messages": {
				"success": "成功",
				"failed": "失败"
			}
		},
		"level": "primary"
	},
	{
		"type": "button",
		"label": "上报",
		"size": "lg",
		"block": false,
		"actionType": "submit",
		"api": {
			"url": "/zbxxgl/api/leaveStation/report",
			"method": "post",
			"messages": {
				"success": "成功",
				"failed": "失败"
			}
		},
		"level": "primary",
		"visibleOn": "${ privilegeDTO.report}",
		"confirmText": "是否确认上报？上报后信息无法删除！"
	}
]

Action 行为按钮

一般type都设置为button，所以这里就已type是button为例

{
	"type": "button",
	"columnRatio": 12,
	"className": "method-btn",
	"level":"success",//如果对于按钮的样式没有特别要求可以使用level 取值 primary secondary info success warning danger light
	"label": "下载离京外出审批表模板",
	"icon": "fas fa-arrow-down",//图标
	"style": {//样式
		"margin-bottom": "15px"
	},
	"actionType": "download",//按钮行为  这里是下载
	"api": {//后端接口
		"url": "/zbxxgl/api/leaveStation/template",
		"method": "get"
	}
}

{
	"label": "",
	"type": "button",
	"className": "btn-backhome",
	"icon": "fa fa-times-circle",
	"iconClassName": "text-white text-xl",
	"onEvent": {//click事件 可以跳转到首页 指定的页面
		"click": {
			"weight": 0,
			"actions": [
				{
					"args": {
						"url": "/zbxxgl/pc/index.html#/pc/bsdw/portal"
					},
					"actionType": "url",
					"blank": false
				}
			]
		}
	}
}