@gingkoo/pandora-metabase
v1.0.64
Published
## 功能概述
Readme
Pandora-Metabase 使用指南
功能概述
Pandora-Metabase 是一个用于动态生成 SQL 查询的工具库,支持通过可视化界面配置表结构、字段及查询逻辑。
主要功能
- 动态获取表字段:使用
getColumns方法可以动态获取指定表的最新字段信息。 - 可视化 SQL 构建:通过
MetaBase组件,用户能够以图形化的方式构建 SQL 查询,支持多种元数据类型,如MetaData,MetaJoin,MetaFilter等。 - 灵活扩展:提供了丰富的接口和类型定义,便于根据具体需求进行定制和扩展。
类型定义
export type MetaListType =
| MetaData
| MetaJoin
| MetaCustom
| MetaFilter
| MetaSummarize
| MetaSort
| MetaLimit;
// Columns 集合
export interface MetaData_ColumnsType {
name: string; // 字段名
name_zh: string; // 字段中文名称
database_type: SQL_COLUMN_TYPE | string; // 数据库中的字段类型
special_type: SpecialType | string; // 特殊类型,如主键、外键等
select: boolean; // 是否在查询中选中该字段
}
export type ToolbarType =
| 'filter'
| 'summarize'
| 'joinData'
| 'permissionTable'
| 'customColumn'
| 'sort'
| 'rowLimit'
| 'union'; //展示合并结果集,会变为多个数组
export interface MetaBaseProps {
/**
* 工具栏列表
* 默认 ['filter','summarize','joinData','permissionTable','customColumn','sort','rowLimit']
*/
loading?: boolean;
btnText?: string;
showFields?: boolean; // 显示字段
readonly?: boolean;
getTables: (datasourceId: string) => Promise<any>;
getColumns: (table: { name: string; [key: string]: any }, datasourceId: string) => Promise<any>;
toolbar?: ToolbarType[];
subToolbar?: ToolbarType[]; //子查询功能菜单 默认取toolbar
tableNameTpl?: string; //表名
fieldNameTpl?: string; //字段名
onOk?: (params: any) => void;
value?: MetaListType[]; //默认值
sourceList?: DatasourceType[];
showSubquery?: boolean; //是否展示子查询
subShowSubquery?: boolean; //子查询是否展示子查询
constantList?: OptionItem[]; //常量下拉框
notExistsToolbar?: ToolbarType[]; // notExists的功能菜单 默认取toolbar
ignoreGroupByType?: boolean; // 忽略groupBy类型
}
export interface OptionItem {
value?: string;
label: string;
icon?: React.ReactNode;
}
export interface SqlVisionBuilderRef {
setDatasource: (list: DatasourceType[]) => void; // 设置数据源列表
setPreData: (data: MetaListType[]) => void; // 设置回显数据
reset: () => void; // 重置到上次设置的数据
}
代码示例
const [table, setTable] = useState([]);
const [value, setValue] = useState<MetaListType[]>([]);
<MetaBase
value={value}
showFields={false}
toolbar={[
'filter',
'summarize',
'joinData',
'permissionTable',
'customColumn',
'sort',
'rowLimit',
]}
getTables={async (id: string) => {
let tables = [
'YBT_PM_BHJQTDBXY',
];
return tables.map((item) => {
return {
name: item,
alias: item,
};
});
}}
getColumns={async (name: string) => {
let data: MetaData_ColumnsType[] = [
{
database_type: 'STRING',
name: 'C_RSV5',
select: true,
special_type: '',
name_zh: '备用字段(项目组可使用)',
},
];
return data;
}}
onOk={(v) => {
console.log(v);
}}
/>