Static 静态展示

用来在表单中，展示静态数据

基本用法

```schema: scope=”body” { “type”: “form”, “body”: [ { “name”: “static”, “type”: “static”, “label”: “静态展示”, “value”: “aaa” } ] }

  2. ## 数据域变量映射
  4. 除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量
  6. ```schema: scope="body"
  7. {
  8.     "type": "form",
  9.     "body": [
  10.         {
  11.             "type": "select",
  12.             "name": "select",
  13.             "label": "select",
  14.             "options": [
  15.                 {
  16.                     "label":"A",
  17.                     "value":"a"
  18.                 },
  19.                 {
  20.                     "label":"B",
  21.                     "value":"b"
  22.                 },
  23.                 {
  24.                     "label":"C",
  25.                     "value":"c"
  26.                 }
  27.             ]
  28.         },
  29.         {
  30.             "type": "static",
  31.             "name": "select",
  32.             "label": "选中的值是"
  33.         }
  34.     ]
  35. }

展示其他组件

支持通过配置type为static-xxx的形式，展示其他 非表单项 组件，例如：

```schema: scope=”body” { “type”: “form”, “body”: [ { “type”: “static-json”, “name”: “json”, “label”: “静态展示JSON”, “value”: { “a”: “aaa”, “b”: “bbb” } } ] }

  2. 理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：
  4. ```schema: scope="body"
  5. {
  6.     "type": "form",
  7.     "data": {
  8.         "id": 1,
  9.         "image": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3893101144,2877209892&fm=23&gp=0.jpg",
  10.         "images": [
  11.             {
  12.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  13.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg"
  14.             },
  15.             {
  16.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  17.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692942/d8e4992057f9.jpeg"
  18.             },
  19.             {
  20.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  21.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693148/1314a2a3d3f6.jpeg"
  22.             },
  23.             {
  24.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  25.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693379/8f2e79f82be0.jpeg"
  26.             },
  27.             {
  28.                 "image": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg@s_0,w_216,l_1,f_jpg,q_80",
  29.                 "src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395693566/552b175ef11d.jpeg"
  30.             }
  31.         ]
  32.     },
  33.     "api": "/api/mock2/saveForm?waitSeconds=2",
  34.     "title": "表单项静态展示",
  35.     "mode": "horizontal",
  36.     "body": [
  37.         {
  38.             "type": "static",
  39.             "label": "文本",
  40.             "value": "文本"
  41.         },
  42.         {
  43.             "type": "divider"
  44.         },
  45.         {
  46.             "type": "static-tpl",
  47.             "label": "模板",
  48.             "tpl": "自己拼接 HTML 取变量 \\${id}: ${id}"
  49.         },
  50.         {
  51.             "type": "divider"
  52.         },
  53.         {
  54.             "type": "static-date",
  55.             "label": "日期",
  56.             "value": 1593327764
  57.         },
  58.         {
  59.             "type": "divider"
  60.         },
  61.         {
  62.             "type": "static-datetime",
  63.             "label": "日期时间",
  64.             "value": 1593327764
  65.         },
  66.         {
  67.             "type": "divider"
  68.         },
  69.         {
  70.             "type": "static-mapping",
  71.             "label": "映射",
  72.             "value": 2,
  73.             "map": {
  74.                 "0": "<span class='label label-info'>一</span>",
  75.                 "1": "<span class='label label-success'>二</span>",
  76.                 "2": "<span class='label label-danger'>三</span>",
  77.                 "3": "<span class='label label-warning'>四</span>",
  78.                 "4": "<span class='label label-primary'>五</span>",
  79.                 "*": "<span class='label label-default'>-</span>"
  80.             }
  81.         },
  82.         {
  83.             "type": "divider"
  84.         },
  85.         {
  86.             "type": "static-progress",
  87.             "label": "进度",
  88.             "value": 66.66
  89.         },
  90.         {
  91.             "type": "divider"
  92.         },
  93.         {
  94.             "type": "static-image",
  95.             "label": "图片",
  96.             "name": "image",
  97.             "thumbMode": "cover",
  98.             "thumbRatio": "4:3",
  99.             "title": "233",
  100.             "imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda",
  101.             "popOver": {
  102.                 "title": "查看大图",
  103.                 "body": "<div class=\"w-xxl\"><img class=\"w-full\" src=\"${image}\"/></div>"
  104.             }
  105.         },
  106.         {
  107.             "type": "divider"
  108.         },
  109.         {
  110.             "type": "static-image",
  111.             "label": "图片自带放大",
  112.             "name": "image",
  113.             "thumbMode": "cover",
  114.             "thumbRatio": "4:3",
  115.             "title": "233",
  116.             "imageCaption": "jfe fjkda fejfkda fejk fdajf dajfe jfkda",
  117.             "enlargeAble": true,
  118.             "originalSrc": "${image}"
  119.         },
  120.         {
  121.             "type": "static-images",
  122.             "label": "图片集",
  123.             "name": "images",
  124.             "thumbMode": "cover",
  125.             "thumbRatio": "4:3",
  126.             "enlargeAble": true,
  127.             "originalSrc": "${src}"
  128.         },
  129.         {
  130.             "type": "divider"
  131.         },
  132.         {
  133.             "type": "static-json",
  134.             "label": "JSON",
  135.             "value": {
  136.                 "a": 1,
  137.                 "b": 2,
  138.                 "c": {
  139.                     "d": 3
  140.                 }
  141.             }
  142.         },
  143.         {
  144.             "type": "divider"
  145.         },
  146.         {
  147.             "type": "static",
  148.             "label": "可复制",
  149.             "value": "文本",
  150.             "copyable": {
  151.                 "content": "内容，支持变量 ${id}"
  152.             }
  153.         },
  154.         {
  155.             "type": "divider"
  156.         },
  157.         {
  158.             "type": "static",
  159.             "name": "text",
  160.             "label": "可快速编辑",
  161.             "value": "文本",
  162.             "quickEdit": true
  163.         }
  164.     ]
  165. }

想要调整展示组件的配置，请查阅相应组件的文档。

快速编辑

通过 quickEdit 开启快速编辑功能，比如

```schema: scope=”body” { “type”: “form”, “body”: [ { “name”: “static”, “type”: “static”, “label”: “静态展示”, “value”: “aaa”, “quickEdit”: { “type”: “number” } } ] }

  2. 其他配置项参考 [快速编辑](../crud#快速编辑)
  4. ## 弹出框（popOver）
  6. 可以通过 `popOver` 属性配置弹出框
  8. ```schema: scope="body"
  9. {
  10.     "type": "form",
  11.     "body": [
  12.         {
  13.             "name": "static",
  14.             "type": "static",
  15.             "label": "静态展示",
  16.             "value": "aaa",
  17.              "popOver": {
  18.                 "body": {
  19.                     "type": "tpl",
  20.                     "tpl": "弹出内容"
  21.                 }
  22.             }
  23.         }
  24.     ]
  25. }