百度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