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": "更多查询"
}
]
}
]
},
{
"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可以设置默认值，也可以通过函数设置默认值
}
属性表