From 5ad7b2d70d61b77a203456e995b362c87335c720 Mon Sep 17 00:00:00 2001 From: jinye Date: Mon, 21 Nov 2022 10:57:02 +0800 Subject: [PATCH] =?UTF-8?q?amis-saas-7974=20=E9=9D=99=E6=80=81=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E6=A1=86=E7=BB=84=E4=BB=B6=E9=85=8D=E7=BD=AE=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: I3e308743dc639c372f7aa8171c4138882876b43e --- packages/amis-editor/src/plugin/Date.tsx | 66 ++- packages/amis-editor/src/plugin/Datetime.tsx | 66 ++- .../amis-editor/src/plugin/Form/Static.tsx | 498 +++++++++--------- packages/amis-editor/src/plugin/Image.tsx | 311 +++++------ packages/amis-editor/src/plugin/Images.tsx | 347 ++++++------ packages/amis-editor/src/plugin/Json.tsx | 48 +- packages/amis-editor/src/plugin/List.tsx | 149 +++--- packages/amis-editor/src/plugin/Mapping.tsx | 186 ++++--- packages/amis-editor/src/plugin/Plain.tsx | 95 ++-- packages/amis-editor/src/plugin/Table.tsx | 331 ++++++------ packages/amis-editor/src/plugin/Time.tsx | 66 ++- packages/amis-editor/src/tpl/common.tsx | 14 + 12 files changed, 1131 insertions(+), 1046 deletions(-) diff --git a/packages/amis-editor/src/plugin/Date.tsx b/packages/amis-editor/src/plugin/Date.tsx index e3db45e39..ccbc82143 100644 --- a/packages/amis-editor/src/plugin/Date.tsx +++ b/packages/amis-editor/src/plugin/Date.tsx @@ -26,47 +26,45 @@ export class DatePlugin extends BasePlugin { }; panelTitle = '日期展示'; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { return [ getSchemaTpl('tabs', [ { - title: '常规', - body: [ + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - type: 'input-date', - name: 'value', - label: '日期数值' + title: '基本', + body: [ + { + type: 'input-date', + name: 'value', + label: '日期数值' + }, + { + type: 'input-text', + name: 'format', + label: '显示日期格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('YYYY-MM-DD') + }, + { + type: 'input-text', + name: 'valueFormat', + label: '数据日期格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('X') + }, + getSchemaTpl('placeholder', { + pipeIn: defaultValue('-'), + label: '占位符' + }) + ] }, - { - type: 'input-text', - name: 'format', - label: '显示日期格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('YYYY-MM-DD') - }, - { - type: 'input-text', - name: 'valueFormat', - label: '数据日期格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('X') - }, - { - name: 'placeholder', - type: 'input-text', - pipeIn: defaultValue('-'), - label: '占位符' - } - ] + getSchemaTpl('status') + ]) }, - { - title: '外观', - body: [getSchemaTpl('className')] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] - } + getSchemaTpl('onlyClassNameTab') ]) ]; }; diff --git a/packages/amis-editor/src/plugin/Datetime.tsx b/packages/amis-editor/src/plugin/Datetime.tsx index db435e4b3..bdb5fda44 100644 --- a/packages/amis-editor/src/plugin/Datetime.tsx +++ b/packages/amis-editor/src/plugin/Datetime.tsx @@ -21,47 +21,45 @@ export class DatetimePlugin extends DatePlugin { format: 'YYYY-MM-DD HH:mm:ss', value: Math.round(Date.now() / 1000) }; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { return [ getSchemaTpl('tabs', [ { - title: '常规', - body: [ + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - type: 'input-datetime', - name: 'value', - label: '日期时间数值' + title: '基本', + body: [ + { + type: 'input-datetime', + name: 'value', + label: '日期时间数值' + }, + { + type: 'input-text', + name: 'format', + label: '显示日期时间格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss') + }, + { + type: 'input-text', + name: 'valueFormat', + label: '数据日期格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('X') + }, + getSchemaTpl('placeholder', { + pipeIn: defaultValue('-'), + label: '占位符' + }) + ] }, - { - type: 'input-text', - name: 'format', - label: '显示日期时间格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('YYYY-MM-DD HH:mm:ss') - }, - { - type: 'input-text', - name: 'valueFormat', - label: '数据日期格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('X') - }, - { - name: 'placeholder', - type: 'input-text', - pipeIn: defaultValue('-'), - label: '占位符' - } - ] + getSchemaTpl('status') + ]) }, - { - title: '外观', - body: [getSchemaTpl('className')] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] - } + getSchemaTpl('onlyClassNameTab') ]) ]; }; diff --git a/packages/amis-editor/src/plugin/Form/Static.tsx b/packages/amis-editor/src/plugin/Form/Static.tsx index 1131d1015..d6cbb59eb 100644 --- a/packages/amis-editor/src/plugin/Form/Static.tsx +++ b/packages/amis-editor/src/plugin/Form/Static.tsx @@ -1,11 +1,249 @@ import React from 'react'; import {Button} from 'amis'; -import {defaultValue, getSchemaTpl} from 'amis-editor-core'; +import {defaultValue, getSchemaTpl, setSchemaTpl, tipedLabel} from 'amis-editor-core'; import {registerEditorPlugin} from 'amis-editor-core'; import {BaseEventContext, BasePlugin} from 'amis-editor-core'; import {EditorNodeType} from 'amis-editor-core'; import {mockValue} from 'amis-editor-core'; +// 快速编辑 +setSchemaTpl('quickEdit', { + type: 'ae-switch-more', + mode: 'normal', + name: 'quickEdit', + label: '可快速编辑', + value: false, + hiddenOnDefault: true, + formType: 'extend', + pipeIn: (value: any) => !!value, + form: { + body: [ + { + label: '编辑模式', + name: 'quickEdit.mode', + type: 'button-group-select', + inputClassName: 'items-center', + visibleOn: 'data.quickEdit', + pipeIn: defaultValue('popOver'), + options: [ + { + label: '下拉', + value: 'popOver' + }, + { + label: '内嵌', + value: 'inline' + } + ] + }, + getSchemaTpl('switch', { + name: 'quickEdit.saveImmediately', + label: tipedLabel('立即保存', '开启后修改即提交，而不是标记修改批量提交。'), + visibleOn: 'data.quickEdit', + pipeIn: (value: any) => !!value + }), + getSchemaTpl('apiControl', { + name: 'quickEdit.saveImmediately.api', + label: '保存接口', + mode: 'row', + description: + '单独给立即保存配置接口，如果不配置，则默认使用quickSaveItemApi。', + visibleOn: 'this.quickEdit && this.quickEdit.saveImmediately' + }), + { + name: 'quickEdit', + asFormItem: true, + visibleOn: 'data.quickEdit', + mode: 'row', + children: ({value, onChange, data}: any) => { + if (value === true) { + value = {}; + } + + const originMode = value.mode; + + value = { + type: 'input-text', + name: data.name, + ...value + }; + delete value.mode; + + // todo 多个快速编辑表单模式看来只能代码模式编辑了。 + + return ( + + ); + } + } + ] + } +}); + +// 查看更多 +setSchemaTpl('morePopOver', { + type: 'ae-switch-more', + mode: 'normal', + name: 'popOver', + label: '查看更多展示', + value: false, + hiddenOnDefault: true, + formType: 'extend', + pipeIn: (value: any) => !!value, + form: { + body: [ + { + label: '弹出模式', + name: 'popOver.mode', + type: 'button-group-select', + visibleOn: 'data.popOver', + pipeIn: defaultValue('popOver'), + options: [ + { + label: '浮层', + value: 'popOver' + }, + + { + label: '弹框', + value: 'dialog' + }, + + { + label: '抽屉', + value: 'drawer' + } + ] + }, + { + name: 'popOver.position', + label: '浮层位置', + type: 'select', + visibleOn: 'data.popOver && (data.popOver.mode === "popOver" || !data.popOver.mode)', + pipeIn: defaultValue('center'), + options: [ + { + label: '目标左上角', + value: 'left-top' + }, + { + label: '目标右上角', + value: 'right-top' + }, + { + label: '目标中部', + value: 'center' + }, + { + label: '目标左下角', + value: 'left-bottom' + }, + { + label: '目标右下角', + value: 'right-bottom' + }, + { + label: '页面左上角', + value: 'fixed-left-top' + }, + { + label: '页面右上角', + value: 'fixed-right-top' + }, + { + label: '页面左下角', + value: 'fixed-left-bottom' + }, + { + label: '页面右下角', + value: 'fixed-right-bottom' + } + ] + }, + { + visibleOn: 'data.popOver', + name: 'popOver', + mode: 'row', + asFormItem: true, + children: ({value, onChange}: any) => { + value = { + type: 'panel', + title: '查看详情', + body: '内容详情', + ...value + }; + + return ( + + ); + } + } + ] + } +}); + +// 可复制 +setSchemaTpl('copyable', { + type: 'ae-switch-more', + mode: 'normal', + name: 'copyable', + label: '可复制', + value: false, + hiddenOnDefault: true, + formType: 'extend', + pipeIn: (value: any) => !!value, + form: { + body: [ + { + label: '复制内容模板', + name: 'copyable.content', + type: 'textarea', + mode: 'row', + maxRow: 2, + visibleOn: 'data.copyable', + description: '默认为当前字段值，可定制。' + } + ] + } +}); + export class StaticControlPlugin extends BasePlugin { // 关联渲染器名字 rendererName = 'static'; @@ -38,10 +276,9 @@ export class StaticControlPlugin extends BasePlugin { ] }; multifactor = true; - notRenderFormZone = true; - panelTitle = '静态展示'; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { const renderer: any = context.info.renderer; @@ -52,6 +289,13 @@ export class StaticControlPlugin extends BasePlugin { { title: '基本', body: [ + { + type: 'alert', + inline: false, + level: 'warning', + className: 'text-sm', + body: '

当前组件已停止维护，建议您使用静态展示新特性实现表单项及整个表单的静态展示。

' + }, getSchemaTpl('formItemName', { required: false }), @@ -64,241 +308,15 @@ export class StaticControlPlugin extends BasePlugin { // ...context?.schema, // type: 'textarea', // 改用多行文本编辑 // value: context?.schema.tpl // 避免默认值丢失 - // }, - mode: 'vertical' // 改成上下展示模式 + // } }), - getSchemaTpl('switch', { - name: 'quickEdit', - label: '可快速编辑', - pipeIn: (value: any) => !!value - }), - { - label: '快速编辑模式', - name: 'quickEdit.mode', - type: 'button-group-select', - size: 'sm', - mode: 'row', - className: 'ae-buttonGroupSelect--justify', - visibleOn: 'data.quickEdit', - pipeIn: defaultValue('popOver'), - options: [ - { - label: '下拉', - value: 'popOver' - }, - { - label: '内嵌', - value: 'inline' - } - ] - }, - getSchemaTpl('switch', { - name: 'quickEdit.saveImmediately', - label: '立即保存', - visibleOn: 'data.quickEdit', - labelRemark: { - className: 'm-l-xs', - trigger: 'click', - rootClose: true, - placement: 'left', - content: '开启后修改即提交，而不是标记修改批量提交。' - }, - pipeIn: (value: any) => !!value - }), - getSchemaTpl('apiControl', { - name: 'quickEdit.saveImmediately.api', - label: '立即保存接口', - description: - '是否单独给立即保存配置接口，如果不配置，则默认使用quickSaveItemApi。', - visibleOn: 'this.quickEdit && this.quickEdit.saveImmediately' - }), - { - name: 'quickEdit', - asFormItem: true, - visibleOn: 'data.quickEdit', - children: ({value, onChange, data}: any) => { - if (value === true) { - value = {}; - } - - const originMode = value.mode; - - value = { - type: 'input-text', - name: data.name, - ...value - }; - delete value.mode; - - // todo 多个快速编辑表单模式看来只能代码模式编辑了。 - - return ( - - ); - } - }, - getSchemaTpl('switch', { - name: 'popOver', - label: '查看更多展示', - pipeIn: (value: any) => !!value - }), - { - label: '弹出模式', - name: 'popOver.mode', - type: 'button-group-select', - size: 'sm', - mode: 'row', - className: 'ae-buttonGroupSelect--justify', - visibleOn: 'data.popOver', - pipeIn: defaultValue('popOver'), - options: [ - { - label: '浮层', - value: 'popOver' - }, - - { - label: '弹框', - value: 'dialog' - }, - - { - label: '抽屉', - value: 'drawer' - } - ] - }, - { - name: 'popOver.position', - label: '浮层位置', - type: 'select', - mode: 'row', - visibleOn: 'data.popOver && data.popOver.mode === "popOver"', - pipeIn: defaultValue('center'), - options: [ - { - label: '目标中部', - value: 'center' - }, - - { - label: '目标左上角', - value: 'left-top' - }, - - { - label: '目标右上角', - value: 'right-top' - }, - - { - label: '目标左下角', - value: 'left-bottom' - }, - - { - label: '目标右下角', - value: 'right-bottom' - }, - - { - label: '页面左上角', - value: 'fixed-left-top' - }, - - { - label: '页面右上角', - value: 'fixed-right-top' - }, - - { - label: '页面左下角', - value: 'fixed-left-bottom' - }, - - { - label: '页面右下角', - value: 'fixed-right-bottom' - } - ] - }, - { - visibleOn: 'data.popOver', - name: 'popOver', - asFormItem: true, - children: ({value, onChange}: any) => { - value = { - type: 'panel', - title: '查看详情', - body: '内容详情', - ...value - }; - - return ( - - ); - } - }, - getSchemaTpl('borderMode'), - getSchemaTpl('switch', { - name: 'copyable', - label: '可复制', - pipeIn: (value: any) => !!value - }), - - { - label: '复制内容模板', - name: 'copyable.content', - type: 'textarea', - mode: 'row', - maxRow: 2, - visibleOn: 'data.copyable', - description: '默认为当前字段值，可定制。' - }, + getSchemaTpl('quickEdit'), + getSchemaTpl('morePopOver'), + getSchemaTpl('copyable'), getSchemaTpl('labelRemark'), getSchemaTpl('remark'), getSchemaTpl('placeholder'), - getSchemaTpl('description'), - getSchemaTpl('autoFillApi') + getSchemaTpl('description') /*{ children: ( - ) - }, - { - type: 'divider' - }, - { - name: 'title', - type: 'input-text', - label: '标题' - }, - isCRUDBody - ? null - : { - name: 'source', - type: 'input-text', - label: '数据源', - pipeIn: defaultValue('${items}'), - description: '绑定当前环境变量' + title: '基本', + body: [ + { + children: ( + + ) }, - { - name: 'placeholder', - pipeIn: defaultValue('没有数据'), - type: 'input-text', - label: '无数据提示' - } - ] + { + type: 'divider' + }, + { + name: 'title', + type: 'input-text', + label: '标题' + }, + isCRUDBody + ? null + : { + name: 'source', + type: 'input-text', + label: '数据源', + pipeIn: defaultValue('${items}'), + description: '绑定当前环境变量' + }, + { + name: 'placeholder', + pipeIn: defaultValue('没有数据'), + type: 'input-text', + label: '无数据提示' + } + ] + }, + getSchemaTpl('status') + ]) }, { title: '外观', - body: [ - getSchemaTpl('switch', { - name: 'showHeader', - label: '是否显示头部', - pipeIn: defaultValue(true) - }), + body: getSchemaTpl('collapseGroup', [ + { + title: '基本', + body: [ + getSchemaTpl('switch', { + name: 'showHeader', + label: '是否显示头部', + pipeIn: defaultValue(true) + }), - getSchemaTpl('switch', { - name: 'showFooter', - label: '是否显示底部', - pipeIn: defaultValue(true) - }), - - getSchemaTpl('className', { - label: 'CSS 类名' - }), - getSchemaTpl('className', { - name: 'listClassName', - label: 'List div CSS 类名' - }), - getSchemaTpl('className', { - name: 'headerClassName', - label: '头部 CSS 类名' - }), - getSchemaTpl('className', { - name: 'footerClassName', - label: '底部 CSS 类名' - }) - ] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] + getSchemaTpl('switch', { + name: 'showFooter', + label: '是否显示底部', + pipeIn: defaultValue(true) + }) + ] + }, + { + title: 'CSS类名', + body: [ + getSchemaTpl('className', { + label: '外层' + }), + getSchemaTpl('className', { + name: 'listClassName', + label: 'List' + }), + getSchemaTpl('className', { + name: 'headerClassName', + label: '头部' + }), + getSchemaTpl('className', { + name: 'footerClassName', + label: '底部' + }) + ] + } + ]) } ]); }; diff --git a/packages/amis-editor/src/plugin/Mapping.tsx b/packages/amis-editor/src/plugin/Mapping.tsx index 511fc79be..a79f512ab 100644 --- a/packages/amis-editor/src/plugin/Mapping.tsx +++ b/packages/amis-editor/src/plugin/Mapping.tsx @@ -34,114 +34,112 @@ export class MappingPlugin extends BasePlugin { }; panelTitle = '映射'; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { const isUnderField = /\/field\/\w+$/.test(context.path as string); return [ getSchemaTpl('tabs', [ { - title: '常规', - body: [ - isUnderField - ? { - type: 'tpl', - inline: false, - className: 'text-info text-sm', - tpl: '

当前为字段内容节点配置，选择上层还有更多的配置。

' - } - : null, - + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - label: '映射表', - type: 'combo', - scaffold: { - key: 'key-{index}', - value: 'value-{index}' - }, - required: true, - name: 'map', - descriptionClassName: 'help-block text-xs m-b-none', - description: - '

当值命中左侧 Key 时，展示右侧内容，当没有命中时，默认实现 Key 为 *的内容(请确保key值唯一)', - multiple: true, - pipeIn: (value: any) => { - if (!isObject(value)) { - return [ - { - key: '*', - value: '通配值' + title: '基本', + body: [ + isUnderField + ? { + type: 'tpl', + inline: false, + className: 'text-info text-sm', + tpl: '

当前为字段内容节点配置，选择上层还有更多配置

' } - ]; - } + : null, - let arr: Array = []; - - Object.keys(value).forEach(key => { - arr.push({ - key: key || '', - value: - typeof value[key] === 'string' - ? value[key] - : JSON.stringify(value[key]) - }); - }); - return arr; - }, - pipeOut: (value: any) => { - if (!Array.isArray(value)) { - return value; - } - let obj: any = {}; - - value.forEach((item: any, idx: number) => { - let key: string = item.key || ''; - let value: any = item.value; - if (key === 'key-{index}' && value === 'value-{index}') { - key = key.replace('-{index}', `${idx}`); - value = value.replace('-{index}', `${idx}`); - } - try { - value = JSON.parse(value); - } catch (e) {} - - obj[key] = value; - }); - - return obj; - }, - items: [ { - placeholder: 'Key', - type: 'input-text', - unique: true, - name: 'key', + label: '映射表', + type: 'combo', + mode: "col", + scaffold: { + key: 'key-{index}', + value: 'value-{index}' + }, required: true, - columnClassName: 'w-xs' - }, + name: 'map', + descriptionClassName: 'help-block text-xs m-b-none', + description: + '

当值命中左侧 Key 时，展示右侧内容，当没有命中时，默认实现 Key 为 *的内容(请确保key值唯一)', + multiple: true, + pipeIn: (value: any) => { + if (!isObject(value)) { + return [ + { + key: '*', + value: '通配值' + } + ]; + } - { - placeholder: '内容', - type: 'input-text', - name: 'value' - } + let arr: Array = []; + + Object.keys(value).forEach(key => { + arr.push({ + key: key || '', + value: + typeof value[key] === 'string' + ? value[key] + : JSON.stringify(value[key]) + }); + }); + return arr; + }, + pipeOut: (value: any) => { + if (!Array.isArray(value)) { + return value; + } + let obj: any = {}; + + value.forEach((item: any, idx: number) => { + let key: string = item.key || ''; + let value: any = item.value; + if (key === 'key-{index}' && value === 'value-{index}') { + key = key.replace('-{index}', `${idx}`); + value = value.replace('-{index}', `${idx}`); + } + try { + value = JSON.parse(value); + } catch (e) {} + + obj[key] = value; + }); + + return obj; + }, + items: [ + { + placeholder: 'Key', + type: 'input-text', + unique: true, + name: 'key', + required: true, + columnClassName: 'w-xs' + }, + + { + placeholder: '内容', + type: 'input-text', + name: 'value' + } + ] + }, + getSchemaTpl('placeholder', { + pipeIn: defaultValue('-'), + label: '占位符' + }) ] }, - - { - name: 'placeholder', - type: 'input-text', - pipeIn: defaultValue('-'), - label: '占位符' - } - ] + getSchemaTpl('status') + ]) }, - { - title: '外观', - body: [getSchemaTpl('className')] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] - } + getSchemaTpl('onlyClassNameTab') ]) ]; }; diff --git a/packages/amis-editor/src/plugin/Plain.tsx b/packages/amis-editor/src/plugin/Plain.tsx index 1b219bd3e..0c74c4dc9 100644 --- a/packages/amis-editor/src/plugin/Plain.tsx +++ b/packages/amis-editor/src/plugin/Plain.tsx @@ -29,53 +29,58 @@ export class PlainPlugin extends BasePlugin { }; panelTitle = '纯文本'; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { const isTableCell = context.info.renderer.name === 'table-cell'; - - return getSchemaTpl('tabs', [ - { - title: '常规', - body: [ - { - label: '内容', - type: 'textarea', - pipeIn: (value: any, data: any) => value || (data && data.text), - name: 'tpl', - description: - '如果当前字段有值，请不要设置，否则覆盖。支持使用 \\${xxx} 来获取变量，或者用 lodash.template 语法来写模板逻辑。详情' - }, - - { - name: 'placeholder', - label: '占位符', - type: 'input-text', - pipeIn: defaultValue('-') - } - ] - }, - - isTableCell - ? null - : { - title: '外观', - body: [ - getSchemaTpl('switch', { - name: 'inline', - label: '内联模式', - value: true - }), - - getSchemaTpl('className') - ] - }, - - isTableCell - ? null - : { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] - } - ]); + return [ + getSchemaTpl('tabs', [ + { + title: '属性', + body: getSchemaTpl('collapseGroup', [ + { + title: '基本', + body: [ + { + label: '内容', + type: 'textarea', + mode: 'col', + pipeIn: (value: any, data: any) => value || (data && data.text), + name: 'tpl', + description: + '如果当前字段有值，请不要设置，否则覆盖。支持使用 \\${xxx} 来获取变量，或者用 lodash.template 语法来写模板逻辑。详情' + }, + getSchemaTpl('placeholder', { + pipeIn: defaultValue('-'), + label: '占位符' + }) + ] + }, + isTableCell ? null : getSchemaTpl('status') + ]) + }, + isTableCell ? null : { + title: '外观', + body: getSchemaTpl('collapseGroup', [ + { + title: '基本', + body: [ + getSchemaTpl('switch', { + name: 'inline', + label: '内联模式', + value: true + }) + ] + }, + { + title: 'CSS类名', + body: [ + getSchemaTpl('className') + ] + } + ]) + } + ]) + ]; }; } diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx index 4a73bca83..daf5cf688 100644 --- a/packages/amis-editor/src/plugin/Table.tsx +++ b/packages/amis-editor/src/plugin/Table.tsx @@ -333,194 +333,205 @@ export class TablePlugin extends BasePlugin { description: '开启表格拖拽排序功能' } ]; - + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { const isCRUDBody = context.schema.type === 'crud'; - return getSchemaTpl('tabs', [ { - title: '常规', - body: [ + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - name: 'title', - type: 'input-text', - label: '标题' - }, - - isCRUDBody - ? null - : { - name: 'source', + title: '基本', + body: [ + { + name: 'title', type: 'input-text', - label: '数据源', - pipeIn: defaultValue('${items}'), - description: '绑定当前环境变量' + label: '标题' }, - { - name: 'combineNum', - label: '自动合并单元格', - type: 'input-number', - placeholder: '设置列数', - description: - '设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。' - } + isCRUDBody + ? null + : { + name: 'source', + type: 'input-text', + label: '数据源', + pipeIn: defaultValue('${items}'), + description: '绑定当前环境变量' + }, - // { - // children: ( - //

- // - //
- // ) - // }, + { + name: 'combineNum', + label: '自动合并单元格', + type: 'input-number', + placeholder: '设置列数', + description: + '设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。' + } - // { - // children: ( - //
- // - //
- // ) - // } - ] + // { + // children: ( + //
+ // + //
+ // ) + // }, + + // { + // children: ( + //
+ // + //
+ // ) + // } + ] + }, + getSchemaTpl('status') + ]) }, { title: '外观', - body: [ + body: getSchemaTpl('collapseGroup', [ { - name: 'columnsTogglable', - label: '展示列显示开关', - type: 'button-group-select', - pipeIn: defaultValue('auto'), - mode: 'inline', - className: 'w-full', - size: 'xs', - options: [ + title: '基本', + body: [ { - label: '自动', - value: 'auto' + name: 'columnsTogglable', + label: '展示列显示开关', + type: 'button-group-select', + pipeIn: defaultValue('auto'), + mode: 'inline', + className: 'w-full', + size: 'xs', + options: [ + { + label: '自动', + value: 'auto' + }, + + { + label: '开启', + value: true + }, + + { + label: '关闭', + value: false + } + ], + description: '自动即列数量大于5个时自动开启' + }, + + getSchemaTpl('switch', { + name: 'affixHeader', + label: '是否固顶表头', + pipeIn: defaultValue(true) + }), + + getSchemaTpl('switch', { + name: 'showHeader', + label: '是否显示头部', + pipeIn: defaultValue(true) + }), + + getSchemaTpl('switch', { + name: 'showFooter', + label: '是否显示底部', + pipeIn: defaultValue(true) + }), + + getSchemaTpl('switch', { + name: 'footable', + label: '是否开启单条底部展示', + description: + '如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示', + pipeIn: (value: any) => !!value + }), + + { + name: 'footable.expand', + type: 'button-group-select', + size: 'xs', + visibleOn: 'data.footable', + label: '底部默认展开', + pipeIn: defaultValue('none'), + mode: 'inline', + className: 'w-full', + options: [ + { + label: '第一条', + value: 'first' + }, + + { + label: '所有', + value: 'all' + }, + + { + label: '不展开', + value: 'none' + } + ] }, { - label: '开启', - value: true + name: 'placeholder', + pipeIn: defaultValue('暂无数据'), + type: 'input-text', + label: '无数据提示' }, - { - label: '关闭', - value: false - } - ], - description: '自动即列数量大于5个时自动开启' - }, - - getSchemaTpl('switch', { - name: 'affixHeader', - label: '是否固顶表头', - pipeIn: defaultValue(true) - }), - - getSchemaTpl('switch', { - name: 'showHeader', - label: '是否显示头部', - pipeIn: defaultValue(true) - }), - - getSchemaTpl('switch', { - name: 'showFooter', - label: '是否显示底部', - pipeIn: defaultValue(true) - }), - - getSchemaTpl('switch', { - name: 'footable', - label: '是否开启单条底部展示', - description: - '如果列太多显示会很臃肿，可以考虑把部分列放在当前行的底部展示', - pipeIn: (value: any) => !!value - }), - - { - name: 'footable.expand', - type: 'button-group-select', - size: 'xs', - visibleOn: 'data.footable', - label: '底部默认展开', - pipeIn: defaultValue('none'), - mode: 'inline', - className: 'w-full', - options: [ - { - label: '第一条', - value: 'first' - }, - - { - label: '所有', - value: 'all' - }, - - { - label: '不展开', - value: 'none' + name: 'rowClassNameExpr', + type: 'input-text', + label: '行高亮规则', + placeholder: `支持模板语法，如 <%= data.id % 2 ? 'bg-success' : '' %>` } ] }, - { - name: 'placeholder', - pipeIn: defaultValue('暂无数据'), - type: 'input-text', - label: '无数据提示' - }, - { - name: 'rowClassNameExpr', - type: 'input-text', - label: '行高亮规则', - placeholder: `支持模板语法，如 <%= data.id % 2 ? 'bg-success' : '' %>` - }, - getSchemaTpl('className', { - label: '外层 CSS 类名' - }), + title: 'CSS类名', + body: [ + getSchemaTpl('className', { + label: '外层' + }), - getSchemaTpl('className', { - name: 'tableClassName', - label: '表格 CSS 类名' - }), + getSchemaTpl('className', { + name: 'tableClassName', + label: '表格' + }), - getSchemaTpl('className', { - name: 'headerClassName', - label: '顶部外层 CSS 类名' - }), + getSchemaTpl('className', { + name: 'headerClassName', + label: '顶部外层' + }), - getSchemaTpl('className', { - name: 'footerClassName', - label: '底部外层 CSS 类名' - }), + getSchemaTpl('className', { + name: 'footerClassName', + label: '底部外层' + }), - getSchemaTpl('className', { - name: 'toolbarClassName', - label: '工具栏 CSS 类名' - }) - ] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] + getSchemaTpl('className', { + name: 'toolbarClassName', + label: '工具栏' + }) + ] + } + ]) }, isCRUDBody ? null diff --git a/packages/amis-editor/src/plugin/Time.tsx b/packages/amis-editor/src/plugin/Time.tsx index 67e70e50b..eb4405455 100644 --- a/packages/amis-editor/src/plugin/Time.tsx +++ b/packages/amis-editor/src/plugin/Time.tsx @@ -21,47 +21,45 @@ export class TimePlugin extends DatePlugin { format: 'HH:mm:ss', value: Math.round(Date.now() / 1000) }; + panelJustify = true; panelBodyCreator = (context: BaseEventContext) => { return [ getSchemaTpl('tabs', [ { - title: '常规', - body: [ + title: '属性', + body: getSchemaTpl('collapseGroup', [ { - type: 'input-time', - name: 'value', - label: '时间数值' + title: '基本', + body: [ + { + type: 'input-time', + name: 'value', + label: '时间数值' + }, + { + type: 'input-text', + name: 'format', + label: '显示时间格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('HH:mm:ss') + }, + { + type: 'input-text', + name: 'valueFormat', + label: '数据日期格式', + description: '请参考 moment 中的格式用法。', + pipeIn: defaultValue('X') + }, + getSchemaTpl('placeholder', { + pipeIn: defaultValue('-'), + label: '占位符' + }) + ] }, - { - type: 'input-text', - name: 'format', - label: '显示时间格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('HH:mm:ss') - }, - { - type: 'input-text', - name: 'valueFormat', - label: '数据日期格式', - description: '请参考 moment 中的格式用法。', - pipeIn: defaultValue('X') - }, - { - name: 'placeholder', - type: 'input-text', - pipeIn: defaultValue('-'), - label: '占位符' - } - ] + getSchemaTpl('status') + ]) }, - { - title: '外观', - body: [getSchemaTpl('className')] - }, - { - title: '显隐', - body: [getSchemaTpl('ref'), getSchemaTpl('visible')] - } + getSchemaTpl('onlyClassNameTab') ]) ]; }; diff --git a/packages/amis-editor/src/tpl/common.tsx b/packages/amis-editor/src/tpl/common.tsx index 1e8894cc6..686f11952 100644 --- a/packages/amis-editor/src/tpl/common.tsx +++ b/packages/amis-editor/src/tpl/common.tsx @@ -664,6 +664,20 @@ setSchemaTpl('className', (schema: any) => { }; }); +setSchemaTpl('onlyClassNameTab', (label = '外层') => { + return { + title: '外观', + body: getSchemaTpl('collapseGroup', [ + { + title: 'CSS类名', + body: [ + getSchemaTpl('className', {label}) + ] + } + ]) + } +}); + /** * combo 组件样式包装调整 */