Merge "amis-saas-5351 「组件配置」组件 - 表单及表单项展示态切换" into feat-form-static

2024-12-02 12:08:13 +08:00 · 2022-10-19 17:31:45 +08:00 · 2022-10-19 17:31:45 +08:00 · 9a0ef67179
commit 9a0ef67179
parent 74530d9ef1 532ff4ca10
15 changed files with 179 additions and 24 deletions
--- a/packages/amis-editor/src/component/BaseControl.ts
+++ b/packages/amis-editor/src/component/BaseControl.ts
@ -3,7 +3,7 @@
 */

 import flatten from 'lodash/flatten';
-import {getEventControlConfig} from '../renderer/event-control/helper';
+import {getEventControlConfig, SUPPORT_STATIC_FORMITEM_CMPTS} from '../renderer/event-control/helper';
 import {getSchemaTpl, isObject, tipedLabel} from 'amis-editor-core';
 import type {BaseEventContext} from 'amis-editor-core';
 import {SchemaObject} from 'amis/lib/Schema';
@ -196,6 +196,8 @@ export const formItemControl: (
  >,
  context?: BaseEventContext
 ) => Array<any> = (panels, context) => {
+  const type = context?.schema?.type || '';
+  const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
  const collapseProps = {
    type: 'collapse',
    headingClassName: 'ae-formItemControl-header',
@ -250,6 +252,7 @@ export const formItemControl: (
          body: normalizeBodySchema(
            [
              getSchemaTpl('hidden'),
+              supportStatic ? getSchemaTpl('static') : null,
              // TODO: 下面的部分表单项才有，是不是判断一下是否是表单项
              getSchemaTpl('disabled'),
              getSchemaTpl('clearValueOnHidden')
@ -283,7 +286,6 @@ export const formItemControl: (
        //       }
        //     ])
      ];
-
  return [
    {
      type: 'tabs',
@ -337,7 +339,13 @@ export const formItemControl: (
                label: '描述 CSS 类名',
                name: 'descriptionClassName',
                visibleOn: 'this.description'
-              })
+              }),
+              ...!supportStatic ? [] : [
+                getSchemaTpl('className', {
+                  label: '静态 CSS 类名',
+                  name: 'staticClassName'
+                })
+              ]
            ],
            panels?.style?.body,
            panels?.style?.replace,
--- a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
@ -25,7 +25,8 @@ export class ButtonGroupControlPlugin extends BasePlugin {
  tags = ['按钮'];
  scaffold = {
    type: 'button-group-select',
-    name: 'a',
+    name: 'buttonGroupSelect',
+    label: '按钮点选',
    inline: false,
    options: [
      {
--- a/packages/amis-editor/src/plugin/Form/ButtonToolbar.tsx
+++ b/packages/amis-editor/src/plugin/Form/ButtonToolbar.tsx
@ -121,6 +121,7 @@ export class ButtonToolbarControlPlugin extends BasePlugin {
            },
            getSchemaTpl('style:classNames', {
              isFormItem: true,
+              unsupportStatic: true,
              schema: [
                getSchemaTpl('className', {
                  label: '描述',
--- a/packages/amis-editor/src/plugin/Form/CodeEditor.tsx
+++ b/packages/amis-editor/src/plugin/Form/CodeEditor.tsx
@ -144,7 +144,10 @@ export class CodeEditorControlPlugin extends BasePlugin {
              getSchemaTpl('autoFillApi')
            ]
          },
-          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('status', {
+            isFormItem: true,
+            unsupportStatic: true
+          }),
          getSchemaTpl('validation', {
            tag: ValidatorTag.Code
          })
@ -191,7 +194,9 @@ export class CodeEditorControlPlugin extends BasePlugin {
              }
            ]
          }),
-          getSchemaTpl('style:classNames')
+          getSchemaTpl('style:classNames', {
+            unsupportStatic: true
+          })
        ])
      },
      {
--- a/packages/amis-editor/src/plugin/Form/DiffEditor.tsx
+++ b/packages/amis-editor/src/plugin/Form/DiffEditor.tsx
@ -153,7 +153,10 @@ export class DiffEditorControlPlugin extends BasePlugin {
              getSchemaTpl('autoFillApi')
            ]
          },
-          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('status', {
+            isFormItem: true,
+            unsupportStatic: true
+          }),
          getSchemaTpl('validation', {
            tag: ValidatorTag.All
          })
@ -200,7 +203,9 @@ export class DiffEditorControlPlugin extends BasePlugin {
              }
            ]
          }),
-          getSchemaTpl('style:classNames')
+          getSchemaTpl('style:classNames', {
+            unsupportStatic: true
+          })
        ])
      },
      {
--- a/packages/amis-editor/src/plugin/Form/Form.tsx
+++ b/packages/amis-editor/src/plugin/Form/Form.tsx
@ -810,6 +810,11 @@ export class FormPlugin extends BasePlugin {

            getSchemaTpl('className'),

+            getSchemaTpl('className', {
+              name: 'staticClassName',
+              label: '静态展示时 的 CSS 类名'
+            }),
+
            getSchemaTpl('className', {
              name: 'panelClassName',
              visibleOn: 'this.wrapWithPanel !== false',
@ -844,7 +849,8 @@ export class FormPlugin extends BasePlugin {
            }),

            getSchemaTpl('disabled'),
-            getSchemaTpl('visible')
+            getSchemaTpl('visible'),
+            getSchemaTpl('static')
          ]
        }
      ])
--- a/packages/amis-editor/src/plugin/Form/InputFile.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputFile.tsx
@ -362,7 +362,10 @@ export class FileControlPlugin extends BasePlugin {
              })
            ]
          },
-          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('status', {
+            isFormItem: true,
+            unsupportStatic: true
+          }),
          getSchemaTpl('validation', {tag: ValidatorTag.File})
        ])
      },
@ -371,6 +374,7 @@ export class FileControlPlugin extends BasePlugin {
        body: getSchemaTpl('collapseGroup', [
          getSchemaTpl('style:formItem', {renderer: context.info.renderer}),
          getSchemaTpl('style:classNames', {
+            unsupportStatic: true,
            schema: [
              getSchemaTpl('className', {
                name: 'descriptionClassName',
--- a/packages/amis-editor/src/plugin/Form/InputImage.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputImage.tsx
@ -376,7 +376,10 @@ export class ImageControlPlugin extends BasePlugin {
              }
            ]
          },
-          getSchemaTpl('status', {isFormItem: true}),
+          getSchemaTpl('status', {
+            isFormItem: true,
+            unsupportStatic: true
+          }),
          getSchemaTpl('validation', {tag: ValidatorTag.File})
        ])
      },
@ -415,6 +418,7 @@ export class ImageControlPlugin extends BasePlugin {
            ]
          },
          getSchemaTpl('style:classNames', {
+            unsupportStatic: true,
            schema: []
          })
        ])
--- a/packages/amis-editor/src/plugin/Form/Item.tsx
+++ b/packages/amis-editor/src/plugin/Form/Item.tsx
@ -15,6 +15,7 @@ import {
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import find from 'lodash/find';
 import {JSONDelete, JSONPipeIn, JSONUpdate} from 'amis-editor-core';
+import {SUPPORT_STATIC_FORMITEM_CMPTS} from '../../renderer/event-control/helper';

 export class ItemPlugin extends BasePlugin {
  // panelTitle = '表单项通配';
@ -55,8 +56,10 @@ export class ItemPlugin extends BasePlugin {
    }
  }
  panelBodyCreator = (context: BaseEventContext) => {
+    const type = context.schema.type || '';
+    const supportStatic = SUPPORT_STATIC_FORMITEM_CMPTS.includes(type);
    const ignoreName = ~['button', 'submit', 'reset'].indexOf(
-      context.schema.type
+      type
    );
    const notRequiredName = ~[
      'button-toobar',
@ -72,7 +75,7 @@ export class ItemPlugin extends BasePlugin {
      'table',
      'elevator',
      'static'
-    ].indexOf(context.schema.type);
+    ].indexOf(type);
    const hasReadOnly = ~[
      'switch',
      'wizard',
@ -81,9 +84,9 @@ export class ItemPlugin extends BasePlugin {
      'input-rating',
      'input-text',
      'textarea'
-    ].indexOf(context.schema.type);
+    ].indexOf(type);
    /** 不支持配置校验属性的组件 */
-    const ignoreValidator = !!~['input-group'].indexOf(context.schema.type);
+    const ignoreValidator = !!~['input-group'].indexOf(type);
    const renderer: any = context.info.renderer;
    return [
      getSchemaTpl('tabs', [
@ -155,7 +158,13 @@ export class ItemPlugin extends BasePlugin {
              label: '描述 CSS 类名',
              name: 'descriptionClassName',
              visibleOn: 'this.description'
-            })
+            }),
+            ...!supportStatic ? [] : [
+              getSchemaTpl('className', {
+                label: '静态 CSS 类名',
+                name: 'staticClassName'
+              })
+            ]
          ]
        },

@ -165,7 +174,7 @@ export class ItemPlugin extends BasePlugin {
            // TODO: 有些表单项没有 disabled
            getSchemaTpl('disabled'),
            getSchemaTpl('visible'),
-
+            supportStatic ? getSchemaTpl('static') : null,
            getSchemaTpl('switch', {
              name: 'clearValueOnHidden',
              label: '隐藏时删除表单项值',
--- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx
@ -112,7 +112,6 @@ export class ListControlPlugin extends BasePlugin {
            getSchemaTpl('label'),
            getSchemaTpl('multiple'),
            getSchemaTpl('extractValue'),
-            
            getSchemaTpl('valueFormula', {
              rendererSchema: context?.schema,
              useSelectMode: true, // 改用 Select 设置模式
--- a/packages/amis-editor/src/plugin/Form/Switch.tsx
+++ b/packages/amis-editor/src/plugin/Form/Switch.tsx
@ -25,7 +25,8 @@ export class SwitchControlPlugin extends BasePlugin {
  tags = ['表单项'];
  scaffold = {
    type: 'switch',
-    option: '开关',
+    label: '开关',
+    option: '说明',
    name: 'switch',
    falseValue: false,
    trueValue: true
--- a/packages/amis-editor/src/renderer/event-control/actions.tsx
+++ b/packages/amis-editor/src/renderer/event-control/actions.tsx
@ -13,7 +13,8 @@ import {
  SHOW_SELECT_PROP,
  renderCmptActionSelect,
  renderCmptSelect,
-  SUPPORT_DISABLED_CMPTS
+  SUPPORT_DISABLED_CMPTS,
+  SUPPORT_STATIC_FORMITEM_CMPTS
 } from './helper';
 import {BaseLabelMark} from '../../component/BaseControl';
 const MSG_TYPES: {[key: string]: string} = {
@ -665,6 +666,66 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            }
          ]
        },
+        {
+          actionLabel: '组件展示态',
+          actionType: 'staticStatus',
+          description: '控制所选的组件的输入态/静态',
+          actions: [
+            {
+              actionType: 'static',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel}
+                    </span>
+                    组件切换为静态
+                  </div>
+                );
+              }
+            },
+            {
+              actionType: 'nonstatic',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel}
+                    </span>
+                    组件切换为输入态
+                  </div>
+                );
+              }
+            }
+          ],
+          supportComponents: [
+            'form',
+            ...SUPPORT_STATIC_FORMITEM_CMPTS
+          ],
+          schema: [
+            ...renderCmptSelect('选择组件', true),
+            {
+              type: 'radios',
+              label: '组件状态',
+              name: 'groupType',
+              mode: 'horizontal',
+              inputClassName: 'event-action-radio',
+              value: 'nonstatic',
+              required: true,
+              pipeIn: defaultValue('nonstatic'),
+              options: [
+                {
+                  label: '表单输入',
+                  value: 'nonstatic'
+                },
+                {
+                  label: '表单静态',
+                  value: 'static'
+                }
+              ]
+            }
+          ]
+        },
        {
          actionLabel: '刷新组件',
          actionType: 'reload',
--- a/packages/amis-editor/src/renderer/event-control/helper.tsx
+++ b/packages/amis-editor/src/renderer/event-control/helper.tsx
@ -24,6 +24,7 @@ import CmptActionSelect from './comp-action-select';
 import {Button} from 'amis';
 import ACTION_TYPE_TREE from './actions';
 import {stores} from 'amis-core/lib/factory';
+import without from 'lodash/without';

 // 数据容器范围
 export const DATA_CONTAINER = [
@ -116,6 +117,26 @@ export const FORMITEM_CMPTS = [
  'uuid'
 ];

+export const SUPPORT_STATIC_FORMITEM_CMPTS = without(FORMITEM_CMPTS, ...[
+  'button-toolbar',
+  'condition-builder',
+  'diff-editor',
+  'editor',
+  'formula',
+  'hidden',
+  'icon-picker',
+  'input-excel',
+  'input-file',
+  'input-formula',
+  'input-image',
+  'input-repeat',
+  'input-rich-text',
+  'input-sub-form',
+  'input-table',
+  'picker',
+  'uuid'
+]);
+
 export const SUPPORT_DISABLED_CMPTS = [
  'button-group',
  'action',
--- a/packages/amis-editor/src/tpl/common.tsx
+++ b/packages/amis-editor/src/tpl/common.tsx
@ -608,12 +608,20 @@ setSchemaTpl('combo-container', (config: SchemaObject) => {
 */
 setSchemaTpl(
  'status',
-  (config: {isFormItem?: boolean; readonly?: boolean; disabled?: boolean}) => {
+  (config: {
+    isFormItem?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    unsupportStatic?: boolean;
+  }) => {
    return {
      title: '状态',
      body: [
        getSchemaTpl('newVisible'),
        getSchemaTpl('hidden'),
+        !config?.unsupportStatic && config?.isFormItem 
+          ? getSchemaTpl('static') 
+          : null,
        config?.readonly ? getSchemaTpl('readonly') : null,
        config?.disabled || config?.isFormItem
          ? getSchemaTpl('disabled')
@ -686,6 +694,14 @@ setSchemaTpl('visible', {
  expressionName: 'visibleOn'
 });

+setSchemaTpl('static', {
+  type: 'ae-StatusControl',
+  label: '静态展示',
+  mode: 'normal',
+  name: 'static',
+  expressionName: 'staticOn'
+});
+

 // 新版配置面板兼容 [可见] 状态
 setSchemaTpl('newVisible', {
--- a/packages/amis-editor/src/tpl/style.tsx
+++ b/packages/amis-editor/src/tpl/style.tsx
@ -18,8 +18,16 @@ setSchemaTpl('style:formItem', ({renderer, schema}: any) => {

 setSchemaTpl(
  'style:classNames',
-  (config: {schema: SchemaCollection; isFormItem: boolean}) => {
-    const {isFormItem = true, schema = []} = config || {};
+  (config: {
+    schema: SchemaCollection;
+    isFormItem: boolean;
+    unsupportStatic?: boolean;
+  }) => {
+    const {
+      isFormItem = true,
+      unsupportStatic = false,
+      schema = []
+    } = config || {};

    return {
      title: 'CSS 类名',
@ -35,7 +43,13 @@ setSchemaTpl(
            getSchemaTpl('className', {
              label: '控件',
              name: 'inputClassName'
-            })
+            }),
+            ...unsupportStatic ? [] : [
+              getSchemaTpl('className', {
+                label: '表单项静态',
+                name: 'staticClassName'
+              })
+            ]
          ]
        : [
            getSchemaTpl('className', {