fix: 表单静态展示文档更新及问题修复 (#5643)

* docs 表单静态展示文档更新,示例更新

* fix: 更改表单静态展示空值时的处理逻辑

Co-authored-by: jinye <jinye@baidu.com>

docs/zh-CN/components/form/formitem.md

@@ -333,6 +333,8 @@ order: 1
 
 ### 配置静态展示
 
+> 2.4.0 及以上版本
+
 ##### 静态配置
 
 通过配置`"static": true`来将表单项以静态形式展示  
@@ -1774,12 +1776,12 @@ fillMapping 配置 支持变量取值和表达式；
 | autoFill.size           | `string`                                           |           | showSuggestion 为 true 时，参照录入 mode 为 dialog 时，可设置大小                                   |
 | autoFill.columns        | `Array<Column>`                                    |           | showSuggestion 为 true 时，数据展示列配置                                                           |
 | autoFill.filter         | [SchemaNode](../../docs/types/schemanode)          |           | showSuggestion 为 true 时，数据查询过滤条件                                                         |
-| static                  | `boolean`                                          |           | 当前表单项是否是静态展示，目前支持静[支持静态展示的表单项](#支持静态展示的表单项) |
+| static                  | `boolean`                                          |           | `2.4.0` 当前表单项是否是静态展示，目前支持静[支持静态展示的表单项](#支持静态展示的表单项) |
-| staticClassName         | `string`                                           |           | 静态展示时的类名 |
+| staticClassName         | `string`                                           |           | `2.4.0` 静态展示时的类名 |
-| staticLabelClassName    | `string`                                           |           | 静态展示时的Label的类名 |
+| staticLabelClassName    | `string`                                           |           | `2.4.0` 静态展示时的Label的类名 |
-| staticInputClassName    | `string`                                           |           | 静态展示时的value的类名 |
+| staticInputClassName    | `string`                                           |           | `2.4.0` 静态展示时的value的类名 |
-| staticSchema            | `string`|`Array`|[SchemaNode](../../docs/types/schemanode)     |           | 自定义静态展示方式 |
+| staticSchema            | `string`|`Array`|[SchemaNode](../../docs/types/schemanode)     |           | `2.4.0` 自定义静态展示方式 |
-| staticSchema.limit      | `number`                                           | 10        | select、checkboxes等选择类组件多选时展示态展示的数量 |
+| staticSchema.limit      | `number`                                           | 10        | `2.4.0` select、checkboxes等选择类组件多选时展示态展示的数量 |
 
 ## 支持静态展示的表单项  
 

docs/zh-CN/components/form/index.md

@@ -570,6 +570,8 @@ Form 默认会在底部渲染一个提交按钮，用于执行表单的提交行
 
 ## 表单静态展示
 
+> 2.4.0 及以上版本
+
 在一些场景，表单提交后需要将填写的内容静态展示
 
 ### 设置初始状态
@@ -582,7 +584,7 @@ Form 默认会在底部渲染一个提交按钮，用于执行表单的提交行
   "title": "表单状态切换",
   "mode": "horizontal",
   "labelWidth": 150,
-  "id": "allFormSwitch",
+  "id": "allFormStatic",
   "static": true,
   "body": [
     {
@@ -621,7 +623,6 @@ Form 默认会在底部渲染一个提交按钮，用于执行表单的提交行
   "mode": "horizontal",
   "labelWidth": 150,
   "id": "allFormSwitch",
-  "static": true,
   "data": {
     "isStatic": false
   },
@@ -1442,8 +1443,8 @@ Form 支持轮询初始化接口，步骤如下：
 | promptPageLeave             | `boolean`                                                                 | `false`                                                                | form 还没保存，即将离开页面前是否弹框确认。                                                                                                                                                                                                                                                                                                                  |
 | columnCount                 | `number`                                                                  | 0                                                                      | 表单项显示为几列                                                                                                                                                                                                                                                                                                                                             |
 | inheritData                 | `boolean`                                                                 | `true`                                                                 | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。                                                                                                                                                 |
-| static | `boolean` |   | 整个表单静态方式展示，详情请查看[示例页](../../../examples/form/switchDisplay) |
+| static | `boolean` |   | `2.4.0` 整个表单静态方式展示，详情请查看[示例页](../../../examples/form/switchDisplay) |
-| staticClassName | `string` |   | 表单静态展示时使用的类名 |
+| staticClassName | `string` |   | `2.4.0` 表单静态展示时使用的类名 |
 
 ## 事件表
 

docs/zh-CN/components/form/static.md

@@ -8,6 +8,10 @@ icon:
 order: 52
 ---
 
+> 推荐在`2.4.0`版本后使用[新版静态展示](./formitem#配置静态展示)来实现该功能  
+> 常用表单项已支持静态展示：[支持静态展示的表单项](./formitem#支持静态展示的表单项)，展示效果请查看[示例页](../../../examples/form/switchDisplay)  
+> 新版静态展示还可以实现整个表单的静态展示及切换，具体用法请参考[表单静态展示](./index#表单静态展示)
+
 用来在表单中，展示静态数据
 
 ## 基本用法

examples/components/Form/SwitchDisplay.jsx

@@ -1618,18 +1618,18 @@ export default {
           "name": "combo",
           "label": "组合单条",
           "value": {
-            "a": 1,
+            "c-1": 1,
-            "b": "a"
+            "c-2": "a"
           },
           "items": [
             {
-              "name": "a",
+              "name": "c-1",
               "label": "名称",
               "type": "input-text",
               "placeholder": "A"
             },
             {
-              "name": "b",
+              "name": "c-2",
               "label": "信息",
               "type": "select",
               "options": [

packages/amis/src/renderers/Form/StaticHoc.tsx

@@ -89,26 +89,28 @@ export function supportStatic<T extends FormControlProps>() {
         } = props;
 
         let body;
-
         const displayValue = getPropValue(props);
-        if (!displayValue) {
+        const isValueEmpty = displayValue == null || displayValue === '';
+
+        if (staticSchema && (
+          staticSchema.type
+          || Array.isArray(staticSchema)
+          || typeof staticSchema === 'string'
+          || typeof staticSchema === 'number'
+        )) {
+          // 有自定义schema 且schema有type 时，展示schema
+          body = render('form-static-schema', staticSchema, props);
+        } else if (target.renderStatic) {
+          // 特殊组件，control有 renderStatic 时，特殊处理
+          body = target.renderStatic.apply(this, [...args,
+            isValueEmpty ? staticPlaceholder : displayValue
+          ]);
+        } else if (isValueEmpty) {
+          // 空值时，展示 staticPlaceholder
           body = staticPlaceholder;
         } else {
-          // 自定义了schema并且有type
+          // 可复用组件 统一处理
-          if (staticSchema && (
+          body = renderCommonStatic(props, displayValue);
-            staticSchema.type
-            || Array.isArray(staticSchema)
-            || typeof staticSchema === 'string'
-            || typeof staticSchema === 'number'
-          )) {
-            body = render('form-static-schema', staticSchema, props);
-          } else if (target.renderStatic) {
-            // 特殊组件
-            body = target.renderStatic.apply(this, [...args, displayValue]);
-          } else {
-            // 可复用组件
-            body = renderCommonStatic(props, displayValue);
-          }
         }
 
         return <div className={cx(`${ns}Form-static`, className)}>{body}</div>

packages/amis/src/renderers/Form/Textarea.tsx

@@ -163,7 +163,7 @@ export default class TextAreaControl extends React.Component<
     );
   }
 
-  renderStatic(displayValue = '') {
+  renderStatic(displayValue = '-') {
     const {
       render,
       staticSchema = {}