amis-editor 5.2.0 → 5.2.1-beta.15

package/src/plugin/CRUD.tsx

@@ -1,1777 +0,0 @@
-import {toast} from 'amis';
-import get from 'lodash/get';
-import cloneDeep from 'lodash/cloneDeep';
-import React from 'react';
-
-import {registerEditorPlugin} from '../manager';
-import {
-  BaseEventContext,
-  BasePlugin,
-  BasicRendererInfo,
-  BasicSubRenderInfo,
-  ChangeEventContext,
-  PluginEvent,
-  PluginInterface,
-  RendererEventContext,
-  RendererInfoResolveEventContext,
-  ScaffoldForm,
-  SubRendererInfo
-} from '../plugin';
-import {defaultValue, getSchemaTpl} from '../component/schemaTpl';
-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 {
-  label: string;
-  type: string;
-  name: string;
-}
-
-// 将展现控件转成编辑控件
-const viewTypeToEditType = (type: string) => {
-  return type === 'tpl'
-    ? 'input-text'
-    : type === 'status' || type === 'mapping'
-    ? 'select'
-    : `input-${type}`;
-};
-
-export class CRUDPlugin extends BasePlugin {
-  // 关联渲染器名字
-  rendererName = 'crud';
-  $schema = '/schemas/CRUDSchema.json';
-
-  order = -1000;
-
-  // 组件名称
-  name = '增删改查';
-  isBaseComponent = true;
-  description =
-    '用来实现对数据的增删改查，支持三种模式展示：table、cards和list. 负责数据的拉取，分页，单条操作，批量操作，排序，快速编辑等等功能。集成查询条件。';
-  docLink = '/amis/zh-CN/components/crud';
-  tags = ['功能'];
-  icon = 'fa fa-table';
-
-  scaffold: any = {
-    type: 'crud',
-    syncLocation: false,
-    api: '',
-    columns: [
-      {
-        name: 'id',
-        label: 'ID',
-        type: 'text'
-      },
-      {
-        name: 'engine',
-        label: '渲染引擎',
-        type: 'text'
-      }
-    ],
-    bulkActions: [],
-    itemActions: []
-  };
-
-  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(
-      {
-        status: 0,
-        msg: '',
-        data: data
-      },
-      null,
-      2
-    );
-  };
-
-  btnSchemas = {
-    create: {
-      label: '新增',
-      type: 'button',
-      actionType: 'dialog',
-      level: 'primary',
-      dialog: {
-        title: '新增',
-        body: {
-          type: 'form',
-          api: 'xxx/create',
-          body: []
-        }
-      }
-    },
-    update: {
-      label: '编辑',
-      type: 'button',
-      actionType: 'dialog',
-      level: 'link',
-      dialog: {
-        title: '编辑',
-        body: {
-          type: 'form',
-          api: 'xxx/update',
-          body: []
-        }
-      }
-    },
-    view: {
-      label: '查看',
-      type: 'button',
-      actionType: 'dialog',
-      level: 'link',
-      dialog: {
-        title: '查看详情',
-        body: {
-          type: 'form',
-          api: 'xxx/update',
-          body: []
-        }
-      }
-    },
-    delete: {
-      type: 'button',
-      label: '删除',
-      actionType: 'ajax',
-      level: 'link',
-      className: 'text-danger',
-      confirmText: '确定要删除？',
-      api: 'delete:/xxx/delete'
-    },
-    bulkDelete: {
-      type: 'button',
-      level: 'danger',
-      label: '批量删除',
-      actionType: 'ajax',
-      confirmText: '确定要删除？',
-      api: '/xxx/batch-delete'
-    },
-    bulkUpdate: {
-      type: 'button',
-      label: '批量编辑',
-      actionType: 'dialog',
-      dialog: {
-        title: '批量编辑',
-        size: 'md',
-        body: {
-          type: 'form',
-          api: '/xxx/bacth-edit',
-          body: [
-            {
-              label: '字段1',
-              text: '字段1',
-              type: 'input-text'
-            }
-          ]
-        }
-      }
-    },
-    // itemDelete: {
-    //   type: 'button',
-    //   level: 'danger',
-    //   label: '删除',
-    //   api: '/xxx/delete-one',
-    //   actionType: 'ajax',
-    //   confirmText: '确定要删除？'
-    // },
-    filter: {
-      title: '查询条件',
-      body: [
-        {
-          type: 'input-text',
-          name: 'keywords',
-          label: '关键字'
-        }
-      ]
-    }
-  };
-
-  scaffoldForm: ScaffoldForm = {
-    title: '增删改查快速开始-CRUD',
-    body: [
-      getSchemaTpl('api', {
-        label: '接口地址',
-        sampleBuilder: (schema: any) =>
-          JSON.stringify(
-            {
-              status: 0,
-              msg: '',
-              data: [
-                {id: 1, name: 'Jack'},
-                {id: 2, name: 'Rose'}
-              ]
-            },
-            null,
-            2
-          )
-      }),
-      {
-        type: 'button',
-        label: '格式校验并自动生成列配置',
-        className: 'm-t-xs m-b-xs',
-        onClick: async (e: Event, props: any) => {
-          const data = props.data;
-          const schemaFilter = getEnv((window as any).editorStore).schemaFilter;
-          let api: any = data.api;
-          // 主要是给爱速搭中替换 url
-          if (schemaFilter) {
-            api = schemaFilter({
-              api: data.api
-            }).api;
-          }
-          const result = await props.env.fetcher(api, data);
-
-          let autoFillKeyValues: Array<any> = [];
-          const items = result.data?.rows || result.data?.items;
-          if (items?.length) {
-            Object.keys(items[0]).forEach((key: any) => {
-              const value = items[0][key];
-              autoFillKeyValues.push({
-                label: key,
-                type: 'text',
-                name: key
-              });
-            });
-            props.formStore.setValues({
-              columns: autoFillKeyValues
-            });
-            // 查询条件的字段列表
-            props.formStore.setValues({
-              filterSettingSource: autoFillKeyValues.map(column => {
-                return column.name;
-              })
-            });
-          } else {
-            toast.warning(
-              `API返回格式不正确，请点击接口地址右侧示例的问号查看示例`
-            );
-          }
-        }
-      },
-      {
-        name: 'features',
-        label: '启用功能',
-        type: 'checkboxes',
-        joinValues: false,
-        extractValue: true,
-        itemClassName: 'max-w-lg',
-        options: [
-          {label: '新增', value: 'create'},
-          {label: '查询', value: 'filter'},
-          {label: '批量删除', value: 'bulkDelete'},
-          {label: '批量修改', value: 'bulkUpdate'},
-          {label: '操作栏-编辑', value: 'update'},
-          {label: '操作栏-查看详情', value: 'view'},
-          {label: '操作栏-删除', value: 'delete'}
-        ]
-      },
-      {
-        type: 'group',
-        body: [
-          {
-            columnRatio: 10,
-            type: 'checkboxes',
-            label: '启用的查询字段',
-            name: 'filterEnabledList',
-            joinValues: false,
-            source: '${filterSettingSource}'
-          },
-          {
-            columnRatio: 2,
-            type: 'input-number',
-            label: '每列显示几个字段',
-            value: 3,
-            name: 'filterColumnCount'
-          }
-        ],
-        visibleOn: 'data.features && data.features.includes("filter")'
-      },
-      {
-        name: 'columns',
-        type: 'input-table',
-        label: false,
-        addable: true,
-        removable: true,
-        needConfirm: false,
-        columns: [
-          {
-            type: 'input-text',
-            name: 'label',
-            label: '标题'
-          },
-          {
-            type: 'input-text',
-            name: 'name',
-            label: '绑定字段名'
-          },
-          {
-            type: 'select',
-            name: 'type',
-            label: '类型',
-            value: '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: '操作栏'
-              }
-            ]
-          }
-        ]
-      }
-    ],
-    pipeOut: (value: any) => {
-      let valueSchema = cloneDeep(value);
-      // 查看/删除 操作，可选择是否使用接口返回值预填充
-      const features: Array<any> = valueSchema.features;
-      const oper: {
-        type: 'operation';
-        label?: string;
-        buttons: Array<ActionSchema>;
-      } = {
-        type: 'operation',
-        label: '操作',
-        buttons: []
-      };
-      const itemBtns: Array<string> = ['update', 'view', 'delete'];
-      const hasFeatures = get(features, 'length');
-
-      valueSchema.bulkActions = [];
-      /** 统一api格式 */
-      valueSchema.api = normalizeApi(valueSchema.api);
-      hasFeatures &&
-        features.forEach((item: string) => {
-          if (itemBtns.includes(item)) {
-            let schema;
-
-            if (item === 'update') {
-              schema = cloneDeep(this.btnSchemas.update);
-              schema.dialog.body.body = value.columns
-                .filter(
-                  ({type}: any) => type !== 'progress' && type !== 'operation'
-                )
-                .map(({type, ...rest}: any) => ({
-                  ...rest,
-                  type: viewTypeToEditType(type)
-                }));
-            } else if (item === 'view') {
-              schema = cloneDeep(this.btnSchemas.view);
-              schema.dialog.body.body = value.columns.map(
-                ({type, ...rest}: any) => ({
-                  ...rest,
-                  type: 'static'
-                })
-              );
-            } else if (item === 'delete') {
-              schema = cloneDeep(this.btnSchemas.delete);
-              schema.api = valueSchema.api?.method.match(/^(post|delete)$/i)
-                ? valueSchema.api
-                : {...valueSchema.api, method: 'post'};
-            }
-
-            // 添加操作按钮
-            this.addItem(oper.buttons, schema);
-          } else {
-            // 批量操作
-            if (item === 'bulkUpdate') {
-              this.addItem(
-                valueSchema.bulkActions,
-                cloneDeep(this.btnSchemas.bulkUpdate)
-              );
-            }
-
-            if (item === 'bulkDelete') {
-              this.addItem(
-                valueSchema.bulkActions,
-                cloneDeep(this.btnSchemas.bulkDelete)
-              );
-            }
-
-            // 创建
-            if (item === 'create') {
-              const createSchemaBase = this.btnSchemas.create;
-              createSchemaBase.dialog.body = {
-                type: 'form',
-                api: valueSchema.api?.method.match(/^(post|put)$/i)
-                  ? valueSchema.api
-                  : {...valueSchema.api, method: 'post'},
-                body: valueSchema.columns.map((column: ColumnItem) => {
-                  const type = column.type;
-                  return {
-                    type: viewTypeToEditType(type),
-                    name: column.name,
-                    label: column.label
-                  };
-                })
-              };
-              valueSchema.headerToolbar = [createSchemaBase, 'bulkActions'];
-            }
-            let keysFilter = Object.keys(valueSchema.filter || {});
-            if (item === 'filter' && !keysFilter.length) {
-              if (valueSchema.filterEnabledList) {
-                valueSchema.filter = {
-                  title: '查询条件'
-                };
-                valueSchema.filter.columnCount = value.filterColumnCount;
-                valueSchema.filter.mode = 'horizontal';
-                valueSchema.filter.body = valueSchema.filterEnabledList.map(
-                  (item: any) => {
-                    return {
-                      type: 'input-text',
-                      label: item.label,
-                      name: item.value
-                    };
-                  }
-                );
-              }
-            }
-          }
-        });
-      const hasOperate = valueSchema.columns.find(
-        (item: any) => item.type === 'operation'
-      );
-      hasFeatures && !hasOperate && valueSchema.columns.push(oper);
-      return valueSchema;
-    },
-    canRebuild: true
-  };
-
-  addItem(source: any, target: any) {
-    const canAdd = source.find((item: any) => item.label === target.label);
-    if (!canAdd) {
-      source.push(target);
-    }
-  }
-
-  multifactor = true;
-  previewSchema: any = {
-    syncLocation: false,
-    type: 'crud',
-    className: 'text-left',
-    bodyClassName: 'm-b-none',
-    affixHeader: false,
-    data: {
-      items: [
-        {a: 1, b: 2},
-        {a: 3, b: 4},
-        {a: 5, b: 6}
-      ]
-    },
-    source: '${items}',
-    columns: [
-      {
-        label: 'A',
-        name: 'a'
-      },
-      {
-        label: 'B',
-        name: 'b'
-      },
-      {
-        type: 'operation',
-        label: '操作',
-        buttons: [
-          {
-            icon: 'fa fa-eye',
-            type: 'button'
-          },
-
-          {
-            icon: 'fa fa-edit',
-            type: 'button'
-          }
-        ]
-      }
-    ]
-  };
-
-  oldFilter?: any;
-  panelTitle = '增删改查';
-  panelBodyCreator = (context: BaseEventContext) => {
-    const store = this.manager.store;
-    const id = context.id;
-
-    return getSchemaTpl('tabs', [
-      {
-        title: '常规',
-        body: [
-          getSchemaTpl('switch', {
-            name: 'filter',
-            label: '启用查询条件',
-            pipeIn: (value: any) => !!value,
-            pipeOut: (value: any, originValue: any) => {
-              if (value) {
-                return (
-                  this.oldFilter ||
-                  JSONPipeIn({
-                    title: '查询条件',
-                    body: [
-                      {
-                        type: 'input-text',
-                        name: 'keywords',
-                        label: '关键字'
-                      }
-                    ]
-                  })
-                );
-              } else {
-                this.oldFilter = originValue;
-              }
-
-              return null;
-            }
-          }),
-
-          {
-            type: 'divider'
-          },
-
-          {
-            label: '批量操作',
-            name: 'bulkActions',
-            type: 'combo',
-            hiddenOn: 'data.pickerMode && data.multiple',
-            inputClassName: 'ae-BulkActions-control',
-            multiple: true,
-            draggable: true,
-            draggableTip: '',
-            scaffold: {
-              label: '按钮',
-              type: 'button'
-            },
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '通过此可以管理批量操作按钮，只有设置了批量操作按钮才会出现选择框，可在外观中配置批量操作按钮位置。',
-              placement: 'left'
-            },
-            items: [
-              {
-                type: 'tpl',
-                tpl: '<span class="label label-success">${label}</span>',
-                columnClassName: 'p-t-xs'
-              },
-
-              {
-                columnClassName: 'p-t-xs col-edit',
-                children: ({index}: any) => (
-                  <button
-                    onClick={this.handleBulkActionEdit.bind(this, id, index)}
-                    data-tooltip="修改"
-                    data-position="bottom"
-                    className="text-muted"
-                  >
-                    <i className="fa fa-pencil" />
-                  </button>
-                )
-              }
-            ]
-          },
-
-          // getSchemaTpl('switch', {
-          //   name: 'defaultChecked',
-          //   label: '默认是否全部勾选',
-          //   visibleOn: 'data.bulkActions && data.bulkActions.length',
-          //   pipeIn: defaultValue(false)
-          // }),
-
-          {
-            type: 'divider'
-          },
-
-          {
-            label: '单条操作',
-            name: 'itemActions',
-            type: 'combo',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '设置后，当鼠标悬停行数据上，会出现该操作按钮，同时顶部操作栏也会显示该按钮，勾选成员时与批量按钮智能切换。',
-              placement: 'left'
-            },
-            hiddenOn: 'this.mode && this.mode !== "table" || this.pickerMode',
-            inputClassName: 'ae-BulkActions-control',
-            multiple: true,
-            draggable: true,
-            scaffold: {
-              label: '按钮',
-              type: 'button'
-            },
-            items: [
-              {
-                type: 'tpl',
-                tpl: '<span class="label label-success">${label}</span>',
-                columnClassName: 'p-t-xs'
-              },
-
-              {
-                type: 'checkbox',
-                className: 'text-xs',
-                option: '悬停隐藏',
-                name: 'hiddenOnHover'
-              },
-
-              {
-                columnClassName: 'p-t-xs col-edit',
-                children: ({index}: any) => (
-                  <button
-                    onClick={this.handleItemActionEdit.bind(this, id, index)}
-                    data-tooltip="修改"
-                    data-position="bottom"
-                    className="text-muted"
-                  >
-                    <i className="fa fa-pencil" />
-                  </button>
-                )
-              }
-            ]
-          },
-
-          {
-            type: 'divider',
-            hiddenOn: 'this.mode && this.mode !== "table" || this.pickerMode'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'syncLocation',
-            label: '同步地址栏',
-            pipeIn: defaultValue(true),
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '开启后会把查询条件数据和分页信息同步到地址栏中，页面中出现多个时，建议只保留一个同步地址栏，否则会相互影响。',
-              placement: 'left'
-            }
-          }),
-
-          {
-            label: '默认参数',
-            type: 'input-kv',
-            name: 'defaultParams',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content: '可以用来设置默认参数，比如 <code>perPage:20</code>',
-              placement: 'left'
-            }
-          },
-
-          {
-            type: 'divider'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'keepItemSelectionOnPageChange',
-            label: '保留条目选择',
-            visbileOn:
-              'this.bulkActions && this.bulkActions.length || this.itemActions && this.itemActions.length',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '默认分页、搜索后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。',
-              placement: 'left'
-            }
-          }),
-
-          {
-            name: 'labelTpl',
-            type: 'input-text',
-            label: '单条描述模板',
-            visibleOn: 'this.keepItemSelectionOnPageChange',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '开启【保留条目选择】后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。',
-              placement: 'left'
-            }
-          },
-
-          {
-            name: 'primaryField',
-            label: '指定主键',
-            type: 'input-text',
-            pipeIn: defaultValue('id'),
-            description: '默认<code>id</code>，用于批量操作获取行级数据'
-          }
-        ]
-      },
-
-      {
-        title: '接口',
-        body: [
-          getSchemaTpl('api', {
-            label: '数据拉取接口',
-            sampleBuilder: () => {
-              const data: any = {
-                items: [],
-                total: 0
-              };
-              const columns: any[] = context?.schema?.columns ?? [];
-              const row = {};
-
-              columns.forEach(column => {
-                if (column.name) {
-                  setVariable(row, column.name, 'sample');
-                }
-              });
-              data.items.push(row);
-              return JSON.stringify(
-                {
-                  status: 0,
-                  msg: '',
-                  data: data
-                },
-                null,
-                2
-              );
-            }
-          }),
-
-          {
-            name: 'initFetch',
-            type: 'radios',
-            label: '是否初始拉取',
-            pipeIn: (value: any) =>
-              (typeof value == 'boolean' && value) ||
-              (typeof value !== 'boolean' && ''),
-            inline: true,
-            onChange: () => {},
-            options: [
-              {
-                label: '是',
-                value: true
-              },
-
-              {
-                label: '否',
-                value: false
-              },
-
-              {
-                label: '表达式',
-                value: ''
-              }
-            ]
-          },
-
-          {
-            name: 'initFetch',
-            autoComplete: false,
-            visibleOn: 'typeof this.initFetch !== "boolean"',
-            type: 'input-text',
-            placeholder: '用 JS 表达式来决定',
-            className: 'm-t-n-sm'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'loadDataOnce',
-            label: '一次性拉取',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '开启后，数据只会在初始的时候拉取，后续分页、排序不再请求接口，都由前端直接完成。',
-              placement: 'left'
-            }
-          }),
-
-          getSchemaTpl('switch', {
-            label: '开启定时刷新',
-            name: 'interval',
-            visibleOn: 'data.api',
-            pipeIn: (value: any) => !!value,
-            pipeOut: (value: any) => (value ? 3000 : undefined)
-          }),
-
-          {
-            name: 'interval',
-            type: 'input-number',
-            visibleOn: 'typeof data.interval === "number"',
-            step: 500,
-            className: 'm-t-n-sm',
-            description: '设置后将自动定时刷新，单位 ms'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'silentPolling',
-            label: '静默刷新',
-            visibleOn: '!!data.interval',
-            description: '设置自动定时刷新时是否显示loading'
-          }),
-
-          {
-            name: 'stopAutoRefreshWhen',
-            label: '停止定时刷新检测表达式',
-            type: 'input-text',
-            visibleOn: '!!data.interval',
-            description:
-              '定时刷新一旦设置会一直刷新，除非给出表达式，条件满足后则不刷新了。'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'stopAutoRefreshWhenModalIsOpen',
-            label: '当有弹框时关闭自动刷新',
-            visibleOn: '!!data.interval',
-            description: '弹框打开关闭自动刷新，关闭弹框又恢复'
-          }),
-
-          {
-            type: 'divider'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'draggable',
-            label: '是否可拖拽排序'
-          }),
-
-          getSchemaTpl('api', {
-            label: '顺序保存接口',
-            name: 'saveOrderApi',
-            visibleOn: 'data.draggable'
-          }),
-
-          {
-            type: 'divider'
-          },
-
-          getSchemaTpl('api', {
-            label: '快速保存接口',
-            name: 'quickSaveApi',
-            description:
-              '当 column 中设置了快速编辑后将使用此接口批量保存数据。'
-          }),
-
-          {
-            type: 'divider'
-          },
-
-          getSchemaTpl('api', {
-            label: '快速保存单条接口',
-            name: 'quickSaveItemApi',
-            description:
-              '当 column 中设置了快速编辑且设置了立即保存，将使用此接口保存数据。'
-          }),
-
-          {
-            type: 'divider'
-          },
-
-          {
-            label: '默认消息提示',
-            type: 'combo',
-            name: 'messages',
-            multiLine: true,
-            description:
-              '覆盖默认消息提示，但如果 api 返回 msg 则会优先使用这个 msg',
-            items: [
-              {
-                label: '获取成功提示',
-                type: 'input-text',
-                name: 'fetchSuccess'
-              },
-
-              {
-                label: '获取失败提示',
-                type: 'input-text',
-                name: 'fetchFailed'
-              },
-
-              {
-                label: '保存顺序成功提示',
-                type: 'input-text',
-                name: 'saveOrderSuccess'
-              },
-
-              {
-                label: '保存顺序失败提示',
-                type: 'input-text',
-                name: 'saveOrderFailed'
-              },
-
-              {
-                label: '快速保存成功提示',
-                type: 'input-text',
-                name: 'quickSaveSuccess'
-              },
-
-              {
-                label: '快速保存失败提示',
-                type: 'input-text',
-                name: 'quickSaveFailed'
-              }
-            ]
-          }
-        ]
-      },
-
-      {
-        title: '外观',
-        body: [
-          {
-            label: '内容展示模式',
-            name: 'mode',
-            type: 'button-group-select',
-            size: 'xs',
-            pipeIn: (value: any, values: any) =>
-              (value === 'grid' ? 'cards' : value) ?? 'table',
-            onChange: (value: any, oldValue: any, model: any, form: any) => {
-              let headerHasColumnsToggle = form?.data?.headerToolbar?.some(
-                (item: any) => item.type === 'columns-toggler'
-              );
-              let headerToolbar = cloneDeep(form?.data?.headerToolbar);
-              let columnsToggler;
-              if (value !== 'table' && oldValue === 'table') {
-                // 存储table模式是否有 columns-toggler
-                columnsToggler = headerToolbar?.find(
-                  (item: any) => item.type === 'columns-toggler'
-                ) || {
-                  type: 'columns-toggler',
-                  align: 'right'
-                };
-                form.setValues({
-                  __headerHasColumnsToggler: headerHasColumnsToggle
-                });
-              }
-              headerToolbar =
-                value === 'table'
-                  ? headerToolbar
-                  : headerToolbar?.filter(
-                      (item: any) => item.type !== 'columns-toggler'
-                    );
-              if (value === 'table') {
-                if (
-                  form?.data?.__headerHasColumnsToggler &&
-                  !headerHasColumnsToggle
-                ) {
-                  headerToolbar?.push(
-                    form?.data?.__cacheColumnsToggler || {
-                      type: 'columns-toggler',
-                      align: 'right'
-                    }
-                  );
-                }
-                form.setValues({
-                  headerToolbar,
-                  columns: form.data.__columns || [
-                    {
-                      label: 'ID',
-                      name: 'id'
-                    },
-                    {
-                      label: '列信息',
-                      name: 'name'
-                    }
-                  ],
-                  __headerHasColumnsToggler: headerHasColumnsToggle,
-                  __card: form.data.card || form.data.__card,
-                  __listItem: form.data.listItem || form.data.__listItem
-                });
-                form.deleteValueByName('card');
-                form.deleteValueByName('listItem');
-              } else if (value === 'cards') {
-                oldValue === 'table' &&
-                  form.setValues({
-                    __cacheColumnsToggler: columnsToggler
-                  });
-                form.setValues({
-                  headerToolbar,
-                  card: form.data.__card || {
-                    type: 'card',
-                    header: {
-                      title: '标题',
-                      subTitle: '副标题'
-                    },
-                    body: [
-                      {
-                        name: 'a',
-                        label: 'A'
-                      },
-                      {
-                        name: 'b',
-                        label: 'B'
-                      }
-                    ],
-                    actions: [
-                      {
-                        label: '详情',
-                        type: 'button'
-                      }
-                    ]
-                  },
-                  __columns: form.data.columns || form.data.__columns,
-                  __listItem: form.data.listItem || form.data.__listItem
-                });
-                form.deleteValueByName('columns');
-                form.deleteValueByName('listItem');
-              } else {
-                oldValue === 'table' &&
-                  form.setValues({
-                    __cacheColumnsToggler: columnsToggler
-                  });
-                form.setValues({
-                  headerToolbar,
-                  listItem: form.data.__listItem || {
-                    body: [
-                      {
-                        type: 'tpl',
-                        tpl: '简单的展示数据：$a $b'
-                      }
-                    ],
-                    actions: [
-                      {
-                        icon: 'fa fa-eye',
-                        type: 'button'
-                      }
-                    ]
-                  },
-                  __columns: form.data.columns || form.data.__columns,
-                  __card: form.data.card || form.data.__card
-                });
-                form.deleteValueByName('columns');
-                form.deleteValueByName('card');
-              }
-            },
-            options: [
-              {
-                value: 'table',
-                label: '表格'
-              },
-
-              {
-                value: 'cards',
-                label: '卡片'
-              },
-
-              {
-                value: 'list',
-                label: '列表'
-              }
-            ]
-          },
-
-          {
-            name: 'headerToolbar',
-            type: 'combo',
-            draggable: true,
-            draggableTip: '',
-            descrition: '非内建内容请在预览区选中后编辑',
-            label: '顶部工具栏配置',
-            pipeIn: (value: any) => {
-              if (!Array.isArray(value)) {
-                value = value ? [value] : ['bulkActions'];
-              }
-              return value.map((item: any) => {
-                let type = item.type;
-
-                if (
-                  typeof item === 'string' &&
-                  ~[
-                    'bulkActions',
-                    'bulk-actions',
-                    'pagination',
-                    'statistics',
-                    'switch-per-page',
-                    'filter-toggler',
-                    'load-more',
-                    'export-csv',
-                    'export-excel'
-                  ].indexOf(item)
-                ) {
-                  type = item === 'bulkActions' ? 'bulk-actions' : item;
-                  item = {type};
-                } else if (typeof item === 'string') {
-                  type = 'tpl';
-                  item =
-                    typeof item === 'string' ? {type: 'tpl', tpl: item} : item;
-                }
-                return {
-                  type,
-                  ...item
-                };
-              });
-            },
-            pipeOut: (value: any) => {
-              if (Array.isArray(value)) {
-                return value.map((item: any) => {
-                  if (item.type === 'button') {
-                    return JSONPipeIn({
-                      label: '按钮',
-                      type: 'button',
-                      ...item
-                    });
-                  } else if (item.type === 'tpl') {
-                    return JSONPipeIn({
-                      type: 'tpl',
-                      tpl: '内容',
-                      ...item
-                    });
-                  }
-
-                  return item;
-                });
-              }
-
-              return [];
-            },
-            scaffold: {
-              type: 'tpl',
-              tpl: '内容'
-            },
-            multiple: true,
-            items: [
-              {
-                type: 'select',
-                name: 'type',
-                columnClassName: 'w-ssm',
-                options: [
-                  {
-                    value: 'bulk-actions',
-                    label: '操作栏'
-                  },
-
-                  {
-                    value: 'pagination',
-                    label: '分页'
-                  },
-
-                  {
-                    value: 'statistics',
-                    label: '统计数据'
-                  },
-
-                  {
-                    value: 'switch-per-page',
-                    label: '切换页码'
-                  },
-
-                  {
-                    value: 'load-more',
-                    label: '加载更多'
-                  },
-
-                  {
-                    value: 'export-csv',
-                    label: '导出 CSV'
-                  },
-
-                  {
-                    value: 'export-excel',
-                    label: '导出 Excel'
-                  },
-
-                  {
-                    value: 'columns-toggler',
-                    label: '列选择器',
-                    visibleOn: '!this.mode || this.mode === "table"'
-                  },
-
-                  {
-                    value: 'filter-toggler',
-                    label: '查询条件切换'
-                  },
-
-                  {
-                    value: 'drag-toggler',
-                    label: '拖拽切换'
-                  },
-
-                  {
-                    value: 'check-all',
-                    label: '全选',
-                    hiddenOn: '!this.mode || this.mode === "table"'
-                  },
-
-                  {
-                    value: 'tpl',
-                    label: '文本'
-                  },
-
-                  {
-                    value: 'button',
-                    label: '按钮'
-                  }
-                ]
-              },
-
-              {
-                name: 'align',
-                placeholder: '对齐方式',
-                type: 'select',
-                size: 'xs',
-                options: [
-                  {
-                    label: '左对齐',
-                    value: 'left'
-                  },
-
-                  {
-                    label: '右对齐',
-                    value: 'right'
-                  }
-                ]
-              }
-
-              // {
-              //   type: 'remark',
-              //   content: '详情请在预览区域选中后进行编辑。',
-              //   trigger: ['click'],
-              //   rootClose: true,
-              //   placement: 'left',
-              //   visibleOn:
-              //     '!~["bulkActions", "drag-toggler", "check-all", "bulk-actions", "pagination", "statistics", "switch-per-page", "filter-toggler", "load-more"].indexOf(this.type)',
-              //   columnClassName: 'no-grow w-3x p-t-xs',
-              //   className: 'm-l-none'
-              // }
-            ]
-          },
-
-          {
-            name: 'footerToolbar',
-            type: 'combo',
-            draggable: true,
-            draggableTip: '',
-            descrition: '非内建内容请在预览区选中后编辑',
-            label: '底部工具栏配置',
-            pipeIn: (value: any) => {
-              if (!Array.isArray(value)) {
-                value = value ? [value] : ['statistics', 'pagination'];
-              }
-
-              return value.map((item: any) => {
-                let type = item.type;
-
-                if (
-                  typeof item === 'string' &&
-                  ~[
-                    'bulkActions',
-                    'bulk-actions',
-                    'pagination',
-                    'statistics',
-                    'switch-per-page',
-                    'filter-toggler',
-                    'load-more',
-                    'export-csv',
-                    'export-excel'
-                  ].indexOf(item)
-                ) {
-                  type = item === 'bulkActions' ? 'bulk-actions' : item;
-                  item = {type};
-                } else if (typeof item === 'string') {
-                  type = 'tpl';
-                  item =
-                    typeof item === 'string' ? {type: 'tpl', tpl: item} : item;
-                }
-
-                return {
-                  type,
-                  ...item
-                };
-              });
-            },
-            pipeOut: (value: any) => {
-              if (Array.isArray(value)) {
-                return value.map((item: any) => {
-                  if (item.type === 'button') {
-                    return JSONPipeIn({
-                      label: '按钮',
-                      type: 'button',
-                      ...item
-                    });
-                  } else if (item.type === 'tpl') {
-                    return JSONPipeIn({
-                      type: 'tpl',
-                      tpl: '内容',
-                      ...item
-                    });
-                  }
-
-                  return item;
-                });
-              }
-
-              return [];
-            },
-            scaffold: {
-              type: 'tpl',
-              tpl: '内容'
-            },
-            multiple: true,
-            items: [
-              {
-                type: 'select',
-                name: 'type',
-                columnClassName: 'w-ssm',
-                options: [
-                  {
-                    value: 'bulk-actions',
-                    label: '操作栏'
-                  },
-
-                  {
-                    value: 'pagination',
-                    label: '分页'
-                  },
-
-                  {
-                    value: 'statistics',
-                    label: '统计数据'
-                  },
-
-                  {
-                    value: 'switch-per-page',
-                    label: '切换页码'
-                  },
-
-                  {
-                    value: 'load-more',
-                    label: '加载更多'
-                  },
-
-                  {
-                    value: 'export-csv',
-                    label: '导出 CSV'
-                  },
-
-                  {
-                    value: 'export-excel',
-                    label: '导出 Excel'
-                  },
-
-                  {
-                    value: 'columns-toggler',
-                    label: '列选择器',
-                    hiddenOn: '["grid", "cards", "list"].indexOf(this.mode)'
-                  },
-
-                  {
-                    value: 'filter-toggler',
-                    label: '查询条件切换'
-                  },
-
-                  {
-                    value: 'drag-toggler',
-                    label: '拖拽切换'
-                  },
-
-                  {
-                    value: 'check-all',
-                    label: '全选',
-                    hiddenOn: '!this.mode || this.mode === "table"'
-                  },
-
-                  {
-                    value: 'tpl',
-                    label: '文本'
-                  },
-
-                  {
-                    value: 'button',
-                    label: '按钮'
-                  }
-                ]
-              },
-
-              {
-                name: 'align',
-                placeholder: '对齐方式',
-                size: 'xs',
-                type: 'select',
-                options: [
-                  {
-                    label: '左对齐',
-                    value: 'left'
-                  },
-
-                  {
-                    label: '右对齐',
-                    value: 'right'
-                  }
-                ]
-              },
-
-              {
-                type: 'remark',
-                content: '详情请在预览区域选中后进行编辑。',
-                trigger: ['click'],
-                rootClose: true,
-                placement: 'left',
-                visibleOn:
-                  '!~["bulkActions", "drag-toggler", "check-all", "bulk-actions", "pagination", "statistics", "switch-per-page", "filter-toggler", "load-more", "export-csv", "export-excel"].indexOf(this.type)',
-                columnClassName: 'no-grow w-3x p-t-xs',
-                className: 'm-l-none'
-              }
-            ]
-          },
-
-          getSchemaTpl('switch', {
-            name: 'filterTogglable',
-            label: '是否可显隐查询条件',
-            visibleOn: 'data.filter'
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'filterDefaultVisible',
-            label: '查询条件默认是否可见',
-            visibleOn: 'data.filter && data.filterTogglable',
-            pipeIn: defaultValue(true)
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'hideQuickSaveBtn',
-            label: '隐藏顶部快速保存提示'
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'alwaysShowPagination',
-            label: '是否总是显示分页'
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'hideCheckToggler',
-            label: '隐藏选择按钮',
-            visibleOn: 'data.checkOnItemClick'
-          }),
-
-          getSchemaTpl('className'),
-
-          getSchemaTpl('className', {
-            name: 'bodyClassName',
-            label: '内容 CSS 类名'
-          })
-        ]
-      },
-
-      {
-        title: '其他',
-        body: [
-          getSchemaTpl('ref'),
-          {
-            name: 'source',
-            label: '数据源',
-            type: 'input-text',
-            description:
-              '不填写，默认读取接口返回的 items 或者 rows 属性，如果是别的，请在此设置，如： <code>\\${xxxx}</code>'
-          },
-
-          {
-            name: 'perPage',
-            label: '每页数量',
-            type: 'input-number'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'keepItemSelectionOnPageChange',
-            label: '翻页时保留选择'
-          }),
-
-          {
-            name: 'maxKeepItemSelectionLength',
-            label: '最大选择数量',
-            type: 'input-number',
-            mode: 'inline',
-            className: 'block'
-          },
-
-          {
-            name: 'pageField',
-            label: '页码字段名',
-            type: 'input-text',
-            pipeIn: defaultValue('page')
-          },
-
-          {
-            name: 'perPageField',
-            label: '分页步长字段名',
-            type: 'input-text',
-            pipeIn: defaultValue('perPage')
-          },
-
-          {
-            name: 'orderField',
-            label: '排序权重字段',
-            type: 'input-text',
-            labelRemark: {
-              className: 'm-l-xs',
-              trigger: 'click',
-              rootClose: true,
-              content:
-                '设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。',
-              placement: 'left'
-            }
-          },
-
-          {
-            name: 'perPageAvailable',
-            label: '切换每页数',
-            type: 'input-array',
-            hiddenOn: 'data.loadDataOnce',
-            items: {
-              type: 'input-number',
-              required: true
-            },
-            value: [10]
-          },
-
-          getSchemaTpl('name'),
-
-          {
-            name: 'itemCheckableOn',
-            type: 'input-text',
-            label: '配置单条可选中的表达式',
-            description: '请使用 js 表达式，不设置的话每条都可选中。',
-            visibleOn:
-              'data.bulkActions && data.bulkActions.length || data.pickerMode'
-          },
-
-          getSchemaTpl('switch', {
-            name: 'checkOnItemClick',
-            label: '开启单条点击整个区域选中',
-            visibleOn:
-              'data.bulkActions && data.bulkActions.length || data.pickerMode'
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'autoJumpToTopOnPagerChange',
-            label: '自动跳顶部',
-            description: '当切分页的时候，是否自动跳顶部'
-          }),
-
-          getSchemaTpl('switch', {
-            name: 'syncResponse2Query',
-            label: '同步查询条件',
-            description: '查询后将返回的数据同步到查询条件上'
-          })
-        ]
-      }
-    ]);
-  };
-
-  handleBulkActionEdit(id: string, index: number) {
-    const store = this.manager.store;
-    const schema = store.getSchema(id);
-    const action = schema?.bulkActions[index];
-
-    if (action && action.$$id) {
-      store.setActiveId(action.$$id);
-    }
-  }
-  handleItemActionEdit(id: string, index: number) {
-    const store = this.manager.store;
-    const schema = store.getSchema(id);
-    const action = schema?.itemActions[index];
-
-    if (action && action.$$id) {
-      store.setActiveId(action.$$id);
-    }
-  }
-
-  wrapperProps = {
-    affixHeader: false
-  };
-
-  /**
-   * 默认什么组件都加入的子组件里面，子类里面可以复写这个改变行为。
-   * @param context
-   * @param renderers
-   */
-  buildSubRenderers(
-    context: RendererEventContext,
-    renderers: Array<SubRendererInfo>
-  ): BasicSubRenderInfo | Array<BasicSubRenderInfo> | void {
-    const plugin: PluginInterface = this;
-    if (plugin.name && plugin.description) {
-      return {
-        name: plugin.name,
-        icon: plugin.icon,
-        description: plugin.description,
-        previewSchema: plugin.previewSchema,
-        tags: plugin.tags,
-        docLink: plugin.docLink,
-        type: plugin.type,
-        scaffold: plugin.scaffold,
-        disabledRendererPlugin: plugin.disabledRendererPlugin,
-        isBaseComponent: plugin.isBaseComponent,
-        scaffoldForm: this.scaffoldForm,
-        rendererName: plugin.rendererName
-      };
-    }
-  }
-
-  getRendererInfo(
-    context: RendererInfoResolveEventContext
-  ): BasicRendererInfo | void {
-    const info = super.getRendererInfo(context);
-    if (info) {
-      info.scaffoldForm = this.scaffoldForm;
-    }
-    return info;
-  }
-
-  renderEditableComponents(props: any) {
-    const render = props.render;
-    const bulkActions = props.bulkActions;
-    const itemActions = props.itemActions;
-    const doms: Array<JSX.Element> = [];
-
-    if (Array.isArray(bulkActions) && bulkActions.length) {
-      doms.push(
-        <div key="bulkActions" className="ae-EditableRender">
-          <div className="ae-EditableRender-title">批量操作</div>
-          <div className="ae-EditableRender-body">
-            {bulkActions.map(action =>
-              render(
-                'bulk-action',
-                {
-                  type: 'button',
-                  size: 'sm',
-                  ...action
-                },
-                {
-                  key: action.$$id
-                }
-              )
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    if (Array.isArray(itemActions) && itemActions.length) {
-      doms.push(
-        <div key="itemActions" className="ae-EditableRender">
-          <div className="ae-EditableRender-title">单条操作</div>
-          <div className="ae-EditableRender-body">
-            {itemActions.map(action =>
-              render(
-                'bulk-action',
-                {
-                  type: 'button',
-                  size: 'sm',
-                  ...action
-                },
-                {
-                  key: action.$$id
-                }
-              )
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    if (!doms.length) {
-      return null;
-    }
-
-    return (
-      <div className="ae-EditableRenderers">
-        <div className="ae-EditableRenderers-tip">「增删改查」编辑辅助区</div>
-        {doms}
-      </div>
-    );
-  }
-
-  renderRenderer(props: any) {
-    const $$editor = props.$$editor;
-    const renderer = $$editor.renderer;
-    return (
-      <div className="ae-CRUDEditor">
-        {this.renderEditableComponents(props)}
-        <renderer.component {...props} />
-      </div>
-    );
-  }
-
-  filterProps(props: any) {
-    if (props.pickerMode) {
-      props.options = props.data.options;
-    }
-
-    return props;
-  }
-
-  afterUpdate(event: PluginEvent<ChangeEventContext>) {
-    const context = event.context;
-
-    // mode 内容形式变化，需要重新构建面板。
-    if (
-      context.info.plugin === this &&
-      context.diff?.some(change => change.path?.join('.') === 'mode')
-    ) {
-      setTimeout(() => {
-        this.manager.buildPanels();
-        this.manager.buildToolbars();
-      }, 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);