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>"
				}
			]
		}
	]
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/343799.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

多协议转BACnet网关BA110

多协议转BACnet网关BA110

随着通讯技术和控制技术的发展&#xff0c;为了实现楼宇的高效、智能化管理&#xff0c;集中监控管理已成为楼宇智能管理发展的必然趋势。在此背景下&#xff0c;高性能的楼宇暖通数据传输解决方案——协议转换网关应运而生&#xff0c;广泛应用于楼宇自控和暖通空调系统应用中…
阅读更多...
【SGX系列教程】（一）Intel-SGX SDK在ubuntu22.04下安装全流程

【SGX系列教程】（一）Intel-SGX SDK在ubuntu22.04下安装全流程

文章目录 一.概述1.1 SGX三大组件1.2 SGXDataCenterAttestationPrimitives 二.安装流程2.1 检查服务器是否支持SGX2.2 sgx硬件/软件开启方法2.3 sgx dirver驱动安装&#xff1b;2.3.1 linux-sgx-driver驱动程序2.3.2 Intel SGX Support in the Linux Kernel&#xff08;linux内…
阅读更多...
第11次修改了可删除可持久保存的前端html备忘录：将样式分离，可以自由秒添加秒删除样式

第11次修改了可删除可持久保存的前端html备忘录：将样式分离，可以自由秒添加秒删除样式

第11次修改了可删除可持久保存的前端html备忘录&#xff1a;将样式分离&#xff0c;可以自由秒添加秒删除样式 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"…
阅读更多...
openssl3.2 - 检查rsa证书和私钥是否匹配(快速手搓一个工具)

openssl3.2 - 检查rsa证书和私钥是否匹配(快速手搓一个工具)

文章目录 openssl3.2 - 检查rsa证书和私钥是否匹配(快速手搓一个工具)概述效果笔记编程环境界面控件的设置增加文件拖拽的类RSA证书和key是否匹配的实现在程序中加入环境变量备注备注END openssl3.2 - 检查rsa证书和私钥是否匹配(快速手搓一个工具) 概述 在学习openssl官方的…
阅读更多...
小程序技术实践：快速开发适配鸿蒙的App

小程序技术实践：快速开发适配鸿蒙的App

今年&#xff0c;在中国&#xff0c;被各大媒体和开发者称为“鸿蒙元年”。 在2023年底就有业内人士透露&#xff0c;华为明年将推出不兼容安卓的鸿蒙版本&#xff0c;未来IOS、鸿蒙、安卓将成为三个各自独立的系统。 果不其然&#xff0c;执行力超强的华为&#xff0c;与202…
阅读更多...
latex加批注框

latex加批注框

在Latex中加批注框&#xff1a; 效果如下&#xff1a; 方法 在对应位置加\todo{} As shown in \cref{fig:edit}, \todo{concrete description of example}.
阅读更多...
SpringCloud Bus动态刷新全局广播

SpringCloud Bus动态刷新全局广播

文章目录 代码地址配置项目配置修改测试 SpringCloud Bus动态刷新定点通知 代码地址 地址:https://github.com/13thm/study_springcloud/tree/main/days11_%20Bus 配置项目 必须先具备良好的RabbitMQ环境先 演示广播效果&#xff0c;增加复杂度&#xff0c;再以3355为模板再…
阅读更多...
手势识别MATLAB代码

手势识别MATLAB代码

手势识别是智能设备常用的需求, 下面我们用MATLAB来识别手部的形态: 主程序main.m clc;clear all;close all;%清除命令行和窗口 imimread(DSC05815.JPG); [skin,bwycbcr,w,h] hand_segmentation(im); im1bwycbcr; % se strel(ball,[1 1 1;1 1 1;1 1 1]); im1 imdilate(im…
阅读更多...
Spring 声明式事务 @Transactional（详解）【面试重点，小林出品】

Spring 声明式事务 @Transactional（详解）【面试重点，小林出品】

关于 Transactional 注解的基本使用&#xff0c;推荐看Spring 声明式事务 Transactional&#xff08;基本使用&#xff09; 概述 本篇博客主要学习 Transactional 注解当中的三个常⻅属性: 1. rollbackFor:异常回滚属性.指定能够触发事务回滚的异常类型.可以指定多个异常类型 …
阅读更多...
深度学习 Day27——J6ResNeXt-50实战解析

深度学习 Day27——J6ResNeXt-50实战解析

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制&#x1f680; 文章来源&#xff1a;K同学的学习圈子 文章目录 前言1 我的环境2 pytorch实现DenseNet算法2.1 前期准备2.1.1 引入库2.1.2 设…
阅读更多...
清越 peropure·AI 国内版ChatGP新功能介绍

清越 peropure·AI 国内版ChatGP新功能介绍

当OpenAI发布ChatGPT的时候,没有人会意识到,新一代人工智能浪潮将给人类社会带来一场眩晕式变革。其中以ChatGPT为代表的AIGC技术加速成为AI领域的热门发展方向,推动着AI时代的前行发展。面对技术浪潮,清越科技(PeroPure)立足多样化生活场景、精准把握用户实际需求,持续精确Fin…
阅读更多...
论文阅读2---多线激光lidar内参标定原理

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…
阅读更多...
微信小程序（十）表单组件（入门）

微信小程序（十）表单组件（入门）

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.type 属性指定表单类型 2.placeholder 属性指定输入框为空时的占位文字 源码&#xff1a; form.wxml <!-- 提前准备好的布局结构代码 --> <view class"register"><view class"…
阅读更多...
扩散模型公式推导

扩散模型公式推导

这篇文章将尝试推导扩散模型 DDPM 中涉及公式&#xff0c;主要参考两个 B 站视频&#xff1a; 大白话AI狗中赤兔 本文所用 PPT 元素均来自 UP 主&#xff0c;狗中赤兔和大白兔AI&#xff0c;特此感谢。 在证明开始&#xff0c;我们需要先对扩散模型有一个整体的认知。扩散模型…
阅读更多...
计算机网络实验一：网线制作

计算机网络实验一：网线制作

目录 实验一&#xff1a;网线制作 1.1 实验目的 1.2 实验步骤 1.3 实验总结 实验一&#xff1a;网线制作 1.1 实验目的 &#xff08;1&#xff09;熟悉5类双绞线的标准&#xff1b; &#xff08;2&#xff09;练习压线钳、测线仪等工具的使用&#xff1b; &#xff08;3…
阅读更多...
让计算机能够认识 函数 的数学表达式

让计算机能够认识 函数 的数学表达式

【mathematical-expression】让计算机认识 数学函数 在计算机中&#xff0c;我们如果想要让数学中的函数&#xff0c;能够像编程中的函数一样发挥作用&#xff0c;这是比较麻烦的一种操作&#xff0c;例如 1 f(20) 3 这个数学表达式中&#xff0c;针对函数的提取与解析等需求…
阅读更多...
html火焰文字特效

html火焰文字特效

下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5火焰文字特效DEMO演示</title><link rel"stylesheet" href"css/style.css" media"screen" type&quo…
阅读更多...
有效的括号[简单]

有效的括号[简单]

>优质博文&#xff1a;IT-BLOG-CN 一、题目 给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串s&#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 【1】左括号必须用相同类型的右括号…
阅读更多...
Deployment介绍

Deployment介绍

1、Deployment介绍 Deployment一般用于部署公司的无状态服务。 格式&#xff1a; apiVersion: apps/v1 kind: Deployment metadata: name: nginx-deployment labels: app: nginx spec: replicas: 3 selector: matchLabels: app: nginx template: metada…
阅读更多...
【Redis】网络模型

【Redis】网络模型

前言 Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的高性能键值对存储系统&#xff0c;广泛用于各种网络应用中作为数据库、缓存和消息代理。Redis的网络模型是其高性能的关键因素之一&#xff0c;它涉及到多个方面&#xff0c;包括内存管理、事件处理、…
阅读更多...
最新文章

Copyright @ 2022~2023