117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import { MyPageContainer } from '@/common';
|
||
import { MyResponseType } from '@/common/typings';
|
||
import { ProCard, ProFormColumnsType } from '@ant-design/pro-components';
|
||
import { Fields, HierarchyType, Meta, RawData } from '@antv/s2';
|
||
import { Flex, Space } from 'antd';
|
||
import { useEffect } from 'react';
|
||
import { useSetState } from 'react-use';
|
||
import { MyS2TableComponent } from './MyS2TableComponent';
|
||
import { MyS2TableExtra } from './MyS2TableExtra';
|
||
import { MySwitcherFields } from './MySwitcherFields';
|
||
import Query from './Query';
|
||
|
||
export type PropsType = {
|
||
title: string;
|
||
api: (values?: any) => Promise<MyResponseType>;
|
||
defaultParams?: Record<string, any>;
|
||
columns?: ProFormColumnsType<Record<string, any>, 'text'>[] | undefined;
|
||
};
|
||
|
||
export type DataType = {
|
||
config: {
|
||
hierarchyType: HierarchyType | undefined;
|
||
rowGrandTotals: boolean;
|
||
rowSubTotals: boolean;
|
||
colGrandTotals: boolean;
|
||
colSubTotals: boolean;
|
||
};
|
||
data: RawData[];
|
||
fields: Fields;
|
||
meta?: Meta[];
|
||
query?: Record<string, any>;
|
||
};
|
||
|
||
export function NewMyS2Table(props: PropsType) {
|
||
const [data, setData] = useSetState<DataType>(undefined);
|
||
|
||
// 请求数据
|
||
function doRequest() {
|
||
props
|
||
.api?.({ ...props.defaultParams, ...data.query, fields: data.fields })
|
||
.then((resp) => {
|
||
if (!data.config)
|
||
setData({
|
||
config: resp.data.config,
|
||
data: resp.data.data,
|
||
fields: resp.data.fields,
|
||
meta: resp.data.meta,
|
||
});
|
||
else setData({ data: resp.data.data });
|
||
});
|
||
}
|
||
|
||
// // 如果没有columns，直接发起请求
|
||
// useEffect(() => {
|
||
// if (props.columns === undefined) doRequest({});
|
||
// }, []);
|
||
|
||
useEffect(() => {
|
||
console.log('useEffect query', data.query, data.fields);
|
||
if (!data.query && !data.fields) {
|
||
if (props.columns === undefined) {
|
||
doRequest();
|
||
}
|
||
} else {
|
||
doRequest();
|
||
}
|
||
}, [data.query, data.fields]);
|
||
|
||
return (
|
||
<MyPageContainer title={props.title}>
|
||
{props.columns && (
|
||
<Query
|
||
columns={props.columns}
|
||
doRequest={(values) => {
|
||
setData({ query: values });
|
||
}}
|
||
/>
|
||
)}
|
||
<ProCard>
|
||
<Space direction="vertical" style={{ width: '100%' }}>
|
||
<Flex
|
||
justify="space-between"
|
||
style={{ width: '100%', margin: '10px 0' }}
|
||
>
|
||
{data.fields && (
|
||
<MySwitcherFields
|
||
fields={data.fields}
|
||
setFields={(fields: DataType['fields']) => {
|
||
console.log('fields', fields);
|
||
setData({ fields });
|
||
}}
|
||
/>
|
||
)}
|
||
{data.config && (
|
||
<MyS2TableExtra
|
||
config={data.config}
|
||
setConfig={(config) => {
|
||
setData({ config });
|
||
}}
|
||
data={data.data}
|
||
/>
|
||
)}
|
||
</Flex>
|
||
{data.config && (
|
||
<MyS2TableComponent
|
||
config={data.config}
|
||
fields={data.fields}
|
||
meta={data.meta}
|
||
data={data.data}
|
||
/>
|
||
)}
|
||
</Space>
|
||
</ProCard>
|
||
</MyPageContainer>
|
||
);
|
||
}
|