update
This commit is contained in:
parent
4e6fe8ef95
commit
42ecaa9eb3
@ -121,6 +121,17 @@ export default [
|
||||
name: 'reports.settlementSummaryTable',
|
||||
component: './reports/settlementSummaryTable/index',
|
||||
},
|
||||
{
|
||||
path: 'reports/OnlineSettlementOfProjects',
|
||||
name: 'reports.OnlineSettlementOfProjects',
|
||||
component: './reports/OnlineSettlementOfProjects/index',
|
||||
},
|
||||
|
||||
{
|
||||
path: 'reports/settlementProjectForNextMonth',
|
||||
name: 'reports.settlementProjectForNextMonth',
|
||||
component: './reports/settlementProjectForNextMonth/index',
|
||||
},
|
||||
{
|
||||
path: 'reports/ConfirmationDifference',
|
||||
name: 'reports.ConfirmationDifference',
|
||||
@ -1034,6 +1045,12 @@ export default [
|
||||
name: 'MallSummaryStatistics',
|
||||
component: './travelMember/MallSummaryStatistics/index'
|
||||
},
|
||||
// 供应商订单统计
|
||||
{
|
||||
path: 'SupplierOrderStatistics',
|
||||
name: 'SupplierOrderStatistics',
|
||||
component: './travelMember/SupplierOrderStatistics/index'
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
|
||||
@ -90,13 +90,6 @@ const CardInformationManager: React.FC<{ currentUser: CurrentUser }> = (props) =
|
||||
valueType: 'index',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: "优惠券类型",
|
||||
dataIndex: "COUPON_TYPES",
|
||||
valueType: 'select',
|
||||
valueEnum: COUPONTYPEObj,
|
||||
hideInTable: true,
|
||||
},
|
||||
{
|
||||
title: "卡券名称",
|
||||
dataIndex: "COUPON_NAME",
|
||||
@ -115,6 +108,23 @@ const CardInformationManager: React.FC<{ currentUser: CurrentUser }> = (props) =
|
||||
}}>{record?.COUPON_NAME}</a> : "-"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "优惠券类型",
|
||||
width: 120,
|
||||
dataIndex: "COUPON_TYPES",
|
||||
valueType: 'select',
|
||||
valueEnum: COUPONTYPEObj,
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: "优惠券类型",
|
||||
width: 120,
|
||||
dataIndex: "COUPON_TYPE",
|
||||
valueType: 'select',
|
||||
valueEnum: COUPONTYPEObj,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: "运营单位",
|
||||
dataIndex: "OPERATINGUNIT_NAME",
|
||||
@ -330,7 +340,7 @@ const CardInformationManager: React.FC<{ currentUser: CurrentUser }> = (props) =
|
||||
setFileList([])
|
||||
}}
|
||||
confirmLoading={modalLoading}
|
||||
width={900}
|
||||
width={1400}
|
||||
bodyStyle={{
|
||||
height: '700px', // 你可以根据需要调整高度
|
||||
overflowY: 'auto',
|
||||
|
||||
@ -133,7 +133,7 @@ const MerchantInformation: React.FC<{ currentUser: CurrentUser | undefined }> =
|
||||
dataIndex: 'searchText',
|
||||
title: '查询内容',
|
||||
hideInTable: true,
|
||||
fieldProp: {
|
||||
fieldProps: {
|
||||
placeholder: "请输入商户名称"
|
||||
}
|
||||
},
|
||||
@ -169,6 +169,7 @@ const MerchantInformation: React.FC<{ currentUser: CurrentUser | undefined }> =
|
||||
fieldProps: {
|
||||
treeData: formatTreeData(BUSINESSTRADEYNTree), // 设置树形数据源
|
||||
showSearch: true, // 启用搜索
|
||||
allowClear: true,
|
||||
treeNodeFilterProp: 'label', // 按 label 过滤
|
||||
treeDefaultExpandAll: true,
|
||||
filterTreeNode: (input: any, treeNode: any) => {
|
||||
@ -926,7 +927,7 @@ const MerchantInformation: React.FC<{ currentUser: CurrentUser | undefined }> =
|
||||
const req = {
|
||||
searchParameter: {
|
||||
SERVERPART_IDS: selectedId,
|
||||
SHOPTRADES: params?.SHOPTRADES,
|
||||
SHOPTRADES: params?.SHOPTRADE || "",
|
||||
ISVALID: 1,
|
||||
ISSHOW: params?.ISSHOW === "-1" ? "" : params?.ISSHOW
|
||||
},
|
||||
|
||||
@ -163,6 +163,11 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
BayonetINClYear: item.BayonetINC.lYearData,
|
||||
BayonetINCcrease: item.BayonetINC.increaseData,
|
||||
BayonetINCRate: item.BayonetINC.increaseRate,
|
||||
|
||||
SectionFlowINCINCCcur: item.SectionFlowINC.curYearData,
|
||||
SectionFlowINClYear: item.SectionFlowINC.lYearData,
|
||||
SectionFlowINCcrease: item.SectionFlowINC.increaseData,
|
||||
SectionFlowINCRate: item.SectionFlowINC.increaseRate,
|
||||
})
|
||||
// list.push({
|
||||
// SPRegionTypeId:item.SPRegionTypeId,
|
||||
@ -245,6 +250,8 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
dataIndex: 'ServerpartName',
|
||||
aiDataIndex: "ServerpartName",
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return <a style={{ cursor: 'pointer' }} onClick={() => {
|
||||
@ -421,6 +428,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.curYear}年`,
|
||||
dataIndex: 'RevenueINCcur',
|
||||
aiDataIndex: "RevenueINCcur",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.RevenueINCcur - b.RevenueINCcur,
|
||||
@ -430,6 +438,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.compareYear}年`,
|
||||
dataIndex: 'RevenueINClYear',
|
||||
aiDataIndex: "RevenueINClYear",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.RevenueINClYear - b.RevenueINClYear,
|
||||
@ -439,6 +448,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增长',
|
||||
dataIndex: 'RevenueINCcrease',
|
||||
aiDataIndex: "RevenueINCcrease",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
@ -449,6 +459,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增幅',
|
||||
dataIndex: 'RevenueINCRate',
|
||||
aiDataIndex: "RevenueINCRate",
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
sorter: (a, b) => a.RevenueINCRate - b.RevenueINCRate,
|
||||
@ -471,6 +482,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.curYear}年`,
|
||||
dataIndex: 'AccountINCCcur',
|
||||
aiDataIndex: "AccountINCCcur",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.AccountINCCcur - b.AccountINCCcur,
|
||||
@ -480,6 +492,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.compareYear}年`,
|
||||
dataIndex: 'AccountINClYear',
|
||||
aiDataIndex: "AccountINClYear",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.AccountINClYear - b.AccountINClYear,
|
||||
@ -489,6 +502,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增长',
|
||||
dataIndex: 'AccountINCcrease',
|
||||
aiDataIndex: "AccountINCcrease",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
@ -498,6 +512,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增幅',
|
||||
dataIndex: 'AccountINCRate',
|
||||
aiDataIndex: "AccountINCRate",
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
sorter: (a, b) => a.AccountINCRate - b.AccountINCRate,
|
||||
@ -520,6 +535,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.curYear}年`,
|
||||
dataIndex: 'BayonetINCINCCcur',
|
||||
aiDataIndex: "BayonetINCINCCcur",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.BayonetINCINCCcur - b.BayonetINCINCCcur,
|
||||
@ -529,6 +545,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: `${showCurrentFestivalObj?.compareYear}年`,
|
||||
dataIndex: 'BayonetINClYear',
|
||||
aiDataIndex: "BayonetINClYear",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.BayonetINClYear - b.BayonetINClYear,
|
||||
@ -538,6 +555,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增长',
|
||||
dataIndex: 'BayonetINCcrease',
|
||||
aiDataIndex: "BayonetINCcrease",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
@ -547,6 +565,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
title: '增幅',
|
||||
dataIndex: 'BayonetINCRate',
|
||||
aiDataIndex: "BayonetINCRate",
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
sorter: (a, b) => a.BayonetINCRate - b.BayonetINCRate,
|
||||
@ -559,6 +578,59 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '断面流量',
|
||||
dataIndex: 'SectionFlowINC',
|
||||
aiDataIndex: "SectionFlowINC",
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: `${showCurrentFestivalObj?.curYear}年`,
|
||||
dataIndex: 'SectionFlowINCINCCcur',
|
||||
aiDataIndex: "SectionFlowINCINCCcur",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.SectionFlowINCINCCcur - b.SectionFlowINCINCCcur,
|
||||
hideInSearch: true
|
||||
},
|
||||
{
|
||||
title: `${showCurrentFestivalObj?.compareYear}年`,
|
||||
dataIndex: 'SectionFlowINClYear',
|
||||
aiDataIndex: "SectionFlowINClYear",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
sorter: (a, b) => a.SectionFlowINClYear - b.SectionFlowINClYear,
|
||||
hideInSearch: true
|
||||
},
|
||||
{
|
||||
title: '增长',
|
||||
dataIndex: 'SectionFlowINCcrease',
|
||||
aiDataIndex: "SectionFlowINCcrease",
|
||||
width: 120,
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
sorter: (a, b) => a.SectionFlowINCcrease - b.SectionFlowINCcrease,
|
||||
},
|
||||
{
|
||||
title: '增幅',
|
||||
dataIndex: 'SectionFlowINCRate',
|
||||
aiDataIndex: "SectionFlowINCRate",
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
sorter: (a, b) => a.SectionFlowINCRate - b.SectionFlowINCRate,
|
||||
render: (_, record) => {
|
||||
return <span style={{ color: record.SectionFlowINCRate > 0 ? '#e83944' : record.SectionFlowINCRate < 0 ? '#0e9976' : '' }}>
|
||||
{record.SectionFlowINCRate > 0 ? '+' : record.SectionFlowINCRate < 0 ? '' : ''}
|
||||
{record.SectionFlowINCRate ? `${record.SectionFlowINCRate}%` : ''}
|
||||
</span>
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
const exportColumns: any = [
|
||||
@ -904,7 +976,7 @@ const SpringFestival: React.FC<{ currentUser?: CurrentUser }> = (props) => {
|
||||
id={'table-to-xls'}
|
||||
columns={columns}
|
||||
bordered={true}
|
||||
scroll={{ y: 'calc(100vh - 450px)' }}
|
||||
scroll={{ x: "100%", y: 'calc(100vh - 450px)' }}
|
||||
pagination={false}
|
||||
dataSource={tableData}
|
||||
request={async (params) => {
|
||||
|
||||
50
src/pages/reports/OnlineSettlementOfProjects/index.less
Normal file
50
src/pages/reports/OnlineSettlementOfProjects/index.less
Normal file
@ -0,0 +1,50 @@
|
||||
.summaryDrawer{
|
||||
.ant-drawer-content-wrapper{
|
||||
.ant-drawer-content{
|
||||
.ant-drawer-wrapper-body{
|
||||
.ant-drawer-body{
|
||||
.detailTable{
|
||||
.ant-pro-card{
|
||||
.ant-pro-card-body{
|
||||
.ant-pro-table-alert{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td{
|
||||
mso-number-format: '"0.00"'
|
||||
}
|
||||
.exportTable{
|
||||
.ant-pro-card{
|
||||
.ant-pro-card-body{
|
||||
.ant-table-wrapper{
|
||||
.ant-spin-nested-loading{
|
||||
.ant-spin-container{
|
||||
.ant-table{
|
||||
.ant-table-container{
|
||||
.ant-table-content{
|
||||
table{
|
||||
.ant-table-tbody{
|
||||
tr{
|
||||
td{
|
||||
mso-number-format: '"0.00"'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
891
src/pages/reports/OnlineSettlementOfProjects/index.tsx
Normal file
891
src/pages/reports/OnlineSettlementOfProjects/index.tsx
Normal file
@ -0,0 +1,891 @@
|
||||
import { connect, useRequest } 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 { Drawer, FormInstance } from "antd";
|
||||
import { Button, message, Space, Spin, Tree } from "antd";
|
||||
import { getServerpartTree, handleFormatNumber } 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 { handleGetAnnualAccountList, handleGetTableRevenueRecognition } from "../ShopExpenseDetail/service";
|
||||
import moment from 'moment'
|
||||
import { wrapTreeNode } from "@/utils/format";
|
||||
import YearExamineDetailTable from "../settlementAccount/component/YearExamineDetailTable";
|
||||
import './index.less'
|
||||
import * as XLSX from 'xlsx';
|
||||
import session from "@/utils/session";
|
||||
import { handleGetAPPROVALROUTEList } from "@/pages/Setting/serviceConfig/service";
|
||||
|
||||
const OnlineSettlementOfProjects: 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())
|
||||
let SETTLEMENT_MODESObj = session.get('SETTLEMENT_MODESObj')
|
||||
|
||||
// 树相关的属性和方法
|
||||
const [selectedId, setSelectedId] = useState<string>()
|
||||
// 导出的加载效果
|
||||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||||
// 是否显示打印的表格
|
||||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||||
// 查询的条件
|
||||
const [searchParams, setSearchParams] = useState<any>()
|
||||
// 点击门店显示项目应收拆分数据
|
||||
const [showDrawer, setShowDrawer] = useState<any>()
|
||||
// 当前点击行的数据
|
||||
const [currentRow, setCurrentRow] = useState<any>()
|
||||
// 是否显示批量月度审批的按钮
|
||||
const [isShowMonthBtn, setIsShowMonthBtn] = useState<boolean>(false)
|
||||
// 业务环节的枚举
|
||||
const [APPROVALROUTESTATEObj, setAPPROVALROUTESTATEObj] = useState<any>()
|
||||
|
||||
const [columnsStateMap, setColumnsStateMap] = useState<any>({
|
||||
SettlementModes: { show: false },
|
||||
SwitchDate: { show: false },
|
||||
CASHPAY_AMOUNT: { show: false },
|
||||
MOBILEPAY_AMOUNT: { show: false },
|
||||
GUARANTEERATIOAMOUNT: { show: false },
|
||||
BANKACCOUNT_AMOUNT: { show: false },
|
||||
RECEIVABLEAMOUNT: { show: false },
|
||||
PAID_AMOUNT: { show: false },
|
||||
});
|
||||
|
||||
// 拿到业务环节的枚举
|
||||
const { loading: headerTitleLoading, data: tableHeaderObj } = useRequest(async () => {
|
||||
const req: any = {
|
||||
SearchParameter: {
|
||||
APPROVALROUTE_VALID: 1,
|
||||
OPERATION_TYPES: 11
|
||||
},
|
||||
SortStr: 'APPROVALROUTE_STATE asc',
|
||||
PageIndex: 1,
|
||||
PageSize: 999999
|
||||
}
|
||||
const data = await handleGetAPPROVALROUTEList(req)
|
||||
console.log('2222222', data);
|
||||
let obj: any = {}
|
||||
if (data && data.length > 0) {
|
||||
data.forEach((item: any) => {
|
||||
obj[item.APPROVALROUTE_STATE] = item.APPROVALROUTE_NAME
|
||||
})
|
||||
}
|
||||
|
||||
setAPPROVALROUTESTATEObj(obj)
|
||||
return []
|
||||
})
|
||||
|
||||
let settlementStateObj: any = {
|
||||
"9": "已结算",
|
||||
"0": "待结算",
|
||||
"-1": "提前退场",
|
||||
}
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '统计时间',
|
||||
dataIndex: 'search_date',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
hideInDescriptions: true,
|
||||
initialValue: [moment().startOf('y'), moment()],
|
||||
search: {
|
||||
transform: (value: any) => {
|
||||
return {
|
||||
StartDate: value[0],
|
||||
EndDate: value[1],
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: '统计日期',
|
||||
// dataIndex: 'StatisticsYear',
|
||||
// valueType: "date",
|
||||
// hideInTable: true,
|
||||
// hideInDescriptions: true,
|
||||
// initialValue: moment().subtract('1', 'month'),
|
||||
// // search: {
|
||||
// // transform: (value: any) => {
|
||||
// // return {
|
||||
// // StartDate: moment(value[0]).format('YYYYMM'),
|
||||
// // EndDate: moment(value[1]).format('YYYYMM'),
|
||||
// // };
|
||||
// // },
|
||||
// // },
|
||||
// fieldProps: {
|
||||
// picker: "year",
|
||||
// format: 'YYYY'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
title: "结算状态",
|
||||
dataIndex: 'SettlementState',
|
||||
valueType: 'select',
|
||||
hideInTable: true,
|
||||
valueEnum: {
|
||||
"9": "已结算",
|
||||
"1": "结算中",
|
||||
"0": "待结算",
|
||||
"-1": "提前退场",
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: "结算类型",
|
||||
dataIndex: 'SettlementType',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
"1": "线上",
|
||||
"2": "线下"
|
||||
},
|
||||
hideInTable: true
|
||||
},
|
||||
{
|
||||
title: "结算模式",
|
||||
dataIndex: 'SettlementModes',
|
||||
valueType: 'select',
|
||||
hideInTable: true,
|
||||
valueEnum: SETTLEMENT_MODESObj,
|
||||
fieldProps: {
|
||||
mode: 'multiple', // 开启多选模式
|
||||
},
|
||||
initialValue: ["3000", "4000"]
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>管理中心</div>,
|
||||
titleStr: '管理中心',
|
||||
dataIndex: 'SPREGIONTYPE_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>服务区</div>,
|
||||
titleStr: '服务区',
|
||||
dataIndex: 'SERVERPART_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>经营商户</div>,
|
||||
titleStr: '经营商户',
|
||||
dataIndex: 'MERCHANTS_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>门店</div>,
|
||||
titleStr: '门店',
|
||||
dataIndex: 'SERVERPARTSHOP_NAME',
|
||||
width: 150,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return record?.SERVERPARTSHOP_NAME ? <a onClick={() => {
|
||||
console.log('record', record);
|
||||
|
||||
setCurrentRow({
|
||||
...record,
|
||||
CLOSED_DATE: record?.ClosedDate,
|
||||
SHOPROYALTY_ID: record?.ShopRoyaltyId
|
||||
})
|
||||
setShowDrawer(true)
|
||||
}}>
|
||||
{record?.SERVERPARTSHOP_NAME || ""}
|
||||
</a> : ""
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>基础信息</div>,
|
||||
dataIndex: 'termInfo',
|
||||
titleStr: '基础信息',
|
||||
// fixed: 'left',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>期数</div>,
|
||||
titleStr: '期数',
|
||||
dataIndex: 'IndexStr',
|
||||
width: 100,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return record?.Index > 0 ? `第${record?.Index}期` : "-"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>时限</div>,
|
||||
titleStr: '时限',
|
||||
dataIndex: 'COMPACT_STARTDATECOMPACT_ENDDATE',
|
||||
width: 180,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
// return record?.IndexDesc || ''
|
||||
return `${record?.COMPACT_STARTDATE || ''}-${record?.COMPACT_ENDDATE || ''}`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
|
||||
titleStr: '保底/固定租金',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
width: 140,
|
||||
valueType: 'digit',
|
||||
dataIndex: 'RENTFEE',
|
||||
render: (_, record) => {
|
||||
return record?.RENTFEE ? handleFormatNumber(record?.RENTFEE) : record?.RENTFEE === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>提成比率</div>,
|
||||
titleStr: '提成比率',
|
||||
exportType: "rate",
|
||||
dataIndex: 'GUARANTEERATIO',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
render: (_, record) => {
|
||||
return record?.GUARANTEERATIO ? `${record?.GUARANTEERATIO}%` : ''
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>结算模式</div>,
|
||||
dataIndex: 'SettlementModes',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
valueType: 'select',
|
||||
valueEnum: SETTLEMENT_MODESObj,
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>切换日期</div>,
|
||||
dataIndex: 'SwitchDate',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>营业额</div>,
|
||||
titleStr: '营业额',
|
||||
dataIndex: '',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>现金</div>,
|
||||
titleStr: '现金',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
width: 120,
|
||||
valueType: 'digit',
|
||||
dataIndex: 'CASHPAY_AMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.CASHPAY_AMOUNT ? handleFormatNumber(record?.CASHPAY_AMOUNT) : record?.CASHPAY_AMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>移动支付</div>,
|
||||
titleStr: '移动支付',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
width: 120,
|
||||
valueType: 'digit',
|
||||
dataIndex: 'MOBILEPAY_AMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.MOBILEPAY_AMOUNT ? handleFormatNumber(record?.MOBILEPAY_AMOUNT) : record?.MOBILEPAY_AMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>小计</div>,
|
||||
titleStr: '小计',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
width: 120,
|
||||
dataIndex: 'REVENUEDAILY_AMOUNTTotal',
|
||||
render: (_, record) => {
|
||||
return record?.REVENUEDAILY_AMOUNTTotal ? handleFormatNumber(record?.REVENUEDAILY_AMOUNTTotal) : record?.REVENUEDAILY_AMOUNTTotal === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>提成金额</div>,
|
||||
titleStr: '提成金额',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'GUARANTEERATIOAMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.GUARANTEERATIOAMOUNT ? handleFormatNumber(record?.GUARANTEERATIOAMOUNT) : record?.GUARANTEERATIOAMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>业主收款</div>,
|
||||
titleStr: '业主收款',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'BANKACCOUNT_AMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.BANKACCOUNT_AMOUNT ? handleFormatNumber(record?.BANKACCOUNT_AMOUNT) : record?.BANKACCOUNT_AMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>应收租金</div>,
|
||||
titleStr: '应收租金',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
valueType: 'digit',
|
||||
dataIndex: 'RECEIVABLEAMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.RECEIVABLEAMOUNT ? handleFormatNumber(record?.RECEIVABLEAMOUNT) : record?.RECEIVABLEAMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>应收费用</div>,
|
||||
titleStr: '应收费用',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'SHOPEXPENSE_AMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.SHOPEXPENSE_AMOUNT ? handleFormatNumber(record?.SHOPEXPENSE_AMOUNT) : record?.SHOPEXPENSE_AMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>已缴费用</div>,
|
||||
titleStr: '已缴费用',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'PAID_AMOUNT',
|
||||
render: (_, record) => {
|
||||
return record?.PAID_AMOUNT ? handleFormatNumber(record?.PAID_AMOUNT) : record?.PAID_AMOUNT === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>退补款</div>,
|
||||
titleStr: '退补款',
|
||||
exportType: "momeny",
|
||||
align: 'right',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'REFUND_SUPPLEMENT',
|
||||
render: (_, record) => {
|
||||
return record?.REFUND_SUPPLEMENT ? handleFormatNumber(record?.REFUND_SUPPLEMENT) : record?.REFUND_SUPPLEMENT === 0 ? '0.00' : '-'
|
||||
}
|
||||
// fixed: 'right',
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>结算月份</div>,
|
||||
titleStr: '结算月份',
|
||||
align: 'center',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'STATISTICS_MONTH',
|
||||
render: (_, record) => {
|
||||
return record?.STATISTICS_MONTH ? moment(record?.STATISTICS_MONTH).format('MM') + '月' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>是否结算</div>,
|
||||
titleStr: '是否结算',
|
||||
align: 'center',
|
||||
valueType: 'digit',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'settlementStateObjApprovalstate',
|
||||
render: (_, record) => {
|
||||
return record?.Approvalstate || record?.Approvalstate === 0 ? settlementStateObj[record?.Approvalstate.toString()] : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>审批环节</div>,
|
||||
titleStr: '审批环节',
|
||||
align: 'center',
|
||||
valueType: 'select',
|
||||
valueEnum: APPROVALROUTESTATEObj,
|
||||
hideInSearch: true,
|
||||
width: 150,
|
||||
dataIndex: 'LastSettlementState',
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>备注(收退款)</div>,
|
||||
titleStr: '备注(收退款)',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
width: 120,
|
||||
dataIndex: 'REFUND_SUPPLEMENTdesc',
|
||||
render: (_, record) => {
|
||||
return record?.REFUND_SUPPLEMENT > 0 ? '退款' : record?.REFUND_SUPPLEMENT <= 0 ? '收款' : ''
|
||||
}
|
||||
// REFUND_SUPPLEMENT 大于小于
|
||||
},
|
||||
]
|
||||
|
||||
// 导出方法
|
||||
const handleExportDataToExcel = (isHaveChildren: boolean, isHaveTitle?: boolean) => {
|
||||
// isHaveChildren 判断表头是否有子集
|
||||
|
||||
console.log('1', reqDetailList);
|
||||
|
||||
let columnsNoChildren: any = []
|
||||
// 先创建需要显示的列表头
|
||||
let headerArray: any = isHaveChildren ? [[], []] : []
|
||||
// 需要合并单元格的内容
|
||||
let mergesList: any = []
|
||||
// 因为子集也拆出来了 这样实际的行数会比columns多 所以得知道多了多少
|
||||
let moreColumns: number = 0
|
||||
// 显示的列表有多少个
|
||||
let showItemNumber: number = 0
|
||||
|
||||
let showIndex: number = 0
|
||||
if (columns && columns.length > 0) {
|
||||
columns.forEach((item: any, index: number) => {
|
||||
if (!item.hideInTable) {
|
||||
showItemNumber += 1
|
||||
if (item.children && item.children.length > 0) {
|
||||
mergesList.push({
|
||||
s: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex },
|
||||
e: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex + item.children.length - 1 },
|
||||
})
|
||||
moreColumns += item.children.length - 1
|
||||
showIndex += item.children.length
|
||||
item.children.forEach((subItem: any) => {
|
||||
if (!subItem.hideInTable) {
|
||||
columnsNoChildren.push(subItem)
|
||||
headerArray[0].push(item.titleStr)
|
||||
headerArray[1].push(subItem.titleStr)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
columnsNoChildren.push(item)
|
||||
headerArray[0].push(item.titleStr)
|
||||
if (isHaveChildren) {
|
||||
headerArray[1].push(item.titleStr)
|
||||
mergesList.push({
|
||||
s: { r: 0 + (isHaveTitle ? 1 : 0), c: showIndex },
|
||||
e: { r: 1 + (isHaveTitle ? 1 : 0), c: showIndex },
|
||||
})
|
||||
}
|
||||
showIndex += 1
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
console.log('columnsNoChildren', columnsNoChildren);
|
||||
console.log('headerArray', headerArray);
|
||||
console.log('mergesList', mergesList);
|
||||
|
||||
|
||||
// 先创建需要显示的列表头
|
||||
// let headerArray = [
|
||||
// ["管理中心", "服务区", "经营商户", "门店", "基础信息", "基础信息", "基础信息", "基础信息", "营业额", "营业额", "营业额", "提成金额", "业主收款", "应收租金", "应收费用", "已缴费用", "退补款", "结算月份", "是否结算", "备注(收退款)"],
|
||||
// ["管理中心", "服务区", "经营商户", "门店", "期数", "时限", "保底 / 固定租金", "提成比率", "现金", "移动支付", "小计", "提成金额", "业主收款", "应收租金", "应收费用", "已缴费用", "退补款", "结算月份", "是否结算", "备注(收退款)"]
|
||||
// ]
|
||||
|
||||
// 创建一个工作簿
|
||||
const ws = {}
|
||||
|
||||
// 设置列宽:动态计算每列的最大内容长度
|
||||
let colWidths: any = [];
|
||||
// 设置样式:对齐方式
|
||||
const cellStyle: any = {
|
||||
alignment: {
|
||||
horizontal: 'right',
|
||||
vertical: 'right'
|
||||
}
|
||||
};
|
||||
if (headerArray && headerArray.length > 0) {
|
||||
headerArray.forEach((row: any, rowIndex: any) => {
|
||||
row.forEach((cell: any, colIndex: any) => {
|
||||
const cellRef = XLSX.utils.encode_cell({ r: (isHaveChildren ? rowIndex : rowIndex) + (isHaveTitle ? 1 : 0), c: colIndex });
|
||||
// ws[cellRef] = cell;
|
||||
console.log('cellRef', cellRef);
|
||||
|
||||
ws[cellRef] = {
|
||||
v: cell, t: 's', s: cellStyle
|
||||
};
|
||||
const cellLength = getCharWidth((cell && cell.toString()) || '');
|
||||
|
||||
if (!colWidths[colIndex]) {
|
||||
colWidths[colIndex] = cellLength;
|
||||
} else {
|
||||
colWidths[colIndex] = Math.max(colWidths[colIndex], cellLength);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
// 设置工作表的范围(必需)
|
||||
const range = {
|
||||
s: { r: 0, c: 0 }, // 开始行列
|
||||
e: { r: reqDetailList.length + (isHaveChildren ? 2 : 1) + (isHaveTitle ? 1 : 0), c: columnsNoChildren.length } // 结束行列
|
||||
};
|
||||
|
||||
ws["A1"] = {
|
||||
v: `(${searchParams?.StatisticsYear})年度结算汇总表`, t: 's', s: {
|
||||
font: {
|
||||
bold: true, // 字体加粗
|
||||
color: { rgb: "#000" }, // 字体颜色红色
|
||||
sz: 20 // 字号为14
|
||||
},
|
||||
alignment: {
|
||||
horizontal: 'center', // 水平居中
|
||||
vertical: 'center' // 垂直居中
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
if (isHaveTitle) {
|
||||
mergesList.push(
|
||||
{
|
||||
s: { r: 0, c: 0 },
|
||||
e: { r: 0, c: columnsNoChildren.length },
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
ws['!merges'] = mergesList
|
||||
|
||||
ws['!ref'] = XLSX.utils.encode_range(range); // 设置单元格范围
|
||||
|
||||
if (reqDetailList && reqDetailList.length > 0) {
|
||||
reqDetailList.forEach((item: any, index: number) => {
|
||||
columnsNoChildren.forEach((subItem: any, subIndex: number) => {
|
||||
for (let key in item) {
|
||||
if (subItem.dataIndex === key) {
|
||||
let res = item[key]
|
||||
const cellRef = XLSX.utils.encode_cell({ r: (isHaveChildren ? index + 2 : index + 1) + (isHaveTitle ? 1 : 0), c: subIndex });
|
||||
// ws[cellRef] = cell;
|
||||
let newRes = res ? subItem.exportType === 'momeny' ? handleFormatNumber(res) : subItem.exportType === 'rate' ? `${res}%` : res : subItem.exportType === 'momeny' ? '0' : ""
|
||||
ws[cellRef] = {
|
||||
v: newRes, t: 's', s: {
|
||||
alignment: {
|
||||
horizontal: 'center', // 水平居中
|
||||
vertical: 'center' // 垂直居中
|
||||
}
|
||||
}
|
||||
};
|
||||
const cellLength = getCharWidth((newRes && newRes.toString()) || '');
|
||||
|
||||
if (!colWidths[subIndex]) {
|
||||
colWidths[subIndex] = cellLength;
|
||||
} else {
|
||||
if (subIndex === 2) {
|
||||
console.log('colWidths[subIndex] ', colWidths[subIndex]);
|
||||
console.log('cellLength.length', cellLength);
|
||||
|
||||
}
|
||||
colWidths[subIndex] = Math.max(colWidths[subIndex], cellLength);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
ws['!cols'] = colWidths.map((width: any) => ({ wch: width + 2 })); // wch 表示字符宽度
|
||||
|
||||
console.log('ws', ws);
|
||||
|
||||
|
||||
// array.forEach((row: any, rowIndex: any) => {
|
||||
// row.forEach((cell: any, colIndex: any) => {
|
||||
// // 通过设置单元格的数值和样式,保留原始格式
|
||||
// const cellRef = XLSX.utils.encode_cell({ r: rowIndex, c: colIndex }); // 跳过表头行
|
||||
// console.log('cellRef', cellRef);
|
||||
|
||||
// if (typeof cell === 'number' && cell.toFixed) {
|
||||
// // 如果是数字,保持两位小数
|
||||
// ws[cellRef].z = '0.00'; // 设置数字格式为两位小数
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
|
||||
// 创建工作簿
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
|
||||
|
||||
// 导出 Excel 文件
|
||||
XLSX.writeFile(wb, `(${searchParams?.StatisticsYear})年度结算汇总表.xlsx`);
|
||||
setShowLoading(false)
|
||||
},
|
||||
// 判断字符类型的辅助函数
|
||||
getCharWidth = (cell: any) => {
|
||||
if (!cell) {
|
||||
return ''
|
||||
}
|
||||
if (typeof cell === 'number') {
|
||||
return cell.toString().length > 150 ? 150 : cell.toString().length; // 数字通常和英文字符宽度相同
|
||||
} else if (/[^\x00-\xff]/.test(cell)) {
|
||||
return cell.length * 1.8 > 300 ? 300 : cell.length * 1.8; // 中文字符宽度大约是英文字符的2倍
|
||||
} else {
|
||||
return cell.length > 150 ? 150 : cell.length; // 英文字符的宽度为1
|
||||
}
|
||||
}
|
||||
|
||||
const exportTable = (e) => {
|
||||
e.stopPropagation(); // 防止Collapse组件收起
|
||||
const main = document.getElementsByClassName(`OnlineSettlementOfProjects${printIndex}`)[0]
|
||||
const thead = main.querySelector('thead').cloneNode(true); // 深克隆DOM节点
|
||||
const tbody = main.querySelector('tbody').cloneNode(true); // 深克隆DOM节点
|
||||
const container = document.querySelector('#hiddenBox');
|
||||
|
||||
// 加个标题
|
||||
const tableTop = document.createElement('div')
|
||||
tableTop.innerText = `(${searchParams?.StatisticsYear})年度结算汇总表`
|
||||
tableTop.setAttribute('style', 'font-size:20px;font-weight:600;display:flex;width:100%;justify-content: center;text-align: center;');
|
||||
|
||||
const tempTable = document.createElement('table');
|
||||
|
||||
tempTable.appendChild(tableTop)
|
||||
tempTable.appendChild(thead);
|
||||
tempTable.appendChild(tbody);
|
||||
|
||||
tempTable.setAttribute('id', 'table-to-xls-OnlineSettlementOfProjects'); // 给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={`OnlineSettlementOfProjects${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||||
{
|
||||
showExportTable && reqDetailList && reqDetailList.length > 0 ?
|
||||
<ProTable
|
||||
className="exportTable"
|
||||
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' }}>
|
||||
<LeftSelectTree 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
|
||||
}}
|
||||
rowKey={(record: any) => {
|
||||
return `${record?.SPREGIONTYPE_ID}-${record?.SERVERPART_ID}-${record?.SERVERPARTSHOP_ID}-${record?.BUSINESSPROJECT_ID}-${record?.MERCHANTS_ID}-${record?.IndexStr}`
|
||||
}}
|
||||
headerTitle={<PageTitleBox props={props} />}
|
||||
search={{ span: 6 }}
|
||||
scroll={{ x: "max-content", y: 'calc(100vh - 450px)' }}
|
||||
request={async (params) => {
|
||||
if (!selectedId) {
|
||||
return
|
||||
}
|
||||
const req: any = {
|
||||
// StatisticsYear: params?.StatisticsYear,
|
||||
StatisticsYear: moment(params?.StartDate).format('YYYY'),
|
||||
ServerpartId: selectedId,
|
||||
SettlementState: params?.SettlementState,
|
||||
SettlementModes: params?.SettlementModes,
|
||||
SettlementType: params?.SettlementType,
|
||||
StartDate: params?.StartDate,
|
||||
EndDate: params?.EndDate
|
||||
// ServerpartIds: selectedId,
|
||||
// // ShopRoyaltyId: compareCurrent?.ShopRoyaltyId,
|
||||
// // BusinessProjectId: compareCurrent?.BUSINESSPROJECT_ID,
|
||||
// startDate: params?.StartDate || '',
|
||||
// endDate: params?.EndDate || '',
|
||||
// SolidType: true
|
||||
}
|
||||
setSearchParams(params)
|
||||
console.log('req', req);
|
||||
|
||||
const data = await handleGetAnnualAccountList(req)
|
||||
let res: any = []
|
||||
let exportData: any = []
|
||||
if (data && data.length > 0) {
|
||||
res = data
|
||||
}
|
||||
console.log('res', res);
|
||||
if (res && res.length > 0) {
|
||||
let exportRes = JSON.parse(JSON.stringify(res))
|
||||
exportRes.forEach((item: any, index: number) => {
|
||||
item.index = `${index + 1}`
|
||||
// item.SPREGIONTYPE_NAME = item.SPREGIONTYPE_NAME.split('管理中心')
|
||||
if (item.children && item.children.length > 0) {
|
||||
item.children.forEach((subItem: any, subIndex: number) => {
|
||||
subItem.index = `${index + 1}-${subIndex + 1}`
|
||||
// subItem.SPREGIONTYPE_NAME = subItem.SPREGIONTYPE_NAME.split('管理中心')
|
||||
// subItem.SERVERPART_NAME = subItem.SERVERPART_NAME.split('服务区')
|
||||
if (subItem.children && subItem.children.length > 0) {
|
||||
subItem.children.forEach((thirdItem: any, thirdIndex: number) => {
|
||||
thirdItem.index = `${index + 1}-${subIndex + 1}-${thirdIndex + 1}`
|
||||
thirdItem.SPREGIONTYPE_NAME = thirdItem.SPREGIONTYPE_NAME.split('管理中心')[0]
|
||||
thirdItem.SERVERPART_NAME = thirdItem.SERVERPART_NAME.split('服务区')[0]
|
||||
|
||||
thirdItem.COMPACT_STARTDATECOMPACT_ENDDATE = `${thirdItem?.COMPACT_STARTDATE || '-'}-${thirdItem?.COMPACT_ENDDATE || '-'}`
|
||||
thirdItem.settlementStateObjApprovalstate = thirdItem?.Approvalstate || thirdItem?.Approvalstate === 0 ? settlementStateObj[thirdItem?.Approvalstate.toString()] : '-'
|
||||
thirdItem.REFUND_SUPPLEMENTdesc = thirdItem?.REFUND_SUPPLEMENT > 0 ? '退款' : thirdItem?.REFUND_SUPPLEMENT <= 0 ? '收款' : ''
|
||||
exportData.push(thirdItem)
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
console.log('exportData', exportData);
|
||||
setReqDetailList(exportData)
|
||||
return { data: res, success: true }
|
||||
}
|
||||
setReqDetailList(exportData)
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
toolbar={{
|
||||
actions: [
|
||||
<span style={{ visibility: 'hidden' }}>
|
||||
<ReactHTMLTableToExcel
|
||||
buttonText={'导出excel'}
|
||||
ref={downloadBtnRef}
|
||||
table="table-to-xls-OnlineSettlementOfProjects"
|
||||
filename={`(${moment(searchParams?.StartDate).format('YYYY')})年度结算汇总表`}
|
||||
sheet="sheet1"
|
||||
dataType="String"
|
||||
/>
|
||||
</span>,
|
||||
<Button
|
||||
key="new"
|
||||
type="primary"
|
||||
onClick={(e) => {
|
||||
if (reqDetailList && reqDetailList.length > 0) {
|
||||
setShowLoading(true)
|
||||
setTimeout(() => {
|
||||
setShowExportTable(true)
|
||||
setTimeout(() => {
|
||||
// handleExportDataToExcel(true, true)
|
||||
exportTable(e)
|
||||
}, 100)
|
||||
}, 100)
|
||||
} else {
|
||||
message.error('暂无数据可导出!')
|
||||
}
|
||||
}}
|
||||
>
|
||||
导出excel
|
||||
</Button>
|
||||
]
|
||||
}}
|
||||
columnsState={{
|
||||
value: columnsStateMap,
|
||||
onChange: setColumnsStateMap,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Drawer
|
||||
width="85%"
|
||||
visible={showDrawer}
|
||||
destroyOnClose
|
||||
onClose={() => {
|
||||
setShowDrawer(false)
|
||||
setCurrentRow(undefined)
|
||||
}}
|
||||
bodyStyle={{ backgroundColor: "#fff", padding: 0 }}
|
||||
closable={false}
|
||||
className="summaryDrawer"
|
||||
>
|
||||
<YearExamineDetailTable parentRow={currentRow} currentApprovalstate={currentRow?.Approvalstate} onRef={null}
|
||||
setIsShowMonthBtn={setIsShowMonthBtn} setIsYearAllowSettlement={false} handleShowSettlementDetail={false} isYear={true}
|
||||
isChangeFile={false} />
|
||||
</Drawer>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user }: ConnectState) => ({
|
||||
currentUser: user.currentUser
|
||||
}))(OnlineSettlementOfProjects);
|
||||
@ -0,0 +1,405 @@
|
||||
import { connect } from "umi";
|
||||
import type { ConnectState } from "@/models/connect";
|
||||
import ProTable, { ActionType } from "@ant-design/pro-table";
|
||||
import { useRef } from "react";
|
||||
import { Button, FormInstance, Tooltip } from "antd";
|
||||
import { handleGetProjectPeriodAccount } from "../../ShopExpenseDetail/service";
|
||||
import { wrapTreeNode } from "@/utils/format";
|
||||
import { handleFormatNumber } from "@/services/options";
|
||||
import numeral from 'numeral'
|
||||
|
||||
type DetailProps = {
|
||||
parentRow?: any // 外面的一些行数据
|
||||
}
|
||||
const HistoricalProjects = ({ parentRow }: DetailProps) => {
|
||||
const actionRef = useRef<ActionType>();
|
||||
const formRef = useRef<FormInstance>();
|
||||
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>期限</div>,
|
||||
dataIndex: 'PeriodDesc',
|
||||
align: 'left',
|
||||
width: 250,
|
||||
fixed: 'left',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>结算状态</div>,
|
||||
dataIndex: 'IsApplySuccess',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: '租金信息',
|
||||
dataIndex: '',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
|
||||
dataIndex: 'MinturnOver',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 130,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
const str: string = record?.Remark
|
||||
return record?.MinturnOver ?
|
||||
<Tooltip title={str}>
|
||||
{handleFormatNumber(record?.MinturnOver)}
|
||||
</Tooltip>
|
||||
: record?.MinturnOver === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>提成比率</div>,
|
||||
dataIndex: 'GuaranteeRatio',
|
||||
hideInSearch: true,
|
||||
align: 'right',
|
||||
width: 100,
|
||||
render: (_, record) => {
|
||||
return record?.GuaranteeRatio ? `${record?.GuaranteeRatio}%` : ''
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '营业额',
|
||||
dataIndex: '',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>现金</div>,
|
||||
dataIndex: 'CashAmount',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.CashAmount ?
|
||||
`${handleFormatNumber(record?.CashAmount)}${record?.CashCorrect ? `(${record?.CashCorrect > 0 ? '+' : record?.CashCorrect < 0 ? '' : ''}${record?.CashCorrect})` : ''}`
|
||||
: record?.CashAmount === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>微支付</div>,
|
||||
dataIndex: 'MobilePayAmount',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.MobilePayAmount ?
|
||||
`${handleFormatNumber(record?.MobilePayAmount)}${record?.MobilePayCorrect ? `(${record?.MobilePayCorrect > 0 ? '+' : record?.MobilePayCorrect < 0 ? '' : ''}${record?.MobilePayCorrect})` : ''}`
|
||||
: record?.MobilePayAmount === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>小计</div>,
|
||||
dataIndex: 'RevenueAmount',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 150,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return <span style={{ color: '#1890ff' }}>{record?.RevenueAmount ? `${numeral(record?.RevenueAmount).format('0,0.00')}${record?.addRevenueMoney ? `(${record?.addRevenueMoney > 0 ? '+' : record?.addRevenueMoney < 0 ? '-' : ''}${record?.addRevenueMoney})` : ''}` : '0'}</span>
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>业主收款</div>,
|
||||
dataIndex: 'RoyaltyAmount',
|
||||
valueType: 'digit',
|
||||
width: 100,
|
||||
align: 'right',
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.RoyaltyAmount ? handleFormatNumber(record?.RoyaltyAmount) : record?.RoyaltyAmount === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '应收费用',
|
||||
dataIndex: '',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>合计</div>,
|
||||
dataIndex: 'ReceivableAmount',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
const str: string = `租金(${numeral(record?.GuaranteeFee).format('0.00')}) + 物业费(${numeral(record?.PropertyFee).format('0.00')}) + 房租(${numeral(record?.HouseRent).format('0.00')}) + 罚款(${numeral(record?.BreachPenalty).format('0.00')}) + 电费(${numeral(record?.ElectricityCharge).format('0.00')}) + 水费(${numeral(record?.WaterCharge).format('0.00')}) + 其他(${numeral(record?.OtherFee).format('0.00')})`
|
||||
return record?.ReceivableAmount ?
|
||||
<Tooltip title={str}>
|
||||
<span>
|
||||
{handleFormatNumber(record?.ReceivableAmount)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>租金</div>,
|
||||
dataIndex: 'GuaranteeFee',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
const str: string = `租金(${numeral(record?.MinturnOver).format('0.00')}) ${record?.MinturnOver > (record?.RevenueAmount * (record?.GuaranteeRatio) / 100) ? '>' : '<'} 营业额(${record?.RevenueAmount || 0}) * 提成比率(${record?.GuaranteeRatio ? `${record?.GuaranteeRatio}%` : ''})`
|
||||
return record?.GuaranteeFee ?
|
||||
<Tooltip title={record?.PeriodDesc === '合计' ? '' : str}>
|
||||
<span>{handleFormatNumber(record?.GuaranteeFee)}</span>
|
||||
</Tooltip>
|
||||
: ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>物业费</div>,
|
||||
dataIndex: 'PropertyFee',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PropertyFee ?
|
||||
handleFormatNumber(record?.PropertyFee)
|
||||
: record?.PropertyFee === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>住宿费</div>,
|
||||
dataIndex: 'HouseRent',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.HouseRent ? handleFormatNumber(record?.HouseRent) : record?.HouseRent === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>罚款</div>,
|
||||
dataIndex: 'BreachPenalty',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.BreachPenalty ? handleFormatNumber(record?.BreachPenalty) : record?.BreachPenalty === 0 ? '0.00' : '-'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>电费</div>,
|
||||
dataIndex: 'ElectricityCharge',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.ElectricityCharge ?
|
||||
handleFormatNumber(record?.ElectricityCharge)
|
||||
: record?.ElectricityCharge === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>水费</div>,
|
||||
dataIndex: 'WaterCharge',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.WaterCharge ?
|
||||
handleFormatNumber(record?.WaterCharge)
|
||||
: record?.WaterCharge === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>其他</div>,
|
||||
dataIndex: 'OtherFee',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.OtherFee ? handleFormatNumber(record?.OtherFee) : record?.OtherFee === 0 ? '0.00' : '-'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '已缴费用',
|
||||
dataIndex: '',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>合计</div>,
|
||||
dataIndex: 'PaidFee',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
const str: string = `水费(${numeral(record?.PaidFee_9010).format('0.00')}) + 电费(${numeral(record?.PaidFee_9020).format('0.00')}) + 房租(${numeral(record?.PaidFee_9030).format('0.00')})
|
||||
+ 物业费(${numeral(record?.PaidFee_9050).format('0.00')})+ 租金(${numeral(record?.PaidFee_9090).format('0.00')})+ 其他(${numeral(record?.PaidFee_9099).format('0.00')})`
|
||||
return record?.PaidFee
|
||||
?
|
||||
<Tooltip title={str}>
|
||||
<span>{handleFormatNumber(record?.PaidFee)}</span>
|
||||
</Tooltip>
|
||||
: '0.00'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>水费</div>,
|
||||
dataIndex: 'PaidFee_9010',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9010 ?
|
||||
handleFormatNumber(record?.PaidFee_9010)
|
||||
: record?.PaidFee_9010 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>电费</div>,
|
||||
dataIndex: 'PaidFee_9020',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9020 ?
|
||||
handleFormatNumber(record?.PaidFee_9020)
|
||||
: record?.PaidFee_9020 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>住宿费</div>,
|
||||
dataIndex: 'PaidFee_9030',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 80,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9030 ?
|
||||
handleFormatNumber(record?.PaidFee_9030)
|
||||
: record?.PaidFee_9030 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>物业费</div>,
|
||||
dataIndex: 'PaidFee_9050',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9050 ?
|
||||
handleFormatNumber(record?.PaidFee_9050)
|
||||
: record?.PaidFee_9050 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>租金</div>,
|
||||
dataIndex: 'PaidFee_9090',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9090 ?
|
||||
handleFormatNumber(record?.PaidFee_9090)
|
||||
: record?.PaidFee_9090 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>其他</div>,
|
||||
dataIndex: 'PaidFee_9099',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
return record?.PaidFee_9099 ?
|
||||
handleFormatNumber(record?.PaidFee_9099)
|
||||
: record?.PaidFee_9099 === 0 ? <span style={{ color: 'red' }}>0.00</span> : ''
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: <div style={{ textAlign: 'center' }}>退补款</div>,
|
||||
dataIndex: 'RefundSupplement',
|
||||
valueType: 'digit',
|
||||
align: 'right',
|
||||
fixed: 'right',
|
||||
width: 100,
|
||||
hideInSearch: true,
|
||||
render: (_, record) => {
|
||||
const str: string = `业主收款(${record?.RoyaltyAmount || 0}) - 应收费用(${record?.ReceivableAmount || 0}) + 已缴费用(${record?.PaidFee || 0})`
|
||||
return record?.RefundSupplement ?
|
||||
<Tooltip title={str}>
|
||||
<span style={{ color: '#9A3D1A', fontWeight: 600 }}>{handleFormatNumber(record?.RefundSupplement)}</span>
|
||||
</Tooltip>
|
||||
: ''
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{ boxSizing: 'border-box', paddingBottom: "30px" }}>
|
||||
<ProTable
|
||||
rowKey={(record) => {
|
||||
return `${record?.ShopRoyalty_Id}-${record?.PeriodIndexStr}-${record?.StartDate}-${record?.EndDate}-${record?.level}`
|
||||
}}
|
||||
actionRef={actionRef}
|
||||
formRef={formRef}
|
||||
columns={columns}
|
||||
bordered
|
||||
expandable={{
|
||||
expandRowByClick: true
|
||||
}}
|
||||
scroll={{ x: "100%", y: "calc(100vh - 410px)" }}
|
||||
headerTitle={'往期项目'} // 列表表头
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
console.log('parentRowparentRowparentRowparentRow321', parentRow);
|
||||
if (!parentRow?.BUSINESSPROJECT_ID) {
|
||||
return { data: [], success: true }
|
||||
}
|
||||
|
||||
const req: any = {
|
||||
BUSINESSPROJECT_ID: parentRow?.BUSINESSPROJECT_ID,
|
||||
}
|
||||
const data = await handleGetProjectPeriodAccount(req)
|
||||
console.log('datadatadatadatadatadata321', data);
|
||||
let list: any = data.ProjectPeriodList
|
||||
if (list && list.length > 0) {
|
||||
let res: any = wrapTreeNode(list)
|
||||
console.log('resresresresresresresresres', res);
|
||||
return { data: res, success: true }
|
||||
}
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
toolbar={{
|
||||
actions: []
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user, }: ConnectState) => ({
|
||||
currentUser: user.currentUser,
|
||||
}))(HistoricalProjects);
|
||||
@ -21,6 +21,7 @@ import { ExclamationCircleOutlined, MinusCircleOutlined, PlusOutlined } from "@a
|
||||
import { deletePicture, uploadPicture } from "@/services/picture";
|
||||
import PrintContent from "./printContent";
|
||||
import { handleHighPrecision } from "@/utils/utils";
|
||||
import HistoricalProjects from "./HistoricalProjects";
|
||||
|
||||
const { confirm } = Modal;
|
||||
type DetailProps = {
|
||||
@ -631,7 +632,6 @@ const YearExamineDetailTable = ({ parentRow, currentApprovalstate, onRef, setIsS
|
||||
: ''
|
||||
}
|
||||
},
|
||||
|
||||
]
|
||||
// 导出excel的columns
|
||||
const exportColumns: any = [
|
||||
@ -2766,6 +2766,15 @@ const YearExamineDetailTable = ({ parentRow, currentApprovalstate, onRef, setIsS
|
||||
</ProTable>
|
||||
|
||||
|
||||
{/* 判断当期项目 是不是最后一期 是最后一期的话 就显示 历史期的数据 */}
|
||||
<HistoricalProjects parentRow={parentRow} />
|
||||
{/* {
|
||||
parentRow?.PROJECT_ENDDATE === parentRow?.ENDDATE ?
|
||||
<HistoricalProjects /> : ""
|
||||
} */}
|
||||
|
||||
|
||||
|
||||
{/* 导出结算表 */}
|
||||
<PrintContent pageName={'YearExamineTable'} exportColumns={exportColumns} exportData={exportData} exportSumRow={exportSumRow} type={'year'} />
|
||||
|
||||
|
||||
@ -874,7 +874,7 @@ const YearExamineProcess = ({ currentUser, onShow, setOnShow, parentRow, setPare
|
||||
setCurrentNowState(data.BUSINESSAPPROVAL_STATE)
|
||||
// 拿到下一环节
|
||||
const nextReq: any = {
|
||||
OperationType: parentRow?.SETTLEMENT_TYPE === '1' || parentRow?.SETTLEMENT_TYPE === 1 ? 11 : 12,
|
||||
OperationType: parentRow?.SETTLEMENT_TYPE ? parentRow?.SETTLEMENT_TYPE === '1' || parentRow?.SETTLEMENT_TYPE === 1 ? 11 : 12 : parentRow?.Operation_Type ? parentRow?.Operation_Type : "",
|
||||
CurState: data.BUSINESSAPPROVAL_STATE,
|
||||
IsValid: 1
|
||||
}
|
||||
@ -901,12 +901,12 @@ const YearExamineProcess = ({ currentUser, onShow, setOnShow, parentRow, setPare
|
||||
|
||||
|
||||
// 剔除 结算时间在2025年4月1日 之后的数据 不给孙青
|
||||
if (parentRow?.PROJECT_ENDDATE && new Date(parentRow?.PROJECT_ENDDATE).getTime() > new Date('2025-04-01 00:00:00').getTime()) {
|
||||
if (parentRow?.ENDDATE && new Date(parentRow?.ENDDATE).getTime() > new Date('2025-04-01 00:00:00').getTime()) {
|
||||
list = list.filter((item: any) => item.value !== 827);
|
||||
}
|
||||
|
||||
// 剔除 结算时间在2025年4月1日 之前的数据 不给陶杰
|
||||
if (parentRow?.PROJECT_ENDDATE && new Date(parentRow?.PROJECT_ENDDATE).getTime() < new Date('2025-04-01 00:00:00').getTime()) {
|
||||
if (parentRow?.ENDDATE && new Date(parentRow?.ENDDATE).getTime() < new Date('2025-04-01 00:00:00').getTime()) {
|
||||
list = list.filter((item: any) => item.value !== 1802);
|
||||
}
|
||||
|
||||
|
||||
350
src/pages/reports/settlementProjectForNextMonth/index.tsx
Normal file
350
src/pages/reports/settlementProjectForNextMonth/index.tsx
Normal file
@ -0,0 +1,350 @@
|
||||
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, Drawer, 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 { handleGetWillSettleProject } from "./service";
|
||||
import moment from 'moment'
|
||||
import session from "@/utils/session";
|
||||
import ProjectDetail from "@/pages/BussinessProject/detail";
|
||||
|
||||
|
||||
const settlementProjectForNextMonth: 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 [currentRow, setCurrentRow] = useState<any>(undefined) // 选中的当前行
|
||||
|
||||
const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
|
||||
// 树相关的属性和方法
|
||||
const [selectedId, setSelectedId] = useState<string>()
|
||||
// 导出的加载效果
|
||||
const [showLoading, setShowLoading] = useState<boolean>(false)
|
||||
// 是否显示打印的表格
|
||||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||||
// 查询的条件
|
||||
const [searchParams, setSearchParams] = useState<any>()
|
||||
let SETTLEMENT_MODESObj = session.get('SETTLEMENT_MODESObj')
|
||||
|
||||
const columns: any = [
|
||||
{
|
||||
title: '统计时间',
|
||||
dataIndex: 'search_date',
|
||||
valueType: 'dateRange',
|
||||
hideInTable: true,
|
||||
hideInDescriptions: true,
|
||||
initialValue: [moment().add(1, 'M').startOf('M'), moment().add(1, 'M').endOf('M')],
|
||||
search: {
|
||||
transform: (value: any) => {
|
||||
return {
|
||||
StartDate: value[0],
|
||||
EndDate: value[1],
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
{
|
||||
title: '管理中心',
|
||||
dataIndex: 'SPREGIONTYPE_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '服务区',
|
||||
dataIndex: 'SERVERPART_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '经营商户',
|
||||
dataIndex: 'MERCHANTS_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '门店',
|
||||
dataIndex: 'SERVERPARTSHOP_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '项目名称',
|
||||
dataIndex: 'BUSINESSPROJECT_NAME',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return record?.BUSINESSPROJECT_ID ?
|
||||
<a onClick={() => {
|
||||
setCurrentRow(record)
|
||||
setShowDetail(true)
|
||||
}}>{record?.BUSINESSPROJECT_NAME}</a> : "-"
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '经营期数',
|
||||
dataIndex: 'CURRENT_PERIOD',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center'
|
||||
},
|
||||
{
|
||||
title: '时限',
|
||||
dataIndex: 'STARTDATEENDDATE',
|
||||
width: 200,
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return `${record?.STARTDATE ? moment(record?.STARTDATE).format('YYYY/MM/DD') : ""}${record?.ENDDATE ? '-' : ''}${record?.ENDDATE ? moment(record?.ENDDATE).format('YYYY/MM/DD') : ""}`
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "撤场项目",
|
||||
dataIndex: 'PeriodClosed',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
render: (_, record) => {
|
||||
return <span style={{ color: record?.PeriodClosed ? 'red' : '' }}>{record?.PeriodClosed ? '是' : "否"}</span>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "结算模式",
|
||||
dataIndex: 'SETTLEMENT_MODES',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
align: 'center',
|
||||
valueType: 'select',
|
||||
valueEnum: SETTLEMENT_MODESObj,
|
||||
},
|
||||
{
|
||||
title: "结算日期",
|
||||
dataIndex: 'ENDDATE',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
title: "结算模式",
|
||||
dataIndex: 'SettlementModes',
|
||||
valueType: 'select',
|
||||
hideInTable: true,
|
||||
valueEnum: SETTLEMENT_MODESObj,
|
||||
fieldProps: {
|
||||
mode: 'multiple', // 开启多选模式
|
||||
},
|
||||
initialValue: ["3000", "4000"]
|
||||
},
|
||||
{
|
||||
title: "结算类型",
|
||||
dataIndex: 'SettlementType',
|
||||
valueType: 'select',
|
||||
valueEnum: {
|
||||
"1": "线上",
|
||||
"2": "线下"
|
||||
},
|
||||
hideInTable: 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-settlementProjectForNextMonth'); // 给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' }}>
|
||||
<LeftSelectTree 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 - 410px)" }}
|
||||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
if (!selectedId) {
|
||||
return
|
||||
}
|
||||
|
||||
const req: any = {
|
||||
StartDate: params?.StartDate,
|
||||
EndDate: params?.EndDate,
|
||||
ServerpartId: selectedId,
|
||||
SettlementModes: params?.SettlementModes || "",
|
||||
SettlementType: params?.SettlementType || "",
|
||||
}
|
||||
setSearchParams(params)
|
||||
|
||||
const data = await handleGetWillSettleProject(req)
|
||||
console.log('datadatadatadatadata', data);
|
||||
if (data && data.length > 0) {
|
||||
return { data, success: true }
|
||||
}
|
||||
return { data: [], success: true }
|
||||
}}
|
||||
toolbar={{
|
||||
actions: [
|
||||
<span style={{ visibility: 'hidden' }}>
|
||||
<ReactHTMLTableToExcel
|
||||
buttonText={'导出excel'}
|
||||
ref={downloadBtnRef}
|
||||
table="table-to-xls-settlementProjectForNextMonth"
|
||||
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>
|
||||
|
||||
{/* 查看项目详情 右侧弹出的抽屉 */}
|
||||
<Drawer
|
||||
width="80%"
|
||||
className="project-drawer"
|
||||
visible={showDetail} // 抽屉弹框是否显示状态
|
||||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||||
setCurrentRow(undefined);
|
||||
setShowDetail(false);
|
||||
}}
|
||||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||||
closable={false}
|
||||
>
|
||||
{/* 抽屉打开时 加载项目详情组件 */}
|
||||
{showDetail && <ProjectDetail id={currentRow?.BUSINESSPROJECT_ID} ></ProjectDetail>}
|
||||
</Drawer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user }: ConnectState) => ({
|
||||
currentUser: user.currentUser
|
||||
}))(settlementProjectForNextMonth);
|
||||
20
src/pages/reports/settlementProjectForNextMonth/service.ts
Normal file
20
src/pages/reports/settlementProjectForNextMonth/service.ts
Normal file
@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request';
|
||||
|
||||
export async function handleGetWillSettleProject(params?: any) {
|
||||
const data = await request(`/BusinessProject/GetWillSettleProject`, {
|
||||
method: 'GET',
|
||||
params
|
||||
});
|
||||
|
||||
if (data.Result_Code !== 100) {
|
||||
return {
|
||||
data: [],
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
success: false
|
||||
}
|
||||
}
|
||||
return data.Result_Data.List
|
||||
}
|
||||
|
||||
@ -16,8 +16,9 @@ type DetailProps = {
|
||||
modalVisible: boolean //显示属性
|
||||
handleCloseModal: any // 关闭调用的方法
|
||||
currentRow: any
|
||||
detailType?: any // 判断是不是点餐的订单详情 可以显示不同内容
|
||||
}
|
||||
const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow }: DetailProps) => {
|
||||
const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow, detailType }: DetailProps) => {
|
||||
const formRef = useRef<FormInstance>();
|
||||
const draggleRef = React.createRef<any>()
|
||||
const modalRef = useRef<FormInstance>();
|
||||
@ -172,6 +173,28 @@ const OrderDetailModal = ({ modalVisible, handleCloseModal, currentRow }: Detail
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
</Col>
|
||||
{
|
||||
detailType === 'food' ?
|
||||
<Col span={8} className="memberInfoDetailItem">
|
||||
<ProFormText
|
||||
name={"SERVERPART_NAME"}
|
||||
label={"服务区"}
|
||||
readonly
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
</Col> : ""
|
||||
}
|
||||
{
|
||||
detailType === 'food' ?
|
||||
<Col span={8} className="memberInfoDetailItem">
|
||||
<ProFormText
|
||||
name={"SHOPNAME"}
|
||||
label={"门店"}
|
||||
readonly
|
||||
style={{ marginBottom: '16px' }}
|
||||
/>
|
||||
</Col> : ""
|
||||
}
|
||||
<Col span={8} className="memberInfoDetailItem">
|
||||
<ProFormSelect
|
||||
name={"CHANNEL_TYPE"}
|
||||
|
||||
@ -101,6 +101,14 @@ const BookingMealOrder: React.FC<{ currentUser: CurrentUser | undefined }> = (pr
|
||||
}}>{record?.SALEBILL_CODE}</a> : "-"
|
||||
}
|
||||
},
|
||||
{
|
||||
dataIndex: 'SERVERPART_NAME',
|
||||
title: '服务区',
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
width: 150,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: 'SHOPNAME',
|
||||
title: '门店名称',
|
||||
@ -325,7 +333,7 @@ const BookingMealOrder: React.FC<{ currentUser: CurrentUser | undefined }> = (pr
|
||||
/>
|
||||
</div>
|
||||
|
||||
<OrderDetailModal modalVisible={modalVisible} handleCloseModal={handleCloseModal} currentRow={currentRow} />
|
||||
<OrderDetailModal modalVisible={modalVisible} handleCloseModal={handleCloseModal} currentRow={currentRow} detailType={'food'} />
|
||||
|
||||
{/* <Modal
|
||||
className="BookingMealOrderDetailModal"
|
||||
|
||||
@ -54,6 +54,10 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
const [bounds, setBounds] = useState<{ left: number, right: number, top: number, bottom: number }>() // 移动的位置
|
||||
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
||||
const draggleRef = React.createRef<any>()
|
||||
// 初始会员等级列表
|
||||
const [defaultMemberLevel, setDefaultMemberLevel] = useState<any>(MEMBERSHIPLEVELYNList)
|
||||
// 晋升后会员等级列表
|
||||
const [promotionMemberLevel, setPromotionMemberLevel] = useState<any>(MEMBERSHIPLEVELYNList)
|
||||
|
||||
const onDraggaleStart = (event, uiData) => {
|
||||
const { clientWidth, clientHeight } = window.document.documentElement;
|
||||
@ -69,7 +73,6 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
});
|
||||
};
|
||||
// 拖动结束
|
||||
|
||||
// 定义列表字段内容
|
||||
const columns: any = [
|
||||
{
|
||||
@ -105,7 +108,7 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
title: '会员类型',
|
||||
align: 'center',
|
||||
width: 120,
|
||||
hideInSearch: true,
|
||||
// hideInSearch: true,
|
||||
valueType: 'select',
|
||||
valueEnum: MEMBERSHIP_TYPEObj
|
||||
},
|
||||
@ -133,16 +136,16 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
{
|
||||
dataIndex: 'GROWTHDAILY_CAP',
|
||||
title: '每日上限',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
},
|
||||
// {
|
||||
// dataIndex: 'GROWTHDAILY_CAP',
|
||||
// title: '每日上限',
|
||||
// width: 120,
|
||||
// align: 'center',
|
||||
// hideInSearch: true,
|
||||
// },
|
||||
{
|
||||
dataIndex: 'GROWTHTOTAL_CAP',
|
||||
title: '总上限值',
|
||||
title: '晋升后成长值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
@ -222,7 +225,6 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
// },
|
||||
];
|
||||
|
||||
|
||||
const handelDelete = async (id: number) => {
|
||||
const result = await handleDeleteGROWTHSETTING({
|
||||
GROWTHSETTINGId: id
|
||||
@ -293,7 +295,8 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
searchParameter: {
|
||||
PROVINCE_CODE: currentUser?.ProvinceCode || "",
|
||||
OWNERUNIT_ID: 911,
|
||||
GROWTHSETTING_STATE: params?.GROWTHSETTING_STATE
|
||||
GROWTHSETTING_STATE: params?.GROWTHSETTING_STATE,
|
||||
MEMBERSHIP_TYPES: params?.MEMBERSHIP_TYPE
|
||||
},
|
||||
SortStr: "PROMOTION_LEVEL desc",
|
||||
PageIndex: 1,
|
||||
@ -439,7 +442,7 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
autoFocusFirstInput
|
||||
submitter={false}
|
||||
preserve={false}
|
||||
labelCol={{ style: { width: 80 } }}
|
||||
labelCol={{ style: { width: 100 } }}
|
||||
initialValues={{
|
||||
...currentRow,
|
||||
SCORESETTING_STATE: (currentRow?.GROWTHSETTING_STATE || currentRow?.GROWTHSETTING_STATE === 0) ? currentRow?.GROWTHSETTING_STATE : 1,
|
||||
@ -496,38 +499,6 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
options={MEMBERSHIP_TYPEList}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
name="MEMBERSHIP_LEVEL"
|
||||
label="会员等级"
|
||||
options={MEMBERSHIPLEVELYNList}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
name="PROMOTION_LEVEL"
|
||||
label="晋升等级"
|
||||
options={MEMBERSHIPLEVELYNList}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTH_VALUE"
|
||||
label="所需成长值"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTHDAILY_CAP"
|
||||
label="每日上限"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTHTOTAL_CAP"
|
||||
label="总上限值"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
name="GROWTHSETTING_STATE"
|
||||
@ -539,6 +510,60 @@ const GrowthValueRuleConfig: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
initialValue={1}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
name="MEMBERSHIP_LEVEL"
|
||||
label="会员等级"
|
||||
options={defaultMemberLevel}
|
||||
fieldProps={{
|
||||
onChange: (e: any) => {
|
||||
console.log('e', e);
|
||||
console.log('promotionMemberLevel', promotionMemberLevel);
|
||||
if (promotionMemberLevel && promotionMemberLevel.length > 0) {
|
||||
let list: any = JSON.parse(JSON.stringify(promotionMemberLevel))
|
||||
|
||||
list.forEach((item: any) => {
|
||||
item.disabled = false
|
||||
})
|
||||
|
||||
|
||||
list.forEach((item: any) => {
|
||||
if (Number(item.value) <= Number(e)) {
|
||||
item.disabled = true
|
||||
}
|
||||
})
|
||||
setPromotionMemberLevel(list)
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormSelect
|
||||
name="PROMOTION_LEVEL"
|
||||
label="晋升等级"
|
||||
options={promotionMemberLevel}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTH_VALUE"
|
||||
label="所需成长值"
|
||||
/>
|
||||
</Col>
|
||||
{/* <Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTHDAILY_CAP"
|
||||
label="每日上限"
|
||||
/>
|
||||
</Col> */}
|
||||
<Col span={12}>
|
||||
<ProFormText
|
||||
name="GROWTHTOTAL_CAP"
|
||||
label="晋升后成长值"
|
||||
/>
|
||||
</Col>
|
||||
|
||||
|
||||
<Col span={24}>
|
||||
<ProFormTextArea
|
||||
|
||||
@ -366,7 +366,7 @@ const HomepageAds: React.FC<{ currentUser: CurrentUser | undefined }> = (props)
|
||||
onFocus={() => { }}
|
||||
onBlur={() => { }}
|
||||
>
|
||||
{currentRow ? '更新会员收货地址' : '新建会员收货地址'}
|
||||
{currentRow ? selectTab === "1" ? '更新首页海报' : '更新首页轮播' : selectTab === "1" ? '新增首页海报' : '新增首页轮播'}
|
||||
</div>
|
||||
}
|
||||
destroyOnClose={true}
|
||||
|
||||
@ -52,8 +52,8 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
dataIndex: 'searchText',
|
||||
title: '查询内容',
|
||||
hideInTable: true,
|
||||
fieldProp: {
|
||||
placeholder: "请输入供货商/购买的商品/收货人"
|
||||
fieldProps: {
|
||||
placeholder: "请输入供货商/购买的商品/订单编号"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -373,6 +373,8 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
headerTitle={<PageTitleBox props={props} />} // 列表表头
|
||||
search={{ span: 6 }}
|
||||
request={async (params) => {
|
||||
console.log('paramsparamsparams', params);
|
||||
|
||||
const req = {
|
||||
SearchParameter: {
|
||||
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
||||
@ -380,16 +382,17 @@ const MallOrderManage: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||||
SALEBILL_TYPES: params?.orderType === '0' ? '3000,3001,3002,3010' : params?.orderType,
|
||||
ORDER_DATE_Start: params?.ORDER_DATE_Start || "",
|
||||
ORDER_DATE_End: params?.ORDER_DATE_End || "",
|
||||
SALEBILL_STATES: params?.SALEBILL_STATE === "0" ? "1010,2010,3000" : params?.SALEBILL_STATE,
|
||||
CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD
|
||||
SALEBILL_STATES: params?.orderStatus === "0" ? "1010,2010,3000" : params?.orderStatus,
|
||||
CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD,
|
||||
SearchKeyValue: params?.searchText || ""
|
||||
},
|
||||
PageIndex: 1,
|
||||
PageSize: 999999,
|
||||
SortStr: "ORDER_DATE desc",
|
||||
keyWord: {
|
||||
Key: "MERCHANTS_NAME,ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
|
||||
Value: params?.searchText || ""
|
||||
},
|
||||
// keyWord: {
|
||||
// Key: "MERCHANTS_NAME,ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
|
||||
// Value: params?.searchText || ""
|
||||
// },
|
||||
}
|
||||
console.log('reqreqreqreqreq', req);
|
||||
|
||||
|
||||
@ -210,7 +210,7 @@ const MallSummaryStatistics: React.FC<{ currentUser: CurrentUser | undefined }>
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
handleGetTopData()
|
||||
handleGetTopData()
|
||||
}, [])
|
||||
return (
|
||||
<div className="MallSummaryStatisticsMain">
|
||||
|
||||
@ -51,8 +51,8 @@ const OrderAfterSalesManage: React.FC<{ currentUser: CurrentUser }> = (props) =>
|
||||
dataIndex: 'searchText',
|
||||
title: '查询内容',
|
||||
hideInTable: true,
|
||||
fieldProp: {
|
||||
placeholder: "请输入购买的商品/订单编号/联系电话/会员名称"
|
||||
fieldProps: {
|
||||
placeholder: "请输入购买的商品/订单编号"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -78,7 +78,7 @@ const OrderAfterSalesManage: React.FC<{ currentUser: CurrentUser }> = (props) =>
|
||||
valueEnum: {
|
||||
"0": "全部",
|
||||
"8000": "退款申请中",
|
||||
"8020": "退款申请中",
|
||||
"8020": "退款审核中",
|
||||
"8900": "订单已退款",
|
||||
"9000": "订单已关闭",
|
||||
},
|
||||
@ -170,7 +170,7 @@ const OrderAfterSalesManage: React.FC<{ currentUser: CurrentUser }> = (props) =>
|
||||
valueType: "select",
|
||||
valueEnum: {
|
||||
"8000": "退款申请中",
|
||||
"8020": "退款申请中",
|
||||
"8020": "退款审核中",
|
||||
"8900": "订单已退款",
|
||||
"9000": "订单已关闭",
|
||||
},
|
||||
@ -276,16 +276,17 @@ const OrderAfterSalesManage: React.FC<{ currentUser: CurrentUser }> = (props) =>
|
||||
ORDER_DATE_Start: params?.ORDER_DATE_Start || "",
|
||||
ORDER_DATE_End: params?.ORDER_DATE_End || "",
|
||||
SALEBILL_STATES: params?.orderStatus === "0" ? "8000,8020,8900,9000" : params?.orderStatus,
|
||||
SALEBILL_TYPES: "3999"
|
||||
SALEBILL_TYPES: "3999",
|
||||
SearchKeyValue: params?.searchText || ""
|
||||
// CHANNEL_TYPE: params?.PAY_METHOD === "0" ? "" : params?.PAY_METHOD
|
||||
},
|
||||
PageIndex: 1,
|
||||
PageSize: 999999,
|
||||
SortStr: "ORDER_DATE desc",
|
||||
keyWord: {
|
||||
Key: "ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
|
||||
Value: params?.searchText || ""
|
||||
},
|
||||
// keyWord: {
|
||||
// Key: "ORDER_PERSON,ORDER_PERSONTEL,SALEBILL_CODE,COMMODITY_NAME",
|
||||
// Value: params?.searchText || ""
|
||||
// },
|
||||
|
||||
}
|
||||
console.log('reqreqreqreqreq', req);
|
||||
|
||||
@ -44,6 +44,7 @@ const LeftSelectMallType = ({ setSelectedId, reload, actionRef, currentUser, wid
|
||||
if (USERDEFINEDTYPEList && USERDEFINEDTYPEList.length > 0) {
|
||||
setTreeView(USERDEFINEDTYPEList)
|
||||
setData(USERDEFINEDTYPEList)
|
||||
setAllTreeViews(USERDEFINEDTYPEList)
|
||||
return USERDEFINEDTYPEList
|
||||
} else {
|
||||
const req = {
|
||||
@ -57,7 +58,7 @@ const LeftSelectMallType = ({ setSelectedId, reload, actionRef, currentUser, wid
|
||||
setData(data)
|
||||
|
||||
session.set("USERDEFINEDTYPEList", data)
|
||||
|
||||
setAllTreeViews(data)
|
||||
return data
|
||||
}
|
||||
|
||||
@ -71,18 +72,20 @@ const LeftSelectMallType = ({ setSelectedId, reload, actionRef, currentUser, wid
|
||||
// 筛选左侧的服务区树
|
||||
const handleFilterServiceTree = async (value?: string) => {
|
||||
const resList: any = JSON.parse(JSON.stringify(allTreeViews))
|
||||
console.log('resListresListresListresList', resList);
|
||||
|
||||
setSelectedId('')
|
||||
if (resList && resList.length > 0 && value) {
|
||||
setTreeView([])
|
||||
const list: any = []
|
||||
resList.forEach((item: any) => {
|
||||
if (item.label.indexOf(value) !== -1) {
|
||||
if (item.USERDEFINEDTYPE_NAME.indexOf(value) !== -1) {
|
||||
list.push(item)
|
||||
} else {
|
||||
if (item.children && item.children.length > 0) {
|
||||
const childrenList: any = []
|
||||
item.children.forEach((subItem: any) => {
|
||||
if (subItem.label.indexOf(value) !== -1) {
|
||||
if (subItem.USERDEFINEDTYPE_NAME.indexOf(value) !== -1) {
|
||||
childrenList.push(subItem)
|
||||
}
|
||||
})
|
||||
@ -144,9 +147,9 @@ const LeftSelectMallType = ({ setSelectedId, reload, actionRef, currentUser, wid
|
||||
className="pageTable-leftnav"
|
||||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? width ? `${width}px` : "300px" : "60px" }}
|
||||
extra={<div className="leftSelectBox">
|
||||
{/* <img className="searchIcon" src={searchIcon} onClick={() => {
|
||||
<img className="searchIcon" src={searchIcon} onClick={() => {
|
||||
setShowServiceSearchBox(true)
|
||||
}} /> */}
|
||||
}} />
|
||||
<MenuFoldOutlined onClick={() => {
|
||||
setCollapsible(!collapsible);
|
||||
}} />
|
||||
@ -195,32 +198,21 @@ const LeftSelectMallType = ({ setSelectedId, reload, actionRef, currentUser, wid
|
||||
>
|
||||
{treeView && treeView.length > 0 ? <Tree
|
||||
checkable
|
||||
treeData={selectOnly
|
||||
? (isShowAllInTree
|
||||
? [{
|
||||
label: '全部',
|
||||
value: 0,
|
||||
key: '0-0',
|
||||
children: convertTreeForSelectOnly(treeView)
|
||||
}]
|
||||
: convertTreeForSelectOnly(treeView))
|
||||
: (isShowAllInTree
|
||||
? [{
|
||||
USERDEFINEDTYPE_NAME: '全部',
|
||||
value: 0,
|
||||
USERDEFINEDTYPE_ID: '0-0',
|
||||
children: treeView
|
||||
}]
|
||||
: treeView)}
|
||||
treeData={[{
|
||||
USERDEFINEDTYPE_NAME: '全部',
|
||||
value: 0,
|
||||
USERDEFINEDTYPE_ID: '0-0',
|
||||
children: treeView
|
||||
}]}
|
||||
blockNode
|
||||
// defaultExpandAll={isShowAllInTree ? false : true}
|
||||
defaultExpandedKeys={isShowAllInTree ? treeShowRow && treeShowRow.length > 0 ? treeShowRow : ['0-0'] : []}
|
||||
defaultExpandedKeys={['0-0']}
|
||||
onCheck={(checkedKeys: React.Key[] | any, info) => {
|
||||
console.log('checkedKeyscheckedKeyscheckedKeys', checkedKeys);
|
||||
console.log('infoinfoinfoinfoinfoinfo', info);
|
||||
// 多选逻辑
|
||||
// const selectedIds = info.checkedNodes.filter((n: any) => n?.USERDEFINEDTYPE_PID !== -1)
|
||||
const selectedIds = info.checkedNodes.filter((n: any) => n?.USERDEFINEDTYPE_ID)
|
||||
const selectedIds = info.checkedNodes.filter((n: any) => n?.USERDEFINEDTYPE_ID !== '0-0')
|
||||
console.log('selectedIdsselectedIds', selectedIds);
|
||||
setSelectedId(selectedIds.map((n: any) => n?.USERDEFINEDTYPE_ID)?.toString() || '')
|
||||
if (reload) {
|
||||
|
||||
@ -960,7 +960,7 @@ const COMMODITYTable: React.FC<{ currentUser: CurrentUser | undefined }> = (prop
|
||||
// },
|
||||
showSearch: true,
|
||||
filterOption: (input, node) =>
|
||||
(node.BRAND_NAME || '').toLowerCase().includes(input.toLowerCase())
|
||||
(node.label || '').toLowerCase().includes(input.toLowerCase())
|
||||
}}
|
||||
rules={[
|
||||
{
|
||||
|
||||
@ -253,7 +253,7 @@ const RegistrationRetentionAnalysis: React.FC<{ currentUser: CurrentUser, isComp
|
||||
|
||||
|
||||
|
||||
const handleGetTableData = async () => {
|
||||
const handleGetTableData = async (paramsObj?: any) => {
|
||||
const res: any = formRef.current?.getFieldsValue()
|
||||
console.log('resresres', res);
|
||||
let params: any = {
|
||||
@ -272,8 +272,8 @@ const RegistrationRetentionAnalysis: React.FC<{ currentUser: CurrentUser, isComp
|
||||
USER_MOBILEPHONE: parentDetail?.MEMBERSHIP_MOBILEPHONE
|
||||
},
|
||||
SortStr: 'BEHAVIORRECORD_TIME desc',
|
||||
PageIndex: 1,
|
||||
PageSize: 999999
|
||||
PageIndex: paramsObj.current || 1,
|
||||
PageSize: paramsObj?.pageSize || 999999
|
||||
} : {
|
||||
SearchParameter: {
|
||||
BEHAVIORRECORD_TIME_Start: moment(params?.BEHAVIORRECORD_TIME).format('YYYY-MM-DD'),
|
||||
@ -403,7 +403,7 @@ const RegistrationRetentionAnalysis: React.FC<{ currentUser: CurrentUser, isComp
|
||||
setting: true
|
||||
}}
|
||||
request={async (params) => {
|
||||
handleGetTableData()
|
||||
handleGetTableData(params)
|
||||
// if (!isFirst) {
|
||||
// handleGetTableData()
|
||||
// }
|
||||
|
||||
@ -0,0 +1,258 @@
|
||||
.SupplierOrderStatisticsMain {
|
||||
width: 100%;
|
||||
|
||||
.SupplierOrderStatisticsTop {
|
||||
width: 100%;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 6px 0px rgba(31, 48, 95, 0.2);
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
|
||||
.SupplierOrderStatisticsTitleBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.SupplierOrderStatisticsTitle {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.SupplierOrderStatisticsTitle::after {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #1492FF;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.SupplierOrderStatisticsContentBox {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
// .SupplierOrderStatisticsItemFirst {
|
||||
// width: 280px;
|
||||
// height: 180px;
|
||||
// background-image: url('../../../assets/detail/staticSumTotalBg.png');
|
||||
// background-size: 100% 100%;
|
||||
// background-repeat: no-repeat;
|
||||
// box-sizing: border-box;
|
||||
// padding: 26px 39px;
|
||||
// margin-right: 16px;
|
||||
|
||||
// .firstItemTitle {
|
||||
// font-family: PingFangSC, PingFang SC;
|
||||
// font-weight: 500;
|
||||
// font-size: 18px;
|
||||
// color: #FFFFFF;
|
||||
// line-height: 13px;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// }
|
||||
|
||||
// .firstItemValue {
|
||||
// font-family: DINAlternate, DINAlternate;
|
||||
// font-weight: bold;
|
||||
// font-size: 28px;
|
||||
// color: #FFFFFF;
|
||||
// line-height: 32px;
|
||||
// text-align: left;
|
||||
// font-style: normal;
|
||||
// margin-top: 12px;
|
||||
// }
|
||||
// }
|
||||
|
||||
.SupplierOrderStatisticsItemOther {
|
||||
width: 100%;
|
||||
height: 180px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.SupplierOrderStatisticsOtherItem {
|
||||
width: calc((100% - 112px) / 7);
|
||||
height: 100%;
|
||||
background: #F6F9FF;
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 29px 24px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
.otherItemTitle {
|
||||
height: 36px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333333;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.otherItemValue {
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
color: #1492FF;
|
||||
line-height: 38px;
|
||||
text-align: left;
|
||||
margin-top: 17px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.addLabel {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 12px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-right: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
|
||||
.otherItemAddBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
|
||||
.addIcon {
|
||||
width: 7px;
|
||||
height: 10px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.addValue {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
// .otherBgIcon {
|
||||
// width: 76px;
|
||||
// height: 51px;
|
||||
// position: absolute;
|
||||
// top: 29px;
|
||||
// right: 4px;
|
||||
// background-image: url(../../../assets/detail/otherBgIcon.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
// }
|
||||
}
|
||||
|
||||
.SupplierOrderStatisticsOtherItemSelect {
|
||||
background-image: url('../../../assets/detail/staticSumTotalBg.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
.otherItemTitle {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.otherItemValue {
|
||||
font-family: DINAlternate, DINAlternate;
|
||||
font-weight: bold;
|
||||
font-size: 32px;
|
||||
color: #fff;
|
||||
line-height: 38px;
|
||||
text-align: left;
|
||||
margin-top: 17px;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.addLabel {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.otherItemAddBox {
|
||||
|
||||
.addValue {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
line-height: 16px;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.SupplierOrderStatisticsBottom {
|
||||
width: 100%;
|
||||
margin-top: 16px;
|
||||
box-sizing: border-box;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 6px 0px rgba(31, 48, 95, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
|
||||
.SupplierOrderStatisticsTitleBox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.SupplierOrderStatisticsTitle {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 18px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-left: 12px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.SupplierOrderStatisticsTitle::after {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #1492FF;
|
||||
border-radius: 2px;
|
||||
position: absolute;
|
||||
left: -12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,242 @@
|
||||
import { connect } from "umi";
|
||||
import type { ConnectState } from "@/models/connect";
|
||||
import ProCard from "@ant-design/pro-card";
|
||||
import searchIcon from '@/assets/ai/searchIcon.png'
|
||||
import { useRef, useState } from "react";
|
||||
import { MenuFoldOutlined } from "@ant-design/icons";
|
||||
import ProForm, { ProFormText } from "@ant-design/pro-form";
|
||||
import { Button, Col, FormInstance, Row, Tree } from "antd";
|
||||
import close from '@/assets/ai/close.png'
|
||||
import { getServerpartTree } from "@/services/options";
|
||||
import useRequest from "@ahooksjs/use-request";
|
||||
import './style.less'
|
||||
import { getMerchantShopTree } from "@/pages/Setting/Users/service";
|
||||
import session from "@/utils/session";
|
||||
import { handeGetMERCHANTSList } from "../../service";
|
||||
|
||||
|
||||
type DetailProps = {
|
||||
setSelectedId: any; // 把选择的服务区 可以带给外层
|
||||
reload?: boolean; // 选择服务区 是否可以刷新组件之外的内容
|
||||
actionRef?: any; // 和reload配合使用 确认要刷新的内容
|
||||
currentUser: any; // 当前用户的信息
|
||||
width?: number; // 组件的宽度
|
||||
otherFun?: any; // 点击之后要进行的其他操作 多个操作可以写在一个方法里面传进来
|
||||
setCollapsible: any; // 是否收缩组件
|
||||
collapsible: boolean; // 收缩组件的判断依据
|
||||
haveTest?: boolean;// 是否有测试服务区
|
||||
handleGetLeftTreeData?: any // 拿到树数据的方法 必须要有输出值的
|
||||
noWj?: any // 把万佳商贸隐藏
|
||||
selectOnly?: boolean// 传入的时候 仅支持单选
|
||||
}
|
||||
const SupplierLeftSelectTree = ({ setSelectedId, reload, actionRef, currentUser, width, otherFun, setCollapsible, collapsible, haveTest, handleGetLeftTreeData, noWj, selectOnly }: DetailProps) => {
|
||||
const searchTreeRef = useRef<FormInstance>();
|
||||
// 默认的服务区树
|
||||
const [allTreeViews, setAllTreeViews] = useState<any>()
|
||||
// 是否要显示全部
|
||||
const [isShowAllInTree, setIsShowAllInTree] = useState<boolean>(false)
|
||||
// 加载服务区树
|
||||
const { loading: treeLoading, data: treeViews } = useRequest(async () => {
|
||||
const req = {
|
||||
searchParameter: {
|
||||
OWNERUNIT_ID: currentUser?.OwnerUnitId,
|
||||
PROVINCE_CODE: currentUser?.ProvinceCode,
|
||||
MERCHANTS_TYPE: '',
|
||||
MERCHANTS_AUTOTYPE: '',
|
||||
MERCHANTS_STATE: 1
|
||||
},
|
||||
PageIndex: 1,
|
||||
PageSize: 999999,
|
||||
}
|
||||
const data = await handeGetMERCHANTSList(req);
|
||||
console.log('data', data);
|
||||
|
||||
let list: any = data.List
|
||||
setTreeView(list)
|
||||
return list
|
||||
})
|
||||
// 显示服务区树搜索框
|
||||
const [showServiceSearchBox, setShowServiceSearchBox] = useState<boolean>(false)
|
||||
// 实际显示在左侧的服务区树
|
||||
const [treeView, setTreeView] = useState<any>()
|
||||
// 树要展开的行
|
||||
const [treeShowRow, setTreeShowRow] = useState<any>()
|
||||
// 筛选左侧的服务区树
|
||||
const handleFilterServiceTree = async (value?: string) => {
|
||||
const resList: any = JSON.parse(JSON.stringify(allTreeViews))
|
||||
setSelectedId('')
|
||||
if (resList && resList.length > 0 && value) {
|
||||
setTreeView([])
|
||||
const list: any = []
|
||||
resList.forEach((item: any) => {
|
||||
if (item.label.indexOf(value) !== -1) {
|
||||
list.push(item)
|
||||
} else {
|
||||
if (item.children && item.children.length > 0) {
|
||||
const childrenList: any = []
|
||||
item.children.forEach((subItem: any) => {
|
||||
if (subItem.label.indexOf(value) !== -1) {
|
||||
childrenList.push(subItem)
|
||||
}
|
||||
})
|
||||
item.children = childrenList
|
||||
if (childrenList && childrenList.length > 0) {
|
||||
list.push(item)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
if (list && list.length > 0) {
|
||||
const keyList: any = ['0-0']
|
||||
list.forEach((item: any) => {
|
||||
keyList.push(item.key)
|
||||
})
|
||||
setTreeShowRow(keyList)
|
||||
}
|
||||
setTimeout(() => {
|
||||
setTreeView(list)
|
||||
}, 100)
|
||||
} else {
|
||||
setTreeView([])
|
||||
setTreeShowRow([])
|
||||
setTreeView(allTreeViews)
|
||||
}
|
||||
}
|
||||
// 根据传入的服务区id筛选剔除掉这个服务区
|
||||
const handleFilterList = (list: any, id: any) => {
|
||||
let res: any = []
|
||||
list.forEach((item: any) => {
|
||||
if (item.value === id) {
|
||||
|
||||
} else {
|
||||
res.push(item)
|
||||
}
|
||||
})
|
||||
console.log('res', res);
|
||||
return res
|
||||
}
|
||||
|
||||
// 仅支持单选一个服务区的时候 调用的方法
|
||||
const convertTreeForSelectOnly = (treeData: any[]): any[] => {
|
||||
return treeData.map(item => {
|
||||
const newItem = {
|
||||
...item,
|
||||
disabled: item.type !== 1,
|
||||
};
|
||||
if (item.children) {
|
||||
newItem.children = convertTreeForSelectOnly(item.children);
|
||||
}
|
||||
return newItem;
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProCard
|
||||
style={{ width: !collapsible ? width ? `${width}px` : "300px" : "60px" }}
|
||||
className="pageTable-leftnav"
|
||||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? width ? `${width}px` : "300px" : "60px" }}
|
||||
extra={<div className="leftSelectBox">
|
||||
<img className="searchIcon" src={searchIcon} onClick={() => {
|
||||
setShowServiceSearchBox(true)
|
||||
}} />
|
||||
<MenuFoldOutlined onClick={() => {
|
||||
setCollapsible(!collapsible);
|
||||
}} />
|
||||
<div className="fixedBox" style={{ display: showServiceSearchBox ? 'flex' : 'none', width: width ? `${width}px` : '275px' }}>
|
||||
<ProForm
|
||||
formRef={searchTreeRef}
|
||||
layout={'horizontal'}
|
||||
submitter={{
|
||||
render: () => {
|
||||
return []
|
||||
}
|
||||
}}
|
||||
isKeyPressSubmit
|
||||
onFinish={(values: any) => {
|
||||
return handleFilterServiceTree(values?.searchValue || '')
|
||||
}}
|
||||
>
|
||||
<Row>
|
||||
<Col span={15} className={'noBottom'}>
|
||||
<ProFormText
|
||||
name={'searchValue'}
|
||||
fieldProps={{
|
||||
placeholder: '请输入服务区名称'
|
||||
}}
|
||||
allowClear
|
||||
/>
|
||||
</Col>
|
||||
<Col span={2}></Col>
|
||||
<Col span={5}>
|
||||
<Button type={'primary'} onClick={() => {
|
||||
searchTreeRef.current?.submit()
|
||||
}}>查询</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
</ProForm>
|
||||
<img style={{ width: '20px', height: '20px', cursor: 'pointer', marginLeft: '5px' }} src={close} onClick={() => {
|
||||
setShowServiceSearchBox(false)
|
||||
}} />
|
||||
</div>
|
||||
</div>}
|
||||
colSpan={!collapsible ? "300px" : "60px"}
|
||||
title={!collapsible ? "请选择服务区" : ""}
|
||||
headerBordered
|
||||
collapsed={collapsible}
|
||||
>
|
||||
{treeView && treeView.length > 0 ? <Tree
|
||||
checkable
|
||||
treeData={[{
|
||||
MERCHANTS_NAME: '全部',
|
||||
value: 0,
|
||||
MERCHANTS_ID: '0-0',
|
||||
children: treeView
|
||||
}]}
|
||||
blockNodes
|
||||
defaultExpandAll={true}
|
||||
defaultExpandedKeys={['0-0']}
|
||||
onCheck={(checkedKeys: React.Key[] | any, info) => {
|
||||
if (selectOnly) {
|
||||
// 只允许单选且只允许type为1
|
||||
const checked = Array.isArray(checkedKeys.checked) ? checkedKeys.checked : checkedKeys;
|
||||
const node = info.node;
|
||||
if (node.type === 1) {
|
||||
setSelectedId(node.value);
|
||||
if (reload) {
|
||||
actionRef?.current?.reload();
|
||||
}
|
||||
if (otherFun) {
|
||||
otherFun(info);
|
||||
}
|
||||
} else {
|
||||
// 取消非type=1的勾选
|
||||
setSelectedId('');
|
||||
}
|
||||
} else {
|
||||
// 多选逻辑
|
||||
const selectedIds = info.checkedNodes.filter((n: any) => n?.MERCHANTS_ID)
|
||||
// const selectedIds = info.checkedNodes
|
||||
setSelectedId(selectedIds.map((n: any) => n?.MERCHANTS_ID)?.toString() || '')
|
||||
if (reload) {
|
||||
actionRef?.current?.reload()
|
||||
}
|
||||
if (otherFun) {
|
||||
otherFun(info)
|
||||
}
|
||||
}
|
||||
}}
|
||||
fieldNames={{
|
||||
title: "MERCHANTS_NAME",
|
||||
key: "MERCHANTS_ID"
|
||||
}}
|
||||
/> : ''}
|
||||
</ProCard>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default connect(({ user }: ConnectState) => ({
|
||||
currentUser: user.currentUser,
|
||||
}))(SupplierLeftSelectTree);
|
||||
@ -0,0 +1,29 @@
|
||||
.pageTable-leftnav{
|
||||
.leftSelectBox{
|
||||
position: relative;
|
||||
.searchIcon{
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.fixedBox{
|
||||
position: absolute;
|
||||
width: 275px;
|
||||
background: #fff;
|
||||
right: -10px;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 8px;
|
||||
box-sizing: border-box;
|
||||
padding: 12px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.noBottom{
|
||||
.ant-form-item{
|
||||
margin-bottom: 0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
785
src/pages/travelMember/SupplierOrderStatistics/index.tsx
Normal file
785
src/pages/travelMember/SupplierOrderStatistics/index.tsx
Normal file
@ -0,0 +1,785 @@
|
||||
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,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalActualAmount', 'maxData'],
|
||||
key: "TotalActualAmount.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalActualAmount', 'minData'],
|
||||
key: "TotalActualAmount.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalActualAmount', 'avgData'],
|
||||
key: "TotalActualAmount.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalActualAmount', 'YOYData'],
|
||||
key: "TotalActualAmount.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalActualAmount', 'YOYDataAdd'],
|
||||
key: "TotalActualAmount.YOYDataAdd",
|
||||
title: '同比增长',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
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,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
dataIndex: 'TotalSuccAmount',
|
||||
title: '成交销售金额',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'summaryData'],
|
||||
key: "TotalSuccAmount.summaryData",
|
||||
title: '合计值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'maxData'],
|
||||
key: "TotalSuccAmount.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'minData'],
|
||||
key: "TotalSuccAmount.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'avgData'],
|
||||
key: "TotalSuccAmount.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'YOYData'],
|
||||
key: "TotalSuccAmount.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccAmount', 'YOYDataAdd'],
|
||||
key: "TotalSuccAmount.YOYDataAdd",
|
||||
title: '同比增长',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
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,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
dataIndex: 'TotalSuccTicket',
|
||||
title: '成交订单笔数',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'summaryData'],
|
||||
key: "TotalSuccTicket.summaryData",
|
||||
title: '合计值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'maxData'],
|
||||
key: "TotalSuccTicket.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'minData'],
|
||||
key: "TotalSuccTicket.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'avgData'],
|
||||
key: "TotalSuccTicket.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'YOYData'],
|
||||
key: "TotalSuccTicket.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalSuccTicket', 'YOYDataAdd'],
|
||||
key: "TotalSuccTicket.YOYDataAdd",
|
||||
title: '同比增长',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
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,
|
||||
ellipsis: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
dataIndex: 'TotalCount',
|
||||
title: '成交销售数量',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
dataIndex: ['TotalCount', 'summaryData'],
|
||||
key: "TotalCount.summaryData",
|
||||
title: '合计值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalCount', 'maxData'],
|
||||
key: "TotalCount.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalCount', 'minData'],
|
||||
key: "TotalCount.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalCount', 'avgData'],
|
||||
key: "TotalCount.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalCount', 'YOYData'],
|
||||
key: "TotalCount.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalCount', 'YOYDataAdd'],
|
||||
key: "TotalCount.YOYDataAdd",
|
||||
title: '同比增长',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
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,
|
||||
ellipsis: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
dataIndex: 'TotalFailureTicket',
|
||||
title: '交易失败笔数',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'summaryData'],
|
||||
key: "TotalFailureTicket.summaryData",
|
||||
title: '合计值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'maxData'],
|
||||
key: "TotalFailureTicket.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'minData'],
|
||||
key: "TotalFailureTicket.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'avgData'],
|
||||
key: "TotalFailureTicket.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'YOYData'],
|
||||
key: "TotalFailureTicket.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalFailureTicket', 'YOYDataAdd'],
|
||||
key: "TotalFailureTicket.YOYDataAdd",
|
||||
title: '同比增长',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
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,
|
||||
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,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundTicket', 'maxData'],
|
||||
key: "TotalRefundTicket.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundTicket', 'minData'],
|
||||
key: "TotalRefundTicket.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundTicket', 'avgData'],
|
||||
key: "TotalRefundTicket.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundTicket', 'YOYData'],
|
||||
key: "TotalRefundTicket.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundTicket', 'YOYDataAdd'],
|
||||
key: "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",
|
||||
title: '环比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
dataIndex: 'TotalRefundAmount',
|
||||
title: '退款订单金额',
|
||||
hideInSearch: true,
|
||||
children: [
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'summaryData'],
|
||||
key: "TotalRefundAmount.summaryData",
|
||||
title: '合计值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'maxData'],
|
||||
key: "TotalRefundAmount.maxData",
|
||||
title: '最大值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'minData'],
|
||||
key: "TotalRefundAmount.minData",
|
||||
title: '最小值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'avgData'],
|
||||
key: "TotalRefundAmount.avgData",
|
||||
title: '平均值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'YOYData'],
|
||||
key: "TotalRefundAmount.YOYData",
|
||||
title: '同比数值',
|
||||
width: 120,
|
||||
align: 'center',
|
||||
hideInSearch: true,
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
dataIndex: ['TotalRefundAmount', 'YOYDataAdd'],
|
||||
key: "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",
|
||||
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 - 410px)" }}
|
||||
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);
|
||||
@ -42,6 +42,7 @@ const MemberDetail = ({ showDetailDrawer, currentRow, handleCloseModal, currentU
|
||||
const [disabled, setDraggleDisabled] = useState<boolean>() // 是否拖动
|
||||
|
||||
let MEMBERSHIPTYPEYNObj = session.get('MEMBERSHIPTYPEYNObj');
|
||||
let MEMBERSHIPLEVELYNObj = session.get('MEMBERSHIPLEVELYNObj');
|
||||
let MEMBERSHIPLEVELYNList = session.get('MEMBERSHIPLEVELYNList');
|
||||
let COMPANY_STATEList = session.get('COMPANY_STATEList');
|
||||
let SCORETYPETree = session.get('SCORETYPETree')
|
||||
@ -366,6 +367,12 @@ const MemberDetail = ({ showDetailDrawer, currentRow, handleCloseModal, currentU
|
||||
<span className="memberType">{MEMBERSHIPTYPEYNObj[currentRow?.MEMBERSHIP_TYPE]}</span> : ""
|
||||
}
|
||||
|
||||
|
||||
{
|
||||
currentRow?.MEMBERSHIP_LEVEL && MEMBERSHIPLEVELYNObj && MEMBERSHIPLEVELYNObj[currentRow?.MEMBERSHIP_LEVEL] ?
|
||||
<span className="memberType" style={{ marginLeft: '8px' }}>{MEMBERSHIPLEVELYNObj[currentRow?.MEMBERSHIP_LEVEL]}</span> : ""
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
<div className="topDetailItem">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user