@cloudbase/weda-ui 3.5.2 → 3.6.0

package/dist/configs/components/wd-table.js

@@ -1,5 +1,6 @@
+import { svgDataUri as svg } from '../svg-tag';
 import { defineConfig, Tuple, Type } from '../type-utils';
-import { WD_TABLE_PAGE_SIZE, WD_TABLE_SELECT_COLUMN } from '../../enum';
+import { WD_TABLE_PAGE_SIZE, WD_TABLE_SELECT_COLUMN, WD_TABLE_CUSTOM_FORMAT, WD_TABLE_CUSTOM_FORMAT_SINGLE, } from '../../enum';
 import { genericErrorType } from '../type-utils/error';
 const expressionTemplate = `
 {{#if (helper_utils '===' $self.attributes.dataSourceType 'expression')}}
@@ -81,6 +82,7 @@ const template = `
 [attributes]
 supportManyRelated = true
 isSupportApis = false
+isSupportMultipleSort = true
 `;
 // 属性类型定义
 const data = Type.Object({
@@ -107,7 +109,7 @@ const data = Type.Object({
         'x-linkages': [
             {
                 type: 'value:state',
-                target: '*( filterFields,bindMetadata,queryCondition,orderBy,orderType)',
+                target: '*( filterFields,bindMetadata,queryCondition)',
                 condition: "{{$self.value ==='data-model'}}",
                 state: {
                     display: true,
@@ -116,6 +118,39 @@ const data = Type.Object({
                     display: false,
                 },
             },
+            {
+                type: 'value:state',
+                target: '*(sorter)',
+                condition: "{{$self.value ==='data-model'&&$form.values.isSupportMultipleSort}}",
+                state: {
+                    display: true,
+                },
+                otherwise: {
+                    display: false,
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(orderBy,orderType)',
+                condition: "{{$self.value ==='data-model'&&!$form.values.isSupportMultipleSort}}",
+                state: {
+                    display: true,
+                },
+                otherwise: {
+                    display: false,
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(isSupportMultipleSort)',
+                condition: '{{!$form.values.isSupportMultipleSort}}',
+                state: {
+                    display: true,
+                },
+                otherwise: {
+                    display: false,
+                },
+            },
             {
                 type: 'value:state',
                 target: '*(connectorParams,bindConnectMetadata,connectorMethod)',
@@ -129,7 +164,7 @@ const data = Type.Object({
             },
             {
                 type: 'value:state',
-                target: '*(dataSourceData,recordKey,enableTotal,total)',
+                target: '*(dataSourceData,recordKey,enableTotal,total,loading)',
                 condition: "{{$self.value ==='expression'}}",
                 state: {
                     display: true,
@@ -299,6 +334,15 @@ const data = Type.Object({
                     },
                 },
             },
+            {
+                type: 'value:schema',
+                target: 'selectFields',
+                schema: {
+                    'x-component-props': {
+                        dataSourceName: '{{$self.value && $self.value.datasource && $self.value.datasource.name}}',
+                    },
+                },
+            },
             {
                 type: 'value:schema',
                 target: '*(fixedFront,fixedEnd)',
@@ -326,12 +370,20 @@ const data = Type.Object({
             },
             {
                 type: 'value:state',
-                condition: '{{!!$value && !!$value.datasource && !!$value.datasource.name && !!$form.values.orderBy && getDataSourceValueOptions($value.datasource.name, undefined, true).every(o => o.value !== $form.values.orderBy)}}',
-                target: 'orderBy',
+                condition: '{{!!$value && !!$value.datasource && !!$value.datasource.name && !!$form.values?.sorter?.length && !$form.values.sorter.every(o => getDataSourceValueOptions($value.datasource.name, undefined, true).find(n=>o.orderBy===n.value))}}',
+                target: 'sorter',
                 state: {
-                    value: '',
+                    value: [
+                        { orderBy: 'updatedAt', orderType: 'desc', label: '更新时间' },
+                    ],
                 },
             },
+            {
+                type: 'value:state',
+                condition: '{{!!$value && !!$value.datasource && !!$value.datasource.name && !!$form.values.orderBy && getDataSourceValueOptions($value.datasource.name, undefined, true).every(o => o.value !== $form.values.orderBy)}}',
+                target: 'orderBy',
+                state: { value: 'updatedAt' },
+            },
             {
                 type: 'value:schema',
                 condition: '{{ $value!=null && typeof($value)!=undefined && $value.datasource!=null && typeof($value.datasource)!=undefined}}',
@@ -386,6 +438,13 @@ const data = Type.Object({
             expressionField: 'dataSourceData',
         },
     })),
+    loading: Type.Optional(Type.Boolean({
+        title: '数据加载状态',
+        'x-runtime-default': false,
+        'x-index': 27,
+        'x-group': '数据',
+        description: '开启后会展示数据加载中状态',
+    })),
     columnSets: Type.Array(Type.Object({
         key: Type.StringEnum({
             title: '绑定字段',
@@ -463,11 +522,52 @@ const data = Type.Object({
             'x-linkages': [
                 {
                     type: 'value:visible',
-                    target: '*(dataForm.align)',
+                    target: '*(dataForm.align,dataForm.customType)',
                     condition: "{{$self.value=='default'}}",
                 },
             ],
         }),
+        customType: Type.Optional(Type.String({
+            title: '数据格式',
+            default: '',
+            enum: WD_TABLE_CUSTOM_FORMAT,
+            'x-linkages': [
+                {
+                    type: 'value:visible',
+                    target: '*(dataForm.customArrayItem)',
+                    condition: "{{ $self.value === 'array' }}",
+                },
+                {
+                    type: 'value:visible',
+                    target: '*(dataForm.customJson)',
+                    condition: "{{ $self.value === 'json' }}",
+                },
+            ],
+        })),
+        customArrayItem: Type.Optional(Type.String({
+            title: '子元素类型',
+            enum: WD_TABLE_CUSTOM_FORMAT_SINGLE,
+            default: 'text',
+        })),
+        customJson: Type.Optional(Type.Object({}, {
+            title: '表达式',
+            default: {
+                type: 'array',
+                title: '示例（数组）',
+                items: {
+                    type: 'object',
+                    title: '示例（对象）',
+                    properties: {
+                        somekey: {
+                            type: 'string',
+                            title: '示例（字符串）',
+                        },
+                    },
+                },
+            },
+            'x-component': 'jsontext',
+            'x-helper-text': '通过定义JSON表达式，可实现复杂、多层级的数据展示效果 [查看指引](https://cloud.tencent.com/document/product/1301/101069)',
+        })),
         widthType: Type.String({
             title: '列宽',
             default: 'auto',
@@ -522,7 +622,7 @@ const data = Type.Object({
             type: 'boolean',
             default: 'true',
         }),
-        slotKey: Type.Boolean({
+        slotKey: Type.String({
             title: '插槽名称后缀',
             default: '',
             type: 'string',
@@ -611,13 +711,24 @@ const data = Type.Object({
         'x-group': '分页器',
         'x-index': 185,
     })),
+    isSuspendFooter: Type.Optional(Type.Boolean({
+        title: '分页器在页面顶部悬停',
+        'x-index': 190,
+        'x-group': '分页器',
+        'x-runtime-default': true,
+        'x-helper-text': '仅PC端有效；且可能因为父级组件的样式干扰，导致该属性失效',
+        description: '如无法生效，请确保祖先元素没有设置overflow属性为hidden、scroll或auto。这些属性会导致position: sticky失效。另外，如果页面已经有fixed的元素，那么悬停有可能会看不到，需要通过样式手动调整下悬停的位置',
+    })),
     enableTotal: Type.Optional(Type.Boolean({
-        title: '启用动态分页',
+        title: '启用服务端分页',
         type: 'boolean',
-        description: '开启后，可支持动态分页',
-        'x-helper-text': '默认为前端分页，启用后可实现动态加载数据   ',
+        description: '开启后，可支持服务端分页',
+        'x-helper-text': '默认为客户端分页，启用后可实现动态加载数据   ',
         'x-group': '分页器',
-        'x-index': 186,
+        'x-index': 200,
+        'x-props': {
+            'data-hidebind': true,
+        },
         default: false,
         'x-linkages': [
             {
@@ -633,7 +744,7 @@ const data = Type.Object({
         description: '默认为表达式输入的数组长度，请输入数据表实际数据总数。',
         'x-helper-text': '默认为表达式输入的数组长度，请输入数据表实际数据总数。[详见后端分页指引](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/WdTable#pagination)',
         'x-group': '分页器',
-        'x-index': 187,
+        'x-index': 210,
     })),
     supportManyRelated: Type.Optional(Type.Boolean({
         title: '新添加',
@@ -731,6 +842,7 @@ const data = Type.Object({
             'data-withBindMeta': true,
         },
         description: '对数据进行筛选过滤',
+        'x-helper-text': '点击fx支持编辑数据筛选表达式 [查看格式](https://docs.cloudbase.net/lowcode/manage/datasource-v2#%E6%9F%A5%E8%AF%A2wedagetitemv2)',
     })),
     orderBy: Type.Optional(Type.String({
         'x-index': 40,
@@ -765,6 +877,186 @@ const data = Type.Object({
         },
         description: '可设置升序或降序，绑定表达式时，升序传值asc，降序传值desc',
     })),
+    // 兼容多字段排序,若支持多字段排序，则给sort字段赋初始值（原始配置的orderBy,orderType）
+    isSupportMultipleSort: Type.Optional(Type.Boolean({
+        title: '启用多字段排序',
+        'x-index': 51,
+        default: false,
+        'x-group': '数据',
+        'x-props': {
+            'data-hidebind': true,
+        },
+        'x-linkages': [
+            {
+                type: 'value:state',
+                target: '*(sorter)',
+                condition: '{{$self.value}}',
+                state: {
+                    display: true,
+                },
+            },
+            {
+                type: 'value:state',
+                target: '*(orderBy,orderType)',
+                condition: '{{$self.value}}',
+                state: {
+                    display: false,
+                },
+            },
+            {
+                type: 'value:state',
+                target: 'sorter',
+                condition: '{{ Boolean($form.values.orderBy)&&$form.values.bindMetadata?.datasource?.name&&$self.inputed}}',
+                state: {
+                    value: '{{ ([getDataSourceValueOptions($form.values.bindMetadata.datasource.name, undefined, true).find(item => item.value === $form.values.orderBy)].map(i=>({label:i.label,orderBy:$form.values.orderBy,orderType:$form.values.orderType})))}}',
+                },
+            },
+        ],
+    })),
+    // 支持多字段筛选
+    sorter: Type.Optional(Type.Array(Type.Object({
+        orderBy: Type.String({
+            title: '排序字段',
+            default: '',
+            'x-props': {
+                clearable: true,
+            },
+        }),
+        label: Type.Optional(Type.String({
+            title: '排序字段名称',
+        })),
+        orderType: Type.StringEnum({
+            title: '排序方式',
+            type: 'string',
+            enum: [
+                {
+                    label: '升序',
+                    value: 'asc',
+                },
+                {
+                    label: '降序',
+                    value: 'desc',
+                },
+            ],
+            'x-props': {
+                clearable: true,
+            },
+        }),
+    }, {
+        title: 'tabs',
+        default: {
+            orderBy: '',
+            orderType: '',
+        },
+    }), {
+        title: '数据排序',
+        'x-index': 52,
+        'x-component': 'list',
+        'x-component-props': {
+            label_add: '添加排序规则',
+        },
+        'x-group': '数据',
+        'x-props': {
+            'data-withBindMeta': true,
+        },
+        'x-linkages': [
+            {
+                type: 'value:schema',
+                condition: '{{ Boolean($form?.values?.bindMetadata?.datasource?.name) }}',
+                target: 'sorter',
+                schema: {
+                    items: {
+                        path: 'sorter.*',
+                        type: 'object',
+                        default: {
+                            orderBy: '',
+                            orderType: 'asc',
+                            label: '',
+                        },
+                        'x-display': "(!this.orderBy)?'请选择排序字段':(this.label||this.orderBy)+'-'+(({desc:'降序',asc:'升序'})[this.orderType]||'')",
+                        properties: {
+                            orderBy: {
+                                type: 'string',
+                                title: '排序字段',
+                                'x-option': '{{getDataSourceValueOptions($form?.values?.bindMetadata?.datasource?.name, undefined, true)}}',
+                                'x-sorter': '{{$form?.values.sorter}}',
+                                'x-linkages': [
+                                    {
+                                        type: 'value:state',
+                                        target: 'dataForm.label',
+                                        condition: '{{ Boolean($self.value)}}',
+                                        state: {
+                                            value: '{{$self.props["x-option"].find(i=>i.value===$self.value)?.label}}',
+                                        },
+                                    },
+                                    {
+                                        type: 'value:schema',
+                                        target: 'dataForm.orderBy',
+                                        schema: {
+                                            enum: '{{$self.props["x-option"].filter(i=>i.value===$self.value||!$self.props["x-sorter"].find(j=>j.orderBy===i.value))}}',
+                                        },
+                                    },
+                                ],
+                            },
+                            label: Type.Optional(Type.String({
+                                type: 'string',
+                                title: '排序字段名称',
+                                display: false,
+                            })),
+                            orderType: Type.StringEnum({
+                                title: '排序方式',
+                                type: 'string',
+                                'x-component': 'radio',
+                                enum: [
+                                    {
+                                        label: '升序',
+                                        value: 'asc',
+                                    },
+                                    {
+                                        label: '降序',
+                                        value: 'desc',
+                                    },
+                                ],
+                                'x-props': {
+                                    clearable: true,
+                                },
+                            }),
+                        },
+                    },
+                },
+            },
+            {
+                type: 'value:schema',
+                condition: '{{$self.value?.length>2}}',
+                target: 'sorter',
+                schema: {
+                    'x-component-props': {
+                        label_add: '添加排序规则',
+                        addDisabledTip: '最多添加3个排序规则，请先删减已有规则',
+                    },
+                },
+            },
+            {
+                type: 'value:schema',
+                condition: '{{$self.value?.length<3}}',
+                target: 'sorter',
+                schema: {
+                    'x-component-props': {
+                        label_add: '添加排序规则',
+                        addDisabledTip: '',
+                    },
+                },
+            },
+        ],
+        default: [
+            {
+                orderBy: 'updatedAt',
+                orderType: 'desc',
+                label: '更新时间',
+            },
+        ],
+        description: '可设置数据排序规则，支持拖拽调整排序优先级，数组下标越小优先级越高。绑定数据示例：[{"orderBy":"updatedAt","orderType":"desc"}],升序传值asc，降序传值desc',
+    })),
     // 去掉搜索方式, 兼容旧组件, 属性隐藏, 暂不移除
     filterType: Type.Optional(Type.StringEnum({
         title: '搜索方式',
@@ -792,20 +1084,45 @@ const data = Type.Object({
         'x-group': '数据',
         description: '条件筛选',
     })),
-    filterFields: Type.Optional(Type.Any({
-        type: 'object',
+    filterFields: Type.Optional(Type.Object({
+        filterConfig: Type.Optional(Type.Array(Type.Object({
+            name: Type.String({
+                title: '数据源字段',
+                type: 'string',
+                description: '数据源字段的name值',
+            }),
+            label: Type.String({
+                title: '筛选字段标题',
+            }),
+            value: Type.Any({
+                title: '筛选字段值',
+            }),
+            filterType: Type.Optional(Type.String({
+                title: '默认筛选计算方式',
+            })),
+            filterTypeOption: Type.Optional(Type.Array(Type.String({
+                title: '筛选字段支持的计算方式列表',
+            }))),
+        }))),
+    }, {
         title: '筛选器',
         'x-component': 'mutilp-data-source-field-select',
         'x-component-props': {
             isWdTable: true,
             'x-filter': " !(this.type === 'array' && this.format === '') && !(this.format === 'father-son' && this.default === '') && this.type !== 'object' && this.format !== 'x-file' && this.format !== 'x-image' && this.format !== 'x-rtf' && this.format !== 'many-many' && this.format !== 'one-many'",
         },
-        'x-props': {
-            'data-hidebind': true,
-        },
+        'x-helper-text': '通过开启fx、绑定表达式，可配置默认筛选值、默认筛选方式等功能 [查看示例](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/WdTable#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%85%8D%E7%BD%AE%E7%AD%9B%E9%80%89%E5%99%A8)',
         'x-index': 70,
         'x-group': '数据',
-        description: '配置表格运行态的筛选器',
+        default: {},
+        description: '配置表格运行态的筛选器，支持对象类型数据绑定，属性字段为filterConfig',
+    })),
+    filterConfigVersion: Type.Optional(Type.String({
+        title: '筛选配置版本号',
+        default: 'v1',
+        'x-index': 71,
+        'x-group': '数据',
+        display: false,
     })),
     bindConnectMetadata: Type.Optional(Type.Object({
         datasource: Type.Optional(Type.Object({
@@ -949,6 +1266,19 @@ const data = Type.Object({
         default: true,
         'x-group': '表格列',
         description: '开启后，可拖拽按钮等组件，放入大纲树的操作列节点或表格的操作列区域',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'customOptionTitle',
+                condition: '{{$self.value}}',
+            },
+        ],
+    })),
+    customOptionTitle: Type.Optional(Type.String({
+        title: '操作列标题',
+        'x-index': 133,
+        'x-group': '表格列',
+        'x-runtime-default': '操作',
     })),
     columnSelectType: Type.Optional(Type.StringEnum({
         title: '数据选择列(首列)',
@@ -983,6 +1313,42 @@ const data = Type.Object({
         'x-index': 150,
         'x-group': '表格列',
     })),
+    selectFieldType: Type.Optional(Type.StringEnum({
+        title: '字段查询范围',
+        type: 'string',
+        enum: [
+            { label: '全部字段', value: 'all' },
+            { label: '表格列字段', value: 'table' },
+            { label: '自定义', value: 'custom' },
+        ],
+        'x-runtime-default': 'table',
+        'x-props': { clearable: true },
+        'x-helper-text': '仅查询范围中的字段，可在表格自定义列中被引用',
+        description: '默认查询表格列字段',
+        'x-index': 153,
+        'x-group': '表格列',
+        'x-linkages': [
+            {
+                type: 'value:visible',
+                target: 'selectFields',
+                condition: '{{$self.value === "custom"}}',
+            },
+        ],
+    })),
+    selectFields: Type.Optional(Type.Array(Type.String(), {
+        title: '自定义查询字段',
+        type: 'array',
+        'x-props': { clearable: true },
+        'x-index': 155,
+        'x-group': '表格列',
+        'x-component': 'mutilp-data-source-field-select',
+        'x-component-props': {
+            dataSourceName: '',
+            splitRelation: true,
+            enableSetProcedure: false,
+            enableConfigTitle: false,
+        },
+    })),
     emptyText: Type.Optional(Type.String({
         'x-group': '表格行',
         'x-index': 160,
@@ -999,6 +1365,14 @@ const data = Type.Object({
         'x-group': '表格行',
         description: '设置固定值或绑定低码方法，实现行背景颜色的改变',
     })),
+    isSuspendHeader: Type.Optional(Type.Boolean({
+        title: '表头在页面顶部悬停',
+        'x-index': 173,
+        'x-group': '表格行',
+        'x-runtime-default': true,
+        'x-helper-text': '仅PC端有效；且可能因为父级组件的样式干扰，导致该属性失效',
+        description: '如无法生效，请确保祖先元素没有设置overflow属性为hidden、scroll或auto。这些属性会导致position: sticky失效。另外，如果页面已经有fixed的元素，那么悬停有可能会看不到，需要通过样式手动调整下悬停的位置',
+    })),
     enablePagination: Type.Optional(Type.Boolean({
         title: '显示分页器',
         type: 'boolean',
@@ -1017,7 +1391,7 @@ const data = Type.Object({
     enableGlobalButton: Type.Optional(Type.Boolean({
         title: '全局按钮',
         type: 'boolean',
-        'x-index': 200,
+        'x-index': 250,
         default: true,
         'x-group': '操作配置',
         description: '开启后，可拖拽按钮等组件，放入大纲树的全局按钮节点或表格的全局按钮区域',
@@ -1025,7 +1399,7 @@ const data = Type.Object({
     enableRefreshBtn: Type.Optional(Type.Boolean({
         title: '刷新按钮',
         type: 'boolean',
-        'x-index': 220,
+        'x-index': 260,
         'x-runtime-default': true,
         'x-group': '操作配置',
         description: '开启后，可展示刷新按钮',
@@ -1101,6 +1475,11 @@ const data = Type.Object({
             },
         },
     })),
+    __innerSlot: Type.Optional(Type.Slot({
+        title: '隐藏插槽',
+        'x-group': '操作配置',
+        display: false,
+    })),
 });
 const properties = Type.Composite([
     Type.Pick(data, [
@@ -1154,6 +1533,28 @@ const properties = Type.Composite([
             title: '数据源协议版本',
             description: '数据源类型为数据模型时，当前表格支持的数据源协议版本',
         }),
+        filterConfig: Type.Array(Type.Object({
+            name: Type.String({
+                title: '数据源字段',
+                type: 'string',
+                description: '数据源字段的name值',
+            }),
+            label: Type.String({
+                title: '筛选字段标题',
+            }),
+            value: Type.Any({
+                title: '筛选字段值',
+            }),
+            filterType: Type.Optional(Type.String({
+                title: '默认筛选计算方式',
+            })),
+            filterTypeOption: Type.Optional(Type.Array(Type.String({
+                title: '筛选字段支持的计算方式列表',
+            }))),
+        }), {
+            title: '筛选面板的配置',
+            description: '筛选面板的配置',
+        }),
     }),
 ]);
 // export default
@@ -1181,54 +1582,58 @@ const config = defineConfig({
             description: '可以为 H5 端的表格编写样式',
         },
         {
-            name: '筛选器容器',
-            selector: '.wd-table-wrap-filter',
-            description: '筛选器容器根元素',
-        },
-        {
-            name: 'H5 端筛选器容器',
-            selector: '.wd-h5-table-wrap-filter',
-            description: '可以为 H5 端的筛选器容器编写样式',
-        },
-        {
-            name: '表格容器',
-            selector: '.wd-table',
-            description: '表格展示区域根元素',
-        },
-        {
-            name: '表格头部',
-            selector: '.wd-table__header',
-            description: '表格头部区域根元素',
-        },
-        {
-            name: '表格内容展示',
-            selector: '.wd-table__body',
-            description: '表格内容展示区域根元素',
+            name: '表头文字样式',
+            selector: '.wd-table__box th>div',
+            description: '表头文字样式',
+            code: `
+        :scope .wd-table__box th>div {
+          font-size: 20px;
+          color: gray;
+        }
+      `,
         },
         {
-            name: '表格边框',
-            selector: '.wd-table--bordered',
-            description: '表格边框',
+            name: '表头背景样式',
+            selector: '.wd-table__box th',
+            description: '表头背景样式',
+            code: `
+        :scope .wd-table__box th {
+          background-color: red;
+        }
+      `,
         },
         {
-            name: '表格行高-低',
-            selector: '.wd-table--size-sm  .wd-table__box td',
-            description: '表格行高-低',
+            name: '表格文字样式',
+            selector: '.wd-table__box td>div',
+            description: '表格文字样式',
+            code: `
+        :scope .wd-table__box td>div {
+          font-size: 20px;
+          color: gray;
+        }
+      `,
         },
         {
-            name: '表格行高-中',
-            selector: '.wd-table--size-md  .wd-table__box td',
-            description: '表格行高-中',
+            name: '表格文字样式',
+            selector: '.wd-table__box td',
+            description: '表格文字样式',
+            code: `
+        :scope .wd-table__box td {
+          background-color: lightgray;
+          height: 36px;
+        }
+      `,
         },
         {
-            name: '表格行高-高',
-            selector: '.wd-table--size-lg  .wd-table__box td',
-            description: '表格行高-高',
-        },
-        {
-            name: '分页器容器',
-            selector: '.wd-pagination',
-            description: '分页器容器根元素',
+            name: '表格主体样式',
+            selector: '.wd-table',
+            description: '表格主体样式',
+            code: `
+        :scope .wd-table {
+          border: 2px solid gray;
+          border-radius: 10px;
+        }
+      `,
         },
     ],
     // 组件方法
@@ -1290,6 +1695,12 @@ const config = defineConfig({
             'x-platforms': ['MOBILEWEB'],
             description: '打开操作列弹窗',
         },
+        {
+            name: 'resetFilter',
+            label: '重置筛选器',
+            'x-platforms': ['MOBILEWEB', 'PCWEB'],
+            description: '重置筛选器',
+        },
     ],
     // 组件对外暴露事件
     events: [
@@ -1437,15 +1848,31 @@ const config = defineConfig({
         title: '数据表格',
         componentName: 'Table',
         description: '以表格形式展示多行数据，支持对数据进行排序、搜索、分页、自定义显示内容和操作。',
-        icon: '../../icons/Table.svg',
+        figureIcon: '../figureIcons/WdTable.svg',
+        icon: '../icons/Table.svg',
         category: '数据容器',
         categoryOrder: 100,
         componentOrder: 50,
         platform: ['MOBILEWEB', 'PCWEB'],
         visible: ['APP'],
+        inlineStyleForm: {
+            $text: {
+                visible: false,
+            },
+            justifyContent: {
+                visible: false,
+            },
+            flexDirection: {
+                visible: false,
+            },
+            alignItems: {
+                visible: false,
+            },
+        },
         shortcut: {
             props: [
                 'dataSourceType',
+                'isSupportApis',
                 'bindMetadata',
                 'bindConnectMetadata',
                 'connectorMethod',
@@ -1464,6 +1891,97 @@ const config = defineConfig({
                 body: template,
             },
         ],
+        queryGeneratorConfig: {
+            sceneConfig: {
+                // 当前场景
+                scenes: ['batchSelect', 'batchDelete', 'create', 'select', 'update'],
+                // 允许选择的场景
+                availableScenes: [
+                    'batchSelect',
+                    'create',
+                    'select',
+                    'update',
+                    'batchDelete',
+                ],
+                // 场景组合
+                validCombinations: getCombinations([
+                    'batchSelect',
+                    'create',
+                    'select',
+                    'update',
+                    'batchDelete',
+                ]).filter((scenes) => {
+                    if (!scenes.includes('batchSelect')) {
+                        return false;
+                    }
+                    return true;
+                }),
+                enableSelectMultiple: true,
+                // 是否可见
+                // visible: false,
+            },
+            fieldsConfig: {
+                // 支持配置 format
+                enableConfigFormat: true,
+                // 显示字段标识的列
+                showFieldTypeColumn: true,
+            },
+            apisConfig: {
+                // 配置 record 和 total 的键值，如果为 true，返回
+                enableConfigRecordAndTotalKey: true,
+            },
+            mysqlConfig: {
+                // 自动生成查询总条数语句
+                autoGenerateCountQuery: true,
+                // 计数名字，表示 SELECT COUNT(*) as count FROM xxx; 的 count，如果指定countName为 abc，则输出sql SELECT COUNT(*) as abc FROM xxx;
+                countName: 'count',
+            },
+            // 绑定路径配置，如果没有配置，默认就是 params，比如配置 select.condition 'params.abc'，输出的 select sql为 SELECT aa FROM xxx WHERE key={{params.abc}}
+            // 配置 create.value 'params.hello'，输出的 sql 为 INSERT INTO xxx (a, b) VALUES ({{params.hello.a}}, {{params.hello.b }})
+            bindParamsPath: {
+                select: {
+                    condition: 'params.id',
+                },
+                create: {
+                    value: 'params.data',
+                },
+                update: {
+                    value: 'params.data',
+                    condition: 'params.id',
+                },
+                delete: {
+                    condition: 'params.id',
+                },
+                batchDelete: {
+                    condition: 'params.ids',
+                },
+                batchSelect: {
+                    limit: '$w.{{$self.id}}.pageSize',
+                    offset: '($w.{{$self.id}}.pageNo - 1) * $w.{{$self.id}}.pageSize',
+                },
+            },
+            quickOperateButton: [
+                {
+                    icon: svg `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" t="1712908791586" class="icon" viewBox="0 0 1024 1024" version="1.1" p-id="4295" width="48" height="48"><script xmlns=""/><path d="M527.34 837.67l239.92-359.88c9.42-14.14 5.6-33.25-8.55-42.67a30.702 30.702 0 0 0-17.05-5.16H553.02V203.4c0-16.99-13.77-30.77-30.76-30.77-10.29 0-19.89 5.14-25.6 13.7L256.74 546.21c-9.42 14.14-5.6 33.24 8.54 42.67a30.744 30.744 0 0 0 17.06 5.17h188.64V820.6c0 16.99 13.77 30.77 30.76 30.77 10.29 0 19.9-5.14 25.6-13.7z" fill="#0052d9" p-id="4296"/><script xmlns="" id="bw-fido2-page-script"/><script xmlns=""/><div xmlns="" id="immersive-translate-popup" style="all: initial"/></svg>`,
+                    targetField: 'dataSourceType',
+                    content: '快速生成',
+                },
+            ],
+        },
+        previewOperation: {
+            headerIcon: svg `<svg xmlns="http://www.w3.org/2000/svg" width="49" height="48" viewBox="0 0 49 48" fill="none"><rect x="6.5" y="14" width="36" height="26" fill="#DCDCDC"/><path d="M6.5 7H42.5V13H6.5V7Z" fill="#DCDCDC"/><path fill-rule="evenodd" clip-rule="evenodd" d="M31.0244 30.9639C31.0244 31.4832 30.7697 31.9327 30.4038 32.2932C30.0397 32.6519 29.5384 32.9519 28.9594 33.1932C27.7991 33.6766 26.2308 33.9639 24.5244 33.9639C22.818 33.9639 21.2498 33.6766 20.0895 33.1932C19.5104 32.9519 19.0092 32.6519 18.645 32.2932C18.2791 31.9327 18.0244 31.4832 18.0244 30.9639V23.9639C18.0244 23.4445 18.2791 22.995 18.645 22.6346C19.0092 22.2759 19.5104 21.9758 20.0895 21.7346C21.2498 21.2511 22.818 20.9639 24.5244 20.9639C26.2308 20.9639 27.7991 21.2511 28.9594 21.7346C29.5384 21.9758 30.0397 22.2759 30.4038 22.6346C30.7697 22.995 31.0244 23.4445 31.0244 23.9639V30.9639ZM19.3468 23.3469C19.1055 23.5847 19.0244 23.7929 19.0244 23.9639C19.0244 24.1349 19.1055 24.343 19.3468 24.5808C19.5899 24.8203 19.9674 25.059 20.4741 25.2701C21.4854 25.6915 22.9171 25.9639 24.5244 25.9639C26.1318 25.9639 27.5635 25.6915 28.5747 25.2701C29.0815 25.059 29.4589 24.8203 29.702 24.5808C29.9434 24.343 30.0244 24.1349 30.0244 23.9639C30.0244 23.7929 29.9434 23.5847 29.702 23.3469C29.4589 23.1075 29.0815 22.8688 28.5747 22.6576C27.5635 22.2363 26.1318 21.9639 24.5244 21.9639C22.9171 21.9639 21.4854 22.2363 20.4741 22.6576C19.9674 22.8688 19.5899 23.1075 19.3468 23.3469ZM30.0244 25.612V27.4639C30.0244 27.6349 29.9434 27.843 29.702 28.0808C29.4589 28.3203 29.0815 28.559 28.5747 28.7701C27.5635 29.1915 26.1318 29.4639 24.5244 29.4639C22.9171 29.4639 21.4854 29.1915 20.4741 28.7701C19.9674 28.559 19.5899 28.3203 19.3468 28.0808C19.1055 27.843 19.0244 27.6349 19.0244 27.4639V25.612C19.3298 25.8335 19.6912 26.0272 20.0895 26.1932C21.2498 26.6766 22.818 26.9639 24.5244 26.9639C26.2308 26.9639 27.7991 26.6766 28.9594 26.1932C29.3576 26.0272 29.7191 25.8335 30.0244 25.612ZM30.0244 30.9639V29.112C29.7191 29.3335 29.3576 29.5272 28.9594 29.6932C27.7991 30.1766 26.2308 30.4639 24.5244 30.4639C22.818 30.4639 21.2498 30.1766 20.0895 29.6932C19.6912 29.5272 19.3298 29.3335 19.0244 29.112V30.9639C19.0244 31.1349 19.1055 31.343 19.3468 31.5808C19.5899 31.8203 19.9674 32.059 20.4741 32.2701C21.4854 32.6915 22.9171 32.9639 24.5244 32.9639C26.1318 32.9639 27.5635 32.6915 28.5747 32.2701C29.0815 32.059 29.4589 31.8203 29.702 31.5808C29.9434 31.343 30.0244 31.1349 30.0244 30.9639Z" fill="white"/></svg>`,
+            insertSlotName: '',
+            previewSlotName: '__innerSlot',
+            operation: [
+                {
+                    icon: svg `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+          <path d="M7.66667 5.25V5.75H8.16667L12.8494 5.75L6.33333 12.7315V8.75V8.25H5.83333H1.15061L7.66667 1.26851V5.25Z" stroke="#13161B"/>
+          </svg>`,
+                    title: '使用数据源生成表格',
+                    action: 'OPEN_GENERATE_QUERY_FORM',
+                },
+            ],
+        },
     },
     configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/database/WdTable',
@@ -1518,8 +2036,22 @@ const config = defineConfig({
         },
     },
     compConfig: {
+        componentType: 'table',
         isDataContainer: true,
     },
 });
 export default config;
 export const methods = config.methods;
+function getCombinations(arr) {
+    const result = [];
+    const combine = (currentCombination, startIndex) => {
+        if (currentCombination.length > 0) {
+            result.push(currentCombination);
+        }
+        for (let i = startIndex; i < arr.length; i++) {
+            combine([...currentCombination, arr[i]], i + 1);
+        }
+    };
+    combine([], 0);
+    return result;
+}