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>
|
|||
|
|
);
|
|||
|
|
}
|