837 lines
36 KiB
TypeScript
837 lines
36 KiB
TypeScript
// 供应商订单汇总
|
||
import { connect } from "umi";
|
||
import type { CurrentUser } from "umi";
|
||
import type { ConnectState } from "@/models/connect";
|
||
import React, { useRef, useState } from "react";
|
||
import ProCard from "@ant-design/pro-card";
|
||
import { MenuFoldOutlined } from "@ant-design/icons";
|
||
import type { FormInstance } from "antd";
|
||
import { Button, message, Space, Spin, Tree } from "antd";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
import { getServerpartTree } from "@/services/options";
|
||
import type { ActionType } from "@ant-design/pro-table";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
||
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
|
||
import PageTitleBox from "@/components/PageTitleBox";
|
||
import SupplierLeftSelectTree from "./components/SupplierLeftSelectTree";
|
||
import { handeGetGetOnlineOrderSummary } from "../service";
|
||
import moment from 'moment'
|
||
|
||
|
||
const SupplierOrderStatistics: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||
const { currentUser } = props
|
||
const downloadBtnRef = useRef<any>()
|
||
const actionRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [treeView, setTreeView] = useState<any>()
|
||
const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
|
||
|
||
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 导出的加载效果
|
||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||
// 是否显示打印的表格
|
||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||
// 查询的条件
|
||
const [searchParams, setSearchParams] = useState<any>()
|
||
|
||
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||
'TotalActualAmount.maxData': { show: false },
|
||
'TotalActualAmount.minData': { show: false },
|
||
'TotalActualAmount.avgData': { show: false },
|
||
'TotalActualAmount.YOYData': { show: false },
|
||
'TotalActualAmount.QOQData': { show: false },
|
||
|
||
'TotalSuccAmount.maxData': { show: false },
|
||
'TotalSuccAmount.minData': { show: false },
|
||
'TotalSuccAmount.avgData': { show: false },
|
||
'TotalSuccAmount.YOYData': { show: false },
|
||
'TotalSuccAmount.QOQData': { show: false },
|
||
|
||
'TotalSuccTicket.maxData': { show: false },
|
||
'TotalSuccTicket.minData': { show: false },
|
||
'TotalSuccTicket.avgData': { show: false },
|
||
'TotalSuccTicket.YOYData': { show: false },
|
||
'TotalSuccTicket.QOQData': { show: false },
|
||
|
||
'TotalCount.maxData': { show: false },
|
||
'TotalCount.minData': { show: false },
|
||
'TotalCount.avgData': { show: false },
|
||
'TotalCount.YOYData': { show: false },
|
||
'TotalCount.QOQData': { show: false },
|
||
|
||
'TotalFailureTicket.maxData': { show: false },
|
||
'TotalFailureTicket.minData': { show: false },
|
||
'TotalFailureTicket.avgData': { show: false },
|
||
'TotalFailureTicket.YOYData': { show: false },
|
||
'TotalFailureTicket.QOQData': { show: false },
|
||
|
||
'TotalRefundTicket.maxData': { show: false },
|
||
'TotalRefundTicket.minData': { show: false },
|
||
'TotalRefundTicket.avgData': { show: false },
|
||
'TotalRefundTicket.YOYData': { show: false },
|
||
'TotalRefundTicket.QOQData': { show: false },
|
||
|
||
'TotalRefundAmount.maxData': { show: false },
|
||
'TotalRefundAmount.minData': { show: false },
|
||
'TotalRefundAmount.avgData': { show: false },
|
||
'TotalRefundAmount.YOYData': { show: false },
|
||
'TotalRefundAmount.QOQData': { show: false },
|
||
});
|
||
|
||
const columns: any = [
|
||
{
|
||
title: '统计时间',
|
||
dataIndex: 'search_date',
|
||
valueType: 'dateRange',
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
initialValue: [moment().subtract(1, 'month'), moment()],
|
||
search: {
|
||
transform: (value: any) => {
|
||
return {
|
||
StartDate: value[0],
|
||
EndDate: value[1],
|
||
};
|
||
},
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'StatisticalName',
|
||
title: '供应商名称',
|
||
width: 250,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
fixed: 'left'
|
||
},
|
||
{
|
||
dataIndex: 'TotalActualAmount',
|
||
title: '实际销售金额（扣除退款）',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'summaryData'],
|
||
key: "TotalActualAmount.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.summaryData - b.TotalActualAmount.summaryData,
|
||
defaultSortOrder: 'descend',
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'maxData'],
|
||
key: "TotalActualAmount.maxData",
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.maxData - b.TotalActualAmount.maxData
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'minData'],
|
||
key: "TotalActualAmount.minData",
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.maxData - b.TotalActualAmount.maxData
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'avgData'],
|
||
key: "TotalActualAmount.avgData",
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.avgData - b.TotalActualAmount.avgData
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'YOYData'],
|
||
key: "TotalActualAmount.YOYData",
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.YOYData - b.TotalActualAmount.YOYData
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'YOYDataAdd'],
|
||
key: "TotalActualAmount.YOYDataAdd",
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.YOYDataAdd - b.TotalActualAmount.YOYDataAdd,
|
||
render: (_, record) => {
|
||
return record?.TotalActualAmount?.YOYData && record?.TotalActualAmount?.summaryData ? (((record?.TotalActualAmount?.summaryData - record?.TotalActualAmount?.YOYData) / record?.TotalActualAmount?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalActualAmount', 'QOQData'],
|
||
key: "TotalActualAmount.QOQData",
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalActualAmount.QOQData - b.TotalActualAmount.QOQData,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalSuccAmount',
|
||
title: '成交销售金额',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'summaryData'],
|
||
key: "TotalSuccAmount.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.summaryData - b.TotalSuccAmount.summaryData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'maxData'],
|
||
key: "TotalSuccAmount.maxData",
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.maxData - b.TotalSuccAmount.maxData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'minData'],
|
||
key: "TotalSuccAmount.minData",
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.minData - b.TotalSuccAmount.minData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'avgData'],
|
||
key: "TotalSuccAmount.avgData",
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.avgData - b.TotalSuccAmount.avgData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'YOYData'],
|
||
key: "TotalSuccAmount.YOYData",
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.YOYData - b.TotalSuccAmount.YOYData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'YOYDataAdd'],
|
||
key: "TotalSuccAmount.YOYDataAdd",
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.YOYDataAdd - b.TotalSuccAmount.YOYDataAdd,
|
||
render: (_, record) => {
|
||
return record?.TotalSuccAmount?.YOYData && record?.TotalSuccAmount?.summaryData ? (((record?.TotalSuccAmount?.summaryData - record?.TotalSuccAmount?.YOYData) / record?.TotalSuccAmount?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccAmount', 'QOQData'],
|
||
key: "TotalSuccAmount.QOQData",
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccAmount.QOQData - b.TotalSuccAmount.QOQData,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalSuccTicket',
|
||
title: '成交订单笔数',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'summaryData'],
|
||
key: "TotalSuccTicket.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.summaryData - b.TotalSuccTicket.summaryData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'maxData'],
|
||
key: "TotalSuccTicket.maxData",
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.maxData - b.TotalSuccTicket.maxData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'minData'],
|
||
key: "TotalSuccTicket.minData",
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.minData - b.TotalSuccTicket.minData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'avgData'],
|
||
key: "TotalSuccTicket.avgData",
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.avgData - b.TotalSuccTicket.avgData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'YOYData'],
|
||
key: "TotalSuccTicket.YOYData",
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.YOYData - b.TotalSuccTicket.YOYData,
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'YOYDataAdd'],
|
||
key: "TotalSuccTicket.YOYDataAdd",
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.YOYDataAdd - b.TotalSuccTicket.YOYDataAdd,
|
||
render: (_, record) => {
|
||
return record?.TotalSuccTicket?.YOYData && record?.TotalSuccTicket?.summaryData ? (((record?.TotalSuccTicket?.summaryData - record?.TotalSuccTicket?.YOYData) / record?.TotalSuccTicket?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalSuccTicket', 'QOQData'],
|
||
key: "TotalSuccTicket.QOQData",
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalSuccTicket.QOQData - b.TotalSuccTicket.QOQData,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalCount',
|
||
title: '成交销售数量',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalCount', 'summaryData'],
|
||
key: "TotalCount.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.summaryData - b.TotalCount.summaryData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'maxData'],
|
||
key: "TotalCount.maxData",
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.maxData - b.TotalCount.maxData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'minData'],
|
||
key: "TotalCount.minData",
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.minData - b.TotalCount.minData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'avgData'],
|
||
key: "TotalCount.avgData",
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.avgData - b.TotalCount.avgData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'YOYData'],
|
||
key: "TotalCount.YOYData",
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.YOYData - b.TotalCount.YOYData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'YOYDataAdd'],
|
||
key: "TotalCount.YOYDataAdd",
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.YOYDataAdd - b.TotalCount.YOYDataAdd,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.TotalCount?.YOYData && record?.TotalCount?.summaryData ? (((record?.TotalCount?.summaryData - record?.TotalCount?.YOYData) / record?.TotalCount?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalCount', 'QOQData'],
|
||
key: "TotalCount.QOQData",
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalCount.QOQData - b.TotalCount.QOQData,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalFailureTicket',
|
||
title: '交易失败笔数',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'summaryData'],
|
||
key: "TotalFailureTicket.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
sorter: (a, b) => a.TotalFailureTicket.summaryData - b.TotalFailureTicket.summaryData,
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'maxData'],
|
||
key: "TotalFailureTicket.maxData",
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalFailureTicket.maxData - b.TotalFailureTicket.maxData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'minData'],
|
||
key: "TotalFailureTicket.minData",
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalFailureTicket.minData - b.TotalFailureTicket.minData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'avgData'],
|
||
key: "TotalFailureTicket.avgData",
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalFailureTicket.avgData - b.TotalFailureTicket.avgData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'YOYData'],
|
||
key: "TotalFailureTicket.YOYData",
|
||
title: '同比数值',
|
||
width: 120,
|
||
sorter: (a, b) => a.TotalFailureTicket.YOYData - b.TotalFailureTicket.YOYData,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'YOYDataAdd'],
|
||
key: "TotalFailureTicket.YOYDataAdd",
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalFailureTicket.YOYDataAdd - b.TotalFailureTicket.YOYDataAdd,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.TotalFailureTicket?.YOYData && record?.TotalFailureTicket?.summaryData ? (((record?.TotalFailureTicket?.summaryData - record?.TotalFailureTicket?.YOYData) / record?.TotalFailureTicket?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalFailureTicket', 'QOQData'],
|
||
key: "TotalFailureTicket.QOQData",
|
||
title: '环比数值',
|
||
width: 120,
|
||
sorter: (a, b) => a.TotalFailureTicket.QOQData - b.TotalFailureTicket.QOQData,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalRefundTicket',
|
||
title: '退款订单笔数',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'summaryData'],
|
||
key: "TotalRefundTicket.summaryData",
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => a.TotalRefundTicket.summaryData - b.TotalRefundTicket.summaryData,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'maxData'],
|
||
key: "TotalRefundTicket.maxData",
|
||
sorter: (a, b) => a.TotalRefundTicket.maxData - b.TotalRefundTicket.maxData,
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'minData'],
|
||
key: "TotalRefundTicket.minData",
|
||
sorter: (a, b) => a.TotalRefundTicket.minData - b.TotalRefundTicket.minData,
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'avgData'],
|
||
key: "TotalRefundTicket.avgData",
|
||
sorter: (a, b) => a.TotalRefundTicket.avgData - b.TotalRefundTicket.avgData,
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'YOYData'],
|
||
key: "TotalRefundTicket.YOYData",
|
||
sorter: (a, b) => a.TotalRefundTicket.YOYData - b.TotalRefundTicket.YOYData,
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'YOYDataAdd'],
|
||
key: "TotalRefundTicket.YOYDataAdd",
|
||
sorter: (a, b) => a.TotalRefundTicket.YOYDataAdd - b.TotalRefundTicket.YOYDataAdd,
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.TotalRefundTicket?.YOYData && record?.TotalRefundTicket?.summaryData ? (((record?.TotalRefundTicket?.summaryData - record?.TotalRefundTicket?.YOYData) / record?.TotalRefundTicket?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundTicket', 'QOQData'],
|
||
key: "TotalRefundTicket.QOQData",
|
||
sorter: (a, b) => a.TotalRefundTicket.QOQData - b.TotalRefundTicket.QOQData,
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
dataIndex: 'TotalRefundAmount',
|
||
title: '退款订单金额',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'summaryData'],
|
||
key: "TotalRefundAmount.summaryData",
|
||
sorter: (a, b) => a.TotalRefundAmount.summaryData - b.TotalRefundAmount.summaryData,
|
||
title: '合计值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'maxData'],
|
||
key: "TotalRefundAmount.maxData",
|
||
sorter: (a, b) => a.TotalRefundAmount.maxData - b.TotalRefundAmount.maxData,
|
||
title: '最大值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'minData'],
|
||
key: "TotalRefundAmount.minData",
|
||
sorter: (a, b) => a.TotalRefundAmount.minData - b.TotalRefundAmount.minData,
|
||
title: '最小值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'avgData'],
|
||
key: "TotalRefundAmount.avgData",
|
||
sorter: (a, b) => a.TotalRefundAmount.avgData - b.TotalRefundAmount.avgData,
|
||
title: '平均值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'YOYData'],
|
||
key: "TotalRefundAmount.YOYData",
|
||
sorter: (a, b) => a.TotalRefundAmount.YOYData - b.TotalRefundAmount.YOYData,
|
||
title: '同比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'YOYDataAdd'],
|
||
key: "TotalRefundAmount.YOYDataAdd",
|
||
sorter: (a, b) => a.TotalRefundAmount.YOYDataAdd - b.TotalRefundAmount.YOYDataAdd,
|
||
title: '同比增长',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return record?.TotalRefundAmount?.YOYData && record?.TotalRefundAmount?.summaryData ? (((record?.TotalRefundAmount?.summaryData - record?.TotalRefundAmount?.YOYData) / record?.TotalRefundAmount?.YOYData) * 100).toFixed(2) + '%' : "-"
|
||
}
|
||
},
|
||
{
|
||
dataIndex: ['TotalRefundAmount', 'QOQData'],
|
||
key: "TotalRefundAmount.QOQData",
|
||
sorter: (a, b) => a.TotalRefundAmount.QOQData - b.TotalRefundAmount.QOQData,
|
||
title: '环比数值',
|
||
width: 120,
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
},
|
||
]
|
||
},
|
||
]
|
||
|
||
const exportTable = (e) => {
|
||
e.stopPropagation(); // 防止Collapse组件收起
|
||
const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0]
|
||
const thead = main.querySelector('thead').cloneNode(true); // 深克隆DOM节点
|
||
const tbody = main.querySelector('tbody').cloneNode(true); // 深克隆DOM节点
|
||
const container = document.querySelector('#hiddenBox');
|
||
|
||
const tempTable = document.createElement('table');
|
||
tempTable.appendChild(thead);
|
||
tempTable.appendChild(tbody);
|
||
|
||
tempTable.setAttribute('id', 'table-to-xls-SupplierOrderStatistics'); // 给table添加id，值与按钮上的table字段对应
|
||
|
||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||
|
||
setShowLoading(false)
|
||
|
||
downloadBtnRef.current.handleDownload();
|
||
setShowExportTable(false)
|
||
tempTable.remove() // 防止重复打印一个内容
|
||
}
|
||
|
||
|
||
return (
|
||
<div ref={(el) => {
|
||
// 打印报表
|
||
if (!reqDetailList || reqDetailList.length === 0) return;
|
||
setPrintOut(el);
|
||
}} >
|
||
|
||
{
|
||
showLoading ?
|
||
<div
|
||
style={{
|
||
width: '100%',
|
||
height: '100%',
|
||
background: 'rgba(0,0,0,0.1)',
|
||
position: 'fixed',
|
||
zIndex: 5,
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center'
|
||
}}
|
||
>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: '15px 20px 10px',
|
||
background: '#fff',
|
||
borderRadius: '8px',
|
||
width: '200px'
|
||
}}>
|
||
<Spin />
|
||
<span style={{ marginLeft: '5px' }}>数据导出中...</span>
|
||
</div>
|
||
</div> : ''
|
||
}
|
||
|
||
<div className={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||
{
|
||
showExportTable && reqDetailList && reqDetailList.length > 0 ?
|
||
<ProTable
|
||
columns={columns}
|
||
dataSource={reqDetailList}
|
||
pagination={false}
|
||
expandable={{
|
||
defaultExpandAllRows: true
|
||
}}
|
||
/> : ''
|
||
}
|
||
</div>
|
||
<div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
|
||
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<SupplierLeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} />
|
||
<div style={{
|
||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
<ProTable
|
||
actionRef={actionRef}
|
||
formRef={formRef}
|
||
columns={columns}
|
||
bordered
|
||
expandable={{
|
||
expandRowByClick: true
|
||
}}
|
||
scroll={{ x: "100%", y: "calc(100vh - 470px)" }}
|
||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||
search={{ span: 6 }}
|
||
request={async (params) => {
|
||
if (!selectedId) {
|
||
return
|
||
}
|
||
|
||
const req: any = {
|
||
CalcType: 2,
|
||
OwnerUnitId: currentUser?.OwnerUnitId,
|
||
StartDate: params?.StartDate || "",
|
||
EndDate: params?.EndDate || "",
|
||
SalebillType: "",
|
||
MerchantId: selectedId,
|
||
}
|
||
setSearchParams(req)
|
||
const data = await handeGetGetOnlineOrderSummary(req)
|
||
console.log('datadatadatadata', data);
|
||
if (data && data.length > 0) {
|
||
setReqDetailList(data)
|
||
return { data: data, success: true, total: data.length }
|
||
}
|
||
return { data: [], success: true }
|
||
}}
|
||
columnsState={{
|
||
value: columnsStateMap,
|
||
onChange: setColumnsStateMap,
|
||
}}
|
||
toolbar={{
|
||
actions: [
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-SupplierOrderStatistics"
|
||
filename={`供应商订单汇总${searchParams?.StartDate}-${searchParams?.EndDate}`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>,
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
onClick={(e) => {
|
||
if (reqDetailList && reqDetailList.length > 0) {
|
||
setShowLoading(true)
|
||
setTimeout(() => {
|
||
setShowExportTable(true)
|
||
setTimeout(() => {
|
||
exportTable(e)
|
||
}, 100)
|
||
}, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出excel
|
||
</Button>
|
||
]
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(SupplierOrderStatistics);
|