amis-editor 4.2.0-beta.3 → 5.1.8

package/src/plugin/Form/Transfer.tsx

@@ -1,6 +1,8 @@
 import {getSchemaTpl} from '../../component/schemaTpl';
 import {registerEditorPlugin} from '../../manager';
-import {BasePlugin} from '../../plugin';
+import {BasePlugin, BaseEventContext} from '../../plugin';
+import {getEventControlConfig} from '../../util';
+import {RendererAction, RendererEvent} from '../../event-action';
 
 export class TransferPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -73,6 +75,66 @@ export class TransferPlugin extends BasePlugin {
   };
 
   panelTitle = '穿梭器';
+
+  events: RendererEvent[] = [
+    {
+      eventName: 'change',
+      eventLabel: '值变化',
+      description: '输入框失去焦点时触发',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data.value': {
+              type: 'string',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    },
+    {
+      eventName: 'selectAll',
+      eventLabel: '全选',
+      description: '选中所有选项',
+      dataSchema: [
+        {
+          type: 'object',
+          properties: {
+            'event.data': {
+              type: 'array',
+              title: '选中值'
+            }
+          }
+        }
+      ]
+    }
+  ];
+
+  // 动作定义
+  actions: RendererAction[] = [
+    {
+      actionType: 'clear',
+      actionLabel: '清空',
+      description: '清空选中内容'
+    },
+    {
+      actionType: 'reset',
+      actionLabel: '重置',
+      description: '重置选择的内容'
+    },
+    {
+      actionType: 'selectAll',
+      actionLabel: '全选',
+      description: '选中所有选项'
+    },
+    {
+      actionType: 'setValue',
+      actionLabel: '赋值',
+      description: '触发组件数据更新，多值用“,”分隔'
+    }
+  ];
+
   panelDefinitions = {
     options: {
       label: '选项 Options',
@@ -115,254 +177,254 @@ export class TransferPlugin extends BasePlugin {
     }
   };
 
-  panelBody = [
-    getSchemaTpl('switchDefaultValue'),
+  // notRenderFormZone = true;
 
-    {
-      type: 'select',
-      name: 'value',
-      label: '默认值',
-      source: '${options}',
-      visibleOn: '!data.multiple && typeof this.value !== "undefined"'
-    },
+  panelBodyCreator = (context: BaseEventContext) => {
+    const renderer: any = context.info.renderer;
 
-    {
-      type: 'select',
-      name: 'value',
-      label: '默认值',
-      source: '${options}',
-      multiple: true,
-      visibleOn: ' data.multiple && typeof this.value !== "undefined"'
-    },
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: getSchemaTpl('collapseGroup', [
+          getSchemaTpl('switchDefaultValue'),
 
-    {
-      label: '勾选展示模式',
-      name: 'selectMode',
-      type: 'select',
-      mode: 'inline',
-      className: 'w-full',
-      options: [
-        {
-          label: '列表形式',
-          value: 'list'
-        },
-        {
-          label: '表格形式',
-          value: 'table'
-        },
-        {
-          label: '树形选择形式',
-          value: 'tree'
-        },
-        {
-          label: '级联选择形式',
-          value: 'chained'
-        },
-        {
-          label: '关联选择形式',
-          value: 'associated'
-        }
-      ]
-    },
+          {
+            type: 'select',
+            name: 'value',
+            label: '默认值',
+            source: '${options}',
+            visibleOn: '!data.multiple && typeof this.value !== "undefined"'
+          },
 
-    {
-      name: 'columns',
-      type: 'combo',
-      multiple: true,
-      label: false,
-      strictMode: false,
-      addButtonText: '新增一列',
-      draggable: false,
-      visibleOn: 'data.selectMode === "table"',
-      items: [
-        {
-          type: 'input-text',
-          name: 'label',
-          placeholder: '标题'
-        },
-        {
-          type: 'input-text',
-          name: 'name',
-          placeholder: '绑定字段名'
-        },
-        {
-          type: 'select',
-          name: 'type',
-          placeholder: '类型',
-          value: 'input-text',
-          options: [
-            {
-              value: 'text',
-              label: '纯文本'
-            },
-            {
-              value: 'tpl',
-              label: '模板'
-            },
-            {
-              value: 'image',
-              label: '图片'
-            },
-            {
-              value: 'date',
-              label: '日期'
-            },
-            {
-              value: 'progress',
-              label: '进度'
-            },
-            {
-              value: 'status',
-              label: '状态'
-            },
-            {
-              value: 'mapping',
-              label: '映射'
-            },
-            {
-              value: 'operation',
-              label: '操作栏'
-            }
-          ]
-        }
-      ]
-    },
+          {
+            type: 'select',
+            name: 'value',
+            label: '默认值',
+            source: '${options}',
+            multiple: true,
+            visibleOn: ' data.multiple && typeof this.value !== "undefined"'
+          },
 
-    {
-      $ref: 'options',
-      label: '左边的选项集',
-      name: 'leftOptions',
-      visibleOn: 'data.selectMode === "associated"'
-    },
+          {
+            label: '勾选展示模式',
+            name: 'selectMode',
+            type: 'select',
+            mode: 'inline',
+            className: 'w-full',
+            options: [
+              {
+                label: '列表形式',
+                value: 'list'
+              },
+              {
+                label: '表格形式',
+                value: 'table'
+              },
+              {
+                label: '树形选择形式',
+                value: 'tree'
+              },
+              {
+                label: '级联选择形式',
+                value: 'chained'
+              },
+              {
+                label: '关联选择形式',
+                value: 'associated'
+              }
+            ]
+          },
 
-    {
-      label: '左侧选择形式',
-      name: 'leftMode',
-      type: 'select',
-      mode: 'inline',
-      className: 'w-full',
-      visibleOn: 'data.selectMode === "associated"',
-      options: [
-        {
-          label: '列表形式',
-          value: 'list'
-        },
-        {
-          label: '树形选择形式',
-          value: 'tree'
-        }
-      ]
-    },
+          {
+            name: 'columns',
+            type: 'combo',
+            multiple: true,
+            label: false,
+            strictMode: false,
+            addButtonText: '新增一列',
+            draggable: false,
+            visibleOn: 'data.selectMode === "table"',
+            items: [
+              {
+                type: 'input-text',
+                name: 'label',
+                placeholder: '标题'
+              },
+              {
+                type: 'input-text',
+                name: 'name',
+                placeholder: '绑定字段名'
+              },
+              {
+                type: 'select',
+                name: 'type',
+                placeholder: '类型',
+                value: 'input-text',
+                options: [
+                  {
+                    value: 'text',
+                    label: '纯文本'
+                  },
+                  {
+                    value: 'tpl',
+                    label: '模板'
+                  },
+                  {
+                    value: 'image',
+                    label: '图片'
+                  },
+                  {
+                    value: 'date',
+                    label: '日期'
+                  },
+                  {
+                    value: 'progress',
+                    label: '进度'
+                  },
+                  {
+                    value: 'status',
+                    label: '状态'
+                  },
+                  {
+                    value: 'mapping',
+                    label: '映射'
+                  },
+                  {
+                    value: 'operation',
+                    label: '操作栏'
+                  }
+                ]
+              }
+            ]
+          },
 
-    {
-      label: '右侧选择形式',
-      name: 'rightMode',
-      type: 'select',
-      mode: 'inline',
-      className: 'w-full',
-      visibleOn: 'data.selectMode === "associated"',
-      options: [
-        {
-          label: '列表形式',
-          value: 'list'
-        },
-        {
-          label: '树形选择形式',
-          value: 'tree'
-        }
-      ]
-    },
+          {
+            $ref: 'options',
+            label: '左边的选项集',
+            name: 'leftOptions',
+            visibleOn: 'data.selectMode === "associated"'
+          },
 
-    {
-      label: '可检索',
-      name: 'searchable',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+          {
+            label: '左侧选择形式',
+            name: 'leftMode',
+            type: 'select',
+            mode: 'inline',
+            className: 'w-full',
+            visibleOn: 'data.selectMode === "associated"',
+            options: [
+              {
+                label: '列表形式',
+                value: 'list'
+              },
+              {
+                label: '树形选择形式',
+                value: 'tree'
+              }
+            ]
+          },
 
-    getSchemaTpl('api', {
-      label: '检索接口',
-      name: 'searchApi'
-    }),
+          {
+            label: '右侧选择形式',
+            name: 'rightMode',
+            type: 'select',
+            mode: 'inline',
+            className: 'w-full',
+            visibleOn: 'data.selectMode === "associated"',
+            options: [
+              {
+                label: '列表形式',
+                value: 'list'
+              },
+              {
+                label: '树形选择形式',
+                value: 'tree'
+              }
+            ]
+          },
 
-    {
-      label: '查询时勾选展示模式',
-      name: 'searchResultMode',
-      type: 'select',
-      mode: 'inline',
-      className: 'w-full',
-      options: [
-        {
-          label: '列表形式',
-          value: 'list'
-        },
-        {
-          label: '表格形式',
-          value: 'table'
-        },
-        {
-          label: '树形选择形式',
-          value: 'tree'
-        },
-        {
-          label: '级联选择形式',
-          value: 'chained'
-        }
-      ]
-    },
+          getSchemaTpl('searchable'),
 
-    {
-      label: '可排序',
-      name: 'sortable',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+          getSchemaTpl('api', {
+            label: '检索接口',
+            name: 'searchApi'
+          }),
 
-    {
-      label: '是否默认选择第一个',
-      name: 'selectFirst',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+          {
+            label: '查询时勾选展示模式',
+            name: 'searchResultMode',
+            type: 'select',
+            mode: 'inline',
+            className: 'w-full',
+            options: [
+              {
+                label: '列表形式',
+                value: 'list'
+              },
+              {
+                label: '表格形式',
+                value: 'table'
+              },
+              {
+                label: '树形选择形式',
+                value: 'tree'
+              },
+              {
+                label: '级联选择形式',
+                value: 'chained'
+              }
+            ]
+          },
 
-    {
-      label: '是否显示统计数据',
-      name: 'statistics',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full'
-    },
+          getSchemaTpl('sortable'),
 
-    {
-      label: '左侧的标题文字',
-      name: 'selectTitle',
-      type: 'input-text'
-    },
+          getSchemaTpl('selectFirst'),
 
-    {
-      label: '右侧结果的标题文字',
-      name: 'resultTitle',
-      type: 'input-text'
-    },
+          getSchemaTpl('switch', {
+            label: '是否显示统计数据',
+            name: 'statistics'
+          }),
 
-    getSchemaTpl('fieldSet', {
-      title: '选项',
-      body: [
-        {
-          $ref: 'options',
-          name: 'options'
-        },
-        getSchemaTpl('source'),
-        getSchemaTpl('joinValues'),
-        getSchemaTpl('delimiter'),
-        getSchemaTpl('extractValue'),
-        getSchemaTpl('autoFill')
-      ]
-    })
-  ];
+          {
+            label: '左侧的标题文字',
+            name: 'selectTitle',
+            type: 'input-text'
+          },
+
+          {
+            label: '右侧结果的标题文字',
+            name: 'resultTitle',
+            type: 'input-text'
+          },
+
+          getSchemaTpl('fieldSet', {
+            title: '选项',
+            body: [
+              {
+                $ref: 'options',
+                name: 'options'
+              },
+              getSchemaTpl('source'),
+              getSchemaTpl('joinValues'),
+              getSchemaTpl('delimiter'),
+              getSchemaTpl('extractValue'),
+              getSchemaTpl('autoFill')
+            ]
+          })
+        ])
+      },
+      {
+        title: '事件',
+        className: 'p-none',
+        body: [
+          getSchemaTpl('eventControl', {
+            name: 'onEvent',
+            ...getEventControlConfig(this.manager, context)
+          })
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(TransferPlugin);