This commit is contained in:
parent
b696765574
commit
9eecdadaf9
@ -14,8 +14,8 @@ export default defineConfig({
|
||||
},
|
||||
proxy: {
|
||||
'/api/': {
|
||||
// target: 'http://yt:8003',
|
||||
target: 'http://10.39.13.80:8001',
|
||||
target: 'http://yt:8001',
|
||||
// target: 'http://10.39.13.80:8001',
|
||||
// target: 'http://we6f9c65.natappfree.cc',
|
||||
// target: 'https://loanos-test.nchl.net/',
|
||||
changeOrigin: true,
|
||||
|
||||
@ -13,9 +13,6 @@
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.0.1",
|
||||
"@ant-design/pro-components": "^2.8.10",
|
||||
"@antv/g2": "^5.3.5",
|
||||
"@antv/s2": "^2.0.0-next.25",
|
||||
"@antv/s2-react": "^2.0.0-next.24",
|
||||
"@umijs/max": "^4.3.10",
|
||||
"antd": "^5.4.0",
|
||||
"axios": "^1.7.2",
|
||||
|
||||
@ -10,8 +10,8 @@ export * from './components/layout/MyCommonModal';
|
||||
export * from './components/layout/MyImportModal';
|
||||
export * from './components/layout/MyPageContainer';
|
||||
export * from './components/layout/MyRootContainer';
|
||||
export * from './components/layout/usePageTabs';
|
||||
export * from './components/layout/TabsExample';
|
||||
export * from './components/layout/usePageTabs';
|
||||
|
||||
export * from './components/props/MyDrawerProps';
|
||||
export * from './components/props/MyModalFormProps';
|
||||
@ -33,7 +33,6 @@ export * from './libs/valtio/state';
|
||||
|
||||
// pages
|
||||
export * from './pages/MyLoginPage1';
|
||||
export * from './pages/NewMyS2Table';
|
||||
|
||||
// utils
|
||||
export * from './utils/renderTextHelper';
|
||||
|
||||
@ -1,51 +0,0 @@
|
||||
import { SheetComponent } from '@antv/s2-react';
|
||||
import { DataType } from '.';
|
||||
|
||||
export function MyS2TableComponent(props: DataType) {
|
||||
return (
|
||||
<SheetComponent
|
||||
sheetType="pivot"
|
||||
dataCfg={{
|
||||
fields: props.fields,
|
||||
data: props.data,
|
||||
meta: props.meta,
|
||||
}}
|
||||
adaptive={true}
|
||||
options={{
|
||||
height: 888,
|
||||
hierarchyType: props.config?.hierarchyType,
|
||||
// style: {
|
||||
// layoutWidthType: 'colAdaptive',
|
||||
// },
|
||||
totals: {
|
||||
row: {
|
||||
showGrandTotals: props.config.rowGrandTotals,
|
||||
showSubTotals: props.config.rowSubTotals,
|
||||
reverseGrandTotalsLayout: true,
|
||||
reverseSubTotalsLayout: true,
|
||||
calcGrandTotals: {
|
||||
aggregation: 'SUM',
|
||||
},
|
||||
calcSubTotals: {
|
||||
aggregation: 'SUM',
|
||||
},
|
||||
// grandTotalsGroupDimensions: ['day'],
|
||||
// subTotalsGroupDimensions: ['day'],
|
||||
},
|
||||
col: {
|
||||
showGrandTotals: props.config.colGrandTotals,
|
||||
showSubTotals: props.config.colSubTotals,
|
||||
reverseGrandTotalsLayout: true,
|
||||
reverseSubTotalsLayout: true,
|
||||
calcGrandTotals: {
|
||||
aggregation: 'SUM',
|
||||
},
|
||||
calcSubTotals: {
|
||||
aggregation: 'SUM',
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,106 +0,0 @@
|
||||
import { Button, Radio, Space, Switch, Typography } from 'antd';
|
||||
import { DataType } from '.';
|
||||
|
||||
function downloadCSV(json: any) {
|
||||
if (json === undefined) return;
|
||||
// 提取表头
|
||||
const headers = Object.keys(json[0]);
|
||||
// 提取数据行
|
||||
const rows = json.map((item: any) => Object.values(item));
|
||||
|
||||
// 构建CSV内容
|
||||
let csvContent = '';
|
||||
// 添加表头
|
||||
csvContent += headers.join(',') + '\r\n';
|
||||
// 添加数据行
|
||||
rows.forEach((row: any) => {
|
||||
csvContent += row.join(',') + '\r\n';
|
||||
});
|
||||
|
||||
// 创建一个Blob对象,使用CSV内容,并设置类型为text/csv
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
|
||||
// 创建一个链接元素
|
||||
const link = document.createElement('a');
|
||||
// 设置下载的文件名,默认为'download.csv'
|
||||
if (link.download !== undefined) {
|
||||
const url = URL.createObjectURL(blob);
|
||||
link.setAttribute('href', url);
|
||||
link.setAttribute('download', 'download.csv');
|
||||
// 触发点击事件以下载文件
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
// 清理DOM
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
|
||||
export function MyS2TableExtra({
|
||||
config,
|
||||
data,
|
||||
setConfig,
|
||||
}: {
|
||||
config: DataType['config'];
|
||||
data: DataType['data'];
|
||||
setConfig: (config: DataType['config']) => void;
|
||||
}) {
|
||||
return (
|
||||
<Space>
|
||||
<Typography.Text style={{ marginLeft: 20 }}>行小计:</Typography.Text>
|
||||
<Switch
|
||||
value={config?.rowSubTotals || false}
|
||||
onChange={(e) => {
|
||||
setConfig({ ...config, rowSubTotals: Boolean(e) });
|
||||
}}
|
||||
/>
|
||||
<Typography.Text style={{ marginLeft: 20 }}>行总计:</Typography.Text>
|
||||
<Switch
|
||||
value={config?.rowGrandTotals || false}
|
||||
onChange={(e) => {
|
||||
setConfig({ ...config, rowGrandTotals: Boolean(e) });
|
||||
}}
|
||||
/>
|
||||
<Typography.Text style={{ marginLeft: 20 }}>列小计:</Typography.Text>
|
||||
<Switch
|
||||
value={config?.colSubTotals || false}
|
||||
onChange={(e) => {
|
||||
setConfig({ ...config, colSubTotals: Boolean(e) });
|
||||
}}
|
||||
/>
|
||||
<Typography.Text style={{ marginLeft: 20 }}>列总计:</Typography.Text>
|
||||
<Switch
|
||||
value={config?.colGrandTotals || false}
|
||||
onChange={(e) => {
|
||||
setConfig({ ...config, colGrandTotals: Boolean(e) });
|
||||
}}
|
||||
/>
|
||||
<Typography.Text style={{ marginLeft: 20 }}>类型:</Typography.Text>
|
||||
<Radio.Group
|
||||
size="small"
|
||||
options={[
|
||||
{ label: '树形', value: 'tree' },
|
||||
{ label: '平铺', value: 'grid' },
|
||||
]}
|
||||
value={config?.hierarchyType || 'tree'}
|
||||
onChange={(e) =>
|
||||
setConfig({
|
||||
...config,
|
||||
hierarchyType: e.target.value,
|
||||
})
|
||||
}
|
||||
optionType="button"
|
||||
buttonStyle="solid"
|
||||
style={{ marginRight: 20 }}
|
||||
/>
|
||||
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => {
|
||||
downloadCSV(data);
|
||||
}}
|
||||
>
|
||||
新的导出
|
||||
</Button>
|
||||
</Space>
|
||||
);
|
||||
}
|
||||
@ -1,73 +0,0 @@
|
||||
import { Switcher } from '@antv/s2-react';
|
||||
import { useSetState } from 'react-use';
|
||||
import { DataType } from '.';
|
||||
|
||||
export function MySwitcherFields({
|
||||
fields,
|
||||
setFields,
|
||||
}: {
|
||||
fields: DataType['fields'];
|
||||
setFields: (fields: DataType['fields']) => void;
|
||||
}) {
|
||||
const [switcherFields, setSwitcherFields] = useSetState(() => {
|
||||
return {
|
||||
rows: {
|
||||
selectable: true,
|
||||
allowEmpty: false,
|
||||
items: fields.rows?.map((item) => {
|
||||
return { id: item };
|
||||
}),
|
||||
},
|
||||
columns: {
|
||||
selectable: true,
|
||||
allowEmpty: true,
|
||||
items: fields.columns?.map((item) => {
|
||||
return { id: item };
|
||||
}),
|
||||
},
|
||||
values: {
|
||||
selectable: true,
|
||||
allowEmpty: false,
|
||||
items: fields.values?.map((item) => {
|
||||
return { id: item };
|
||||
}),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
function onSwitcherChange(result: any): void {
|
||||
const fields = {
|
||||
rows: result.rows.items
|
||||
.filter((item: { checked?: boolean }) => item.checked ?? true)
|
||||
.map((item: { id: string }) => item.id),
|
||||
columns: result.columns.items
|
||||
.filter((item: { checked?: boolean }) => item.checked ?? true)
|
||||
.map((item: { id: string }) => item.id),
|
||||
values: result.values.items
|
||||
.filter((item: { checked?: boolean }) => item.checked ?? true)
|
||||
.map((item: { id: string }) => item.id),
|
||||
};
|
||||
|
||||
setSwitcherFields({
|
||||
rows: {
|
||||
selectable: true,
|
||||
allowEmpty: false,
|
||||
items: result.rows.items,
|
||||
},
|
||||
columns: {
|
||||
selectable: true,
|
||||
allowEmpty: true,
|
||||
items: result.columns.items,
|
||||
},
|
||||
values: {
|
||||
selectable: true,
|
||||
allowEmpty: false,
|
||||
items: result.values.items,
|
||||
},
|
||||
});
|
||||
|
||||
setFields?.(fields);
|
||||
}
|
||||
|
||||
return <Switcher {...switcherFields} onSubmit={onSwitcherChange} />;
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
import { BetaSchemaForm, ProCard } from '@ant-design/pro-components';
|
||||
import { PropsType } from '.';
|
||||
|
||||
export default function Query({
|
||||
columns,
|
||||
doRequest,
|
||||
}: {
|
||||
columns?: PropsType['columns'];
|
||||
doRequest: (values: any) => void;
|
||||
}) {
|
||||
return (
|
||||
<ProCard>
|
||||
<BetaSchemaForm
|
||||
layoutType="QueryFilter"
|
||||
onFinish={async (values: Record<string, any>) => {
|
||||
doRequest(values);
|
||||
}}
|
||||
columns={columns as any}
|
||||
/>
|
||||
</ProCard>
|
||||
);
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user