2117 lines
90 KiB
TypeScript
2117 lines
90 KiB
TypeScript
/*
|
||
* @Author: cclu 1106109051@qq.com
|
||
* @Date: 2023-09-11 09:19:25
|
||
* @LastEditors: cclu 1106109051@qq.com
|
||
* @LastEditTime: 2024-09-24 17:30:38
|
||
* @FilePath: \cloud-platform\src\pages\reports\shareRoyalty\index.tsx
|
||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
*/
|
||
import React from 'react';
|
||
import moment from 'moment';
|
||
import numeral from 'numeral';
|
||
import ReactToPrint from 'react-to-print';
|
||
import ProTable from '@ant-design/pro-table';
|
||
import ProCard from '@ant-design/pro-card';
|
||
import useRequest from '@ahooksjs/use-request';
|
||
import { connect, history } from 'umi';
|
||
import { useRef, useState } from 'react';
|
||
import { MenuFoldOutlined } from '@ant-design/icons';
|
||
import { Button, Col, DatePicker, Descriptions, Drawer, message, Modal, Row, Spin, Tree, Typography } from 'antd';
|
||
|
||
import type { ConnectState } from '@/models/connect';
|
||
import type { ProFormInstance } from '@ant-design/pro-form';
|
||
import type { ActionType, ProColumns } from '@ant-design/pro-table';
|
||
import type { CurrentUser } from '@/models/user';
|
||
|
||
import { getServerpartTree, handleGetEndDateMonth } from '@/services/options';
|
||
import { exportExcelaccountMonthly, exportExcelReceivedSum, printOutBody } from '@/utils/utils';
|
||
import '@/pages/merchantManagement/style.less';
|
||
import ProjectDetail from "@/pages/BussinessProject/detail";
|
||
import { getProjectDetail } from "@/pages/BussinessProject/service";
|
||
import ProjectEditor from "@/pages/BussinessProject/editor";
|
||
import { getYSSellMasterList } from '@/pages/merchantManagement/reports/SalesFlow/service';
|
||
import FlowDetail from '@/pages/merchantManagement/reports/SalesFlow/components/FlowDetail';
|
||
import type { YSSELLMASTERModel } from '@/pages/merchantManagement/reports/SalesFlow/data';
|
||
|
||
import './salesFlow.less'
|
||
import session from "@/utils/session";
|
||
import FlowDrawer from "@/pages/merchantManagement/mobilePayment/bankArrival/components/flowDrawer";
|
||
import type { MobilePayRoyaltyModel } from '@/pages/merchantManagement/mobilePayment/shareRoyalty/data';
|
||
import { getList, getNoShopList, GetSellMasterCompareList, handleSynchroBANKACCOUNTVERIFY } from '../shareRoyalty/service';
|
||
import { handleGetRoyaltyDateSumReport, handleGetRoyaltyReport } from "@/pages/reports/Finance/service";
|
||
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
||
import './accountMonthly.less'
|
||
import { trimEnd } from 'lodash';
|
||
import DifferenceAmount from '../shareRoyalty/component/differenceAmount';
|
||
import PageTitleBox from '@/components/PageTitleBox';
|
||
|
||
const { Text } = Typography;
|
||
|
||
/**
|
||
* @description: 移动支付分账页面
|
||
* @param {currentUser} 当前登录用户信息
|
||
* @return { React.FC } 页面主体
|
||
*/
|
||
const ReportTable: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||
const { location } = history
|
||
const { currentUser } = props
|
||
const actionRef = useRef<ActionType>();
|
||
const differenceRef = useRef<ActionType>();
|
||
const formRef = useRef<ProFormInstance>();
|
||
const formRef2 = useRef<ProFormInstance>();
|
||
const formRefAdd = useRef<ProFormInstance>();
|
||
const downloadBtnRef = useRef<any>()
|
||
const [activeKey, setActiveKey] = useState<'1' | '2'>('1'); // 统计类型 1 日报表 2 月报表
|
||
const [currentRow, setCurrentRow] = useState<any>(); // 当前选中行
|
||
const [startTime, setStartTime] = useState<any>()// 开始时间
|
||
const [endTime, setEndTime] = useState<any>()// 结束时间
|
||
const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
|
||
const [reqBigDetailList, setReqBigDetailList] = useState<any>()// 外面的表格要导出的数据
|
||
const [bigExportLoadingBtn, setBigExportLoadingBtn] = useState<boolean>(false)
|
||
const [reqDetailList, setReqDetailList] = useState<MobilePayRoyaltyModel[]>(); // 导出excel表格
|
||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||
const [showWarningDrawer, setShowWarningDrawer] = useState<boolean>(false)// 显示异常的抽屉
|
||
const [noShopList, setNoShopList] = useState<any>()
|
||
const [expandRow, setExpandRow] = useState<string[]>([]); // 选择打开的服务区
|
||
const [showNewDetail, setShowNewDetail] = useState<boolean>(false)
|
||
const [showNewAdd, setShowNewAdd] = useState<boolean>(false)
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
// 显示单位:元旁边符号出现的悬浮框
|
||
const [showNotice, setShowNotice] = useState<boolean>(false)
|
||
// ProTable上方计算的汇总信息数据
|
||
const [reduceTableData, setReduceTableData] = useState<any>()
|
||
const [tableStart, setTableStart] = useState<any>()
|
||
const [tableEnd, setTableEnd] = useState<any>()
|
||
// 显示业主分润的顶层悬浮框
|
||
const [showFirstNotice, setShowFirstNotice] = useState<boolean>(false)
|
||
// 悬浮框的X轴坐标
|
||
const [noticeX, setNoticeX] = useState<number>(0)
|
||
// 悬浮框的Y轴坐标
|
||
const [noticeY, setNoticeY] = useState<number>(0)
|
||
// 拿到当前服务区id
|
||
const [currentServerpartId, setCurrentServerpartId] = useState<any>()
|
||
// 拿到当前的片区id
|
||
const [currentSPRegionTypeID, setCurrentSPRegionTypeID] = useState<string>()
|
||
const [tableDiffDays, setTableDiffDays] = useState<any>()
|
||
// 所有管理中心的项目合计
|
||
const [allProjectSum, setAllProjectSum] = useState<number>()
|
||
// 流水抽屉
|
||
const [flowDrawer, setFlowDrawer] = useState<boolean>(false)
|
||
// 流水抽屉详情
|
||
const [flowDetailList, setFlowDetailList] = useState<any>()
|
||
// 流水悬浮框
|
||
const [visible, setVisible] = useState<boolean>(false)
|
||
// 移动支付分账报表的搜索时间
|
||
const [bigSearchTime, setBigSearchTime] = useState<any>()
|
||
const { loading: treeLoading, data: treeView } = useRequest(async () => {
|
||
return getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, false, true)
|
||
}) // 获取用户服务区权限树
|
||
// 统计时间
|
||
const [statisticsTime, setStatisticsTime] = useState<any>()
|
||
// 差额的抽屉
|
||
const [differenceDrawer, setDifferenceDrawer] = useState<boolean>(false)
|
||
// 点开悬浮的选择时间 拿到老的一份统计时间
|
||
const { RangePicker } = DatePicker;
|
||
// 移动支付分账报表的真实搜索时间
|
||
const [realSearchTime, setRealSearchTime] = useState<any>()
|
||
// 项目详情
|
||
const [projectDetail, setProjectDetail] = useState<any>()
|
||
// 有计算公式的流水抽屉
|
||
const [haveFlowDrawer, setHaveFlowDrawer] = useState<boolean>()
|
||
// 抽屉的加载框
|
||
const [drawerLoading, setDrawerLoading] = useState<boolean>(false)
|
||
// 表格第一层的商家到账是否可以点击展开
|
||
const [isFirstFloorClick, setIsFirstFloorClick] = useState<boolean>(false)
|
||
const SETTLEMENTMODESOBJ = session.get('SETTLEMENT_MODESObj')
|
||
const [collapseds, setCollapseds] = useState<boolean>(true)
|
||
// 是否显示打印的表格
|
||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||
// 表格数据
|
||
const [tableData, setTableData] = useState<any>()
|
||
// 选择的展开行
|
||
const [expandedRowKeys, setExpandedRowKeys] = useState<any>()
|
||
// 表格单行columns的展开行
|
||
// 判断展开行是不是已经在运行了
|
||
const [columnsLoading, setColumnsLoading] = useState<boolean>(false)
|
||
// 最外面的表格的加载效果
|
||
const [bigTableLoading, setBigTableLoading] = useState<boolean>(false)
|
||
// 移动支付分账统计列表导出
|
||
const exportColumns: any = [
|
||
{
|
||
dataIndex: 'index',
|
||
title: '服务区信息',
|
||
hideInSearch: true,
|
||
valueType: 'index',
|
||
align: 'center',
|
||
children: [
|
||
{
|
||
title: '管理中心',
|
||
dataIndex: 'SPRegionType_Name',
|
||
align: 'right',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '服务区',
|
||
dataIndex: 'Serverpart_Name',
|
||
align: 'right',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '门店',
|
||
dataIndex: 'ServerpartShop_Name',
|
||
align: 'right',
|
||
width: 200,
|
||
},
|
||
{
|
||
title: '项目数量',
|
||
dataIndex: 'Project_Count',
|
||
align: 'right',
|
||
width: 80,
|
||
render: (_, record) => {
|
||
return record?.ServerpartShop_Name ? '-' : record?.Project_Count
|
||
}
|
||
},
|
||
]
|
||
}
|
||
]
|
||
|
||
// 移动支付分账统计列表
|
||
const columns: ProColumns<any>[] = [
|
||
{
|
||
dataIndex: 'DataType',
|
||
// title: '统计方式',
|
||
valueType: "radioButton",
|
||
initialValue: '1',
|
||
// colSize: 1,
|
||
// colSpan: 4,
|
||
valueEnum: {
|
||
2: { text: '月报' },
|
||
1: { text: '日报' },
|
||
},
|
||
hideInTable: true,
|
||
hideInSearch: showDetail,
|
||
fieldProps: {
|
||
onChange: (event: any) => {
|
||
setActiveKey(event.target.value)
|
||
formRef.current?.submit()
|
||
},
|
||
labelCol: { span: 3, offset: 24 },
|
||
// wrapperCol: { span: 24 }
|
||
},
|
||
},
|
||
{
|
||
title: '统计时间',
|
||
dataIndex: 'search_date',
|
||
valueType: 'dateRange',
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
hideInSearch: activeKey === '2' || showDetail,
|
||
initialValue: location.query?.StartDate ? [location.query?.StartDate, location.query?.EndDate] :
|
||
[moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'), moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')],
|
||
search: {
|
||
transform: (value) => {
|
||
return {
|
||
StartDate: value[0],
|
||
EndDate: value[1],
|
||
};
|
||
},
|
||
},
|
||
fieldProps: {
|
||
disabledDate: (current: any) => current && current > moment().endOf('day')
|
||
}
|
||
},
|
||
{
|
||
title: '经营商户',
|
||
dataIndex: 'searchText',
|
||
hideInTable: true,
|
||
hideInSearch: showDetail,
|
||
hideInDescriptions: true,
|
||
fieldProps: {
|
||
placeholder: '请输入经营商户'
|
||
}
|
||
},
|
||
{
|
||
title: '统计月份',
|
||
dataIndex: 'search_months',
|
||
valueType: "dateRange",
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
hideInSearch: activeKey === '1',
|
||
initialValue: [moment().startOf("month").format('YYYY-MM-DD'), moment().subtract(1, "days").format('YYYY-MM-DD')],
|
||
search: {
|
||
transform: (value) => {
|
||
return {
|
||
StartDate: moment(value[0]).startOf("month").format('YYYY-MM-DD'),
|
||
EndDate: moment(value[1]).endOf("month").format('YYYY-MM-DD'),
|
||
};
|
||
},
|
||
},
|
||
fieldProps: {
|
||
picker: "month",
|
||
format: 'YYYY-MM',
|
||
// disabledDate: (current: any) => current && current > moment().subtract(2, 'months').startOf("month")
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'index',
|
||
// title: () => <Text strong>服务区信息</Text>,
|
||
title: '服务区信息',
|
||
hideInSearch: true,
|
||
valueType: 'index',
|
||
align: 'center',
|
||
children: [
|
||
{
|
||
title: '序号',
|
||
dataIndex: 'index',
|
||
key: 'index',
|
||
valueType: 'index',
|
||
align: 'center',
|
||
hideInTable: true,
|
||
width: 120,
|
||
render: (_, record) => {
|
||
// return (!record?.Serverpart_ID || record?.Serverpart_ID === null) ? '' : _?.props.text + 1
|
||
return <span>{record.index}</span>
|
||
},
|
||
},
|
||
{
|
||
title: showDetail ? '服务区/门店' : '统计日期',
|
||
dataIndex: 'shopName',
|
||
key: 'shopName',
|
||
width: 300,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
if (record?.Statistics_Date && record?.level === 1) {
|
||
return <div>
|
||
<a onClick={() => {
|
||
console.log('record', record);
|
||
|
||
setCurrentRow(record);
|
||
setShowDetail(true);
|
||
}}>{record?.Statistics_Date}</a>
|
||
{
|
||
record?.Royalty_DiffPrice > 0 || record?.Royalty_DiffPrice < 0 ?
|
||
<a style={{ marginLeft: '16px' }} onClick={async () => {
|
||
setBigTableLoading(true)
|
||
console.log('record', record);
|
||
const req: any = {
|
||
StartDATE: record?.Statistics_Date,
|
||
EndDATE: record?.Statistics_Date,
|
||
SERVERPART_IDS: selectedId,
|
||
STAFF_NAME: currentUser?.Name,
|
||
STAFF_ID: currentUser?.ID,
|
||
OPRATE_DATE: moment().format('YYYY-MM-DD HH:mm:ss')
|
||
}
|
||
const data = await handleSynchroBANKACCOUNTVERIFY(req)
|
||
console.log('data', data);
|
||
if (data.Result_Code === 100) {
|
||
message.success(data.Result_Desc)
|
||
actionRef.current?.reload()
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
setBigTableLoading(false)
|
||
}}>固化数据</a>
|
||
: ''
|
||
}
|
||
</div>
|
||
}
|
||
// if (record?.ServerpartShop_Name && record?.Business_Unit){
|
||
// return <p><span>{record.ServerpartShop_Name}</span><span style={{marginLeft:'10px'}}>{record.Business_Unit}</span></p>
|
||
// }
|
||
return <span style={{
|
||
color:
|
||
record?.ServerpartShop_Name && !record?.ServerpartShop_ID ? '#1890ff' : record?.Show_Warning ? 'red' : '', cursor: 'pointer'
|
||
}} onClick={async () => {
|
||
console.log('record', record)
|
||
if (record?.ServerpartShop_Name && !record?.ServerpartShop_ID) {
|
||
if (record?.BusinessProject_ID) {
|
||
const data = await getProjectDetail(record?.BusinessProject_ID)
|
||
console.log('data', data)
|
||
setCurrentRow(data);
|
||
setShowNewDetail(true)
|
||
} else {
|
||
setCurrentServerpartId(record.Serverpart_ID)
|
||
setCurrentSPRegionTypeID(record.SPRegionType_ID)
|
||
const current = {
|
||
PROJECT_VALID: 1,
|
||
MULTIPROJECT_STATE: 0,
|
||
SEGMENTED_MODE: 1
|
||
}
|
||
formRefAdd.current?.setFieldsValue(current)
|
||
setCurrentRow(current)
|
||
setShowNewAdd(true)
|
||
}
|
||
}
|
||
|
||
}}>
|
||
{record?.ServerpartShop_Name ? record?.ServerpartShop_Name : record?.Serverpart_Name ? record?.Serverpart_Name : record?.SPRegionType_Name ? record?.SPRegionType_Name : ''}
|
||
{/* {record?.SPRegionType_Name ? record?.SPRegionType_Name : record?.Serverpart_Name ? record?.Serverpart_Name : record?.ServerpartShop_Name} */}
|
||
</span>
|
||
}
|
||
},
|
||
{
|
||
title: '项目数量',
|
||
dataIndex: 'Project_Count',
|
||
align: 'right',
|
||
width: 80,
|
||
render: (_, record) => {
|
||
return record?.ServerpartShop_Name ? '-' : record?.Project_Count
|
||
}
|
||
},
|
||
{
|
||
title: '经营商家',
|
||
dataIndex: 'Business_Unit',
|
||
ellipsis: true,
|
||
key: 'Business_Unit',
|
||
hideInSearch: true,
|
||
hideInTable: true,
|
||
render: (_, record) => {
|
||
return <span style={{
|
||
color:
|
||
record?.Show_Warning ? 'red' : ''
|
||
}}>
|
||
{
|
||
record?.Show_Warning ? record?.BusinessProject_ID ? '结算模式错误,请修改' : '未建经营项目,请添加' : record?.Business_Unit
|
||
}
|
||
{/* { */}
|
||
{/* !record?.Royalty_Price && !record?.RoyaltyProject_Price && !record?.Royalty_DiffPrice?record?.Business_Unit: */}
|
||
{/* !record?.RoyaltyProject_Price && record?.ServerpartShop_Name && !record?.ServerpartShop_ID? */}
|
||
{/* record?.BusinessProject_ID?'结算模式错误,请修改':'未建经营项目,请添加' */}
|
||
{/* :record?.Business_Unit */}
|
||
{/* } */}
|
||
</span>
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '业主分润',
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
children: [
|
||
{
|
||
title: '银行到账',
|
||
dataIndex: 'Royalty_Price',
|
||
width: 105,
|
||
align: 'right',
|
||
sorter: (a, b) => a.Royalty_Price - b.Royalty_Price,
|
||
render: (_, record) => {
|
||
return record?.Royalty_Price ? numeral(record.Royalty_Price).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
{
|
||
title: '项目到账',
|
||
width: 105,
|
||
dataIndex: 'RoyaltyProject_Price',
|
||
align: 'right',
|
||
sorter: (a, b) => a.RoyaltyProject_Price - b.RoyaltyProject_Price,
|
||
render: (_, record) => {
|
||
return record?.RoyaltyProject_Price ? numeral(record.RoyaltyProject_Price).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
{
|
||
title: '差额',
|
||
width: 105,
|
||
dataIndex: 'Royalty_DiffPrice',
|
||
align: 'right',
|
||
sorter: (a, b) => a.Royalty_DiffPrice - b.Royalty_DiffPrice,
|
||
render: (_, record) => {
|
||
return <span style={{ color: record?.Royalty_DiffPrice ? 'red' : '' }}>
|
||
{record?.Royalty_DiffPrice ? numeral(record.Royalty_DiffPrice).format('0,0.00') : '-'}
|
||
</span>
|
||
},
|
||
},
|
||
]
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '交易到账',
|
||
hideInSearch: true,
|
||
children: [
|
||
// {
|
||
// title: '交易金额',
|
||
// dataIndex: 'Ticket_Price',
|
||
// align: 'right',
|
||
// width: 100,
|
||
// sorter: (a, b) => {
|
||
// return a.Ticket_Price - b.Ticket_Price
|
||
// },
|
||
// render: (_, record) => {
|
||
// return record?.Ticket_Price ? numeral(record.Ticket_Price).format('0,0.00') : '-'
|
||
// },
|
||
// },
|
||
{
|
||
title: '本地流水',
|
||
dataIndex: 'MobilePay_Price',
|
||
width: 100,
|
||
align: 'right',
|
||
// hideInTable: true,
|
||
hideInSearch: true,
|
||
sorter: (a, b) => {
|
||
return a.MobilePay_Price - b.MobilePay_Price
|
||
},
|
||
render: (_, record) => {
|
||
return <>
|
||
{
|
||
(record?.ServerpartShop_Name && !record?.ServerpartShop_ID) ?
|
||
<span style={{ color: '#1890ff', cursor: 'pointer' }}
|
||
onClick={() => {
|
||
console.log('record', record);
|
||
console.log('bigSearchTime', bigSearchTime);
|
||
// setCurrentRow(record)
|
||
// setFlowDrawer(true)
|
||
const res = JSON.parse(JSON.stringify(record))
|
||
res.Statistics_Date = moment(statisticsTime[1]).format('YYYY-MM-DD')
|
||
res.BusinessProject_Id = record.BusinessProject_ID
|
||
res.ServerpartShop_ID = record.newServerpartShop_ID
|
||
res.Serverpart_Name = record.newServerpart_Name
|
||
setCurrentRow(res);
|
||
setHaveFlowDrawer(true);
|
||
}}>
|
||
{record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}
|
||
</span> :
|
||
<span>{record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}</span>
|
||
|
||
// : record.type === 'shop' ?<span style={{color:'#faad14', cursor: 'pointer'}} onClick={()=>{
|
||
// const res = JSON.parse(JSON.stringify(record))
|
||
// res.Statistics_Date = moment(statisticsTime[1]).format('YYYY-MM-DD')
|
||
// res.BusinessProject_Id = record.BusinessProject_ID
|
||
// setCurrentRow(res);
|
||
// setHaveFlowDrawer(true);
|
||
// }}>{record?.MobilePay_Price ? numeral(record.MobilePay_Price).format('0,0.00') : '-'}</span> :
|
||
}
|
||
</>
|
||
},
|
||
},
|
||
{
|
||
title: '上游流水',
|
||
dataIndex: 'Ticket_Price',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
sorter: (a, b) => {
|
||
return a.Ticket_Price - b.Ticket_Price
|
||
},
|
||
render: (_, record) => {
|
||
return record?.Ticket_Price ? numeral(record.Ticket_Price).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
{
|
||
title: '差额',
|
||
dataIndex: '',
|
||
width: 100,
|
||
// hideInTable: true,
|
||
hideInSearch: true,
|
||
sorter: (a, b) => {
|
||
return (a.Ticket_Price - a.MobilePay_Price) - (b.Ticket_Price - b.MobilePay_Price)
|
||
},
|
||
render: (_, record) => {
|
||
const num = record?.Ticket_Price - record?.MobilePay_Price
|
||
return <span style={{ color: num > 0 ? '#60cf60' : num < 0 ? 'red' : '', cursor: record?.index && record?.index.indexOf('.') !== -1 && record?.Ticket_Price - record?.MobilePay_Price !== 0 ? 'pointer' : '' }} onClick={async () => {
|
||
if (record?.index && record?.index.indexOf('.') !== -1 && record?.Ticket_Price - record?.MobilePay_Price !== 0) {
|
||
console.log('record', record)
|
||
setCurrentRow(record)
|
||
setDifferenceDrawer(true)
|
||
// console.log('record?.BusinessProject_ID', record?.BusinessProject_ID)
|
||
// const data = await getProjectDetail(record?.BusinessProject_ID)
|
||
// setProjectDetail(data)
|
||
// console.log('data', data)
|
||
}
|
||
}}>
|
||
{numeral(record?.Ticket_Price - record?.MobilePay_Price).format('0,0.00')}
|
||
</span>
|
||
},
|
||
},
|
||
{
|
||
title: '到账金额',
|
||
dataIndex: 'Account_Price',
|
||
align: 'right',
|
||
width: 100,
|
||
sorter: (a, b) => {
|
||
return a.Account_Price - b.Account_Price
|
||
},
|
||
render: (_, record) => {
|
||
return record?.Account_Price ? numeral(record.Account_Price).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
]
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '商家分润',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
title: '到账金额',
|
||
dataIndex: 'SubRoyalty_Price',
|
||
width: 105,
|
||
align: 'right',
|
||
sorter: (a, b) => a.SubRoyalty_Price - b.SubRoyalty_Price,
|
||
render: (_, record) => {
|
||
return record?.SubRoyalty_Price ? numeral(record.SubRoyalty_Price).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
{
|
||
title: '手续费',
|
||
dataIndex: 'Ticket_Fee',
|
||
width: 105,
|
||
align: 'right',
|
||
sorter: (a, b) => a.Ticket_Fee - b.Ticket_Fee,
|
||
render: (_, record) => {
|
||
return record?.Ticket_Fee ? numeral(record.Ticket_Fee).format('0,0.00') : '-'
|
||
},
|
||
},
|
||
]
|
||
},
|
||
|
||
];
|
||
// 移动支付流水清单
|
||
const columnsRecord: ProColumns<any>[] = [
|
||
{
|
||
dataIndex: 'Ticket_Code',
|
||
title: '订单编号',
|
||
align: 'center',
|
||
hideInTable: true,
|
||
hideInDescriptions: true,
|
||
colSize: 2
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '订单信息',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: 'Pay_Date',
|
||
title: '交易时间',
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
sorter: true,
|
||
defaultSortOrder: 'descend',
|
||
},
|
||
{
|
||
dataIndex: 'Ticket_Code',
|
||
title: '订单编号',
|
||
align: 'center',
|
||
hideInDescriptions: true,
|
||
},
|
||
{
|
||
dataIndex: 'Machine_Code',
|
||
title: '机器编码',
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
{
|
||
dataIndex: 'Ticket_Price',
|
||
title: '交易金额',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
{
|
||
dataIndex: 'Account_Price',
|
||
title: '到账金额',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '商家分润',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
dataIndex: 'SubRoyalty_Price',
|
||
title: '到账金额',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
{
|
||
dataIndex: 'Ticket_Fee',
|
||
title: '手续费',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
]
|
||
},
|
||
{
|
||
// title: () => <Text strong>合计',
|
||
title: '业主分润',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
title: '到账金额',
|
||
dataIndex: 'Royalty_Price',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
},
|
||
{
|
||
title: '分账比例',
|
||
dataIndex: 'Royalty_Rate',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
hideInDescriptions: true,
|
||
render: (_, record) => {
|
||
return record?.Royalty_Rate && record?.SubRoyalty_Rate ? `${record.Royalty_Rate / 100}:${record.SubRoyalty_Rate / 100}` : ''
|
||
},
|
||
},
|
||
]
|
||
}
|
||
];
|
||
// 流水的
|
||
const flowColumns: ProColumns<YSSELLMASTERModel>[] = [
|
||
|
||
{
|
||
dataIndex: 'index',
|
||
title: '序号',
|
||
hideInSearch: true,
|
||
valueType: 'index',
|
||
fixed: true,
|
||
align: 'center',
|
||
width: 48,
|
||
},
|
||
{
|
||
dataIndex: 'SELLMASTER_DATE',
|
||
valueType: "dateRange",
|
||
title: '销售时间',
|
||
align: 'center',
|
||
initialValue: bigSearchTime || [moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD'), moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')],
|
||
render: (_, record) => {
|
||
return record?.SELLMASTER_DATE
|
||
},
|
||
fieldProps: {
|
||
disabledDate: (current: any) => current && current > moment()
|
||
},
|
||
search: {
|
||
transform: (value) => {
|
||
return {
|
||
SELLMASTER_DATE_Start: moment(value[0]).format('YYYY-MM-DD'),
|
||
SELLMASTER_DATE_End: moment(value[1]).format('YYYY-MM-DD'),
|
||
};
|
||
},
|
||
},
|
||
},
|
||
{
|
||
dataIndex: 'TICKET_CODE',
|
||
title: '小票编号',
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
},
|
||
{
|
||
dataIndex: 'SELLMASTER_COUNT',
|
||
title: '销售数量',
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
sorter: (a, b) => a.SELLMASTER_COUNT - b.SELLMASTER_COUNT
|
||
},
|
||
|
||
|
||
{
|
||
dataIndex: 'SELLMASTER_AMOUNT',
|
||
title: '实收金额',
|
||
hideInSearch: true,
|
||
valueType: "money",
|
||
align: 'right',
|
||
sorter: (a, b) => a.SELLMASTER_AMOUNT - b.SELLMASTER_AMOUNT
|
||
},
|
||
{
|
||
dataIndex: 'SELLMASTER_OFFPRICE',
|
||
title: '优惠金额',
|
||
hideInSearch: true,
|
||
valueType: "money",
|
||
align: 'right',
|
||
sorter: (a, b) => a.SELLMASTER_OFFPRICE - b.SELLMASTER_OFFPRICE
|
||
},
|
||
{
|
||
dataIndex: 'PAYMENT_TYPE_TEXT',
|
||
title: '支付方式',
|
||
hideInSearch: true,
|
||
align: 'center',
|
||
},
|
||
|
||
{
|
||
dataIndex: 'SHOPNAME',
|
||
hideInSearch: true,
|
||
title: '门店名称',
|
||
align: 'center',
|
||
width: '12%',
|
||
},
|
||
{
|
||
dataIndex: 'MACHINECODE',
|
||
hideInSearch: true,
|
||
title: '收银机号',
|
||
align: 'center',
|
||
},
|
||
{
|
||
dataIndex: 'SELLWORKER_NAME',
|
||
hideInSearch: true,
|
||
title: '收银人员',
|
||
align: 'center',
|
||
}
|
||
|
||
];
|
||
// 差额的
|
||
const differenceColums: any = [
|
||
{
|
||
title: '收银系统',
|
||
dataIndex: '',
|
||
children: [
|
||
{
|
||
title: '服务区名称',
|
||
dataIndex: 'ServerpartName',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '门店名称',
|
||
dataIndex: 'ServerpartShopName',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '收银机号',
|
||
dataIndex: 'MachineCode',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '交易时间',
|
||
dataIndex: 'PayDateStr',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '订单金额',
|
||
dataIndex: 'MobilePayAmount',
|
||
align: 'right',
|
||
},
|
||
{
|
||
title: '交易结果',
|
||
dataIndex: 'MobileRecordState',
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '渠道返回',
|
||
dataIndex: '',
|
||
children: [
|
||
{
|
||
title: '渠道返回',
|
||
dataIndex: 'KwyRecordState',
|
||
},
|
||
{
|
||
title: '交易金额',
|
||
dataIndex: 'KwyAmount',
|
||
align: 'right',
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '订单信息',
|
||
dataIndex: '',
|
||
children: [
|
||
{
|
||
title: '订单编号',
|
||
dataIndex: 'TradeNo',
|
||
align: 'center',
|
||
},
|
||
{
|
||
title: '支付方式',
|
||
dataIndex: 'PaymentType',
|
||
align: 'center',
|
||
},
|
||
]
|
||
}
|
||
]
|
||
const getRightTime = (time: any) => {
|
||
// const [start,end] = [moment(time[0]).format('YYYY/MM/DD'),moment(time[1]).format('YYYY/MM/DD')]
|
||
if (moment().format('YYYY/MM') === moment(time[0]).format('YYYY/MM') || moment().format('YYYY/MM') === moment(time[1]).format('YYYY/MM')) {
|
||
setStartTime(moment(time[0]).startOf("month").format('YYYY/MM/DD'))
|
||
setEndTime(moment().subtract(1, "days").format('YYYY/MM/DD'))
|
||
return [moment(time[0]).startOf("month").format('YYYY-MM-DD'), moment().subtract(1, "days").format('YYYY-MM-DD')]
|
||
}
|
||
setStartTime(moment(time[0]).startOf("month").format('YYYY/MM/DD'))
|
||
setEndTime(moment(time[1]).endOf("month").format('YYYY/MM/DD'))
|
||
return [moment(time[0]).startOf("month").format('YYYY-MM-DD'), moment(time[1]).endOf("month").format('YYYY-MM-DD')]
|
||
}
|
||
|
||
// 导出excel方法
|
||
const exportTable = (e) => {
|
||
e.stopPropagation(); // 防止Collapse组件收起
|
||
const main = document.getElementsByClassName('accountMonthlyHideBox')[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-accountMonthly'); // 给table添加id，值与按钮上的table字段对应
|
||
|
||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||
|
||
downloadBtnRef.current.handleDownload();
|
||
setShowExportTable(false)
|
||
}
|
||
|
||
const exportExternalHideTable = (e) => {
|
||
e.stopPropagation(); // 防止Collapse组件收起
|
||
const main = document.getElementsByClassName('accountMonthlyExternalHideBox')[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-accountMonthlyExternalHideBox'); // 给table添加id，值与按钮上的table字段对应
|
||
|
||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||
|
||
downloadBtnRef.current.handleDownload();
|
||
setBigExportLoadingBtn(false)
|
||
}
|
||
|
||
// 寻找展开的行 加上加载效果
|
||
const addLoadingRow = (name: string) => {
|
||
const main = document.getElementsByClassName(`accountMonthlyTable`)[0]
|
||
|
||
const pageLoading = document.getElementsByClassName(`pageLoading`)[0]
|
||
|
||
const row = main.getElementsByClassName(`${name}`)[0]
|
||
console.log('row', row);
|
||
|
||
const loadingBox = document.createElement('tr');
|
||
const span = document.createElement('span');
|
||
const Spin = pageLoading.cloneNode(true); // 深克隆DOM节点
|
||
span.innerText = '加载中...';
|
||
Spin.setAttribute('class', 'rowLoadingSpin');
|
||
span.setAttribute('class', 'span');
|
||
|
||
loadingBox.appendChild(Spin);
|
||
loadingBox.appendChild(span);
|
||
loadingBox.setAttribute('class', 'accountMonthlyLoadingBox');
|
||
row?.parentNode.insertBefore(loadingBox, row.nextSibling)
|
||
}
|
||
// 寻找展开的行 去除加载效果
|
||
const removeLoadingRow = (name: string) => {
|
||
const main = document.getElementsByClassName(`accountMonthlyTable`)[0]
|
||
const pageLoading = document.getElementsByClassName(`accountMonthlyLoadingBox`)[0]
|
||
pageLoading.remove() // 防止重复打印一个内容
|
||
}
|
||
|
||
// 拿到最外面表格的全部导出数据
|
||
const handleGetExportBigData = async (list: any) => {
|
||
|
||
if (list && list.length > 0) {
|
||
setBigExportLoadingBtn(true)
|
||
const result: any = JSON.parse(JSON.stringify(list))
|
||
for (let i = 0; i < list.length; i++) {
|
||
const obj: any = list[i]
|
||
const searchText = formRef.current?.getFieldValue('searchText')
|
||
const req: any = {
|
||
StartDate: obj?.Statistics_Date,
|
||
EndDate: obj?.Statistics_Date,
|
||
ServerpartIds: selectedId,
|
||
Keyword: searchText || ''
|
||
}
|
||
const data = await handleGetRoyaltyReport(req)
|
||
console.log('time', obj?.Statistics_Date);
|
||
const res: any = data.data
|
||
if (res && res.length > 0) {
|
||
result.forEach((item: any) => {
|
||
if (item.Statistics_Date === obj?.Statistics_Date) {
|
||
item.children = res
|
||
}
|
||
})
|
||
}
|
||
console.log('result', result);
|
||
setReqBigDetailList(result)
|
||
}
|
||
setBigExportLoadingBtn(false)
|
||
}
|
||
}
|
||
|
||
|
||
return (
|
||
<div
|
||
className={'bigBox'}
|
||
style={{ height: 'calc(100vh - 132px)', overflowY: 'auto' }}
|
||
ref={(el) => {
|
||
// 打印报表
|
||
if (!reqDetailList || reqDetailList.length === 0) return;
|
||
setPrintOut(el);
|
||
}}
|
||
onScroll={(e) => {
|
||
if (e.target.scrollTop > 100) {
|
||
setShowFirstNotice(true)
|
||
} else {
|
||
setShowFirstNotice(false)
|
||
}
|
||
}}
|
||
>
|
||
<Spin style={{ display: 'none' }} className={'pageLoading'} />
|
||
<div className={'accountMonthlyHideBox'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||
{
|
||
showExportTable && reqDetailList && reqDetailList.length > 0 ?
|
||
<ProTable
|
||
columns={[...exportColumns, ...columns.slice(5, columns.length)]}
|
||
dataSource={reqDetailList}
|
||
pagination={false}
|
||
expandable={{
|
||
defaultExpandAllRows: true
|
||
}}
|
||
/> : ''
|
||
}
|
||
</div>
|
||
<div className={'accountMonthlyExternalHideBox'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||
{
|
||
showExportTable && reqBigDetailList && reqBigDetailList.length > 0 ?
|
||
<ProTable
|
||
// columns={[{title:'统计日期',dataIndex:'Statistics_Date'},...exportColumns, ...columns.slice(5, columns.length)]}
|
||
columns={[...columns.slice(4, columns.length)]}
|
||
dataSource={reqBigDetailList}
|
||
pagination={false}
|
||
expandable={{
|
||
defaultExpandAllRows: true
|
||
}}
|
||
/> : ''
|
||
}
|
||
</div>
|
||
<div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
|
||
{/* height: 'calc(100vh - 66px)', */}
|
||
<div style={{ backgroundColor: '#fff', width: '100%', display: 'flex' }}>
|
||
<ProCard
|
||
className="pageTable-leftnav"
|
||
style={{ width: !collapsible ? "240px" : "60px" }}
|
||
headStyle={{ width: !collapsible ? "240px" : "60px" }}
|
||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? "240px" : "60px" }}
|
||
extra={<MenuFoldOutlined onClick={() => {
|
||
setCollapsible(!collapsible)
|
||
}} />}
|
||
colSpan={!collapsible ? "240px" : "60px"}
|
||
title={!collapsible ? "可筛选门店" : ""}
|
||
headerBordered
|
||
collapsed={collapsible}
|
||
>
|
||
{treeView && treeView.length > 0 ? <Tree
|
||
checkable
|
||
treeData={!treeLoading ? [{
|
||
label: '全部',
|
||
value: 0,
|
||
key: '0-0',
|
||
children: treeView
|
||
}] : []}
|
||
fieldNames={{
|
||
title: "label",
|
||
key: "key"
|
||
}}
|
||
blockNode
|
||
defaultExpandedKeys={['0-0']}
|
||
onCheck={(checkedKeys: React.Key[] | any, info) => {
|
||
const selectedIds = info.checkedNodes.filter(n => n?.type === 1)
|
||
setSelectedId(selectedIds.map(n => n?.value)?.toString() || '')
|
||
// actionRef?.current?.reload()
|
||
}}
|
||
/> : ''}
|
||
</ProCard>
|
||
<div style={{
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0,
|
||
width: `calc(100% - ${!collapsible ? 240 : 60}px)`
|
||
}}>
|
||
{
|
||
showNotice ?
|
||
<div onClick={() => {
|
||
setShowNotice(!showNotice)
|
||
}} style={{
|
||
position: 'fixed', background: '#fff', padding: '15px',
|
||
borderRadius: '8px',
|
||
width: '70vw',
|
||
left: '440px',
|
||
top: `${noticeY}px`,
|
||
zIndex: 99,
|
||
boxShadow: '0px 9px 28px 8px rgba(0,0,0,0.05), 0px 6px 16px 0px rgba(0,0,0,0.08), 0px 3px 6px -4px rgba(0,0,0,0.12)'
|
||
}}>
|
||
<Row>
|
||
<Col span={12}>
|
||
<Descriptions
|
||
title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>商家分润</Text>}
|
||
size="small" className="commity-sale-description" column={2}
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
|
||
>
|
||
<Descriptions.Item
|
||
label="到账金额">¥{numeral(reduceTableData?.SubRoyalty_Price).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="手续费">¥{numeral(reduceTableData?.Ticket_Fee).format('0,0.00')}</Descriptions.Item>
|
||
</Descriptions>
|
||
</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col span={24}>
|
||
<Descriptions
|
||
title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>交易到账汇总</Text>}
|
||
size="small" column={4}
|
||
className="commity-sale-description"
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
|
||
>
|
||
<Descriptions.Item
|
||
label="交易金额">¥{numeral(reduceTableData?.Ticket_Price).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="到账金额">¥{numeral(reduceTableData?.Account_Price).format('0,0.00')}</Descriptions.Item>
|
||
{
|
||
activeKey === '1' ?
|
||
<Descriptions.Item
|
||
label="统计时间">{`${moment(tableStart).format('YYYY/MM/DD')}-${moment(tableEnd).format('YYYY/MM/DD')} `}
|
||
<Text type="secondary">( 共{numeral(tableDiffDays).format('0')}日 )</Text>
|
||
</Descriptions.Item> :
|
||
<Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item>
|
||
}
|
||
</Descriptions>
|
||
</Col>
|
||
</Row>
|
||
</div> : ''
|
||
}
|
||
{
|
||
showNotice ?
|
||
<div style={{
|
||
width: '100vw',
|
||
height: '100vh',
|
||
position: 'fixed',
|
||
top: '0px',
|
||
left: '0px',
|
||
zIndex: 100
|
||
}} onClick={() => {
|
||
setShowNotice(false)
|
||
}}></div> : ''
|
||
}
|
||
{
|
||
showFirstNotice ?
|
||
<div style={{
|
||
width: `calc(100% - ${!collapsible ? 520 : 340}px)`,
|
||
position: 'fixed',
|
||
top: '100px',
|
||
right: '24px',
|
||
background: '#fff',
|
||
zIndex: 999,
|
||
padding: '8px 0'
|
||
}}>
|
||
<Row>
|
||
<Col span={24}>
|
||
<div style={{ paddingBottom: '12px' }}>
|
||
<span style={{ color: 'rgb(24, 144, 255)', fontSize: '14px', fontWeight: 600 }}>业主分润</span>
|
||
<div style={{
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
boxSizing: 'border-box',
|
||
padding: '0 16px 0 0',
|
||
marginTop: '12px'
|
||
}}>
|
||
<div style={{ width: '240px', display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>到账金额：</span>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(reduceTableData.Royalty_Price || 0).format('0,0.00')}</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: '150px', display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>分润项目：</span>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(allProjectSum || 0).format('0,0')}</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: '170px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>项目到账：</span>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.85',
|
||
fontWeight: 'bold'
|
||
}}>{numeral(reduceTableData.RoyaltyProject_Price || 0).format('0,0.00')}</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: '150px' }}>
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>差额：</span>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.85',
|
||
fontWeight: 'bold'
|
||
}}>{numeral(reduceTableData.Royalty_DiffPrice || 0).format('0,0.00')}</span>
|
||
</div>
|
||
</div>
|
||
<div style={{ width: '440px', display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>统计时间：</span>
|
||
<RangePicker
|
||
value={statisticsTime}
|
||
onChange={(e: any) => {
|
||
if (e) {
|
||
console.log('e', e)
|
||
setStatisticsTime([moment(e[0]._d), moment(e[1]._d)])
|
||
formRef.current?.setFieldsValue({ search_date: [moment(e[0]._d).format('YYYY-MM-DD'), moment(e[1]._d).format('YYYY-MM-DD')] })
|
||
} else {
|
||
setStatisticsTime(undefined)
|
||
}
|
||
}}
|
||
disabledDate={(current: any) => current && current > moment()}
|
||
/>
|
||
<Button type={'primary'} style={{ marginLeft: '8px' }} onClick={() => {
|
||
actionRef.current?.reload()
|
||
}}>查询</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</div> : ''
|
||
}
|
||
<ProTable
|
||
rowKey={(record) => {
|
||
return `${record.Statistics_Date}-${record.index}-${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.ServerpartShop_Name}`
|
||
}}
|
||
rowClassName={(record) => {
|
||
return `${record.Statistics_Date}-${record.index}-${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.ServerpartShop_Name}`
|
||
}}
|
||
formRef={formRef}
|
||
loading={bigTableLoading}
|
||
className={'accountMonthlyTable'}
|
||
actionRef={actionRef}
|
||
search={{
|
||
span: 6,
|
||
labelWidth: 100,
|
||
// collapsed: collapseds, // 状态可控
|
||
// onCollapse: (value: boolean) => { // 通过方法手动修改状态
|
||
// setCollapseds(value)
|
||
// }
|
||
}}
|
||
request={async (params) => {
|
||
if (!selectedId) {
|
||
return
|
||
}
|
||
console.log('params', params);
|
||
if (params && params.StartDate && params.EndDate) {
|
||
setBigSearchTime([params.StartDate, params.EndDate])
|
||
// setStatisticsTime([moment(params.StartDate),moment(params.EndDate)])
|
||
setRealSearchTime([moment(params.StartDate).format('YYYY-MM-DD'), moment(params.EndDate).format('YYYY-MM-DD')])
|
||
} else {
|
||
setBigSearchTime(undefined)
|
||
// setStatisticsTime(undefined)
|
||
}
|
||
const time = formRef.current?.getFieldValue('search_date')
|
||
console.log('time', time)
|
||
if (time && time.length > 0) {
|
||
setStatisticsTime([moment(time[0]), moment(time[1])])
|
||
if (activeKey === '1') {
|
||
params.StartDate = moment(time[0]).format('YYYY-MM-DD')
|
||
params.EndDate = moment(time[1]).format('YYYY-MM-DD')
|
||
} else {
|
||
params.StartDate = moment(time[0]).startOf('months').format('YYYY-MM-DD')
|
||
// 现在要传月份的 也要传入到具体日期
|
||
// 这样的话就要判断结束月份的时间 最大只能是昨天 所以要做判断
|
||
params.EndDate = handleGetEndDateMonth(moment(time[1]).format('YYYY-MM'))
|
||
}
|
||
}
|
||
setBigTableLoading(true)
|
||
console.log('params', params)
|
||
const data = await handleGetRoyaltyDateSumReport({
|
||
StartDate: params.StartDate,
|
||
EndDate: params.EndDate,
|
||
ServerpartIds: selectedId || '0',
|
||
Keyword: params.searchText || ''
|
||
});
|
||
console.log('11111', data)
|
||
// data.data.reverse()
|
||
|
||
// // 给最里层的门店加一个标识
|
||
// data.data.forEach((item: any)=>{
|
||
// if (item.children && item.children.length>0){
|
||
// item.children.forEach((subItem: any)=>{
|
||
// if (subItem.children && item.children.length>0){
|
||
// subItem.children.forEach((thirdItem: any)=>{
|
||
// thirdItem.newServerpart_Name = subItem.Serverpart_Name
|
||
// thirdItem.type='shop'
|
||
// let shopId: string = ''
|
||
// if (thirdItem.children && thirdItem.children.length>0){
|
||
// thirdItem.children.forEach((fourthItem: any)=>{
|
||
// if (shopId){
|
||
// shopId+=`,${fourthItem.ServerpartShop_ID}`
|
||
// }else{
|
||
// shopId = fourthItem.ServerpartShop_ID
|
||
// }
|
||
// })
|
||
// }
|
||
// thirdItem.newServerpartShop_ID = shopId
|
||
// })
|
||
// }
|
||
// })
|
||
// }
|
||
// })
|
||
//
|
||
console.log('data.data', data.data)
|
||
let projectMax: number = 0
|
||
if (data && data.data && data.data.length > 0) {
|
||
data.data.forEach((item: any, index: number) => {
|
||
item.index = `${index + 1}`
|
||
item.level = 1
|
||
// 只有数据的第一层 有这个属性
|
||
item.isFirst = true
|
||
item.children = []
|
||
if (projectMax < item.Project_Count) {
|
||
projectMax = item.Project_Count
|
||
}
|
||
})
|
||
}
|
||
setExpandedRowKeys([])
|
||
setTableData(data.data)
|
||
setReqBigDetailList(data.data)
|
||
setBigTableLoading(false)
|
||
setAllProjectSum(projectMax)
|
||
setPrintOut(undefined);
|
||
getRightTime([params.StartDate, params.EndDate])
|
||
// if (selectedId) {
|
||
// const req = {
|
||
// ProvinceCode: currentUser?.ProvinceCode,
|
||
// ServerpartIds: selectedId
|
||
// }
|
||
// const result = await getNoShopList(req)
|
||
// if (result && result.List.length > 0) {
|
||
// setNoShopList(result.List)
|
||
// }
|
||
// } else {
|
||
// setNoShopList([])
|
||
// }
|
||
const res = JSON.parse(JSON.stringify(data.data))
|
||
if (res) {
|
||
const reduceData = res.reduce((p: {
|
||
Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
|
||
Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
|
||
}, currentValue: MobilePayRoyaltyModel) => {
|
||
const previousValue = { ...p }
|
||
previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
|
||
previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
|
||
currentValue.Account_Price).format('0.00')).value() || 0;
|
||
previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
|
||
currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
|
||
previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
|
||
currentValue.Ticket_Fee).format('0.00')).value() || 0;
|
||
previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
|
||
currentValue.Royalty_Price).format('0.00')).value() || 0;
|
||
previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
|
||
currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
|
||
previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
|
||
currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
|
||
return previousValue
|
||
}, {
|
||
Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
|
||
Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
|
||
});
|
||
console.log('reduceData', reduceData)
|
||
setReduceTableData(reduceData)
|
||
const [start, end] =
|
||
activeKey === "2" ?
|
||
''
|
||
: formRef.current?.getFieldValue('search_date')
|
||
setTableStart(start)
|
||
setTableEnd(end)
|
||
const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
|
||
setTableDiffDays(diffDays)
|
||
}
|
||
console.log('data', data);
|
||
// 拿到要导出的全部数据的方法
|
||
// await handleGetExportBigData(data.data)
|
||
|
||
// return data;
|
||
}}
|
||
dataSource={tableData}
|
||
expandable={{
|
||
expandedRowKeys,
|
||
defaultExpandAllRows: false,
|
||
onExpand: async (record, event) => {
|
||
console.log('record', record);
|
||
console.log('event', event);
|
||
if (record) {
|
||
if (expandedRowKeys && expandedRowKeys.length > 0) {
|
||
const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
|
||
list.push(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
|
||
setExpandedRowKeys(list)
|
||
} else {
|
||
const list: any = []
|
||
list.push(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
|
||
setExpandedRowKeys(list)
|
||
}
|
||
} else {
|
||
const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
|
||
const newList: any = list.filter((item) => item !== `${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
|
||
setExpandedRowKeys(newList)
|
||
}
|
||
|
||
if (columnsLoading) {
|
||
message.error('正在请求其他行数据！')
|
||
return
|
||
}
|
||
let isHave: boolean = true
|
||
if (event.children && event.children.length > 0) {
|
||
isHave = false
|
||
}
|
||
|
||
if (record && event.Statistics_Date && isHave && event.isFirst) {
|
||
setColumnsLoading(true)
|
||
addLoadingRow(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
|
||
const searchText = formRef.current?.getFieldValue('searchText')
|
||
const req: any = {
|
||
StartDate: event?.Statistics_Date,
|
||
EndDate: event?.Statistics_Date,
|
||
ServerpartIds: selectedId,
|
||
Keyword: searchText || ''
|
||
}
|
||
const data = await handleGetRoyaltyReport(req)
|
||
console.log('321312', data);
|
||
const res: any = data.data
|
||
if (res && res.length > 0) {
|
||
// 去掉子级的index
|
||
|
||
console.log('res', res);
|
||
// 防止行号出现问题 这里加上日期
|
||
res.forEach((item: any) => {
|
||
item.Statistics_Date = event?.Statistics_Date
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
subItem.Statistics_Date = event?.Statistics_Date
|
||
if (subItem.children && subItem.children.length > 0) {
|
||
subItem.children.forEach((thirdItem: any) => {
|
||
thirdItem.Statistics_Date = event?.Statistics_Date
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
const tableList: any = JSON.parse(JSON.stringify(tableData))
|
||
tableList.forEach((item: any) => {
|
||
if (item.Statistics_Date === event.Statistics_Date && item.index === event.index) {
|
||
item.children = res
|
||
}
|
||
})
|
||
setTableData(tableList)
|
||
}
|
||
removeLoadingRow(`${event.Statistics_Date}-${event.index}-${event.SPRegionType_ID}-${event.SPRegionType_Name}-${event.Serverpart_ID}-${event.Serverpart_Name}-${event.ServerpartShop_Name}`)
|
||
setColumnsLoading(false)
|
||
}
|
||
|
||
|
||
}
|
||
}}
|
||
// rowClassName={(record) => expandRow?.includes(record?.ServerpartShop_Code) && !record?.Serverpart_ID ? 'expanded' : ''}
|
||
// expandable={
|
||
// {
|
||
// rowExpandable: () => true,
|
||
// defaultExpandedRowKeys: ['0-000'],
|
||
// indentSize: 0,
|
||
// expandRowByClick: true,
|
||
// defaultExpandAllRows: true,
|
||
// onExpand: (expanded, record) => {
|
||
// if (expanded) {
|
||
// setExpandRow([...expandRow, record.ServerpartShop_Code])
|
||
// } else {
|
||
// const nowData = expandRow?.reduce((p: string[], c) => {
|
||
// if (c !== record?.ServerpartShop_Code) {
|
||
// p.push(c)
|
||
// }
|
||
// return p
|
||
// }, [])
|
||
// setExpandRow(nowData || [])
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
style={{ backgroundColor: "#ffffff", width: '100%' }}
|
||
tableExtraRender={
|
||
(_, data) => {
|
||
if (data) {
|
||
const reduceData = data.reduce((p: {
|
||
Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
|
||
Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
|
||
}, currentValue: MobilePayRoyaltyModel) => {
|
||
const previousValue = { ...p }
|
||
previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
|
||
previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
|
||
currentValue.Account_Price).format('0.00')).value() || 0;
|
||
previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
|
||
currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
|
||
previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
|
||
currentValue.Ticket_Fee).format('0.00')).value() || 0;
|
||
previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
|
||
currentValue.Royalty_Price).format('0.00')).value() || 0;
|
||
previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
|
||
currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
|
||
previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
|
||
currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
|
||
return previousValue
|
||
}, {
|
||
Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
|
||
Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
|
||
});
|
||
// setReduceTableData(reduceData)
|
||
// const [start, end] =
|
||
// activeKey === "2" ?
|
||
// ''
|
||
// : formRef.current?.getFieldValue('search_date')
|
||
// setTableStart(start)
|
||
// setTableEnd(end)
|
||
|
||
// const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
|
||
// setTableDiffDays(diffDays)
|
||
return <div style={{ paddingLeft: 24 }} className={'YDRevenue'}>
|
||
<Row>
|
||
<Col span={24}>
|
||
<Descriptions
|
||
title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>业主分润</Text>}
|
||
size="small" className="commity-sale-description" column={4}
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
|
||
style={{ marginBottom: 16 }}
|
||
>
|
||
<Descriptions.Item label="">
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>到账金额：</span>
|
||
<div style={{ display: 'flex', alignItems: 'center', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(reduceData.Royalty_Price).format('0,0.00')}</span>
|
||
</div>
|
||
</div>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="">
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>分润项目：</span>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(allProjectSum).format('0,0')}</span>
|
||
</div>
|
||
</div>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="项目到账">{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="差额">{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item>
|
||
</Descriptions>
|
||
</Col>
|
||
</Row>
|
||
{/* <Descriptions */}
|
||
{/* title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>分润项目合计</Text>} */}
|
||
{/* size="small" column={4} */}
|
||
{/* className="commity-sale-description" */}
|
||
{/* contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }} */}
|
||
{/* > */}
|
||
{/* */}
|
||
{/* /!* <Descriptions.Item label="银行到账">¥{numeral(reduceData.Royalty_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* /!* <Descriptions.Item label="项目到账">¥{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* /!* <Descriptions.Item label="分润差额">¥{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* </Descriptions> */}
|
||
{/* <Descriptions */}
|
||
{/* size="small" className="commity-sale-description" column={5} */}
|
||
{/* contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}> */}
|
||
{/* { */}
|
||
{/* activeKey==='1'? */}
|
||
{/* <Descriptions.Item label="统计时间">{`${moment(start).format('YYYY/MM/DD')}-${moment(end).format('YYYY/MM/DD')} `} */}
|
||
{/* <Text type="secondary">( 共{numeral(diffDays).format('0')}日 )</Text> */}
|
||
{/* </Descriptions.Item>: */}
|
||
{/* <Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item> */}
|
||
{/* } */}
|
||
{/* </Descriptions> */}
|
||
|
||
{/* { */}
|
||
{/* noShopList && noShopList.length>0? */}
|
||
{/* <WarningTwoTone style={{cursor:'pointer'}} onClick={async ()=>{ */}
|
||
{/* setShowWarningDrawer(true) */}
|
||
{/* }}/>:'' */}
|
||
{/* } */}
|
||
</div>
|
||
}
|
||
return <></>
|
||
}
|
||
}
|
||
bordered
|
||
columns={columns}
|
||
headerTitle={<PageTitleBox props={props} />}
|
||
toolbar={{
|
||
actions: [
|
||
<div>
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-accountMonthlyExternalHideBox"
|
||
filename={`移动支付分账报表_${moment().format('YYYY_MM_DD')}`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>
|
||
<img style={{ cursor: 'pointer', width: '20px', height: '20px' }} onClick={(e) => {
|
||
console.log('e', e)
|
||
setShowNotice(!showNotice)
|
||
setNoticeY(e.clientY)
|
||
setNoticeX(e.clientX)
|
||
}} src={'https://eshangtech.com/ShopICO/ahyd-BID/newIndex3/noticeIcon.svg'} />
|
||
<Typography.Text type="secondary">单位：元</Typography.Text>
|
||
{/* <ReactToPrint
|
||
trigger={() => (
|
||
<Button style={{ margin: '0 8px' }} key="printout" type="default">
|
||
打印
|
||
</Button>
|
||
)}
|
||
content={() => {
|
||
if (printOut) {
|
||
const content: HTMLElement | Node | undefined = printOut?.getElementsByClassName('ant-card-body')[0]
|
||
const extra: HTMLElement | Node | undefined = printOut?.getElementsByClassName('ant-pro-table-extra')[0]
|
||
const innerText = `统计时间：${moment().format('YYYY/MM/DD')}`;
|
||
|
||
const ele = printOutBody([extra ? extra.cloneNode(true) : '', content ? content.cloneNode(true) : ''], innerText);
|
||
|
||
return ele
|
||
}
|
||
return ''
|
||
}}
|
||
/> */}
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
style={{ marginLeft: '8px' }}
|
||
loading={bigExportLoadingBtn}
|
||
onClick={async (e) => {
|
||
if (reqBigDetailList && reqBigDetailList.length > 0) {
|
||
setShowExportTable(true)
|
||
setBigExportLoadingBtn(true)
|
||
setTimeout(() => {
|
||
exportExternalHideTable(e)
|
||
}, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出excel
|
||
</Button>
|
||
</div>,
|
||
|
||
],
|
||
}}
|
||
// scroll={{ y: 330}}
|
||
pagination={false}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 项目数据编辑弹出框 */}
|
||
<ProjectEditor parentTableRef={actionRef} currentRecord={currentRow} modalVisible={showNewAdd}
|
||
handleModalVisible={setShowNewAdd} currentServerpartId={currentServerpartId}
|
||
currentSPRegionTypeID={currentSPRegionTypeID} />
|
||
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer"
|
||
visible={showNewDetail} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||
setCurrentRow(undefined);
|
||
setShowNewDetail(false);
|
||
}}
|
||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||
closable={false}
|
||
>
|
||
{/* 抽屉打开时 加载项目详情组件 */}
|
||
{showNewDetail &&
|
||
<ProjectDetail tabActive={'5'} id={currentRow?.BUSINESSPROJECT_ID} businessType={currentRow?.BUSINESS_TYPE}
|
||
showType={'edit'}></ProjectDetail>}
|
||
</Drawer>
|
||
|
||
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer"
|
||
visible={showDetail} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||
setShowDetail(false);
|
||
setCurrentRow(undefined)
|
||
}}
|
||
bodyStyle={{ backgroundColor: "#fff", padding: 0 }}
|
||
closable={false}
|
||
destroyOnClose
|
||
>
|
||
<ProTable
|
||
rowKey={(record) => {
|
||
return `${record.SPRegionType_ID}-${record.SPRegionType_Name}-${record.Serverpart_ID}-${record.Serverpart_Name}-${record.index}-${record.ServerpartShop_Name}`
|
||
}}
|
||
columns={columns}
|
||
bordered
|
||
request={async (params, sorter) => {
|
||
const searchText = formRef.current?.getFieldValue('searchText')
|
||
const req: any = {
|
||
StartDate: currentRow?.Statistics_Date,
|
||
EndDate: currentRow?.Statistics_Date,
|
||
ServerpartIds: selectedId,
|
||
Keyword: searchText || ''
|
||
}
|
||
const data = await handleGetRoyaltyReport(req)
|
||
console.log('data321312', data);
|
||
const exportData: any = JSON.parse(JSON.stringify(data.data))
|
||
exportData.forEach((item: any) => {
|
||
if (item.children && item.children.length > 0) {
|
||
item.children.forEach((subItem: any) => {
|
||
subItem.SPRegionType_Name = ''
|
||
if (subItem.children && subItem.children.length > 0) {
|
||
subItem.children.forEach((thirdItem: any) => {
|
||
thirdItem.SPRegionType_Name = ''
|
||
thirdItem.Serverpart_Name = ''
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
setReqDetailList(exportData);
|
||
return data
|
||
}}
|
||
tableExtraRender={
|
||
(_, data) => {
|
||
if (data) {
|
||
const reduceData = data.reduce((p: {
|
||
Ticket_Price: number, Account_Price: number, SubRoyalty_Price: number, Ticket_Fee: number,
|
||
Royalty_Price: number, RoyaltyProject_Price: number, Royalty_DiffPrice: number
|
||
}, currentValue: MobilePayRoyaltyModel) => {
|
||
const previousValue = { ...p }
|
||
previousValue.Ticket_Price = numeral(numeral(previousValue.Ticket_Price + currentValue.Ticket_Price).format('0.00')).value() || 0;
|
||
previousValue.Account_Price = numeral(numeral(previousValue.Account_Price +
|
||
currentValue.Account_Price).format('0.00')).value() || 0;
|
||
previousValue.SubRoyalty_Price = numeral(numeral(previousValue.SubRoyalty_Price +
|
||
currentValue.SubRoyalty_Price).format('0.00')).value() || 0;
|
||
previousValue.Ticket_Fee = numeral(numeral(previousValue.Ticket_Fee +
|
||
currentValue.Ticket_Fee).format('0.00')).value() || 0;
|
||
previousValue.Royalty_Price = numeral(numeral(previousValue.Royalty_Price +
|
||
currentValue.Royalty_Price).format('0.00')).value() || 0;
|
||
previousValue.RoyaltyProject_Price = numeral(numeral(previousValue.RoyaltyProject_Price +
|
||
currentValue.RoyaltyProject_Price).format('0.00')).value() || 0;
|
||
previousValue.Royalty_DiffPrice = numeral(numeral(previousValue.Royalty_DiffPrice +
|
||
currentValue.Royalty_DiffPrice).format('0.00')).value() || 0;
|
||
return previousValue
|
||
}, {
|
||
Ticket_Price: 0, Account_Price: 0, SubRoyalty_Price: 0,
|
||
Ticket_Fee: 0, Royalty_Price: 0, RoyaltyProject_Price: 0, Royalty_DiffPrice: 0
|
||
});
|
||
// setReduceTableData(reduceData)
|
||
// const [start, end] =
|
||
// activeKey === "2" ?
|
||
// ''
|
||
// : formRef.current?.getFieldValue('search_date')
|
||
// setTableStart(start)
|
||
// setTableEnd(end)
|
||
|
||
// const diffDays = moment.duration(moment(end).diff(moment(start))).asDays() + 1
|
||
// setTableDiffDays(diffDays)
|
||
return <div style={{ paddingLeft: 24 }} className={'YDRevenue'}>
|
||
<Row>
|
||
<Col span={24}>
|
||
<Descriptions
|
||
title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>业主分润</Text>}
|
||
size="small" className="commity-sale-description" column={4}
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
|
||
style={{ marginBottom: 16 }}
|
||
>
|
||
<Descriptions.Item label="">
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>到账金额：</span>
|
||
<div style={{ display: 'flex', alignItems: 'center', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}>¥</span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(reduceData.Royalty_Price).format('0,0.00')}</span>
|
||
</div>
|
||
</div>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="">
|
||
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||
<span style={{
|
||
color: 'rgba(0, 0, 0, 0.45)',
|
||
fontSize: '14px',
|
||
fontWeight: 'normal'
|
||
}}>分润项目：</span>
|
||
<div style={{ display: 'flex', alignItems: 'flex-end', height: '22px' }}>
|
||
<span style={{ fontWeight: 'normal', marginRight: '2px' }}></span>
|
||
<span style={{
|
||
fontSize: '28px',
|
||
color: '#faad14',
|
||
fontWeight: 500,
|
||
lineHeight: '28px'
|
||
}}>{numeral(allProjectSum).format('0,0')}</span>
|
||
</div>
|
||
</div>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="项目到账">{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="差额">{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item>
|
||
</Descriptions>
|
||
</Col>
|
||
</Row>
|
||
{/* <Descriptions */}
|
||
{/* title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>分润项目合计</Text>} */}
|
||
{/* size="small" column={4} */}
|
||
{/* className="commity-sale-description" */}
|
||
{/* contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }} */}
|
||
{/* > */}
|
||
{/* */}
|
||
{/* /!* <Descriptions.Item label="银行到账">¥{numeral(reduceData.Royalty_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* /!* <Descriptions.Item label="项目到账">¥{numeral(reduceData.RoyaltyProject_Price).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* /!* <Descriptions.Item label="分润差额">¥{numeral(reduceData.Royalty_DiffPrice).format('0,0.00')}</Descriptions.Item> *!/ */}
|
||
{/* </Descriptions> */}
|
||
{/* <Descriptions */}
|
||
{/* size="small" className="commity-sale-description" column={5} */}
|
||
{/* contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}> */}
|
||
{/* { */}
|
||
{/* activeKey==='1'? */}
|
||
{/* <Descriptions.Item label="统计时间">{`${moment(start).format('YYYY/MM/DD')}-${moment(end).format('YYYY/MM/DD')} `} */}
|
||
{/* <Text type="secondary">( 共{numeral(diffDays).format('0')}日 )</Text> */}
|
||
{/* </Descriptions.Item>: */}
|
||
{/* <Descriptions.Item label="统计时间">{`${startTime}-${endTime} `}</Descriptions.Item> */}
|
||
{/* } */}
|
||
{/* </Descriptions> */}
|
||
|
||
{/* { */}
|
||
{/* noShopList && noShopList.length>0? */}
|
||
{/* <WarningTwoTone style={{cursor:'pointer'}} onClick={async ()=>{ */}
|
||
{/* setShowWarningDrawer(true) */}
|
||
{/* }}/>:'' */}
|
||
{/* } */}
|
||
</div>
|
||
}
|
||
return <></>
|
||
}
|
||
}
|
||
toolbar={{
|
||
actions: [
|
||
<div>
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-accountMonthly"
|
||
filename={`移动支付分账报表_${currentRow?.Statistics_Date || ''}`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
onClick={async (e) => {
|
||
if (reqDetailList && reqDetailList.length > 0) {
|
||
setShowExportTable(true)
|
||
setTimeout(() => {
|
||
exportTable(e)
|
||
}, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出excel
|
||
</Button>
|
||
</div>
|
||
]
|
||
}}
|
||
/>
|
||
{/* {showDetail && <ProTable
|
||
rowKey="Pay_Date"
|
||
headerTitle=""
|
||
actionRef={actionRef}
|
||
search={{span: 6}}
|
||
bordered={true}
|
||
request={async (params, sorter) => {
|
||
// 排序字段
|
||
const sortstr = Object.keys(sorter).map(n => {
|
||
const value = sorter[n]
|
||
return value ? `${n} ${value.replace('end', '')}` : ''
|
||
})
|
||
const data = await getList({
|
||
...params, ServerpartShop_ID: currentRow?.ServerpartShop_ID,
|
||
Serverpart_IDS: '', ServerpartShop_IDS: '',
|
||
Pay_Date: currentRow?.Statistics_Date, Record_State: '1,2',
|
||
SortStr: sortstr.length ? sortstr.toString() : '',
|
||
});
|
||
return data;
|
||
}}
|
||
columns={columnsRecord}
|
||
pagination={{defaultPageSize: 10}}
|
||
options={false}
|
||
/>} */}
|
||
</Drawer>
|
||
{/* 显示异常的抽屉 */}
|
||
<Drawer
|
||
width={'25%'}
|
||
visible={showWarningDrawer}
|
||
onClose={() => {
|
||
setShowWarningDrawer(false);
|
||
}}
|
||
>
|
||
{
|
||
noShopList && noShopList.length > 0 ?
|
||
<>
|
||
{
|
||
noShopList.map((item: any) => {
|
||
return <div>
|
||
<span style={{ minWidth: '80px', marginRight: '10px' }}>{item.ico}</span>
|
||
<span style={{ minWidth: '80px', marginRight: '10px' }}>{item.key}</span>
|
||
<span style={{ minWidth: '80px' }}>{item.label}</span>
|
||
</div>
|
||
})
|
||
}
|
||
</> : ''
|
||
}
|
||
</Drawer>
|
||
{/* 显示流水 */}
|
||
<Drawer
|
||
width={'80%'}
|
||
visible={flowDrawer}
|
||
onClose={() => {
|
||
setFlowDrawer(false);
|
||
setCurrentRow(undefined)
|
||
}}
|
||
destroyOnClose
|
||
>
|
||
<ProTable
|
||
rowKey="SELLMASTER_CODE"
|
||
headerTitle={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }} strong>销售流水明细</Text>}
|
||
formRef={formRef2}
|
||
actionRef={actionRef}
|
||
search={{ span: 6 }}
|
||
request={async (params) => {
|
||
console.log('params', params);
|
||
let shopId: string = ''
|
||
if (currentRow?.type === 'shop') {
|
||
shopId = currentRow?.ServerpartShop_ID
|
||
} else if (currentRow?.children && currentRow?.children.length > 0) {
|
||
currentRow?.children.forEach((item: any) => {
|
||
if (shopId) {
|
||
shopId += `,${item.ServerpartShop_ID}`
|
||
} else {
|
||
shopId = item.ServerpartShop_ID
|
||
}
|
||
})
|
||
}
|
||
const data = await getYSSellMasterList({
|
||
...params,
|
||
SERVERPARTSHOP_ID: shopId || null,
|
||
// SELLMASTER_DATE :params.StartDate,
|
||
// SELLMASTER_DATE_Start:params.StartDate,
|
||
// SELLMASTER_DATE_End:params.EndDate
|
||
});
|
||
setFlowDetailList(data.data);
|
||
return data;
|
||
}}
|
||
bordered
|
||
columns={flowColumns}
|
||
tableExtraRender={
|
||
(_, data) => {
|
||
|
||
if (data) {
|
||
const reduceData = data.reduce((
|
||
p: {
|
||
SELLMASTER_OFFPRICE: number,
|
||
SELLMASTER_COUNT: number,
|
||
SELLMASTER_AMOUNT: number,
|
||
MACHINECODE: string[],
|
||
payway: {},
|
||
mobilePay: {}
|
||
},
|
||
currentValue: any) => {
|
||
const previousValue = { ...p }
|
||
previousValue.SELLMASTER_COUNT += currentValue.SELLMASTER_COUNT || 0; // 销售数量
|
||
previousValue.SELLMASTER_OFFPRICE += currentValue.SELLMASTER_OFFPRICE || 0; // 优惠金额
|
||
previousValue.SELLMASTER_AMOUNT += currentValue.SELLMASTER_AMOUNT || 0; // 实收金额
|
||
|
||
if (currentValue.PAYMENT_TYPE === 1010 || currentValue.PAYMENT_TYPE === 1020) {
|
||
previousValue.payway['移动'] += currentValue.SELLMASTER_AMOUNT
|
||
if (!previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT]) { // 移动支付方式
|
||
previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT] = 0
|
||
}
|
||
previousValue.mobilePay[currentValue.PAYMENT_TYPE_TEXT] += currentValue.SELLMASTER_AMOUNT
|
||
} else {
|
||
if (!previousValue.payway[currentValue.PAYMENT_TYPE_TEXT]) { // 支付方式
|
||
previousValue.payway[currentValue.PAYMENT_TYPE_TEXT] = 0
|
||
}
|
||
previousValue.payway[currentValue.PAYMENT_TYPE_TEXT] += currentValue.SELLMASTER_AMOUNT
|
||
}
|
||
if (!previousValue.MACHINECODE.includes(currentValue.MACHINECODE)) {
|
||
|
||
previousValue.MACHINECODE.push(currentValue.MACHINECODE); // 收银机号
|
||
}
|
||
return previousValue
|
||
}, {
|
||
SELLMASTER_OFFPRICE: 0,
|
||
SELLMASTER_COUNT: 0,
|
||
SELLMASTER_AMOUNT: 0,
|
||
MACHINECODE: [],
|
||
payway: { '移动': 0, '现金': 0, },
|
||
mobilePay: {}
|
||
});
|
||
|
||
return <div style={{ paddingLeft: 24 }}>
|
||
<Descriptions
|
||
title={<Text type="success" style={{ color: "#1890ff", fontSize: 14 }}>销售流水汇总</Text>}
|
||
size="small" column={5}
|
||
className="commity-sale-description"
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}
|
||
>
|
||
<Descriptions.Item className='mobileMoney' label="移动支付">
|
||
¥<span className='mobileMoneyText'>{numeral(reduceData.payway['移动']).format('0,0.00')}</span>
|
||
</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="现金支付">¥{numeral(reduceData.payway['现金']).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="实收金额">¥{numeral(reduceData.SELLMASTER_AMOUNT).format('0,0.00')}</Descriptions.Item>
|
||
</Descriptions>
|
||
<Descriptions size="small" className="commity-sale-description" column={5}
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}>
|
||
<Descriptions.Item label="客单数量">{numeral(data.length).format('0,0')}<Text
|
||
type="secondary"> 笔</Text></Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="优惠金额">¥{numeral(reduceData.SELLMASTER_OFFPRICE).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item label="收银机">{numeral(reduceData.MACHINECODE.length).format('0,0')}<Text
|
||
type="secondary"> 台</Text></Descriptions.Item>
|
||
</Descriptions>
|
||
<Descriptions size="small" className="commity-sale-description" column={5}
|
||
contentStyle={{ fontWeight: "bolder" }} labelStyle={{ color: "#00000073" }}>
|
||
<Descriptions.Item label="销售数量">{numeral(reduceData.SELLMASTER_COUNT).format('0,0')}<Text
|
||
type="secondary"> 件</Text></Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="客单均价">¥{numeral(reduceData.SELLMASTER_AMOUNT / data.length).format('0,0.00')}</Descriptions.Item>
|
||
<Descriptions.Item
|
||
label="商品均价">¥{numeral(reduceData.SELLMASTER_AMOUNT / reduceData.SELLMASTER_COUNT).format('0,0.00')}</Descriptions.Item>
|
||
</Descriptions>
|
||
</div>
|
||
|
||
}
|
||
return <></>
|
||
}
|
||
}
|
||
onRow={(record) => {
|
||
return {
|
||
|
||
onClick: () => {
|
||
setCurrentRow(record)
|
||
setVisible(true)
|
||
}
|
||
}
|
||
}}
|
||
pagination={{ defaultPageSize: 10 }}
|
||
/>
|
||
</Drawer>
|
||
|
||
{/* 流水悬浮框 */}
|
||
<Modal
|
||
title={currentRow ? `${currentRow?.SERVERPART_NAME + currentRow?.SHOPNAME}销售流水明细` : '销售流水明细'}
|
||
centered
|
||
visible={visible}
|
||
onOk={() => setVisible(false)}
|
||
onCancel={() => setVisible(false)}
|
||
width={1024}
|
||
bodyStyle={{ padding: 0 }}
|
||
|
||
>
|
||
{currentRow && <FlowDetail id={currentRow?.SELLMASTER_CODE} />}
|
||
</Modal>
|
||
|
||
{/* 差额的抽屉 */}
|
||
<Drawer
|
||
width={'80%'}
|
||
visible={differenceDrawer}
|
||
onClose={() => {
|
||
setDifferenceDrawer(false);
|
||
setCurrentRow(undefined)
|
||
}}
|
||
destroyOnClose
|
||
>
|
||
<DifferenceAmount onShow={differenceDrawer} parentRow={currentRow} searchParams={{
|
||
StartDate: currentRow?.Statistics_Date,
|
||
EndDate: currentRow?.Statistics_Date,
|
||
}} />
|
||
</Drawer>
|
||
{/* 有计算公式的流水 */}
|
||
<Drawer
|
||
width={1000}
|
||
visible={haveFlowDrawer}
|
||
className={'drawerBox'}
|
||
onClose={() => {
|
||
setCurrentRow(undefined);
|
||
setHaveFlowDrawer(false);
|
||
}}
|
||
destroyOnClose
|
||
closable={false}
|
||
>
|
||
<FlowDrawer drawerLoading={drawerLoading} currentRow={currentRow} setDrawerLoading={setDrawerLoading}
|
||
isFirstFloorClick={isFirstFloorClick}
|
||
/>
|
||
</Drawer>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default connect(({ user }: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(ReportTable);
|