diff --git a/packages/amis-editor/src/component/BaseControl.ts b/packages/amis-editor/src/component/BaseControl.ts index f7dba779f..a9811c9d9 100644 --- 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 = (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, diff --git a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx index 37f253e09..a059b3951 100644 --- 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: [ { diff --git a/packages/amis-editor/src/plugin/Form/ButtonToolbar.tsx b/packages/amis-editor/src/plugin/Form/ButtonToolbar.tsx index a54e1f81a..a0bc47a79 100644 --- 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: '描述', diff --git a/packages/amis-editor/src/plugin/Form/CodeEditor.tsx b/packages/amis-editor/src/plugin/Form/CodeEditor.tsx index 6a073f1e7..65fe0937d 100644 --- 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 + }) ]) }, { diff --git a/packages/amis-editor/src/plugin/Form/DiffEditor.tsx b/packages/amis-editor/src/plugin/Form/DiffEditor.tsx index 45a144165..3046595c9 100644 --- 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 + }) ]) }, { diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx index 141be42c6..92336b694 100644 --- 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') ] } ]) diff --git a/packages/amis-editor/src/plugin/Form/InputFile.tsx b/packages/amis-editor/src/plugin/Form/InputFile.tsx index 85a8c1bc3..0c9021f90 100644 --- 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', diff --git a/packages/amis-editor/src/plugin/Form/InputImage.tsx b/packages/amis-editor/src/plugin/Form/InputImage.tsx index 8af86826b..ca07ddbe8 100644 --- 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: [] }) ]) diff --git a/packages/amis-editor/src/plugin/Form/Item.tsx b/packages/amis-editor/src/plugin/Form/Item.tsx index 542038e26..d12c362d5 100644 --- 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: '隐藏时删除表单项值', diff --git a/packages/amis-editor/src/plugin/Form/ListSelect.tsx b/packages/amis-editor/src/plugin/Form/ListSelect.tsx index d07b9b861..7ee077353 100644 --- 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 设置模式 diff --git a/packages/amis-editor/src/plugin/Form/Switch.tsx b/packages/amis-editor/src/plugin/Form/Switch.tsx index 6fb73291b..9c5455ec1 100644 --- 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 diff --git a/packages/amis-editor/src/renderer/event-control/actions.tsx b/packages/amis-editor/src/renderer/event-control/actions.tsx index 53a0ef9d6..7327090a2 100644 --- 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 ( +
+ + {info?.rendererLabel} + + 组件切换为静态 +
+ ); + } + }, + { + actionType: 'nonstatic', + descDetail: (info: any) => { + return ( +
+ + {info?.rendererLabel} + + 组件切换为输入态 +
+ ); + } + } + ], + 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', diff --git a/packages/amis-editor/src/renderer/event-control/helper.tsx b/packages/amis-editor/src/renderer/event-control/helper.tsx index 193a6912e..ef30d3fad 100644 --- 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', diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index d1f2aa4fd..668b59cec 100644 --- 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', { diff --git a/packages/amis-editor/src/tpl/style.tsx b/packages/amis-editor/src/tpl/style.tsx index 64dbea514..42b0f7a1a 100644 --- 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', {