@openli1115/lowcode-edit-pro-table 1.0.23

package/lowcode/pro-table/meta.ts

@@ -0,0 +1,437 @@
+import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
+import { uuid } from '../utils';
+import { snippets } from './snippets';
+
+const ProTableMeta: IPublicTypeComponentMetadata = {
+  "componentName": "ProTable",
+  "title": "高级表格",
+  "group": "精选组件",
+  "category": "基础元素",
+  "docUrl": "",
+  "screenshot": "",
+  "devMode": "proCode",
+  "npm": {
+    "package": "lowcode-edit-pro-table",
+    "version": "{{version}}",
+    "exportName": "ProTable",
+    "main": "src/index.tsx",
+    "destructuring": true,
+    "subName": ""
+  },
+  "configure": {
+    props: [
+      {
+        name: 'ref',
+        title: {
+          label: 'ref',
+          tip: "ref | 通过 this.$('xxx') 获取到组件实例"
+        },
+        defaultValue: () => {
+          return `pro_table_${uuid()}`
+        },
+        setter: 'StringSetter'
+      },
+      {
+        title: '数据源',
+        display: 'block',
+        type: 'group',
+        items: [
+          {
+            name: 'dataSource',
+            title: { label: '表格数据', tip: 'dataSource | 表格数据' },
+            propType: 'object',
+            setter: 'JsonSetter'
+          },
+          {
+            name: 'loading',
+            title: { label: '加载中', tip: 'loading | 是否加载中' },
+            propType: 'bool',
+            setter: 'BoolSetter'
+          },
+          {
+            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: '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: [
+                        'StringSetter',
+                        {
+                          componentName: 'SlotSetter',
+                          title: '列标题插槽',
+                          initialValue: {
+                            type: 'JSSlot',
+                            params: ['options'],
+                            value: []
+                          }
+                        }
+                      ],
+                      isRequired: true
+                    },
+                    {
+                      name: 'dataIndex',
+                      title: { label: '数据字段', tip: 'dataIndex | 数据字段' },
+                      propType: 'string',
+                      setter: 'StringSetter',
+                      isRequired: true
+                    },
+                    {
+                      name: 'valueType',
+                      title: { label: '数据类型', tip: 'valueType | 数据类型' },
+                      propType: 'string',
+                      setter: {
+                        componentName: 'SelectSetter',
+                        props: {
+                          options: [
+                            { title: '文本', value: 'text' },
+                            { title: '标签', value: 'tag' },
+                            { title: '数字', value: 'digit' },
+                            { title: '金额', value: 'money' },
+                            { title: '日期', value: 'date' },
+                            { title: '日期时间', value: 'dateTime' },
+                            { title: '链接', value: 'link' },
+                            { title: '头像', value: 'avatar' },
+                            { title: '进度条', value: 'progress' }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      name: 'valueEnum',
+                      title: {
+                        label: '枚举定义',
+                        tip: 'valueEnum | 值的枚举，会自动转化把值当成 key 来取出要显示的内容'
+                      },
+                      propType: 'object',
+                      setter: 'JsonSetter'
+                    },
+                    {
+                      name: 'width',
+                      title: { label: '宽度', tip: 'width | 宽度' },
+                      propType: {
+                        type: 'oneOfType',
+                        value: ['number', 'string']
+                      },
+                      setter: ['NumberSetter', 'StringSetter', 'VariableSetter']
+                    },
+                    {
+                      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 | 列是否固定' },
+                      defaultValue: '',
+                      propType: {
+                        type: 'oneOf',
+                        value: ['', 'left', 'right']
+                      },
+                      setter: [
+                        {
+                          componentName: 'RadioGroupSetter',
+                          props: {
+                            options: [
+                              { title: '不固定', value: '' },
+                              { title: '固定在左侧', value: 'left' },
+                              { title: '固定在右侧', value: 'right' }
+                            ]
+                          }
+                        },
+                        'VariableSetter'
+                      ]
+                    }
+                  ]
+                }
+              },
+              initialValue: { title: '标题' }
+            }
+          }
+        }
+      },
+      {
+        title: '导入导出',
+        display: 'block',
+        type: 'group',
+        extraProps: {
+          display: 'accordion',
+          defaultCollapsed: false,
+        },
+        items: [
+          {
+            name: 'exportButton',
+            title: {
+              label: '导出按钮',
+              tip: 'exportButton | 是否展示导出按钮'
+            },
+            propType: 'bool',
+            setter: 'BoolSetter'
+          },
+          {
+            name: 'importButton',
+            title: {
+              label: '导入按钮',
+              tip: 'importButton | 是否展示导入按钮'
+            },
+            propType: 'bool',
+            setter: 'BoolSetter'
+          },
+          {
+            name: 'importTemplateList',
+            title: {
+              label: '上传导入模板',
+              tip: 'Upload Template | 上传导入模板'
+            },
+            propType: 'string',
+            setter: 'FileUpload',
+            condition: {
+              type: 'JSFunction',
+              value:
+                'target => !!target.getProps().getPropValue("importButton")'
+            }
+          },
+        ]
+      },
+      {
+        title: '表格样式',
+        display: 'block',
+        type: 'group',
+        extraProps: {
+          display: 'accordion',
+          defaultCollapsed: false,
+        },
+        items: [
+          {
+            title: {
+              label: {
+                type: 'i18n',
+                'en-US': 'headerTitle',
+                'zh-CN': '表格标题'
+              }
+            },
+            name: 'headerTitle',
+            setter: {
+              componentName: 'StringSetter',
+              isRequired: false
+            }
+          },
+          {
+            name: 'bordered',
+            title: {
+              label: '显示边框',
+              tip: 'bordered | 是否展示外边框和列边框'
+            },
+            propType: 'bool',
+            setter: 'BoolSetter'
+          },
+          {
+            name: 'showHeader',
+            title: { label: '显示表头', tip: 'showHeader | 是否显示表头' },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true
+          },
+          {
+            name: 'tableHeaderBold',
+            title: { label: '表头加粗', tip: 'tableHeaderBold | 是否表头字体加粗' },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: false
+          },
+          {
+            name: 'tableHeaderSize',
+            title: { label: '表头字号', tip: 'tableHeaderSize | 表头字号大小' },
+            propType: {
+              type: 'oneOf',
+              value: ['default', 'middle', 'large']
+            },
+            setter: [
+              {
+                componentName: 'RadioGroupSetter',
+                props: {
+                  options: [
+                    {
+                      title: '默认',
+                      value: 'default'
+                    },
+                    {
+                      title: '中',
+                      value: 'middle'
+                    },
+                    {
+                      title: '大',
+                      value: 'large'
+                    }
+                  ]
+                }
+              },
+              'VariableSetter'
+            ],
+            defaultValue: 'default'
+          },
+        ]
+      },
+      {
+        title: '分页',
+        display: 'block',
+        type: 'group',
+        extraProps: {
+          display: 'accordion',
+          defaultCollapsed: false,
+        },
+        items: [
+          {
+            name: 'pagination',
+            title: { label: '显示分页', tip: 'pagination | 显示分页' },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            extraProps: {
+              setValue: (target, value) => {
+                if (value) {
+                  target.parent.setPropValue('pagination', {
+                    defaultPageSize: 10,
+                    showSizeChanger: true,
+                    showQuickJumper: true,
+                  })
+                }
+              }
+            }
+          },
+          {
+            name: 'pagination.pageSize',
+            title: { label: '每页条数', tip: 'pagination.pageSize | 每页条数' },
+            propType: 'number',
+            setter: 'NumberSetter',
+            condition: {
+              type: 'JSFunction',
+              value: 'target => !!target.getProps().getPropValue("pagination")'
+            }
+          },
+          {
+            name: 'pagination.showSizeChanger',
+            title: {
+              label: '页数切换',
+              tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器'
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+            condition: {
+              type: 'JSFunction',
+              value: 'target => !!target.getProps().getPropValue("pagination")'
+            }
+          },
+          {
+            name: 'pagination.showQuickJumper',
+            title: {
+              label: '快速跳转',
+              tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页'
+            },
+            propType: 'bool',
+            setter: 'BoolSetter',
+            defaultValue: true,
+            condition: {
+              type: 'JSFunction',
+              value: 'target => !!target.getProps().getPropValue("pagination")'
+            }
+          }
+        ]
+      },
+      {
+        title: '滚动',
+        display: 'block',
+        type: 'group',
+        extraProps: {
+          display: 'accordion',
+          defaultCollapsed: false,
+        },
+        items: [
+          {
+            name: 'scroll.x',
+            title: {
+              label: '横向滚动',
+              tip: 'scroll.x | 设置横向滚动，也可用于指定滚动区域的宽'
+            },
+            propType: { type: 'oneOfType', value: ['number', 'bool'] },
+            setter: ['NumberSetter', 'BoolSetter', 'VariableSetter']
+          },
+          {
+            name: 'scroll.y',
+            title: {
+              label: '纵向滚动',
+              tip: 'scroll.y | 设置纵向滚动，也可用于指定滚动区域的高'
+            },
+            propType: 'number',
+            setter: ['NumberSetter', 'VariableSetter']
+          }
+        ]
+      }
+    ],
+    "supports": {
+      events: [
+        {
+          name: 'onLoad',
+          description: '数据加载完成后触发'
+        }
+      ],
+      "style": false
+    },
+    "component": {}
+  }
+};
+
+export default {
+  ...ProTableMeta,
+  snippets
+};

package/lowcode/pro-table/snippets.ts

@@ -0,0 +1,20 @@
+import { IPublicTypeSnippet } from '@alilc/lowcode-types'
+
+export const snippets: IPublicTypeSnippet[] = [
+  {
+    title: '高级表格',
+    screenshot: 'https://img.alicdn.com/imgextra/i1/O1CN01R1OdLV1GgCXW0rjop_!!6000000000651-2-tps-112-112.png',
+    schema: {
+      componentName: 'ProTable',
+      props: {
+        dataSource: [],
+        columns: [],
+        rowKey: 'id',
+        pagination: {
+          showSizeChanger: true,
+          showQuickJumper: true,
+        },
+      },
+    },
+  },
+];