From 1b36da34ce71b88197d93ec6c1048ce3a77215d3 Mon Sep 17 00:00:00 2001 From: meerkat-morecats Date: Wed, 30 Nov 2022 10:31:04 +0800 Subject: [PATCH] =?UTF-8?q?amis-saas-8338=20=E4=BC=98=E5=8C=96=E5=A4=9A?= =?UTF-8?q?=E4=B8=AAloading=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Change-Id: Ibf187b85fb3aa74c21875b4b0a6ffb9ac6d692a4 --- packages/amis-editor/package.json | 2 +- packages/amis-editor/src/plugin/CRUD.tsx | 6 ++ packages/amis-editor/src/plugin/Cards.tsx | 2 + .../src/plugin/Form/ButtonGroupSelect.tsx | 11 ++- .../src/plugin/Form/ChainedSelect.tsx | 8 ++ .../src/plugin/Form/Checkboxes.tsx | 9 +- packages/amis-editor/src/plugin/Form/Form.tsx | 12 +++ .../amis-editor/src/plugin/Form/InputCity.tsx | 4 +- .../amis-editor/src/plugin/Form/InputTree.tsx | 7 ++ .../src/plugin/Form/ListSelect.tsx | 9 +- .../src/plugin/Form/MatrixCheckboxes.tsx | 3 +- .../src/plugin/Form/NestedSelect.tsx | 11 ++- .../amis-editor/src/plugin/Form/Radios.tsx | 9 +- .../amis-editor/src/plugin/Form/Select.tsx | 7 ++ .../src/plugin/Form/TabsTransfer.tsx | 7 ++ .../amis-editor/src/plugin/Form/Transfer.tsx | 8 ++ .../src/plugin/Form/TreeSelect.tsx | 7 ++ packages/amis-editor/src/plugin/Nav.tsx | 13 +-- packages/amis-editor/src/plugin/Service.tsx | 4 + packages/amis-editor/src/plugin/Table.tsx | 8 +- packages/amis-editor/src/plugin/Table2.tsx | 8 +- packages/amis-editor/src/plugin/Tasks.tsx | 16 ++-- packages/amis-editor/src/plugin/Wizard.tsx | 8 +- packages/amis-editor/src/tpl/api.tsx | 82 ++++++++++++++++++- 24 files changed, 238 insertions(+), 23 deletions(-) diff --git a/packages/amis-editor/package.json b/packages/amis-editor/package.json index b6c698a38..0259679d7 100644 --- a/packages/amis-editor/package.json +++ b/packages/amis-editor/package.json @@ -1,6 +1,6 @@ { "name": "amis-editor", - "version": "5.2.1-beta.32", + "version": "5.2.2-alpha.5", "description": "amis 可视化编辑器", "main": "lib/index.js", "module": "esm/index.js", diff --git a/packages/amis-editor/src/plugin/CRUD.tsx b/packages/amis-editor/src/plugin/CRUD.tsx index 7c896d7a6..0fe324a86 100644 --- a/packages/amis-editor/src/plugin/CRUD.tsx +++ b/packages/amis-editor/src/plugin/CRUD.tsx @@ -899,6 +899,12 @@ export class CRUDPlugin extends BasePlugin { type: 'divider' }, + getSchemaTpl('loadingConfig', {}, {context}), + + { + type: 'divider' + }, + { label: '默认消息提示', type: 'combo', diff --git a/packages/amis-editor/src/plugin/Cards.tsx b/packages/amis-editor/src/plugin/Cards.tsx index 7d802730d..3f2abb6d5 100644 --- a/packages/amis-editor/src/plugin/Cards.tsx +++ b/packages/amis-editor/src/plugin/Cards.tsx @@ -106,6 +106,7 @@ export class CardsPlugin extends BasePlugin { type: 'input-text', label: '打开外部链接' }, + isCRUDBody ? null : { @@ -116,6 +117,7 @@ export class CardsPlugin extends BasePlugin { description: '绑定当前环境变量', test: !isCRUDBody }, + { name: 'placeholder', value: '暂无数据', diff --git a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx index a059b3951..52a29eff6 100644 --- a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx @@ -124,7 +124,16 @@ export class ButtonGroupControlPlugin extends BasePlugin { }, { title: '按钮管理', - body: [getSchemaTpl('optionControlV2')] + body: [ + getSchemaTpl('optionControlV2'), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ) + ] }, getSchemaTpl('status', { isFormItem: true diff --git a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx index 85d6f18fa..bf67e87b1 100644 --- a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx @@ -158,6 +158,14 @@ export class ChainedSelectControlPlugin extends BasePlugin { ) }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), + { type: 'input-text', name: 'labelField', diff --git a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx index 6f7f31faa..1f069a0cb 100644 --- a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx +++ b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx @@ -195,7 +195,14 @@ export class CheckboxesControlPlugin extends BasePlugin { form: { body: [getSchemaTpl('deleteApi')] } - }) + }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ) ] }, getSchemaTpl('status', {isFormItem: true}), diff --git a/packages/amis-editor/src/plugin/Form/Form.tsx b/packages/amis-editor/src/plugin/Form/Form.tsx index eb6556012..6bf470ac9 100644 --- a/packages/amis-editor/src/plugin/Form/Form.tsx +++ b/packages/amis-editor/src/plugin/Form/Form.tsx @@ -724,6 +724,18 @@ export class FormPlugin extends BasePlugin { type: 'divider' }, + getSchemaTpl( + 'loadingConfig', + { + label: '加载设置' + }, + {context} + ), + + { + type: 'divider' + }, + isCRUDFilter ? { name: 'messages', diff --git a/packages/amis-editor/src/plugin/Form/InputCity.tsx b/packages/amis-editor/src/plugin/Form/InputCity.tsx index 8191cd0ab..94dfbc2cb 100644 --- a/packages/amis-editor/src/plugin/Form/InputCity.tsx +++ b/packages/amis-editor/src/plugin/Form/InputCity.tsx @@ -120,7 +120,9 @@ export class CityControlPlugin extends BasePlugin { name: 'searchable', label: '是否出搜索框', pipeIn: defaultValue(false) - }) + }), + + getSchemaTpl('loadingConfig', {}, {context}) ] }, getSchemaTpl('status', {isFormItem: true}), diff --git a/packages/amis-editor/src/plugin/Form/InputTree.tsx b/packages/amis-editor/src/plugin/Form/InputTree.tsx index f651fb380..e3533f295 100644 --- a/packages/amis-editor/src/plugin/Form/InputTree.tsx +++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx @@ -349,6 +349,13 @@ export class TreeControlPlugin extends BasePlugin { label: '数据', showIconField: true }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), getSchemaTpl('switch', { label: '只可选择叶子节点', name: 'onlyLeaf' diff --git a/packages/amis-editor/src/plugin/Form/ListSelect.tsx b/packages/amis-editor/src/plugin/Form/ListSelect.tsx index fb40bdd17..80669c108 100644 --- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx @@ -122,7 +122,14 @@ export class ListControlPlugin extends BasePlugin { body: [ getSchemaTpl('optionControlV2', { description: '设置选项后，输入时会下拉这些选项供用户参考。' - }) + }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source' + }, + {context} + ) ] }, status: {} diff --git a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx index 6f24bb971..4e1050355 100644 --- a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx +++ b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx @@ -202,7 +202,8 @@ export class MatrixControlPlugin extends BasePlugin { label: tipedLabel('接口', '获取矩阵数据接口'), name: 'source', mode: 'normal' - }) + }), + getSchemaTpl('loadingConfig', {}, {context}) // getSchemaTpl('value') ] }, diff --git a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx index 728e4bacd..f7c7dfbfd 100644 --- a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx @@ -305,7 +305,16 @@ export class NestedSelectControlPlugin extends BasePlugin { }, { title: '选项', - body: [getSchemaTpl('treeOptionControl')] + body: [ + getSchemaTpl('treeOptionControl'), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ) + ] }, getSchemaTpl('status', {isFormItem: true}), getSchemaTpl('validation', { diff --git a/packages/amis-editor/src/plugin/Form/Radios.tsx b/packages/amis-editor/src/plugin/Form/Radios.tsx index 7982953ed..725df38cf 100644 --- a/packages/amis-editor/src/plugin/Form/Radios.tsx +++ b/packages/amis-editor/src/plugin/Form/Radios.tsx @@ -140,7 +140,14 @@ export class RadiosControlPlugin extends BasePlugin { name: 'selectFirst', horizontal: {justify: true, left: 5}, visibleOn: '!this.options' - }) + }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ) ] }, getSchemaTpl('status', {isFormItem: true}), diff --git a/packages/amis-editor/src/plugin/Form/Select.tsx b/packages/amis-editor/src/plugin/Form/Select.tsx index db21519f7..72bc02018 100644 --- a/packages/amis-editor/src/plugin/Form/Select.tsx +++ b/packages/amis-editor/src/plugin/Form/Select.tsx @@ -251,6 +251,13 @@ export class SelectControlPlugin extends BasePlugin { title: '选项', body: [ getSchemaTpl('optionControlV2'), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), // 模板 getSchemaTpl('optionsMenuTpl', { manager: this.manager, diff --git a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx index 063337ad4..19a2d7510 100644 --- a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx +++ b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx @@ -324,6 +324,13 @@ export class TabsTransferPlugin extends BasePlugin { name: 'options' }, getSchemaTpl('source'), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), getSchemaTpl('joinValues'), getSchemaTpl('delimiter'), getSchemaTpl('extractValue'), diff --git a/packages/amis-editor/src/plugin/Form/Transfer.tsx b/packages/amis-editor/src/plugin/Form/Transfer.tsx index 571ec05bc..655d8f727 100644 --- a/packages/amis-editor/src/plugin/Form/Transfer.tsx +++ b/packages/amis-editor/src/plugin/Form/Transfer.tsx @@ -234,6 +234,14 @@ export class TransferPlugin extends BasePlugin { multiple: true }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), + { type: 'ae-transferTableControl', label: '数据', diff --git a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx index 9b6e5de51..dd8954322 100644 --- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx +++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx @@ -345,6 +345,13 @@ export class TreeSelectControlPlugin extends BasePlugin { label: '数据', showIconField: true }), + getSchemaTpl( + 'loadingConfig', + { + visibleOn: 'this.source || !this.options' + }, + {context} + ), getSchemaTpl('switch', { label: '只可选择叶子节点', name: 'onlyLeaf' diff --git a/packages/amis-editor/src/plugin/Nav.tsx b/packages/amis-editor/src/plugin/Nav.tsx index 28a6ffe25..1a353b9d8 100644 --- a/packages/amis-editor/src/plugin/Nav.tsx +++ b/packages/amis-editor/src/plugin/Nav.tsx @@ -1,4 +1,4 @@ -import {registerEditorPlugin} from 'amis-editor-core'; +import {BaseEventContext, registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin} from 'amis-editor-core'; import {getSchemaTpl} from 'amis-editor-core'; @@ -140,8 +140,8 @@ export class NavPlugin extends BasePlugin { ] } }; - panelBody = [ - getSchemaTpl('tabs', [ + panelBodyCreator = (context: BaseEventContext) => { + return getSchemaTpl('tabs', [ { title: '常规', body: [ @@ -156,7 +156,8 @@ export class NavPlugin extends BasePlugin { name: 'source', label: '获取菜单接口', description: '如果菜单地址希望可以动态设置，请在此填入接口地址' - }) + }), + getSchemaTpl('loadingConfig', {}, {context}) ] }, { @@ -174,8 +175,8 @@ export class NavPlugin extends BasePlugin { title: '显隐', body: [getSchemaTpl('ref'), getSchemaTpl('visible')] } - ]) - ]; + ]); + }; } registerEditorPlugin(NavPlugin); diff --git a/packages/amis-editor/src/plugin/Service.tsx b/packages/amis-editor/src/plugin/Service.tsx index fd784d619..d09907a30 100644 --- a/packages/amis-editor/src/plugin/Service.tsx +++ b/packages/amis-editor/src/plugin/Service.tsx @@ -97,6 +97,9 @@ export class ServicePlugin extends BasePlugin { panelTitle = '服务'; panelBodyCreator = (context: BaseEventContext) => { + console.log(context); + console.log(context.node.parent); + console.log(context.node.parent.getComponent()); return getSchemaTpl('tabs', [ { title: '属性', @@ -186,6 +189,7 @@ export class ServicePlugin extends BasePlugin { { title: '全局配置', body: [ + getSchemaTpl('loadingConfig', {}, {context}), getSchemaTpl('data'), { type: 'js-editor', diff --git a/packages/amis-editor/src/plugin/Table.tsx b/packages/amis-editor/src/plugin/Table.tsx index 4a73bca83..398e34593 100644 --- a/packages/amis-editor/src/plugin/Table.tsx +++ b/packages/amis-editor/src/plugin/Table.tsx @@ -364,7 +364,13 @@ export class TablePlugin extends BasePlugin { placeholder: '设置列数', description: '设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。' - } + }, + + isCRUDBody + ? null + : { + type: 'divider' + } // { // children: ( diff --git a/packages/amis-editor/src/plugin/Table2.tsx b/packages/amis-editor/src/plugin/Table2.tsx index 2313417ce..b27e7ae9a 100644 --- a/packages/amis-editor/src/plugin/Table2.tsx +++ b/packages/amis-editor/src/plugin/Table2.tsx @@ -741,7 +741,13 @@ export class Table2Plugin extends BasePlugin { }) ] } - ]) + ]), + + isCRUDBody + ? null + : { + type: 'divider' + } ] }, { diff --git a/packages/amis-editor/src/plugin/Tasks.tsx b/packages/amis-editor/src/plugin/Tasks.tsx index 06eb44cda..a84c548bc 100644 --- a/packages/amis-editor/src/plugin/Tasks.tsx +++ b/packages/amis-editor/src/plugin/Tasks.tsx @@ -1,4 +1,4 @@ -import {registerEditorPlugin} from 'amis-editor-core'; +import {BaseEventContext, registerEditorPlugin} from 'amis-editor-core'; import {BasePlugin} from 'amis-editor-core'; import {defaultValue, getSchemaTpl} from 'amis-editor-core'; @@ -43,8 +43,8 @@ export class TasksPlugin extends BasePlugin { }; panelTitle = '异步任务'; - panelBody = [ - getSchemaTpl('tabs', [ + panelBodyCreator = (context: BaseEventContext) => { + return getSchemaTpl('tabs', [ { title: '常规', body: [ @@ -111,6 +111,12 @@ export class TasksPlugin extends BasePlugin { label: '重试接口' }), + getSchemaTpl('loadingConfig', {}, {context}), + + { + type: 'divider' + }, + { name: 'taskNameLabel', type: 'input-text', @@ -268,8 +274,8 @@ export class TasksPlugin extends BasePlugin { title: '显隐', body: [getSchemaTpl('visible')] } - ]) - ]; + ]); + }; } registerEditorPlugin(TasksPlugin); diff --git a/packages/amis-editor/src/plugin/Wizard.tsx b/packages/amis-editor/src/plugin/Wizard.tsx index 0ff4c61b6..e9987d97f 100644 --- a/packages/amis-editor/src/plugin/Wizard.tsx +++ b/packages/amis-editor/src/plugin/Wizard.tsx @@ -544,7 +544,13 @@ export class WizardPlugin extends BasePlugin { visibleOn: 'data.asyncApi != null', description: '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束' - }) + }), + + { + type: 'divider' + }, + + getSchemaTpl('loadingConfig', {}, {context}) ] }, diff --git a/packages/amis-editor/src/tpl/api.tsx b/packages/amis-editor/src/tpl/api.tsx index 312396eea..fe7acd285 100644 --- a/packages/amis-editor/src/tpl/api.tsx +++ b/packages/amis-editor/src/tpl/api.tsx @@ -1,4 +1,9 @@ -import {setSchemaTpl, getSchemaTpl, tipedLabel} from 'amis-editor-core'; +import { + setSchemaTpl, + getSchemaTpl, + tipedLabel, + BaseEventContext +} from 'amis-editor-core'; import React from 'react'; import {buildApi, Html} from 'amis'; import {get} from 'lodash'; @@ -535,3 +540,78 @@ setSchemaTpl('actionApiControl', (patch: any = {}) => { ...rest }; }); + +const enum LoadingOption { + HIDDEN, + MERGE, + GLOBAL +} + +setSchemaTpl( + 'loadingConfig', + (patch: any, {context}: {context: BaseEventContext}) => { + let globalSelector = ''; + let parent = context.node.parent; + + while (parent && !globalSelector) { + const parentNodeType = parent.type; + + if (parentNodeType === 'dialog' || parentNodeType === 'drawer') { + globalSelector = '[role=dialog-body]'; + } else if (parentNodeType === 'page') { + globalSelector = '[role=page-body]'; + } + + parent = parent.parent; + } + + return { + name: 'loadingConfig', + type: 'select', + label: '加载设置', + options: [ + { + label: '合并到上层loading', + value: LoadingOption.MERGE + }, + { + label: '不展示loading', + value: LoadingOption.HIDDEN + }, + { + label: '使用页面全局loading', + value: LoadingOption.GLOBAL + } + ], + ...patch, + pipeOut: (value: LoadingOption) => { + switch (value) { + case LoadingOption.HIDDEN: + return { + show: false + }; + case LoadingOption.GLOBAL: + return { + show: true, + root: globalSelector + }; + case LoadingOption.MERGE: + return { + show: true + }; + default: + return {}; + } + }, + pipeIn: (value: any = {}) => { + if (value.root) { + return LoadingOption.GLOBAL; + } + if (value.show === false) { + return LoadingOption.HIDDEN; + } + return LoadingOption.MERGE; + } + }; + } +);