feat(订单): 添加批量导出功能并优化导出逻辑 #35
|
|
@ -22,6 +22,7 @@ import {
|
||||||
ordercontrollerRefundorder,
|
ordercontrollerRefundorder,
|
||||||
ordercontrollerSyncorderbyid,
|
ordercontrollerSyncorderbyid,
|
||||||
ordercontrollerUpdateorderitems,
|
ordercontrollerUpdateorderitems,
|
||||||
|
ordercontrollerExportorder,
|
||||||
} from '@/servers/api/order';
|
} from '@/servers/api/order';
|
||||||
import { productcontrollerSearchproducts } from '@/servers/api/product';
|
import { productcontrollerSearchproducts } from '@/servers/api/product';
|
||||||
import { sitecontrollerAll } from '@/servers/api/site';
|
import { sitecontrollerAll } from '@/servers/api/site';
|
||||||
|
|
@ -74,6 +75,7 @@ import {
|
||||||
Tag,
|
Tag,
|
||||||
} from 'antd';
|
} from 'antd';
|
||||||
import React, { useMemo, useRef, useState } from 'react';
|
import React, { useMemo, useRef, useState } from 'react';
|
||||||
|
import { request, useParams } from '@umijs/max';
|
||||||
import RelatedOrders from '../../Subscription/Orders/RelatedOrders';
|
import RelatedOrders from '../../Subscription/Orders/RelatedOrders';
|
||||||
|
|
||||||
const ListPage: React.FC = () => {
|
const ListPage: React.FC = () => {
|
||||||
|
|
@ -489,20 +491,29 @@ const ListPage: React.FC = () => {
|
||||||
// >
|
// >
|
||||||
// 批量导出
|
// 批量导出
|
||||||
// </Button>,
|
// </Button>,
|
||||||
<Popconfirm
|
<Popconfirm
|
||||||
title="批量导出"
|
title="批量导出"
|
||||||
description="确认导出选中的订单吗?"
|
description="确认导出选中的订单吗?"
|
||||||
onConfirm={async () => {
|
onConfirm={async () => {
|
||||||
|
console.log(selectedRowKeys);
|
||||||
try {
|
try {
|
||||||
const { success, message: errMsg } =
|
const res = await request('/order/order/export', {
|
||||||
await ordercontrollerExportorder({
|
method: 'GET',
|
||||||
|
params: {
|
||||||
ids: selectedRowKeys,
|
ids: selectedRowKeys,
|
||||||
});
|
}
|
||||||
if (!success) {
|
});
|
||||||
throw new Error(errMsg);
|
if (res?.success && res?.data?.csv) {
|
||||||
|
const blob = new Blob([res.data.csv], { type: 'text/csv;charset=utf-8;' });
|
||||||
|
const url = URL.createObjectURL(blob);
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = url;
|
||||||
|
a.download = 'customers.csv';
|
||||||
|
a.click();
|
||||||
|
URL.revokeObjectURL(url);
|
||||||
|
} else {
|
||||||
|
message.error(res.message || '导出失败');
|
||||||
}
|
}
|
||||||
message.success('导出成功');
|
|
||||||
actionRef.current?.reload();
|
actionRef.current?.reload();
|
||||||
setSelectedRowKeys([]);
|
setSelectedRowKeys([]);
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
|
|
@ -513,7 +524,7 @@ const ListPage: React.FC = () => {
|
||||||
|
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Button type="primary" disabled={selectedRowKeys.length === 0} ghost>
|
<Button type="primary" ghost>
|
||||||
批量导出
|
批量导出
|
||||||
</Button>
|
</Button>
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,9 @@ import { Button, Space, Tag } from 'antd';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import ReactECharts from 'echarts-for-react';
|
import ReactECharts from 'echarts-for-react';
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import weekOfYear from 'dayjs/plugin/weekOfYear';
|
||||||
|
|
||||||
|
dayjs.extend(weekOfYear);
|
||||||
const highlightText = (text: string, keyword: string) => {
|
const highlightText = (text: string, keyword: string) => {
|
||||||
if (!keyword) return text;
|
if (!keyword) return text;
|
||||||
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
|
const parts = text.split(new RegExp(`(${keyword})`, 'gi'));
|
||||||
|
|
@ -128,7 +130,21 @@ const ListPage: React.FC = () => {
|
||||||
});
|
});
|
||||||
if (success) {
|
if (success) {
|
||||||
const res = data?.sort(() => -1);
|
const res = data?.sort(() => -1);
|
||||||
setXAxis(res?.map((v) => dayjs(v.order_date).format('YYYY-MM-DD')));
|
const formatMap = {
|
||||||
|
month: 'YYYY-MM',
|
||||||
|
week: 'YYYY年第WW周',
|
||||||
|
day: 'YYYY-MM-DD',
|
||||||
|
};
|
||||||
|
const format = formatMap[params.grouping] || 'YYYY-MM-DD';
|
||||||
|
|
||||||
|
if (params.grouping === 'week') {
|
||||||
|
setXAxis(res?.map((v) => {
|
||||||
|
const [year, week] = v.order_date.split('-');
|
||||||
|
return `${year}年第${week}周`;
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
setXAxis(res?.map((v) => dayjs(v.order_date).format(format)));
|
||||||
|
}
|
||||||
setSeries([
|
setSeries([
|
||||||
{
|
{
|
||||||
name: 'TOGO CPC订单数',
|
name: 'TOGO CPC订单数',
|
||||||
|
|
@ -583,6 +599,16 @@ const ListPage: React.FC = () => {
|
||||||
name="date"
|
name="date"
|
||||||
/>
|
/>
|
||||||
{/* <ProFormText label="关键词" name="keyword" /> */}
|
{/* <ProFormText label="关键词" name="keyword" /> */}
|
||||||
|
<ProFormSelect
|
||||||
|
label="统计周期"
|
||||||
|
name="grouping"
|
||||||
|
initialValue="day"
|
||||||
|
options={[
|
||||||
|
{ label: '月', value: 'month' },
|
||||||
|
{ label: '周', value: 'week' },
|
||||||
|
{ label: '日', value: 'day' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
<ProFormSelect
|
<ProFormSelect
|
||||||
label="站点"
|
label="站点"
|
||||||
name="siteId"
|
name="siteId"
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,13 @@ const ListPage: React.FC = () => {
|
||||||
data: data?.inactiveRes?.map((v) => v.new_user_count)?.sort((_) => -1),
|
data: data?.inactiveRes?.map((v) => v.new_user_count)?.sort((_) => -1),
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
formatter: function (params) {
|
||||||
|
if (!params.value) return '';
|
||||||
|
return Math.abs(params.value)
|
||||||
|
+'\n'
|
||||||
|
+Math.abs(data?.inactiveRes?.find((item) => item.order_month === params.name)?.new_user_total || 0);
|
||||||
|
},
|
||||||
|
color: '#000000',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series',
|
focus: 'series',
|
||||||
|
|
@ -52,6 +59,13 @@ const ListPage: React.FC = () => {
|
||||||
data: data?.inactiveRes?.map((v) => v.old_user_count)?.sort((_) => -1),
|
data: data?.inactiveRes?.map((v) => v.old_user_count)?.sort((_) => -1),
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
formatter: function (params) {
|
||||||
|
if (!params.value) return '';
|
||||||
|
return Math.abs(params.value)
|
||||||
|
+'\n'
|
||||||
|
+Math.abs(data?.inactiveRes?.find((item) => item.order_month === params.name)?.old_user_total || 0);
|
||||||
|
},
|
||||||
|
color: '#000000',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series',
|
focus: 'series',
|
||||||
|
|
@ -69,9 +83,12 @@ const ListPage: React.FC = () => {
|
||||||
show: true,
|
show: true,
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
if (!params.value) return '';
|
if (!params.value) return '';
|
||||||
return Math.abs(params.value);
|
return Math.abs(params.value)
|
||||||
},
|
+'\n'+
|
||||||
color: '#fff',
|
+Math.abs(data?.res?.find((item) => item.order_month === params.name &&
|
||||||
|
item.first_order_month_group === v)?.total || 0);
|
||||||
|
},
|
||||||
|
color: '#000000',
|
||||||
},
|
},
|
||||||
data: xAxisData.map((month) => {
|
data: xAxisData.map((month) => {
|
||||||
return (
|
return (
|
||||||
|
|
@ -95,6 +112,7 @@ const ListPage: React.FC = () => {
|
||||||
stack: 'total',
|
stack: 'total',
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
|
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series',
|
focus: 'series',
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue