Nop

前端配置

1. input-tree缺省设置了最大高度 max-height:300px

{
  type: 'input-tree',
  treeContainerClassName: 'h-full'
}

h-full可以去除max-height设置

2. 设置page的aside区域的宽度

{
  type: 'page',
  aside: [{
    type : 'input-text'
  }],
  asideResizor: true
  asideClassName: w-60
}

可配置的宽度类参见 amis-ui/helper/sizing/_width.scss

Class Properties
w-px width: 0.0625rem
w-0 width: 0
w-none width: 0
w-0.5 width: 0.125rem
w-1 width: 0.25rem
w-1.5 width: 0.375rem
w-2 width: 0.5rem
w-2.5 width: 0.625rem
w-3 width: 0.75rem
w-3.5 width: 0.875rem
w-4 width: 1rem
w-5 width: 1.25rem
w-6 width: 1.5rem
w-7 width: 1.75rem
w-8 width: 2rem
w-9 width: 2.25rem
w-10 width: 2.5rem
w-11 width: 2.75rem
w-12 width: 3rem
w-14 width: 3.5rem
w-16 width: 4rem
w-18 width: 4.5rem
w-20 width: 5rem
w-24 width: 6rem
w-28 width: 7rem
w-32 width: 8rem
w-36 width: 9rem
w-40 width: 10rem
w-44 width: 11rem
w-48 width: 12rem
w-52 width: 13rem
w-56 width: 14rem
w-60 width: 15rem
w-64 width: 16rem
w-72 width: 18rem
w-80 width: 20rem
w-96 width: 24rem
w-auto width: auto
w-1x width: 1em
w-2x width: 2em
w-3x width: 3em
w-1/2 width: 50%
w-1/3 width: 33.333333%
w-2/3 width: 66.666667%
w-1/4 width: 25%
w-2/4 width: 50%
w-3/4 width: 75%
w-1/5 width: 20%
w-2/5 width: 40%
w-3/5 width: 60%
w-4/5 width: 80%
w-1/6 width: 16.666667%
w-2/6 width: 33.333333%
w-3/6 width: 50%
w-4/6 width: 66.666667%
w-5/6 width: 83.333333%
w-1/12 width: 8.333333%
w-2/12 width: 16.666667%
w-3/12 width: 25%
w-4/12 width: 33.333333%
w-5/12 width: 41.666667%
w-6/12 width: 50%
w-7/12 width: 58.333333%
w-8/12 width: 66.666667%
w-9/12 width: 75%
w-10/12 width: 83.333333%
w-11/12 width: 91.666667%
w-full width: 100%
w-screen width: 100vw
w-min width: min-content
w-max width: max-content
min-w-0 min-width: 0px
min-w-full min-width: 100%
min-w-min min-width: min-content
min-w-max min-width: max-content
max-w-none max-width: none
max-w-0 max-width: 0rem
max-w-xs max-width: 20rem
max-w-sm max-width: 24rem
max-w-md max-width: 28rem
max-w-lg max-width: 32rem
max-w-xl max-width: 36rem
max-w-2xl max-width: 42rem
max-w-3xl max-width: 48rem
max-w-4xl max-width: 56rem
max-w-5xl max-width: 64rem
max-w-6xl max-width: 72rem
max-w-7xl max-width: 80rem
max-w-full max-width: 100%
max-w-min max-width: min-content
max-w-max max-width: max-content
max-w-prose max-width: 65ch

Service调用返回string类型，希望设置到上下文中成为一个变量x

{
  type: 'service',
  api: {
    url: "xxx"
    responseKey: "x"
  }
}

responseKey是Nop平台的ajaxFetch函数负责识别的，amis本身并不支持。

表达式

  • 可以通过表达式函数GETRENDERERDATA(id, path)和GETRENDERERPROP(id, path)分别获取指定组件的数据和属性。
  • http 请求动作执行结束后，后面的动作可以通过 ${responseResult}或$来获取请求响应结果

设置combo数据

  1. 需要给 combo 设置个 id 属性，用来给事件动作指定目标用。
  2. 弹窗按钮配置了数据映射 {comboIndex: “${index}”} 因为 crud 的行数据上也有 index 变量，派送动作时获取 index 变量是 crud 所在行的序号。所以弹出弹窗的时候，先把 combo 的序号赋值给 comboIndex
  3. crud 操作栏里面添加了个按钮，close: true 设置是让动作完成后关闭弹窗。
  4. 按钮里面添加了 onEvent 配置，click 时做 setValue 动作，并设置参数 index 为 ‘${comboIndex}’ 值为 ${&}。其中 {&} 是特殊语法，用来取整个上下数据。
{
  "type": "combo",
  "name": "combo",
  "id": "thecombo",
  "multiple": true,
  "value": [
    {
      "engine": ""
    }
  ],
  "items": [
    {
      "name": "engine",
      "type": "input-text"
    },
    {
      "label": "Copy",
      "type": "button",
      "actionType": "dialog",
      "size": "md",
      "dialog": {
        "title": "历史记录",
        "actions": [],
        "data": {
          "comboIndex": "${index}"
        },
        "body": [
          {
            "type": "crud",
            "api": "/amis/api/mock2/sample",
            "columns": [
              {
                "label": "Engine",
                "name": "engine"
              },
              {
                "type": "operation",
                "label": "操作",
                "buttons": [
                  {
                    "label": "复制",
                    "type": "button",
                    "close": true,
                    "onEvent": {
                      "click": {
                        "actions": [
                          {
                            "componentId": "thecombo",
                            "actionType": "setValue",
                            "args": {
                              "index": "${comboIndex}",
                              "value": "${&}"
                            }
                          }
                        ]
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      }
    }
  ]
}

将多个输入控件组织到一起，但是每个输入控件对应一个变量

 {
  "type": "input-group",
  "name": "input-group",
  "label": "输入组合校验",
  "body": [
    {
      "type": "input-text",
      "placeholder": "请输入长度不超过6的数字类型",
      "name": "group-input1",
      "label": "子元素一",
      "validations": {
        "isNumeric": true,
        "maxLength": 6
      }
    },
    {
      "type": "input-text",
      "placeholder": "请输入长度不少于5的文本",
      "name": "group-input2",
      "required": true,
      "validations": {
        "minLength": 5
      }
    }
  ]
}

API返回列表数据

返回列表数据时会normalizeApiResponseData函数会自动将列表包装为 {items:list}，这样确保返回的data在使用时始终是Map对象。

表格编辑

  • 行编辑时上下文环境中存在变量index，对应于当前行的下标
  • TableRow具有itemIndex属性
  • IRow.change(values)可以修改值
  • TableStore.getRowById(id)得到IRow
  • props.store.row可以得到当前行，store.rowIndex对应行下标

store操作

  • store.changeValue(‘x’,123)

调试

可以在onClick事件中插入debugger指令。

"onClick": "debugger; props.store.closeDialog()"

url中的参数

AMIS的设计中对于url中的参数存在特殊假定。比如 url: '/test?filter_type=1'，当picker控件的filter段中存在type过滤条件时，会覆盖url中的filter_type变量，需要放到data段中。

{
  url: '/test',
  data:{
    filter_type: 1
  }
}