import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types'; import Api from './api'; const TableMeta: IPublicTypeComponentMetadata = { componentName: 'Table', title: '表格', docUrl: '', screenshot: '', devMode: 'proCode', category: '基础组件', group: '精选组件', npm: { package: 'temp-materials', exportName: 'Table', main: 'src\\index.tsx', destructuring: true, subName: '', }, configure: { props: [ // 常用配置 { title: '常用配置', type: 'group', display: 'accordion', items: [ // 表格尺寸 { title: { label: '表格尺寸', tip: '设置表格尺寸,默认为中等尺寸', }, name: 'size', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: 'L', value: 'large', }, { label: 'M', value: 'medium', }, { label: 'S', value: 'small', }, ], }, isRequired: true, initialValue: 'medium', }, }, // 表格风格 { title: { label: '表格风格', tip: '设置表格风格,默认使用有边框风格', }, name: 'theme', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: '斑马纹', value: 'zebra', }, { label: '分割线', value: 'split', }, { label: '有边框', value: 'border', }, { label: '无边框', value: 'noBorder', }, ], }, isRequired: true, initialValue: 'border', }, }, // 合并单元格 // { // title: '合并单元格', // name: 'mergeCell', // setter: { // componentName: 'BoolSetter', // isRequired: true, // initialValue: false, // }, // }, // 固定表头 { title: { label: '固定表头', tip: '在设置表格高度且出现滚动条后,可以选择在滚动时固定表头来优化使用体验', }, name: 'fixedHeader', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false, }, }, // 最大内容高度 { title: { label: '最大内容高度', tip: '设置表格内容的最大高度,数据超出内容高度,则出现滚动条', }, name: 'maxBodyHeight', condition: (target) => { return target.parent.getPropValue('fixedHeader'); }, setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 300, props: { min: 0, }, }, }, // 固定列 { title: { label: '固定列', tip: '从左到右,固定指定数量的列', }, name: 'fixedColumnlndex', setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: '无', value: 0, }, { label: '1列', value: 1, }, { label: '2列', value: 2, }, { label: '3列', value: 3, }, ], }, isRequired: true, initialValue: 1, }, }, // 行列转置 { title: { label: '行列转置', tip: '开启行列转置居教据会交换行列进行展示,同时不再支持表格的合并单元格、动态下结行序号等部分操作', }, name: 'transposition', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false, }, }, { title: { label: '表头背景色', tip: '设置表头背景颜色', }, name: 'headerBgColor', setter: 'ColorSetter', }, { title: { label: '表头文本色', tip: '设置表头文本颜色', }, name: 'headerTextColor', setter: 'ColorSetter', }, // 标题 { title: { label: '显示标题', tip: '是否显示标题', }, name: 'hasTitle', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, // 标题文本 { title: { label: '标题文本', tip: '需要展示的标题文本,不填时,取所选数据集为标题', }, name: 'titleText', condition: (target) => { return target.parent.getPropValue('hasTitle'); }, setter: { componentName: 'StringSetter', initialValue: '', }, }, // 描述文本 { title: { label: '描述文本', tip: '需要展示的描述文本,不填时,取所选数据集为标题', }, name: 'descText', condition: (target) => { return target.parent.getPropValue('hasTitle'); }, setter: { componentName: 'StringSetter', initialValue: '', }, }, ], }, // 分页配置 { title: '分页配置', type: 'group', display: 'accordion', items: [ // 显示分页 { title: { label: '显示分页', tip: '显示分页器', }, name: 'paging', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: true, }, }, // 每条页数 { title: { label: '每页条数', tip: '设置分页器每页数据条数', }, name: 'pageSize', condition: (target) => { return target.parent.getPropValue('paging'); }, setter: { componentName: 'NumberSetter', isRequired: true, initialValue: 10, props: { min: 0, }, }, }, // 分页大小 { title: { label: '分页大小', tip: '设置分页器组件尺寸', }, name: 'pagerSize', condition: (target) => { return target.parent.getPropValue('paging'); }, setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: 'L', value: 'large', }, { label: 'M', value: 'medium', }, { label: 'S', value: 'small', }, ], }, isRequired: true, initialValue: 'small', }, }, // 分页样式 { title: { label: '分页样式', tip: '设置分页器类型,对分页器功能做取舍', }, name: 'pagerType', condition: (target) => { return target.parent.getPropValue('paging'); }, setter: { componentName: 'RadioGroupSetter', props: { options: [ { label: '正常', value: 'normal', }, { label: ' 简单', value: 'simple', }, { label: '迷你', value: 'mini', }, ], }, isRequired: true, initialValue: 'normal', }, }, // 页码数量 { title: { label: '页码数量', tip: '下方分页器最多展示的页码数,数量超出用省略号展示', }, name: 'maxPagers', condition: (target) => { return target.parent.getPropValue('paging'); }, setter: { componentName: 'NumberSetter', isRequired: true, initialValue: 5, props: { min: 2, }, }, }, // 页码切换 { title: { label: '页码切换', tip: '页码总数超出页码数量才会显示', }, name: 'showPageSelect', condition: (target) => { return target.parent.getPropValue('paging'); }, setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false, }, }, ], }, // 行序号 { title: '行序号', type: 'group', display: 'accordion', condition: (target) => { return !target.parent.getPropValue('transposition'); }, items: [ // 显示序号 { title: { label: '显示序号', tip: '开启后,会增加行序号列', }, name: 'showSeqNum', setter: { componentName: 'BoolSetter', isRequired: true, initialValue: false, }, }, // 列宽 { title: { label: '列宽', tip: '设置行序号列列宽', }, name: 'seqNumColWidth', condition: (target) => { return target.parent.getPropValue('showSeqNum'); }, setter: { componentName: 'NumberSetter', isRequired: true, initialValue: 60, props: { min: 0, }, }, }, // 背景半径 { title: { label: '背景半径', tip: '设置行序号圆形背景半径', }, name: 'seqNumBackgroundsize', condition: (target) => { return target.parent.getPropValue('showSeqNum'); }, setter: { componentName: 'NumberSetter', isRequired: true, initialValue: 10, props: { min: 0, }, }, }, // 样式 { title: '样式', name: 'style', condition: (target) => { return target.parent.getPropValue('showSeqNum'); }, display: 'plain', setter: { componentName: 'ArraySetter', props: { itemSetter: { componentName: 'ObjectSetter', props: { config: { items: [ { title: { label: '背景色', tip: '序号图标背景色', }, name: 'backgroundColor', setter: { componentName: 'ColorSetter', isRequired: true, initialValue: '#000000', }, }, { title: { label: '序号色', tip: '序号图标文本颜色', }, name: 'numColor', setter: { componentName: 'ColorSetter', isRequired: true, initialValue: '#ffffff', }, }, ], extraSetter: { componentName: 'MixedSetter', isRequired: false, props: {}, }, }, }, }, }, isRequired: true, initialValue: [ { backgroundColor: '#ffb71e', numColor: '#ffffff' }, { backgroundColor: '#c2c2c2', numColor: '#ffffff' }, { backgroundColor: '#d3846b', numColor: '#ffffff' }, ], }, }, ], }, // 行列合并 { title: { label: '行列合并', tip: '编写行列函数', }, type: 'group', display: 'accordion', condition: (target) => { return !target.parent.getPropValue('transposition'); }, items: [ { title: '编辑代码', name: 'code', setter: { componentName: 'FunctionSetter', }, }, ], }, ], supports: {}, component: {}, advanced: { context: { dataSourceProps: [ { label: '表格列', props: 'cols', limit: 99 }, { label: '筛选字段', props: 'f', limit: 99 }, ], datasetProps: [{ label: '条件过滤', props: 'filter', type: 'filter_btn' }], }, }, }, }; const snippets: IPublicTypeSnippet[] = [ { title: '表格', screenshot: '', schema: { componentName: 'Table', props: { data: Api.defalutData, cols: Api.cols, size: 'medium', paging: true, pageSize: 10, pagerSize: 'small', theme: 'border', colWidth: [], fixedColumnlndex: 1, hasTitle: true, titleText: '', headerBgColor: '#E4E7ED', headerTextColor: '#444', }, }, }, ]; export default { ...TableMeta, snippets, };