百度amis框架经验分享
官方文档
amis - 低代码前端框架
这篇文章讲了amis的设计
为什么说百度AMIS框架是一个优秀的设计_百度前端框架-CSDN博客
学习方法：
最好的学习方法就是GPT+官方文档
不要去很大力气通读官方文档，大概浏览一遍就行， 以你自己的任务为导向， 不懂的先让GPT帮你生成配置文件，然后看不懂的对照官方文档去理解。
有几个坑要注意：
0） VUE框架里面不要通过npm install来使用amis，那样会把当前项目的环境搞乱。因为amis依赖很多包。 最好的方式是通过sdk的方式来使用。 本文档最后会给一个最佳实践,将sdk包放入到前端项目/public目录下就可以。
https://github.com/baidu/amis/releases/download/6.8.0/jssdk.tar.gz
1） 控制 AMIS 组件的显示状态
visible: 静态布尔值控制显隐。
visibleOn: 基于表达式动态控制显示。
hiddenOn: 基于表达式动态控制隐藏。
如果在表格中使用visibleOn，要确保字段在界面上有展示（隐藏也算）
"api": `delete:${prefix2}/sz/info/`+"${id}",
如果要对表的字段做引用就用${xx}，把这个当一个字符串对待，如果要引用外部变量，那就要放在``表达式里面。
2）批量删除按钮，记得在
"headerToolbar": [
{
"type": "bulkActions"
}
]里面加上，
还有
"bulkActions": [
{
"label": "批量删除",
"visible": true,
"actionType": "ajax",
"api": `delete:${prefix2}/sz/info/`,
"confirmText": "确定要批量删除选中的记录吗？"
}
],
3） 如果是父子表，注意看业务情况是否要关闭 "canAccessSuperData": false
4） 修改表单的时候，需要2个URL,分别是api和initapi , api参数还可以拆分，
"type": "form",
"api": `put:${prefix2}/sz/info`,
"initApi": `get:${prefix2}/sz/info/`+"${id}",
"canAccessSuperData":false,
5） crud上方的检索条件，不要用定义在外面的表单来实现，要不检索的时候，会重新刷页面。
crud上方的检索条件，用自带的filter就可以实现。
6） crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false
7） 配置一下下拉列表
{
"label": "选项",
"type": "select",
"name": "select",
"source": "/amis/api/mock2/form/getOptions?waitSeconds=1"
}
8） 有父子关系的表格，在返回的列表数据json串里面加上children，就可以形成父子关系，就可以做成树形表。
9） 表格展示的时候，如果某个值需要翻译怎么处理？
{
"name": "isShow",
"label": "是否展示",
"type": "mapping",
"map": {
"1": "展示",
"2": "隐藏"
}
},
还可以远程拉取字典
{
"type": "mapping",
"name": "type",
"label": "映射",
"source": "/amis/api/mapping"
}
帮助文档里面专门将这个的，有很多例子： https://aisuda.bce.baidu.com/amis/zh-CN/components/mapping
10) 关于文件上传，有专门的图片上传type='input-image'
{'type': 'input-text','name': 'fileId' ,'visible':false},
{'type': 'input-image', 'name': 'files',"frameImage":'${fileId}', "fileField":"files",'initAutoFill':false, "accept": "image/*", "receiver": `${FILEBASEURL}/uploadOneFile` ,'label': '头像', "autoFill": {"fileId": "${url}"}},
name的默认值是file,但如果服务器是通过files字段来接收，那么就要加上 "fileField":"files"来指示。
frameImage属性代表修改的时候，底图会是上次上传的图片。
initAutoFill属性很有用，修改页面这个要设置为false，要不然修改的时候看不到图片，因为默认进来没有图片，autoFill填充会被冲掉。
- 官网文档有检索功能，不知道的功能可以通过检索查找。
- 不要小看数据映射。
数据映射支持用户通过${xxx}或$xxx获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 api 请求数据体格式等场景。
path: 指定筛选的模板，默认为&，即返回原数据
11 下拉列表的格式，在table里面的source也可以使用这个格式，字典将自动翻译。
/res/basic/getResList2返回值
{
"msg": "",
"data": [
{
"label": "花溪公园",
"value": "123"
}, ],
"status": 0
}
{"type": "mapping", 'label':'公园名称' ,'name':'resCode' , 'source': `${prefix2}/res/basic/getResList2`},
12） 如果是一个复杂的逻辑要处理，使用模板引擎来解析，不要使用render，render试了一下，还是不能达到效果。
{ 'type': 'tpl', 'name': 'fileIds', 'label': '培训计划附件' , "tpl": `
<%
console.log(data.fileIds);
if (data.fileIds) {
var urlArray = data.fileIds.split(',');
for (var i = 0; i < urlArray.length; i++) { %>
<a href="<%= urlArray[i] %>" target="_blank"><%= urlArray[i].split('/').pop() %></a><br/>
<% }
} %>
`},
13 如果select下拉有偏移，跑到其他地方了。 类似以下这种。
加上这个属性
"className": "isshow-dropdown",
"popOverContainerSelector": '.isshow-dropdown'
一个最佳实践的例子
assessment-plan-crud.vue
<template>
<div class="app-container" ref="amisRoot">
</div>
</template>
<script>
import crudjson from './assessment-plan-crud.ts'
import '@/views/manage/sz/sz.css'
export default {
mounted() {
const amis = amisRequire('amis/embed');
const amisScoped = amis.embed(this.$refs.amisRoot, crudjson)
}
}
</script>
assessment-plan-crud.ts
import getprefix2 from '@/views/manage/sz/util/common'
const prefix2 = getprefix2()
const crudjson ={
"type": "page",
"body": [
{
"type": "crud",
"id": "mytable",
"name": "mytable",
"syncLocation": false,
"filter": {
"title": "",
"type": "flex",
"justify": "start", // 控制对齐方式
"body": [
{
"type": "select",
"name": "resCode",
"label": "水库名称",
"placeholder": "请输入水库名称",
"clearable": true,
"source": `${prefix2}/res/basic/getResList2`,
},
{
"type": "input-text",
"name": "assessmentPlanName",
"label": "考核计划名称",
"placeholder": "请输入考核计划名称",
"clearable": true
},
{
"type": "input-text",
"name": "assessmentUnit",
"label": "考核单位",
"placeholder": "请输入考核单位",
"clearable": true
},
{
"type": "select",
"name": "isShow",
"label": "是否展示",
"options": [
{
"label": "展示",
"value": "1"
},
{
"label": "隐藏",
"value": "2"
}
],
"placeholder": "请选择展示隐藏",
"clearable": true
},
{
"type": "button",
"label": "查询",
"level": "primary",
"actionType": "submit",
"className": "ml-2"
},
{
"type": "button",
"label": "重置",
"actionType": "reset",
"className": "ml-2"
}
]
},
"bulkActions": [
{
"label": "批量删除",
"visible": true,
"actionType": "ajax",
"api": `delete:${prefix2}/sz/assessmentPlan/`+"${ids}",
"confirmText": "确定要批量删除选中的记录吗？"
}
],
"headerToolbar": [
{
"type": "button",
"label": "新增",
"level": "primary",
"actionType": "dialog",
"dialog": {
"title": "新增考核",
"body": {
"type": "form",
"api": `post:${prefix2}/sz/assessmentPlan`,
"controls": [
{
"type": "select",
"name": "resCode",
"label": "水库名称",
"clearable": true,
"source": `${prefix2}/res/basic/getResList2`,
},
{
"type": "text",
"name": "assessmentPlanName",
"label": "考核计划名称"
},
{
"type": "number",
"name": "assessmentPlanPassPerson",
"label": "考核通过人数"
},
{
"type": "number",
"name": "assessmentPlanFailedPerson",
"label": "考核未通过人数"
},
{
"type": "input-text",
"name": "assessmentUnit",
"label": "考核单位"
},
{
"type": "text",
"name": "id",
"visible": false,
"value": "${id}",
"label": "id"
}
]
}
}
},
"export-excel", "bulkActions", "pagination"
],
"api": {
"url": `${prefix2}/sz/assessmentPlan/list`,
"method": "get"
},
"columns": [
{
"name": "index",
"label": "序号",
"type": "tpl",
"tpl": "${index + 1}",
"fixed": "left",
"width": 50
},
{
"name": "assessmentPlanName",
"label": "考核计划名称",
"type": "text"
},
{
"name": "assessmentPlanPassPerson",
"label": "考核计划通过人数",
"type": "text"
},
{
"name": "assessmentPlanFailedPerson",
"label": "考核计划未通过人数",
"type": "text",
},
{
"name": "assessmentUnit",
"label": "考核单位",
"type": "text"
},
{
"type": "text",
"visible":false,
"name": "id",
"label": "id",
},
{
"type": "operation",
"label": "操作",
"buttons": [
{
"type": "button",
"label": "修改",
"actionType": "dialog",
"dialog": {
"title": "修改考核",
"body": {
"type": "form",
"api": `put:${prefix2}/sz/assessmentPlan`,
"initApi": `get:${prefix2}/sz/assessmentPlan/`+"${id}",
"canAccessSuperData":false,
"controls": [
{
"type": "select",
"name": "resCode",
"label": "水库名称",
"clearable": true,
"source": `${prefix2}/res/basic/getResList2`,
},
{
"type": "text",
"name": "assessmentPlanName",
"label": "考核计划名称"
},
{
"type": "number",
"name": "assessmentPlanPassPerson",
"label": "考核通过人数"
},
{
"type": "number",
"name": "assessmentPlanFailedPerson",
"label": "考核未通过人数"
},
{
"type": "input-text",
"name": "assessmentUnit",
"label": "考核单位"
},
{
"type": "text",
"name": "id",
"visible": false,
"value": "${id}",
"label": "id"
}
]
}
}
},
{
"type": "button",
"label": "删除",
"level": "danger",
"actionType": "ajax",
"confirmText": "确定要删除该条记录吗？",
"api": `delete:${prefix2}/sz/assessmentPlan/`+"${id}",
}
]
}
]
}
]
}
export default crudjson
