@pisell/materials 1.0.449 → 1.0.451

package/lowcode/data-source-table/meta.ts

@@ -0,0 +1,2697 @@
+import snippets from './snippets';
+import button from '../button/meta';
+import { columns2Options, fields2Columns } from './utils';
+import {
+  fields2ChildrenSchemas,
+  getVariable,
+  getAllVariables,
+  clearVariables,
+  setBatchVariables,
+  createSubmitButton,
+} from '../data-source-form/utils';
+
+const getI18n = (
+  item:
+    | {
+        type: string;
+        key: string;
+        en: string;
+        'zh-CN': string;
+        'zh-HK': string;
+      }
+    | string
+) => {
+  if (typeof item === 'string') {
+    return item;
+  }
+  if (item.type === 'i18n') {
+    return item['zh-CN'] || item['zh-HK'] || item['en'];
+  }
+};
+
+const getFormContent = (target: any, mode: 'add' | 'edit' | 'view') => {
+  const fields = getVariable(target, 'currentFields');
+  let childrenSchemas = fields2ChildrenSchemas(fields, mode);
+  const titleMap = {
+    add: '表单(添加)',
+    edit: '编辑',
+    view: '详情'
+  };
+  const title = titleMap[mode];
+
+  if (['add', 'edit'].includes(mode)) {
+    childrenSchemas = childrenSchemas.concat(
+      createSubmitButton({
+        afterSubmitType: 'close'
+      })
+    )
+  }
+  
+  return {
+    type: 'JSSlot',
+    params: [],
+    value: [
+      {
+        componentName: 'DataSourceForm',
+        title,
+        props: {
+          _variables: getAllVariables(target),
+          dataSource: target.node.getProps().getPropValue('dataSource'),
+          showTitle: false,
+          showDescription: false,
+          groupInfoPosition: 'top',
+          layout: 'vertical',
+          size: 'large',
+          mode,
+          currentValue: mode !== 'add' ? '{{currentRecord}}' : undefined,
+        },
+        children: childrenSchemas,
+      },
+    ],
+  };
+};
+
+export default {
+  snippets,
+  componentName: 'DataSourceTable',
+  title: '表格',
+  category: '数据展示',
+  group: '无代码组件',
+  docUrl: '',
+  screenshot: '',
+  devMode: 'proCode',
+  npm: {
+    package: '@pisell/materials',
+    version: '1.0.1',
+    exportName: 'DataSourceTable',
+    main: 'src/index.tsx',
+    destructuring: true,
+    subName: '',
+  },
+  generalProps: [
+    {
+      type: 'group',
+      title: {
+        type: 'i18n',
+        'en-US': 'Data',
+        'zh-CN': '数据',
+      },
+      display: 'accordion',
+      items: [
+        {
+          name: 'dataSource',
+          title: {
+            type: 'i18n',
+            'en-US': 'Source',
+            'zh-CN': '数据源',
+          },
+          display: 'block',
+          extraProps: {
+            setValue(target: any, value: any) {
+              // 如果value为空，则清空表格
+              if (!value.item) {
+                target.getProps().setPropValue('columns', []);
+                clearVariables(target);
+                return target.getProps().setPropValue('dataSource', '');
+              }
+
+              // 如果重新选择选择数据源，则清空表格
+              if (value.isSelect) {
+                target.getProps().setPropValue('columns', []);
+              }
+
+              const columns = fields2Columns(value.item.fields);
+
+              target.getProps().setPropValue('columns', columns);
+
+              setBatchVariables(target, [
+                {
+                  label: 'currentFields',
+                  value: value.item.fields,
+                },
+                {
+                  label: 'dataSourceVariables',
+                  value: [
+                    {
+                      label: '当前数据表',
+                      value: value.value,
+                      item: value.item,
+                    },
+                  ],
+                },
+                {
+                  label: 'dataSourceTitle',
+                  value: value.title,
+                },
+                {
+                  label: 'currentValueVariables',
+                  value: [
+                    {
+                      label: '当前行数据',
+                      value: '{{currentRecord}}',
+                    },
+                  ],
+                },
+              ]);
+
+              return target.getProps().setPropValue('dataSource', value.item);
+            },
+          },
+          setter: {
+            componentName: 'PisellDataSourceSetter',
+          },
+        },
+        {
+          title: '字段',
+          name: '_fields',
+          display: 'entry',
+          type: 'group',
+          items: [
+            {
+              title: {
+                type: 'i18n',
+                'en-US': 'Fields',
+                'zh-CN': '字段',
+              },
+              name: '_fields',
+              propType: 'object',
+              display: 'block',
+              setter: {
+                componentName: 'PisellFieldSetter',
+                props: (target: any) => {
+                  const columns = target.node
+                    .getProps()
+                    .getPropValue('columns');
+                  const allFields = getVariable(target, 'currentFields');
+                  const options = columns2Options(columns, allFields);
+                  return {
+                    options,
+                  };
+                },
+              },
+              extraProps: {
+                setValue(target: any, value: any) {
+                  const { operate } = value;
+                  const { mode, field } = operate;
+                  const fieldDetail = getVariable(target, 'currentFields').find((f: any) => f.name === field);
+                  const columns =
+                    target.node.getProps().getPropValue('columns') || [];
+
+                  // 如果是隐藏操作
+                  if (mode === 'hidden') {
+                    // 过滤掉要隐藏的列
+                    const filteredColumns = columns.filter((col: any) => {
+                      return col.dataIndex !== field;
+                    });
+                    target.node.setPropValue('columns', filteredColumns);
+                  } else if (mode === 'show') {
+                    const newColumn = fields2Columns([fieldDetail]);
+                    const newColumns = [...columns, ...newColumn];
+
+                    target.node.setPropValue('columns', newColumns);
+                  }
+                  return {};
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: 'showDetailButton',
+      title: { label: '详情按钮' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      extraProps: {
+        setValue(target: any, value: any) {
+          if (value) {
+            target.node.setPropValue('detailContent', getFormContent(target, 'view'));
+          } else {
+            target.node.setPropValue('detailContent', null);
+          }
+          return target.node.setPropValue('showDetailButton', value);
+        },
+      },
+    },
+    {
+      condition(target) {
+        return false;
+      },
+      name: 'detailContent',
+      title: { label: '详情内容' },
+      propType: 'func',
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'showEditButton',
+      title: { label: '编辑按钮' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      extraProps: {
+        setValue(target: any, value: any) {
+          if (value) {
+            target.node.setPropValue('editContent', getFormContent(target, 'edit'));
+          } else {
+            target.node.setPropValue('editContent', null);
+          }
+          return target.node.setPropValue('showEditButton', value);
+        },
+      },
+    },
+    {
+      condition(target) {
+        return false;
+      },
+      name: 'editContent',
+      title: { label: '编辑内容' },
+      propType: 'func',
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'showAddButton',
+      title: { label: '新增按钮' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      extraProps: {
+        setValue(target: any, value: any) {
+          if (value) {
+            target.node.setPropValue('addContent', getFormContent(target, 'add'));
+          } else {
+            target.node.setPropValue('addContent', null);
+          }
+          return target.node.setPropValue('showAddButton', value);
+        },
+      },
+    },
+    {
+      condition(target) {
+        return false;
+      },
+      name: 'addContent',
+      title: { label: '新增内容' },
+      propType: 'func',
+      setter: 'SlotSetter',
+    },
+    {
+      name: 'showDeleteButton',
+      title: { label: '删除按钮' },
+      propType: 'bool',
+      setter: 'BoolSetter',
+      defaultValue: false,
+    },
+  ],
+  props: [
+    {
+      title: '数据源',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSource',
+          title: { label: '表格数据', tip: 'dataSource | 表格数据' },
+          propType: 'object',
+          setter: 'JsonSetter',
+          supportVariable: true,
+        },
+        {
+          name: 'loading',
+          title: { label: '加载中', tip: 'loading | 是否加载中' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          supportVariable: true,
+        },
+        {
+          name: 'rowKey',
+          title: {
+            label: '行Key',
+            tip: 'rowKey | 表格行 key 的取值，可以是字符串或一个函数',
+          },
+          propType: { type: 'oneOfType', value: ['string', 'func'] },
+          setter: [
+            'StringSetter',
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'getRowKey(record,index,${extParams}){\n// 通过函数获取表格行 key\nreturn record.id;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+          defaultValue: 'id',
+        },
+        {
+          name: 'currentSettingKey',
+          title: {
+            label: 'currentSettingKey',
+            tip: 'currentSettingKey | 当前本地配置的key 用此hash是否改变用来判断是否清空本地配置 不填默认使用columns数据生成hash',
+          },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+        {
+          name: 'currentComponentId',
+          title: {
+            label: 'currentComponentId',
+            tip: 'currentComponentId | 当前本地配置的唯一值 不填默认使用currentSettingKey',
+          },
+          propType: 'string',
+          setter: 'StringSetter',
+        },
+      ],
+    },
+    {
+      name: 'columns',
+      title: { label: '表格列', tip: '表格列的配置描述，具体项见下表' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'title',
+                    title: { label: '列标题', tip: 'title | 列标题' },
+                    propType: { type: 'oneOfType', value: ['string', 'func'] },
+                    setter: [
+                      'PisellI18nSetter',
+                      {
+                        componentName: 'SlotSetter',
+                        title: '列标题插槽',
+                        initialValue: {
+                          type: 'JSSlot',
+                          params: ['options'],
+                          value: [],
+                        },
+                      },
+                    ],
+                  },
+                  {
+                    name: 'dataIndex',
+                    title: { label: '数据字段', tip: 'dataIndex | 数据字段' },
+                    setter: [
+                      'StringSetter',
+                      {
+                        componentName: 'ArraySetter',
+                        props: {
+                          itemSetter: {
+                            componentName: 'StringSetter',
+                          },
+                        },
+                      },
+                    ],
+                    isRequired: true,
+                  },
+                  {
+                    name: 'key',
+                    title: { label: 'React key', tip: 'key | React需要的key' },
+                    propType: 'string',
+                    setter: 'StringSetter',
+                    isRequired: true,
+                  },
+                  {
+                    name: 'align',
+                    title: { label: '对齐方式', tip: 'align | 对齐方式' },
+                    propType: {
+                      type: 'oneOf',
+                      value: ['left', 'right', 'center'],
+                    },
+                    defaultValue: 'left',
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: 'left',
+                              value: 'left',
+                            },
+                            {
+                              title: 'right',
+                              value: 'right',
+                            },
+                            {
+                              title: 'center',
+                              value: 'center',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                  {
+                    name: 'fixed',
+                    title: { label: '列是否固定', tip: 'fixed | 列是否固定' },
+                    description:
+                      '（IE 下无效）列是否固定，可选 true (等效于 left) left right',
+                    defaultValue: '',
+                    propType: {
+                      type: 'oneOf',
+                      value: ['', 'left', 'right'],
+                    },
+                    setter: [
+                      {
+                        componentName: 'RadioGroupSetter',
+                        props: {
+                          options: [
+                            {
+                              title: '不固定',
+                              value: '',
+                            },
+                            {
+                              title: '固定在左侧',
+                              value: 'left',
+                            },
+                            {
+                              title: '固定在右侧',
+                              value: 'right',
+                            },
+                          ],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                  {
+                    name: 'className',
+                    title: {
+                      label: '列样式类名',
+                      tip: 'className | 列样式类名',
+                    },
+                    propType: 'string',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'width',
+                    title: { label: '宽度', tip: 'width | 宽度' },
+                    propType: {
+                      type: 'oneOfType',
+                      value: ['number', 'string'],
+                    },
+                    setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
+                  },
+                  {
+                    name: 'sorter',
+                    title: {
+                      label: '排序规则',
+                      tip: 'sorter | 排序函数，本地排序使用一个函数，需要服务端排序可设为 true',
+                    },
+                    propType: { type: 'oneOfType', value: ['bool', 'func'] },
+                    setter: ['BoolSetter', 'FunctionSetter', 'VariableSetter'],
+                  },
+                  {
+                    name: 'defaultFilters',
+                    title: {
+                      label: '默认筛选',
+                      tip: 'defaultFilters | 是否开启默认筛选',
+                    },
+                    propType: 'bool',
+                    setter: 'BoolSetter',
+                  },
+                  {
+                    name: 'hidden',
+                    title: {
+                      label: '是否隐藏',
+                      tip: 'hidden | 是否隐藏当前列',
+                    },
+                    propType: 'bool',
+                    setter: 'BoolSetter',
+                  },
+                  {
+                    name: 'filters',
+                    title: {
+                      label: '筛选菜单项',
+                      tip: 'filters | 表头的筛选菜单项',
+                    },
+                    propType: 'object',
+                    setter: 'JsonSetter',
+                  },
+                  {
+                    name: 'other',
+                    title: {
+                      label: '其他拓展属性',
+                      tip: '其他拓展属性',
+                    },
+                    propType: 'object',
+                    setter: 'JsonSetter',
+                  },
+                  {
+                    name: 'field_type',
+                    title: { label: '字段类型', tip: '所筛选的字段类型' },
+                    propType: 'string',
+                    setter: {
+                      componentName: 'SelectSetter',
+                      mode: 'single',
+                      defaultValue: 'text',
+                      props: {
+                        options: [
+                          {
+                            title: '文本',
+                            value: 'text',
+                          },
+                          {
+                            title: '单选',
+                            value: 'select',
+                          },
+                          {
+                            title: '数字',
+                            value: 'number',
+                          },
+                          {
+                            title: '日期',
+                            value: 'date',
+                          },
+                          {
+                            title: '链接',
+                            value: 'link',
+                          },
+                        ],
+                      },
+                    },
+                  },
+                  {
+                    name: 'render',
+                    title: {
+                      label: '自定义渲染',
+                      tip: 'render | 插槽内的物料表达式可通过this.record获取当前行数据，this.index获取索引',
+                    },
+                    propType: 'func',
+                    setter: [
+                      {
+                        componentName: 'SlotSetter',
+                        title: '单元格插槽',
+                        initialValue: {
+                          type: 'JSSlot',
+                          params: ['text', 'record', 'index'],
+                          value: [],
+                        },
+                      },
+                      'VariableSetter',
+                    ],
+                  },
+                  {
+                    name: 'action',
+                    title: { label: 'Action', tip: 'Action' },
+                    propType: 'string',
+                    setter: 'StringSetter',
+                  },
+                  {
+                    name: 'contentClassName',
+                    title: {
+                      label: '内容样式类名',
+                      tip: '内容样式类名',
+                    },
+                    propType: 'string',
+                    setter: 'StringSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: { title: '标题', width: 250, dataIndex: '' },
+          },
+        },
+      },
+    },
+    {
+      title: '视图',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'view.defaultViewMode',
+          title: {
+            label: '默认视图',
+            tip: 'view.defaultViewMode | 组件默认展示视图',
+          },
+          propType: 'string',
+          setter: {
+            componentName: 'RadioGroupSetter',
+            props: {
+              options: [
+                {
+                  title: 'Grid',
+                  value: 'grid',
+                },
+                {
+                  title: 'Gallery',
+                  value: 'gallery',
+                },
+                {
+                  title: 'Kanban',
+                  value: 'kanban',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'view.multiple',
+          title: {
+            label: '开启多视图',
+            tip: 'view.multiple | 开启多视图后可以进行不同组件类型切换',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'view.modeList',
+          title: {
+            label: '多视图',
+            tip: 'view.modeList | 组件多视图选项',
+          },
+          condition(target) {
+            return !!target.getProps().getPropValue('view.multiple');
+          },
+          setter: {
+            componentName: 'SelectSetter',
+            props: {
+              mode: 'multiple',
+              options: [
+                {
+                  title: 'Grid',
+                  value: 'grid',
+                },
+                {
+                  title: 'Gallery',
+                  value: 'gallery',
+                },
+                {
+                  title: 'Kanban',
+                  value: 'kanban',
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: 'Gallery',
+      display: 'entry',
+      type: 'group',
+      items: [
+        {
+          name: 'gallery.cardMinWidth',
+          title: {
+            label: '卡片最小宽度',
+            tip: '卡片最小宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMinWidth',
+          },
+          setter: 'NumberSetter',
+          defaultValue: 260,
+        },
+        {
+          name: 'gallery.cardMaxWidth',
+          title: {
+            label: '卡片最大宽度',
+            tip: '卡片最大宽度，屏幕尺寸改变时卡片宽度始终保持在最大最小之间｜gallery.cardMaxWidth',
+          },
+          setter: 'NumberSetter',
+          defaultValue: 340,
+        },
+        {
+          name: 'gallery.horizontalGutter',
+          title: {
+            label: '水平间隔',
+            tip: '水平间隔｜gallery.horizontalGutter',
+          },
+          setter: 'NumberSetter',
+          defaultValue: 32,
+        },
+        {
+          name: 'gallery.verticalGutter',
+          title: { label: '垂直间隔', tip: '垂直间隔｜gallery.verticalGutter' },
+          setter: 'NumberSetter',
+          defaultValue: 32,
+        },
+        {
+          name: 'gallery.fixedHeight',
+          title: { label: '高度固定', tip: '高度固定｜gallery.fixedHeight' },
+          setter: 'BoolSetter',
+        },
+        {
+          name: 'gallery.cardHeight',
+          title: { label: '卡片高度', tip: '卡片高度｜gallery.cardHeight' },
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: 'gallery.fixedHeader',
+          title: {
+            label: '固定顶部',
+            tip: '是否固定顶部｜gallery.fixedHeader',
+          },
+          setter: 'BoolSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: 'gallery.fixedFooter',
+          title: {
+            label: '固定底部',
+            tip: '是否固定底部｜gallery.fixedFooter',
+          },
+          setter: 'BoolSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("gallery.fixedHeight")',
+          },
+        },
+        {
+          name: 'gallery.footer.render',
+          title: {
+            label: '底部渲染函数',
+            tip: '底部渲染函数 ｜gallery.footer.render',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '底部函数插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['record', 'index'],
+                value: [],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template: 'footer(){\n// 自定义渲染底部\nreturn `Footer`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'gallery.footer.height',
+          title: { label: '底部高度', tip: '底部高度｜gallery.footer.height' },
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("gallery.footer.render")',
+          },
+        },
+        {
+          name: 'gallery.onItem',
+          title: { label: '卡片点击事件', tip: '卡片点击事件｜gallery.onItem' },
+          setter: {
+            componentName: 'FunctionSetter',
+            props: {
+              template:
+                "onItem(record,index){\n// 卡片点击事件\nconsole.log(record,index,'record,index');\n}",
+            },
+          },
+        },
+        {
+          title: '头部区域',
+          display: 'block',
+          type: 'group',
+          items: [
+            {
+              name: 'gallery.cover.show',
+              title: { label: '封面开启', tip: '封面开启｜gallery.cover.show' },
+              setter: 'BoolSetter',
+              defaultValue: true,
+            },
+            {
+              name: 'gallery.cover.fields',
+              title: {
+                label: '封面内容',
+                tip: 'gallery.cover.fields | 封面内容字段',
+              },
+              setter: {
+                componentName: 'SelectSetter',
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue('columns');
+                  return {
+                    mode: 'multiple',
+                    options:
+                      columns?.map?.((item) => ({
+                        title:
+                          typeof item.title === 'string'
+                            ? item.title
+                            : item.key,
+                        value: item.key,
+                      })) || [],
+                  };
+                },
+              },
+              condition: {
+                type: 'JSFunction',
+                value:
+                  'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: 'gallery.cover.height',
+              title: {
+                label: '封面高度',
+                tip: 'gallery.cover.height | 封面高度',
+              },
+              propType: 'number',
+              setter: 'NumberSetter',
+              defaultValue: 230,
+              condition: {
+                type: 'JSFunction',
+                value:
+                  'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: 'gallery.cover.objectFit',
+              title: {
+                label: '封面效果',
+                tip: 'gallery.cover.objectFit | 封面效果',
+              },
+              propType: 'string',
+              setter: {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '适应',
+                      value: 'fill',
+                    },
+                    {
+                      title: '裁剪',
+                      value: 'cover',
+                    },
+                  ],
+                },
+                initialValue: 'fill',
+              },
+              condition: {
+                type: 'JSFunction',
+                value:
+                  'target => !!target.getProps().getPropValue("gallery.cover.show")',
+              },
+            },
+            {
+              name: 'gallery.title.field',
+              title: {
+                label: '标题内容',
+                tip: 'gallery.title.field | 标题内容',
+              },
+              propType: 'string',
+              setter: {
+                componentName: 'SelectSetter',
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue('columns');
+                  return {
+                    mode: 'single',
+                    options:
+                      columns?.map?.((item) => ({
+                        title:
+                          typeof item.title === 'string'
+                            ? item.title
+                            : item.key,
+                        value: item.key,
+                      })) || [],
+                  };
+                },
+              },
+            },
+            {
+              name: 'gallery.title.line',
+              title: {
+                label: '标题行数',
+                tip: 'gallery.title.line | 标题行数',
+              },
+              propType: 'number',
+              setter: 'NumberSetter',
+            },
+            {
+              name: 'gallery.header.slot',
+              title: {
+                label: '开启插槽',
+                tip: 'gallery.header.slot | 开启插槽',
+              },
+              propType: 'func',
+              setter: [
+                {
+                  componentName: 'SlotSetter',
+                  title: '函数插槽',
+                  initialValue: {
+                    type: 'JSSlot',
+                    params: ['record', 'index'],
+                    value: [],
+                  },
+                },
+                'VariableSetter',
+              ],
+            },
+            {
+              name: 'gallery.header.fields.show',
+              title: {
+                label: '其他字段',
+                tip: 'gallery.header.fields.show | 其他字段',
+              },
+              propType: 'bool',
+              setter: 'BoolSetter',
+              defaultValue: false,
+            },
+            {
+              name: 'gallery.header.fields.list',
+              title: {
+                label: '其他字段',
+                tip: 'gallery.header.fields.list | 选择字段渲染在上方',
+              },
+              condition: {
+                type: 'JSFunction',
+                value:
+                  'target => !!target.getProps().getPropValue("gallery.header.fields.show")',
+              },
+              setter: {
+                componentName: 'SelectSetter',
+                props: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue('columns');
+                  return {
+                    mode: 'multiple',
+                    options:
+                      columns?.map?.((item) => ({
+                        title:
+                          typeof item.title === 'string'
+                            ? item.title
+                            : item.key,
+                        value: item.key,
+                      })) || [],
+                  };
+                },
+              },
+            },
+          ],
+        },
+        {
+          title: '内容区域',
+          display: 'block',
+          type: 'group',
+          items: [
+            {
+              name: 'gallery.content.fields',
+              title: '',
+              setter: {
+                componentName: 'ArraySetter',
+                props: {
+                  itemSetter: {
+                    componentName: 'ObjectSetter',
+                    props: {
+                      config: {
+                        items: [
+                          {
+                            name: 'columnKey',
+                            title: { label: '渲染字段', tip: '渲染字段' },
+                            isRequired: true,
+                            setter: {
+                              componentName: 'SelectSetter',
+                              props: (target) => {
+                                const columns =
+                                  target.parent.parent.parent.getPropValue(
+                                    'columns'
+                                  );
+                                const fieldsKey = target.parent.parent.parent
+                                  .getPropValue('gallery.content.fields')
+                                  .map((item) => item?.columnKey)
+                                  .filter(Boolean);
+                                return {
+                                  mode: 'single',
+                                  options:
+                                    columns?.map?.((item) => ({
+                                      title:
+                                        typeof item.title === 'string'
+                                          ? item.title
+                                          : item.key,
+                                      value: item.key,
+                                      disabled: fieldsKey.includes(item.key),
+                                    })) || [],
+                                };
+                              },
+                            },
+                          },
+                          {
+                            name: 'show',
+                            title: { label: '是否展示', tip: '是否展示' },
+                            propType: 'bool',
+                            setter: 'BoolSetter',
+                            isRequired: true,
+                          },
+                        ],
+                      },
+                    },
+                    initialValue: {
+                      columnKey: '',
+                      show: true,
+                    },
+                  },
+                },
+                initialValue: (target) => {
+                  const columns =
+                    target.parent.parent.parent.getPropValue('columns');
+                  return (
+                    columns?.map?.((item) => ({
+                      columnKey: item.key,
+                      show: true,
+                    })) || []
+                  );
+                },
+              },
+            },
+          ],
+        },
+      ],
+    },
+    {
+      title: '外观',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'showHeader',
+          title: { label: '显示表头', tip: 'showHeader | 是否显示表头' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'bordered',
+          title: {
+            label: '显示边框',
+            tip: 'bordered | 是否展示外边框和列边框',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'size',
+          title: { label: '表格大小', tip: 'size | 表格大小' },
+          propType: {
+            type: 'oneOf',
+            value: ['default', 'middle', 'small'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: 'default',
+                  },
+                  {
+                    title: '中',
+                    value: 'middle',
+                  },
+                  {
+                    title: '小',
+                    value: 'small',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+          defaultValue: 'default',
+        },
+        {
+          name: 'tableLayout',
+          title: { label: '表格布局', tip: 'tableLayout | 表格布局' },
+          defaultValue: '',
+          propType: {
+            type: 'oneOf',
+            value: ['', 'auto', 'fixed'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: '',
+                  },
+                  {
+                    title: '自动',
+                    value: 'auto',
+                  },
+                  {
+                    title: '固定',
+                    value: 'fixed',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'virtual',
+          title: {
+            label: '虚拟列表',
+            tip: 'virtual | 支持虚拟列表，开启后不支持 components.body 自定义',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+      ],
+    },
+    {
+      title: '分页',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'pagination',
+          title: { label: '显示分页', tip: 'pagination | 显示分页' },
+          propType: 'object',
+          setter: 'BoolSetter',
+          extraProps: {
+            setValue: (target, value) => {
+              if (value) {
+                target.parent.setPropValue('pagination', {
+                  pageSize: 10,
+                });
+              }
+            },
+          },
+        },
+        {
+          name: 'pagination.pageSize',
+          title: { label: '每页条数', tip: 'pagination.pageSize | 每页条数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.total',
+          title: { label: '数据总数', tip: 'pagination.total | 数据总数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.defaultCurrent',
+          title: {
+            label: '默认当前页',
+            tip: 'pagination.defaultCurrent | 默认的当前页数',
+          },
+          propType: 'number',
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.current',
+          title: { label: '当前页数', tip: 'pagination.current | 当前页数' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.showPagination',
+          title: {
+            label: '始终显示分页',
+            tip: 'pagination.showPagination | 当前数据总数大于10 则始终显示分页器',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.showTotal',
+          title: {
+            label: '显示总数',
+            tip: 'pagination.showTotal | 用于显示数据总量和当前数据顺序',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.showSizeChanger',
+          title: {
+            label: '页数切换',
+            tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.localPagination',
+          title: {
+            label: '前端分页',
+            tip: 'pagination.localPagination | 是否前端分页开启后表头搜索和分页前端处理',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.showQuickJumper',
+          title: {
+            label: '快速跳转',
+            tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.simple',
+          title: { label: '简单分页', tip: 'pagination.simple | 简单分页' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.size',
+          title: { label: '分页尺寸', tip: 'pagination.size | 分页尺寸' },
+          propType: {
+            type: 'oneOf',
+            value: ['default', 'small'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '默认',
+                    value: 'default',
+                  },
+                  {
+                    title: '小',
+                    value: 'small',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+          defaultValue: 'default',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+        {
+          name: 'pagination.position',
+          title: { label: '分页位置', tip: 'pagination.position | 分页位置' },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    {
+                      title: '上左',
+                      value: 'topLeft',
+                    },
+                    {
+                      title: '上中',
+                      value: 'topCenter',
+                    },
+                    {
+                      title: '上右',
+                      value: 'topRight',
+                    },
+                    {
+                      title: '下左',
+                      value: 'bottomLeft',
+                    },
+                    {
+                      title: '下中',
+                      value: 'bottomCenter',
+                    },
+                    {
+                      title: '下右',
+                      value: 'bottomRight',
+                    },
+                  ],
+                },
+                initialValue: 'bottomRight',
+              },
+            },
+          },
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("pagination")',
+          },
+        },
+      ],
+    },
+    {
+      title: '滚动',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'scroll.autoCalc',
+          title: {
+            label: '自动计算',
+            tip: 'scroll.autoCalc | 是否自动计算scroll x y',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'scroll.scrollToFirstRowOnChange',
+          title: {
+            label: '自动滚动',
+            tip: 'scroll.scrollToFirstRowOnChange | 是否自动滚动到表格顶部',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'scroll.x',
+          title: {
+            label: '横向滚动',
+            tip: 'scroll.x | 	设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 max-content',
+          },
+          propType: { type: 'oneOfType', value: ['number', 'bool'] },
+          setter: ['NumberSetter', 'BoolSetter', 'VariableSetter'],
+        },
+        {
+          name: 'scroll.y',
+          title: {
+            label: '纵向滚动',
+            tip: 'scroll.y | 	设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值',
+          },
+          propType: 'number',
+          setter: ['NumberSetter', 'VariableSetter'],
+        },
+      ],
+    },
+    {
+      title: '行选择器',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'rowSelection',
+          title: { label: '行选择', tip: 'rowSelection | 行选择' },
+          propType: 'object',
+          setter: 'BoolSetter',
+          extraProps: {
+            setValue: (target, value) => {
+              if (value) {
+                target.parent.setPropValue('rowSelection', {
+                  type: 'radio',
+                  columnWidth: 48,
+                });
+              }
+            },
+          },
+        },
+        {
+          name: 'rowSelection.type',
+          title: { label: '行选择类型', tip: 'rowSelection.type | 多选/单选' },
+          propType: {
+            type: 'oneOf',
+            value: ['checkbox', 'radio'],
+          },
+          setter: [
+            {
+              componentName: 'RadioGroupSetter',
+              props: {
+                options: [
+                  {
+                    title: '多选',
+                    value: 'checkbox',
+                  },
+                  {
+                    title: '单选',
+                    value: 'radio',
+                  },
+                ],
+              },
+            },
+            'VariableSetter',
+          ],
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+        {
+          name: 'rowSelection.fixed',
+          title: {
+            label: '固定左边',
+            tip: 'rowSelection.fixed | 把选择框列固定在左边',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+        {
+          name: 'rowSelection.columnWidth',
+          title: {
+            label: '自定义列表选择框宽度',
+            tip: 'rowSelection.columnWidth | 自定义列表选择框宽度',
+          },
+          propType: {
+            type: 'oneOfType',
+            value: ['number', 'string'],
+          },
+          setter: ['NumberSetter', 'StringSetter', 'VariableSetter'],
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+        {
+          name: 'rowSelection.selectedRowKeys',
+          title: {
+            label: '选中行Key',
+            tip: 'rowSelection.selectedRowKeys | 指定选中项的 key 数组',
+          },
+          propType: 'object',
+          setter: 'JsonSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+        {
+          name: 'rowSelection.preserveSelectedRowKeys',
+          title: {
+            label: '保留选项',
+            tip: 'rowSelection.preserveSelectedRowKeys | 当数据被删除时仍然保留选项',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+        {
+          name: 'rowSelection.getCheckboxProps',
+          title: {
+            label: '默认属性',
+            tip: 'rowSelection.getCheckboxProps | 选择框的默认属性配置',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'getCheckboxProps(record,${extParams}){\n// 选择框的默认属性配置\nreturn { disabled: false };\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("rowSelection")',
+          },
+        },
+      ],
+    },
+    {
+      title: '行展开',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'expandable.expandedRowRender',
+          title: {
+            label: '展开行渲染',
+            tip: 'expandable.expandedRowRender | 额外的展开行',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '展开行插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['record', 'index', 'indent', 'expanded'],
+                value: [],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'expandedRowRender(record,index,indent,expanded,${extParams}){\n// 展开行渲染\nreturn `${record.id}`}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'expandable.rowExpandable',
+          title: {
+            label: '是否可展开',
+            tip: 'expandable.rowExpandable | 行是否可展开',
+          },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowExpandable(record,${extParams}){\n// 行是否可展开\nreturn true;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+      ],
+    },
+    {
+      title: '扩展',
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'title',
+          title: { label: '表格标题', tip: 'title | 表格标题' },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '表格标题插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['currentPageData'],
+                value: [],
+              },
+            },
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'renderTitle(currentPageData,${extParams}){\n// 自定义渲染表格顶部\nreturn "表格顶部";\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'summary',
+          title: { label: '统计栏' },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'SlotSetter',
+              title: '统计栏插槽',
+              initialValue: {
+                type: 'JSSlot',
+                params: ['currentPageData'],
+                value: [],
+              },
+            },
+          ],
+        },
+        {
+          name: 'onHeaderRow',
+          title: { label: '头部行属性', tip: 'onHeaderRow | 设置头部行属性' },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'onHeaderRow(columns,index,${extParams}){\n// 设置头部行属性\nreturn {onClick:()=>{}};\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'onRow',
+          title: { label: '行属性', tip: 'onRow | 设置行属性' },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'onRow(record,index,${extParams}){\n// 设置行属性\nreturn {onClick:event=>{}};\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'rowClassName',
+          title: { label: '行类名', tip: 'rowClassName | 表格行的类名' },
+          propType: 'func',
+          setter: [
+            {
+              componentName: 'FunctionSetter',
+              props: {
+                template:
+                  'rowClassName(record,index,${extParams}){\n// 表格行的类名\nreturn `className-${record.type}`;\n}',
+              },
+            },
+            'VariableSetter',
+          ],
+        },
+        {
+          name: 'dragSort',
+          title: {
+            label: '拖拽排序',
+            tip: 'dragSort | 开启拖拽排序',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+      ],
+    },
+    {
+      title: { label: '列配置', tip: '表格的列配置' },
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'columnSetting.show',
+          title: {
+            label: '开启列配置',
+            tip: 'columnSetting.show | 是否开启字段隐藏展示及顺序调整按钮',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'columnSetting.storageMode',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("columnSetting.show")',
+          },
+          title: {
+            label: '存储模式',
+            tip: 'columnSetting.storageMode | 列配置存储模式 关闭时刷新页面还原',
+          },
+          propType: 'string',
+          setter: {
+            componentName: 'SelectSetter',
+            mode: 'single',
+            defaultValue: 'localStorage',
+            props: {
+              options: [
+                {
+                  title: '关闭',
+                  value: '',
+                },
+                {
+                  title: '本地localStorage',
+                  value: 'localStorage',
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: { label: '分组配置', tip: '表格的分组配置' },
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'dataSourceGroup.show',
+          title: {
+            label: '开启分组功能',
+            tip: 'dataSourceGroup.show | 是否开启针对字段分组功能',
+          },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'dataSourceGroup.storageMode',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("dataSourceGroup.show")',
+          },
+          title: {
+            label: '存储模式',
+            tip: 'dataSourceGroup.storageMode | 分组信息存储模式 关闭时刷新页面还原',
+          },
+          propType: 'string',
+          setter: {
+            componentName: 'SelectSetter',
+            mode: 'single',
+            defaultValue: 'localStorage',
+            props: {
+              options: [
+                {
+                  title: '关闭',
+                  value: '',
+                },
+                {
+                  title: '本地localStorage',
+                  value: 'localStorage',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'dataSourceGroup.list',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("dataSourceGroup.show")',
+          },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'isCustom',
+                        title: {
+                          label: '开启定制字段',
+                          tip: '开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex',
+                        },
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'isHidden',
+                        title: {
+                          label: '是否隐藏',
+                          tip: '开启时，当前项展示， 关闭时，当前项隐藏',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'columnKey',
+                        title: {
+                          label: '选择字段',
+                          tip: '选择column中的title和dataIndex字段进行排序',
+                        },
+                        isRequired: true,
+                        condition(target) {
+                          return !target.parent.getPropValue('isCustom');
+                        },
+                        setter: [
+                          {
+                            componentName: 'SelectSetter',
+                            mode: 'single',
+                            props: (target) => {
+                              const fieldsKey = target.parent.parent.parent
+                                .getPropValue('dataSourceGroup.list')
+                                .map((item) => item?.columnKey)
+                                .filter(Boolean);
+                              return {
+                                options:
+                                  target.parent.parent.parent
+                                    .getPropValue('columns')
+                                    ?.map?.((item) => ({
+                                      title: getI18n(item.title) || item.key,
+                                      value: item.key,
+                                      disabled: fieldsKey.includes(item.key),
+                                    })) || [],
+                              };
+                            },
+                          },
+                          'StringSetter',
+                        ],
+                      },
+                      {
+                        name: 'label',
+                        title: { label: '筛选项', tip: '筛选项' },
+                        propType: 'string',
+                        setter: 'PisellI18nSetter',
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                      {
+                        name: 'name',
+                        title: { label: '字段', tip: '所筛选的字段' },
+                        setter: [
+                          'StringSetter',
+                          {
+                            componentName: 'ArraySetter',
+                            props: {
+                              itemSetter: {
+                                componentName: 'StringSetter',
+                              },
+                            },
+                          },
+                        ],
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                    ],
+                  },
+                },
+                initialValue: {
+                  label: '标题',
+                  name: '',
+                  columnKey: '',
+                  isCustom: false,
+                  isHidden: false,
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: { label: '筛选项', tip: '表格的筛选项' },
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'filter.show',
+          title: { label: '开启筛选', tip: '开启筛选' },
+          propType: 'object',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'filter.sortButtonShow',
+          title: { label: '开启筛选排序按钮', tip: '开启筛选排序按钮' },
+          propType: 'object',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'filter.storageMode',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("filter.show")',
+          },
+          title: {
+            label: '存储模式',
+            tip: 'filter.storageMode | 筛选信息存储模式 关闭时刷新页面还原',
+          },
+          propType: 'string',
+          setter: {
+            componentName: 'SelectSetter',
+            mode: 'single',
+            defaultValue: 'localStorage',
+            props: {
+              options: [
+                {
+                  title: '关闭',
+                  value: '',
+                },
+                {
+                  title: '本地localStorage',
+                  value: 'localStorage',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'filter.quickFilterMaxLength',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("filter.show")',
+          },
+          title: { label: '快速筛选项', tip: '外层快速筛选项最大数量控制' },
+          propType: 'number',
+          setter: 'NumberSetter',
+          defaultValue: 3,
+        },
+        {
+          name: 'filter.list',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("filter.show")',
+          },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'isCustom',
+                        title: {
+                          label: '开启定制字段',
+                          tip: '开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex',
+                        },
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'columnKey',
+                        title: {
+                          label: '选择字段',
+                          tip: '选择column中的title和dataIndex字段进行排序',
+                        },
+                        isRequired: true,
+                        condition(target) {
+                          return !target.parent.getPropValue('isCustom');
+                        },
+                        setter: [
+                          {
+                            componentName: 'SelectSetter',
+                            mode: 'single',
+                            props: (target) => {
+                              console.log(
+                                target.parent.parent.parent,
+                                this,
+                                'target.parent.parent.parent\n' +
+                                  '                                  .getPropValue("columns")'
+                              );
+                              const fieldsKey =
+                                target.parent.parent.parent
+                                  .getPropValue('filter.list')
+                                  ?.map((item) => item?.columnKey)
+                                  ?.filter(Boolean) || [];
+                              return {
+                                options:
+                                  target.parent.parent.parent
+                                    .getPropValue('columns')
+                                    ?.map?.((item) => ({
+                                      title: getI18n(item.title) || item.key,
+                                      value: item.key,
+                                      disabled: fieldsKey.includes(item.key),
+                                    })) || [],
+                              };
+                            },
+                          },
+                          'StringSetter',
+                        ],
+                      },
+                      {
+                        name: 'label',
+                        title: { label: '筛选项', tip: '筛选项' },
+                        propType: 'string',
+                        setter: 'PisellI18nSetter',
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                      {
+                        name: 'name',
+                        title: { label: '字段', tip: '所筛选的字段' },
+                        setter: [
+                          'StringSetter',
+                          {
+                            componentName: 'ArraySetter',
+                            props: {
+                              itemSetter: {
+                                componentName: 'StringSetter',
+                              },
+                            },
+                          },
+                        ],
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                      {
+                        name: 'key',
+                        title: { label: 'key', tip: '唯一标识' },
+                        propType: 'string',
+                        setter: 'StringSetter',
+                        isRequired: true,
+                      },
+                      {
+                        name: 'type',
+                        title: { label: '字段类型', tip: '所筛选的字段类型' },
+                        propType: 'string',
+                        setter: {
+                          componentName: 'SelectSetter',
+                          mode: 'single',
+                          defaultValue: 'single',
+                          props: {
+                            options: [
+                              {
+                                title: '输入框',
+                                value: 'text',
+                              },
+                              {
+                                title: '搜索框',
+                                value: 'search',
+                              },
+                              {
+                                title: '数字输入框',
+                                value: 'number',
+                              },
+                              {
+                                title: '数字范围输入框',
+                                value: 'numberRange',
+                              },
+                              {
+                                title: '下拉选择框',
+                                value: 'select',
+                              },
+                              {
+                                title: '日期选择器',
+                                value: 'date',
+                              },
+                              {
+                                title: '日期范围选择器',
+                                value: 'rangePicker',
+                              },
+                              {
+                                title: '旧版日期范围选择器',
+                                value: 'oldRangePicker',
+                              },
+                              {
+                                title: '树选择',
+                                value: 'treeSelect',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                      {
+                        name: 'sort',
+                        title: {
+                          label: '开启排序',
+                          tip: '开启字段排序可以对顺序及字段隐藏调整,关闭时筛选项只在最外层展示',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'localFilter',
+                        title: {
+                          label: '开启本地筛选',
+                          tip: '开启本地筛选时，字段值改变会走本地前端搜索，关闭时是调用接口对数据更新。',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'isHidden',
+                        title: {
+                          label: '是否隐藏',
+                          tip: '开启时，当前项展示， 关闭时，当前项隐藏',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'other',
+                        title: {
+                          label: '其他拓展属性',
+                          tip: '其他拓展属性',
+                        },
+                        propType: 'object',
+                        setter: 'JsonSetter',
+                      },
+                    ],
+                  },
+                },
+                initialValue: {
+                  label: '标题',
+                  type: 'text',
+                  key: 'name',
+                  columnKey: '',
+                  isCustom: false,
+                  isHidden: false,
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: { label: '排序', tip: '表格的排序项' },
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'sort.show',
+          title: { label: '开启排序', tip: '开启排序' },
+          propType: 'object',
+          setter: 'BoolSetter',
+          defaultValue: true,
+        },
+        {
+          name: 'sort.storageMode',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("sort.show")',
+          },
+          title: {
+            label: '存储模式',
+            tip: 'filter.storageMode | 排序存储模式 关闭时刷新页面还原',
+          },
+          propType: 'string',
+          setter: {
+            componentName: 'SelectSetter',
+            mode: 'single',
+            defaultValue: 'localStorage',
+            props: {
+              options: [
+                {
+                  title: '关闭',
+                  value: '',
+                },
+                {
+                  title: '本地localStorage',
+                  value: 'localStorage',
+                },
+              ],
+            },
+          },
+        },
+        {
+          name: 'sort.list',
+          condition: {
+            type: 'JSFunction',
+            value: 'target => !!target.getProps().getPropValue("sort.show")',
+          },
+          setter: {
+            componentName: 'ArraySetter',
+            props: {
+              itemSetter: {
+                componentName: 'ObjectSetter',
+                props: {
+                  config: {
+                    items: [
+                      {
+                        name: 'isCustom',
+                        title: {
+                          label: '开启定制字段',
+                          tip: '开启定制字段，可自定义排序名和排序的key，关闭时可选择column中的title和dataIndex',
+                        },
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'columnKey',
+                        title: {
+                          label: '选择字段',
+                          tip: '选择column中的title和dataIndex字段进行排序',
+                        },
+                        isRequired: true,
+                        condition(target) {
+                          return !target.parent.getPropValue('isCustom');
+                        },
+                        setter: [
+                          {
+                            componentName: 'SelectSetter',
+                            mode: 'single',
+                            props: (target) => {
+                              const fieldsKey = target.parent.parent.parent
+                                .getPropValue('sort.list')
+                                .map((item) => item?.columnKey)
+                                .filter(Boolean);
+                              return {
+                                options:
+                                  target.parent.parent.parent
+                                    .getPropValue('columns')
+                                    ?.map?.((item) => ({
+                                      title: getI18n(item.title) || item.key,
+                                      value: item.key,
+                                      disabled: fieldsKey.includes(item.key),
+                                    })) || [],
+                              };
+                            },
+                          },
+                          'StringSetter',
+                        ],
+                      },
+                      {
+                        name: 'localFilter',
+                        title: {
+                          label: '开启本地排序',
+                          tip: '开启本地排序时，排序改变会走本地前端排序，关闭时是调用接口对数据更新。',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: true,
+                      },
+                      {
+                        name: 'label',
+                        title: { label: '排序项', tip: '排序项展示文案' },
+                        propType: 'string',
+                        setter: 'PisellI18nSetter',
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                      {
+                        name: 'name',
+                        title: { label: '字段', tip: '所排序的字段' },
+                        setter: [
+                          {
+                            componentName: 'SelectSetter',
+                            mode: 'single',
+                            props: (target) => {
+                              return {
+                                options:
+                                  target.parent.parent.parent
+                                    .getPropValue('columns')
+                                    ?.map?.((item) => ({
+                                      title:
+                                        typeof item.title === 'string'
+                                          ? item.title
+                                          : item.key,
+                                      value: item.dataIndex,
+                                    })) || [],
+                              };
+                            },
+                          },
+                          'StringSetter',
+                          {
+                            componentName: 'ArraySetter',
+                            props: {
+                              itemSetter: {
+                                componentName: 'StringSetter',
+                              },
+                            },
+                          },
+                        ],
+                        condition(target) {
+                          return target.parent.getPropValue('isCustom');
+                        },
+                      },
+                      {
+                        name: 'isHidden',
+                        title: {
+                          label: '是否隐藏',
+                          tip: '开启时，当前项展示， 关闭时，当前项隐藏',
+                        },
+                        propType: 'bool',
+                        setter: 'BoolSetter',
+                        defaultValue: false,
+                      },
+                      {
+                        name: 'type',
+                        title: { label: '字段类型', tip: '所排序的字段类型' },
+                        propType: 'string',
+                        isRequired: true,
+                        setter: {
+                          componentName: 'SelectSetter',
+                          mode: 'single',
+                          defaultValue: 'single',
+                          props: {
+                            options: [
+                              {
+                                title: '日期排序',
+                                value: 'date',
+                              },
+                              {
+                                title: '数字排序',
+                                value: 'number',
+                              },
+                              {
+                                title: 'a-z排序',
+                                value: 'string',
+                              },
+                            ],
+                          },
+                        },
+                      },
+                    ],
+                  },
+                },
+                initialValue: {
+                  label: '标题',
+                  type: 'date',
+                  columnKey: '',
+                  isCustom: false,
+                  isHidden: false,
+                },
+              },
+            },
+          },
+        },
+      ],
+    },
+    {
+      title: { label: '导入导出', tip: '表单的导入导出' },
+      display: 'block',
+      type: 'group',
+      items: [
+        {
+          name: 'exportImport.show',
+          title: { label: '开启导入导出', tip: '开启表单的导入导出' },
+          propType: 'bool',
+          setter: 'BoolSetter',
+          defaultValue: false,
+        },
+        {
+          name: 'exportImport.hiddenKeys',
+          title: {
+            label: '隐藏字段',
+            tip: "比如：['import'] '导入(import)|导出(export)|导出文件(export_file)|导入日志(import_log)'",
+          },
+          setter: 'ObjectSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+        {
+          name: 'exportImport.apiUrl',
+          title: {
+            label: '接口地址',
+            tip: "接口地址 | [{export: '/shop/order/task'}]",
+          },
+          setter: 'ObjectSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+        // {
+        //   name: "exportImport.formId",
+        //   title: { label: "表单ID", tip: "表单ID" },
+        //   propType: "string",
+        //   setter: "StringSetter",
+        //   condition: {
+        //     type: "JSFunction",
+        //     value: 'target => !!target.getProps().getPropValue("exportImport.show")',
+        //   },
+        // },
+        // {
+        //   name: "exportImport.formCode",
+        //   title: { label: "表单Code", tip: "表单Code｜表单的唯一标识" },
+        //   propType: "string",
+        //   setter: "StringSetter",
+        //   condition: {
+        //     type: "JSFunction",
+        //     value: 'target => !!target.getProps().getPropValue("exportImport.show")',
+        //   },
+        // },
+        {
+          name: 'exportImport.otherParams',
+          title: { label: '接口其他参数', tip: '接口其他参数' },
+          setter: 'ObjectSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+        {
+          name: 'exportImport.title',
+          title: { label: '标题', tip: '打开弹窗的标题' },
+          propType: 'string',
+          setter: 'PisellI18nSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+        {
+          name: 'exportImport.templateFileUrl',
+          title: { label: '导入模版链接', tip: '导入模版链接' },
+          propType: 'string',
+          setter: 'StringSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+        {
+          name: 'exportImport.selectLists',
+          title: { label: '当前所选项', tip: '当前所选择的需要导出的哪些数据' },
+          setter: 'ObjectSetter',
+          condition: {
+            type: 'JSFunction',
+            value:
+              'target => !!target.getProps().getPropValue("exportImport.show")',
+          },
+        },
+      ],
+    },
+    {
+      name: 'buttons',
+      title: { label: '标题按钮组', tip: '标题右侧按钮项' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'title',
+                    title: { label: '按钮名称', tip: '按钮名称' },
+                    propType: 'string',
+                    setter: 'PisellI18nSetter',
+                    isRequired: true,
+                  },
+                  ...button.configure.props,
+                  {
+                    name: 'onClick',
+                    title: { label: '点击事件', tip: '点击事件' },
+                    propType: 'func',
+                  },
+                  {
+                    name: 'action',
+                    title: { label: '功能', tip: '按钮的功能' },
+                    propType: 'string',
+                    setter: [
+                      {
+                        componentName: 'SelectSetter',
+                        mode: 'single',
+                        defaultValue: 'add',
+                        props: {
+                          options: [
+                            {
+                              title: 'Add',
+                              value: 'add',
+                            },
+                            {
+                              title: 'Reset',
+                              value: 'reset',
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+
+                  {
+                    name: 'other',
+                    title: {
+                      label: '其他拓展属性',
+                      tip: '其他拓展属性',
+                    },
+                    propType: 'object',
+                    setter: 'JsonSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: { title: '按钮' },
+          },
+        },
+      },
+    },
+    {
+      name: 'actionButtons',
+      title: { label: '表格按钮组', tip: '表格action右侧按钮项' },
+      setter: {
+        componentName: 'ArraySetter',
+        props: {
+          itemSetter: {
+            componentName: 'ObjectSetter',
+            props: {
+              config: {
+                items: [
+                  {
+                    name: 'title',
+                    title: { label: '按钮名称', tip: '按钮名称' },
+                    propType: 'string',
+                    setter: 'PisellI18nSetter',
+                    isRequired: true,
+                  },
+                  ...button.configure.props,
+                  {
+                    name: 'onClick',
+                    title: { label: '点击事件', tip: '点击事件' },
+                    propType: 'func',
+                  },
+                  {
+                    name: 'action',
+                    title: { label: '功能', tip: '按钮的功能' },
+                    propType: 'string',
+                    setter: [
+                      {
+                        componentName: 'SelectSetter',
+                        mode: 'single',
+                        defaultValue: 'add',
+                        props: {
+                          options: [
+                            {
+                              title: 'Add',
+                              value: 'add',
+                            },
+                            {
+                              title: 'Reset',
+                              value: 'reset',
+                            },
+                          ],
+                        },
+                      },
+                    ],
+                  },
+
+                  {
+                    name: 'other',
+                    title: {
+                      label: '其他拓展属性',
+                      tip: '其他拓展属性',
+                    },
+                    propType: 'object',
+                    setter: 'JsonSetter',
+                  },
+                ],
+              },
+            },
+            initialValue: { title: '按钮' },
+          },
+        },
+      },
+    },
+  ],
+  configure: {
+    supports: {
+      style: true,
+      events: [
+        {
+          name: 'onChange',
+          template:
+            "onChange(pagination,filters,sorter,extra,${extParams}){\n// 表格翻页事件\nconsole.log('onChange', pagination);}",
+        },
+        {
+          name: 'onSortChange',
+          template:
+            "onSortChange(detail){\n// 表格拖拽排序事件\nconsole.log('detail', detail);}",
+        },
+        {
+          name: 'onValuesChange',
+          template: 'onValuesChange(changedValues, values){}',
+        },
+        {
+          name: 'onDataSourceChange',
+          template: 'onDataSourceChange(currentDataSource) {}',
+        },
+        {
+          name: 'rowSelection.onChange',
+          template:
+            "onRowSelectionChange(selectedRowKeys,selectedRows,${extParams}){\n// 选中项发生变化时的回调\nconsole.log('onRowSelectionChange', selectedRowKeys, selectedRows);}",
+        },
+        {
+          name: 'expandable.onExpand',
+          template:
+            "onExpandableExpand(expanded,record){\n// 点击展开图标时触发\nconsole.log('onRowSelectionChange', expanded, record);}",
+        },
+        {
+          name: 'onExportChange',
+          template:
+            "onExportChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}",
+        },
+        {
+          name: 'onImportChange',
+          template:
+            "onImportChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}",
+        },
+        {
+          name: 'onExportFileChange',
+          template:
+            "onExportFileChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}",
+        },
+        {
+          name: 'onImportLogChange',
+          template:
+            "onImportLogChange(expanded,record){\n// 点击展开图标时触发\nconsole.log('onExport', expanded, record);}",
+        },
+      ],
+    },
+  },
+};