当前位置： 首页 > article >正文

百度amis框架经验分享

article 2025/1/14 1:19:59

百度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填充会被冲掉。

  1. 官网文档有检索功能，不知道的功能可以通过检索查找。
  2. 不要小看数据映射。

数据映射支持用户通过${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

http://www.kler.cn/a/320457.html

相关文章：

  • 【微服务】SpringBoot 整合Redis实现延时任务处理使用详解
  • 《深度学习模型在鸿蒙分布式框架下的跨设备高效之旅》
  • SQL多表联查、自定义函数（字符串分割split）、xml格式输出
  • electron-vite使用vue-i18n，ts 检查报错上不存在属性“$t”
  • Qt_文件操作
  • 外观模式
  • DNS正向解析和反向解析的区别
  • 同声传译软件哪个好？试试这些免费的翻译工具
  • 探索 Web Speech API：实现浏览器语音识别与合成
  • Windows安装openssl开发库
  • Django 请求配置
  • EECS498 Deep Learning for Computer Vision （一）软件使用指南
  • 【STM32 HAL库】OLED显示模块
  • 【RabbitMQ 项目】服务端：路由交换模块
  • 详解HTTP/HTTPS协议
  • Centos7.9在K8s安装生产级别的分布式存储Rook+Ceph
  • 微深节能 堆取料机动作综合检测系统 格雷母线
  • nginx模块篇（四）
  • Tomcat后台弱口令部署war包
  • 深度学习电脑独显GPU占用一直0%解决方式
  • 任务管理与守护进程【Linux】
  • Git 分支管理全攻略：一篇博客带你玩转代码分支！
  • Redis缓存技术 基础第一篇（快速入门与安装部署）