= [];
-
- 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 组件样式包装调整
*/