amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/CRUD.tsx

@@ -1,5 +1,4 @@
 import {toast} from 'amis';
-
 import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
 import React from 'react';
@@ -23,6 +22,7 @@ import {isObject, JSONPipeIn} from '../util';
 import {setVariable} from 'amis-core';
 import {ActionSchema} from 'amis/lib/renderers/Action';
 import {getEnv} from 'mobx-state-tree';
+import {EditorNodeType} from '../store/node';
 import {normalizeApi} from 'amis-core';
 
 interface ColumnItem {
@@ -82,10 +82,10 @@ export class CRUDPlugin extends BasePlugin {
       total: 0
     };
 
-    if (Array.isArray(schema.columns)) {
+    if (Array.isArray(schema?.columns)) {
       const item = {};
       schema.columns.forEach((control: any) => {
-        if (control.name) {
+        if (control?.name) {
           setVariable(item, control.name, 'sample');
         }
       });
@@ -209,33 +209,19 @@ export class CRUDPlugin extends BasePlugin {
     body: [
       getSchemaTpl('api', {
         label: '接口地址',
-        sampleBuilder: (schema: any) => {
-          const data: any = {
-            items: [],
-            total: 0
-          };
-
-          if (Array.isArray(schema.columns)) {
-            const item = {};
-            schema.columns.forEach((control: any) => {
-              if (control.name) {
-                setVariable(item, control.name, 'sample');
-              }
-            });
-
-            data.items.push(item);
-          }
-
-          return JSON.stringify(
+        sampleBuilder: (schema: any) =>
+          JSON.stringify(
             {
               status: 0,
               msg: '',
-              data: data
+              data: [
+                {id: 1, name: 'Jack'},
+                {id: 2, name: 'Rose'}
+              ]
             },
             null,
             2
-          );
-        }
+          )
       }),
       {
         type: 'button',
@@ -554,11 +540,8 @@ export class CRUDPlugin extends BasePlugin {
       {
         title: '常规',
         body: [
-          {
+          getSchemaTpl('switch', {
             name: 'filter',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             label: '启用查询条件',
             pipeIn: (value: any) => !!value,
             pipeOut: (value: any, originValue: any) => {
@@ -582,7 +565,7 @@ export class CRUDPlugin extends BasePlugin {
 
               return null;
             }
-          },
+          }),
 
           {
             type: 'divider'
@@ -632,14 +615,12 @@ export class CRUDPlugin extends BasePlugin {
             ]
           },
 
-          // {
-          //     name: 'defaultChecked',
-          //     type: 'switch',
-          //     mode: 'inline',
-          //     label: '默认是否全部勾选',
-          //     visibleOn: 'data.bulkActions && data.bulkActions.length',
-          //     pipeIn: defaultValue(false)
-          // },
+          // getSchemaTpl('switch', {
+          //   name: 'defaultChecked',
+          //   label: '默认是否全部勾选',
+          //   visibleOn: 'data.bulkActions && data.bulkActions.length',
+          //   pipeIn: defaultValue(false)
+          // }),
 
           {
             type: 'divider'
@@ -700,12 +681,9 @@ export class CRUDPlugin extends BasePlugin {
             hiddenOn: 'this.mode && this.mode !== "table" || this.pickerMode'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'syncLocation',
             label: '同步地址栏',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             pipeIn: defaultValue(true),
             labelRemark: {
               className: 'm-l-xs',
@@ -715,7 +693,7 @@ export class CRUDPlugin extends BasePlugin {
                 '开启后会把查询条件数据和分页信息同步到地址栏中，页面中出现多个时，建议只保留一个同步地址栏，否则会相互影响。',
               placement: 'left'
             }
-          },
+          }),
 
           {
             label: '默认参数',
@@ -734,12 +712,9 @@ export class CRUDPlugin extends BasePlugin {
             type: 'divider'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'keepItemSelectionOnPageChange',
             label: '保留条目选择',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             visbileOn:
               'this.bulkActions && this.bulkActions.length || this.itemActions && this.itemActions.length',
             labelRemark: {
@@ -750,7 +725,7 @@ export class CRUDPlugin extends BasePlugin {
                 '默认分页、搜索后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。',
               placement: 'left'
             }
-          },
+          }),
 
           {
             name: 'labelTpl',
@@ -782,23 +757,20 @@ export class CRUDPlugin extends BasePlugin {
         body: [
           getSchemaTpl('api', {
             label: '数据拉取接口',
-            sampleBuilder: (schema: any) => {
+            sampleBuilder: () => {
               const data: any = {
                 items: [],
                 total: 0
               };
+              const columns: any[] = context?.schema?.columns ?? [];
+              const row = {};
 
-              if (Array.isArray(schema.columns)) {
-                const item = {};
-                schema.columns.forEach((control: any) => {
-                  if (control.name) {
-                    setVariable(item, control.name, 'sample');
-                  }
-                });
-
-                data.items.push(item);
-              }
-
+              columns.forEach(column => {
+                if (column.name) {
+                  setVariable(row, column.name, 'sample');
+                }
+              });
+              data.items.push(row);
               return JSON.stringify(
                 {
                   status: 0,
@@ -847,12 +819,9 @@ export class CRUDPlugin extends BasePlugin {
             className: 'm-t-n-sm'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'loadDataOnce',
             label: '一次性拉取',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block',
             labelRemark: {
               className: 'm-l-xs',
               trigger: 'click',
@@ -861,18 +830,15 @@ export class CRUDPlugin extends BasePlugin {
                 '开启后，数据只会在初始的时候拉取，后续分页、排序不再请求接口，都由前端直接完成。',
               placement: 'left'
             }
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             label: '开启定时刷新',
-            type: 'switch',
             name: 'interval',
             visibleOn: 'data.api',
             pipeIn: (value: any) => !!value,
-            pipeOut: (value: any) => (value ? 3000 : undefined),
-            mode: 'inline',
-            className: 'block'
-          },
+            pipeOut: (value: any) => (value ? 3000 : undefined)
+          }),
 
           {
             name: 'interval',
@@ -883,14 +849,12 @@ export class CRUDPlugin extends BasePlugin {
             description: '设置后将自动定时刷新，单位 ms'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'silentPolling',
             label: '静默刷新',
-            type: 'switch',
-            mode: 'inline',
             visibleOn: '!!data.interval',
             description: '设置自动定时刷新时是否显示loading'
-          },
+          }),
 
           {
             name: 'stopAutoRefreshWhen',
@@ -901,27 +865,21 @@ export class CRUDPlugin extends BasePlugin {
               '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'stopAutoRefreshWhenModalIsOpen',
             label: '当有弹框时关闭自动刷新',
-            type: 'switch',
             visibleOn: '!!data.interval',
-            mode: 'inline',
-            className: 'block',
             description: '弹框打开关闭自动刷新，关闭弹框又恢复'
-          },
+          }),
 
           {
             type: 'divider'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'draggable',
-            label: '是否可拖拽排序',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block'
-          },
+            label: '是否可拖拽排序'
+          }),
 
           getSchemaTpl('api', {
             label: '顺序保存接口',
@@ -1502,49 +1460,34 @@ export class CRUDPlugin extends BasePlugin {
             ]
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'filterTogglable',
-            type: 'switch',
             label: '是否可显隐查询条件',
-            mode: 'inline',
-            className: 'block',
             visibleOn: 'data.filter'
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'filterDefaultVisible',
-            type: 'switch',
             label: '查询条件默认是否可见',
-            pipeIn: defaultValue(true),
-            mode: 'inline',
-            className: 'block',
-            visibleOn: 'data.filter && data.filterTogglable'
-          },
+            visibleOn: 'data.filter && data.filterTogglable',
+            pipeIn: defaultValue(true)
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'hideQuickSaveBtn',
-            label: '隐藏顶部快速保存提示',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block'
-          },
+            label: '隐藏顶部快速保存提示'
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'alwaysShowPagination',
-            label: '是否总是显示分页',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block'
-          },
+            label: '是否总是显示分页'
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'hideCheckToggler',
-            type: 'switch',
             label: '隐藏选择按钮',
-            mode: 'inline',
-            className: 'block',
             visibleOn: 'data.checkOnItemClick'
-          },
+          }),
 
           getSchemaTpl('className'),
 
@@ -1573,13 +1516,10 @@ export class CRUDPlugin extends BasePlugin {
             type: 'input-number'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'keepItemSelectionOnPageChange',
-            label: '翻页时保留选择',
-            type: 'switch',
-            mode: 'inline',
-            className: 'block'
-          },
+            label: '翻页时保留选择'
+          }),
 
           {
             name: 'maxKeepItemSelectionLength',
@@ -1640,33 +1580,24 @@ export class CRUDPlugin extends BasePlugin {
               'data.bulkActions && data.bulkActions.length || data.pickerMode'
           },
 
-          {
+          getSchemaTpl('switch', {
             name: 'checkOnItemClick',
-            type: 'switch',
             label: '开启单条点击整个区域选中',
-            mode: 'inline',
-            className: 'block',
             visibleOn:
               'data.bulkActions && data.bulkActions.length || data.pickerMode'
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'autoJumpToTopOnPagerChange',
-            type: 'switch',
             label: '自动跳顶部',
-            mode: 'inline',
-            className: 'block',
             description: '当切分页的时候，是否自动跳顶部'
-          },
+          }),
 
-          {
+          getSchemaTpl('switch', {
             name: 'syncResponse2Query',
-            type: 'switch',
             label: '同步查询条件',
-            mode: 'inline',
-            className: 'block',
             description: '查询后将返回的数据同步到查询条件上'
-          }
+          })
         ]
       }
     ]);
@@ -1830,6 +1761,17 @@ export class CRUDPlugin extends BasePlugin {
       }, 20);
     }
   }
+
+  async buildDataSchemas(node: EditorNodeType, region?: EditorNodeType) {
+    const child: EditorNodeType = node.children.find(
+      item => !!~['table', 'table2', 'cards', 'list'].indexOf(item.type)
+    );
+
+    if (!child?.info?.plugin?.buildDataSchemas) {
+      return;
+    }
+    return child.info.plugin.buildDataSchemas(child);
+  }
 }
 
 registerEditorPlugin(CRUDPlugin);

package/src/plugin/Card.tsx

@@ -222,6 +222,7 @@ export class CardPlugin extends BasePlugin {
       const id = field.$$id;
       return (
         <VRenderer
+          type={info.type}
           plugin={info.plugin}
           renderer={info.renderer}
           multifactor

package/src/plugin/Cards.tsx

@@ -126,22 +126,18 @@ export class CardsPlugin extends BasePlugin {
         {
           title: '外观',
           body: [
-            {
+            getSchemaTpl('switch', {
               name: 'showHeader',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block',
               label: '是否显示头部',
               pipeIn: defaultValue(true)
-            },
-            {
+            }),
+
+            getSchemaTpl('switch', {
               name: 'showFooter',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block',
               label: '是否显示底部',
               pipeIn: defaultValue(true)
-            },
+            }),
+
             getSchemaTpl('className', {
               label: 'CSS 类名'
             }),
@@ -172,12 +168,10 @@ export class CardsPlugin extends BasePlugin {
               label: '每行显示个数',
               description: '不设置时，由卡片 CSS 类名决定'
             },
-            {
+            getSchemaTpl('switch', {
               name: 'masonryLayout',
-              type: 'switch',
-              mode: 'inline',
               label: '启用瀑布流'
-            }
+            })
           ]
         },
         {

package/src/plugin/Carousel.tsx

@@ -374,4 +374,4 @@ export class CarouselPlugin extends BasePlugin {
   }
 }
 
-registerEditorPlugin(CarouselPlugin);
+registerEditorPlugin(CarouselPlugin);

package/src/plugin/Chart.tsx

@@ -10,6 +10,7 @@ import {
 import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
 import {diff} from '../util';
 import AMisCodeEditor from '../component/Panel/AMisCodeEditor';
+import {RendererAction} from '../event-action';
 
 const ChartConfigEditor = ({value, onChange}: any) => {
   return (
@@ -55,6 +56,20 @@ export class ChartPlugin extends BasePlugin {
     ...this.scaffold
   };
 
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'reload',
+      actionLabel: '重新加载',
+      description: '触发组件数据刷新并重新渲染'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '更新数据',
+      description: '触发组件数据更新'
+    }
+  ];
+
   panelTitle = '图表';
   panelBodyCreator = (context: BaseEventContext) => {
     return [
@@ -67,15 +82,14 @@ export class ChartPlugin extends BasePlugin {
               description:
                 '接口可以返回配置，或者数据，建议返回数据可映射到 Echarts 配置中'
             }),
-            {
+
+            getSchemaTpl('switch', {
               label: '初始是否拉取',
-              type: 'switch',
               name: 'initFetch',
               visibleOn: 'data.api',
-              pipeIn: defaultValue(true),
-              mode: 'inline',
-              className: 'block'
-            },
+              pipeIn: defaultValue(true)
+            }),
+
             {
               name: 'interval',
               label: '定时刷新间隔',
@@ -144,8 +158,10 @@ export class ChartPlugin extends BasePlugin {
               <pre>debugger; // 可以浏览器中断点调试\n\n// 查看原始数据\nconsole.log(config)\n\n// 返回新的结果 \nreturn {}</pre>
               `
             },
-            {
-              label: 'Chart 配置完全替换？',
+
+            getSchemaTpl('switch', {
+              label: 'Chart 配置完全替换',
+              name: 'replaceChartOption',
               labelRemark: {
                 trigger: 'click',
                 className: 'm-l-xs',
@@ -153,12 +169,8 @@ export class ChartPlugin extends BasePlugin {
                 content:
                   '默认为追加模式，新的配置会跟旧的配置合并，如果勾选将直接完全覆盖。',
                 placement: 'left'
-              },
-              name: 'replaceChartOption',
-              type: 'switch',
-              mode: 'inline',
-              className: 'block'
-            }
+              }
+            })
           ]
         },
         {