1346 lines
52 KiB
TypeScript
1346 lines
52 KiB
TypeScript
/*
|
||
* @Author: cclu 1106109051@qq.com
|
||
* @Date: 2024-02-22 15:53:07
|
||
* @LastEditors: cclu 1106109051@qq.com
|
||
* @LastEditTime: 2024-08-21 14:53:15
|
||
* @FilePath: \cloud-platform\src\pages\reports\settlementDetail\index.tsx
|
||
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
||
*/
|
||
import React, { useRef } from "react";
|
||
import type { CurrentUser } from "umi";
|
||
import { connect } from "umi";
|
||
import type { ConnectState } from "@/models/connect";
|
||
import { useState } from "react";
|
||
import ProCard from "@ant-design/pro-card";
|
||
import { MenuFoldOutlined } from "@ant-design/icons";
|
||
import type { FormInstance } from "antd";
|
||
import { Input, Tooltip } from "antd";
|
||
import { Space } from "antd";
|
||
import { Popconfirm } from "antd";
|
||
import { Menu } from "antd";
|
||
import SubMenu from 'antd/lib/menu/SubMenu';
|
||
import { Drawer, Modal } from "antd";
|
||
import { Button, message, Select, Avatar, Typography } from "antd";
|
||
import { fmoney, getServerpartTree, getSPRegionShopTree } from "@/services/options";
|
||
import useRequest from "@ahooksjs/use-request";
|
||
import ReactHTMLTableToExcel from "react-html-table-to-excel";
|
||
import moment from "moment";
|
||
import type { ActionType } from "@ant-design/pro-table";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import ProDescriptions from "@ant-design/pro-descriptions";
|
||
import { handleGetTableBasicData, handleGetTableMonthlyReconciliation } from "@/pages/reports/ShopExpenseDetail/service";
|
||
import { wrapTreeNode } from "@/utils/format";
|
||
import { getProjectList, handleAgain, handleGetSplitRes } from "@/pages/BussinessProject/service";
|
||
import ProjectDetail from "@/pages/BussinessProject/detail";
|
||
import type { BusinessProjectModel } from "@/pages/BussinessProject/data";
|
||
import './style.less'
|
||
import RevenueList from "@/pages/BussinessProject/components/RevenueList";
|
||
import ProjectSplitShow from "@/pages/BussinessProject/components/ProjectSplitShow";
|
||
import { handleCreateSettlement } from "@/pages/reports/settlementDetail/service";
|
||
import numeral from "numeral";
|
||
import SHOPEXPENSETable from "@/pages/reports/ShopExpenseDetail/detail";
|
||
import SettlementDetails from "./component/settlementDetails";
|
||
|
||
const settlementDetail: React.FC<{ currentUser: CurrentUser }> = (props) => {
|
||
const { currentUser } = props
|
||
const actionRef = useRef<ActionType>();
|
||
const actionModalRef = useRef<ActionType>();
|
||
const actionSecondRef = useRef<ActionType>();
|
||
const formRef = useRef<FormInstance>();
|
||
const formModalRef = useRef<FormInstance>();
|
||
const formSecondRef = useRef<FormInstance>();
|
||
|
||
const downloadBtnRef = useRef<any>()
|
||
const settlementDetailsRef = useRef<any>()
|
||
|
||
const [otherData, setOtherData] = useState<any>();// 显示表格上方内容
|
||
const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
|
||
const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
|
||
const [showSmallDetail, setShowSmallDetail] = useState<boolean>(false) // 是否显示具体日期详情
|
||
const [currentSmallRow, setCurrentSmallRow] = useState<BusinessProjectModel | any>(undefined) // 选中的当前行
|
||
|
||
// 树相关的属性和方法
|
||
const [selectedId, setSelectedId] = useState<string>()
|
||
const [collapsible, setCollapsible] = useState<boolean>(false)
|
||
// 是否是第一次进入到页面
|
||
const [isFirst, setIsFirst] = useState<boolean>(true)
|
||
// 是否显示打印的表格
|
||
const [showExportTable, setShowExportTable] = useState<boolean>(false)
|
||
const [secondShowLoading, setSecondShowLoading] = useState<boolean>(false)
|
||
const [otherObj, setOtherObj] = useState<any>()
|
||
// 统计月份
|
||
const [searchMonth, setSearchMonth] = useState<any>()
|
||
// 加载服务区树
|
||
const { loading: treeLoading, data: treeView = [] } = useRequest(async () => {
|
||
const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true)
|
||
return data
|
||
})
|
||
const [currenMenu, setCurrenMenu] = useState<any>(); // 当前选中左侧菜单的服务区节点
|
||
// 显示悬浮框
|
||
const [isShowModal, setIsShowModal] = useState<boolean>(false)
|
||
const { TextArea } = Input;
|
||
// 显示备注说明的弹出框
|
||
const [showDescModal, setShowDescModal] = useState<boolean>(false)
|
||
const [descText, setDescText] = useState<string>()
|
||
// 选择的项目
|
||
const [projectId, setProjectId] = useState<any>()
|
||
// 选择的项目行
|
||
const [selectProject, setSelectProject] = useState<any>()
|
||
const [selectRealProject, setSelectRealProject] = useState<any>()
|
||
|
||
const [currentRow, setCurrentRow] = useState<BusinessProjectModel | any>(undefined) // 选中的当前行
|
||
const [currentRecord, setCurrentRecord] = useState<any>()
|
||
const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
|
||
const [showShare, setShowShare] = useState<boolean>(false) // 是否显示详情
|
||
// 下面那表格的数据
|
||
const [secondTableData, setSecondTableData] = useState<any>()
|
||
// 表格加载效果
|
||
const [tableLoading, setTableLoading] = useState<boolean>(false)
|
||
// 项目列表
|
||
const { loading: projectLoading, data: projectList } = useRequest(async () => {
|
||
const data = await handleGetTableBasicData({})
|
||
const list: any = []
|
||
if (data.data && data.data.length > 0) {
|
||
data.data.forEach((item: any) => {
|
||
list.push({ label: item.BUSINESSPROJECT_NAME, value: item.BUSINESSPROJECT_ID })
|
||
})
|
||
}
|
||
return list
|
||
})
|
||
const [tableAllData, setTableAllData] = useState<any>()
|
||
|
||
const columns: any = [
|
||
{
|
||
title: '项目名称',
|
||
dataIndex: 'projectName',
|
||
hideInTable: true,
|
||
valueType: 'select',
|
||
hideInSearch: true,
|
||
// valueEnum: projectList,
|
||
// fieldProps:{
|
||
// showSearch: true,
|
||
// filterOption:(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase()),
|
||
// },
|
||
// renderFormItem:()=>{
|
||
// return <div style={{display:'flex',alignItems:'center'}}>
|
||
// <span>{selectRealProject?.BUSINESSPROJECT_NAME || ''}</span>
|
||
// <Button type={'primary'} style={{marginLeft:'8px'}} onClick={()=>{
|
||
// setIsShowModal(true)
|
||
// }}>选择项目</Button>
|
||
// {/* <Button type={'primary'} style={{marginLeft:'8px'}} onClick={()=>{ */}
|
||
// {/* if (selectRealProject?.BUSINESSPROJECT_ID){ */}
|
||
// {/* console.log('selectRealProject',selectRealProject) */}
|
||
// {/* setCurrentRow(selectRealProject) */}
|
||
// {/* setShowDetail(true) */}
|
||
// {/* }else{ */}
|
||
// {/* message.error('还未选择项目！') */}
|
||
// {/* } */}
|
||
// {/* }}>查看项目</Button> */}
|
||
// </div>
|
||
// // <Select
|
||
// // showSearch={true}
|
||
// // filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
|
||
// // options={projectList}
|
||
// // loading={projectLoading}
|
||
// // allowClear
|
||
// // onChange={(e: any)=>{
|
||
// // if (e){
|
||
// // setProjectId(e)
|
||
// // }else{
|
||
// // setProjectId(undefined)
|
||
// // }
|
||
// // }}
|
||
// // >
|
||
// // </Select>
|
||
// }
|
||
},
|
||
{
|
||
title: '期限',
|
||
dataIndex: '',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>期数</div>,
|
||
dataIndex: 'PeriodIndexStr',
|
||
align: 'left',
|
||
width: 120,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return <span style={{ color: record?.PeriodIndexStr === '项目开始前' ? '#faad14' : '' }}>{record.PeriodIndexStr}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>期限</div>,
|
||
dataIndex: 'PeriodDesc',
|
||
align: 'left',
|
||
width: 200,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ?
|
||
<a style={{
|
||
color: new Date(record.EndDate).getTime() < new Date().getTime() ? '#1890ff' : '#000000',
|
||
cursor: new Date(record.EndDate).getTime() < new Date().getTime() ? 'pointer' : ''
|
||
}} onClick={() => {
|
||
console.log('record', record)
|
||
// StartDate
|
||
if (new Date(record.EndDate).getTime() < new Date().getTime()) {
|
||
const obj: any = {
|
||
...record,
|
||
...otherData,
|
||
BUSINESSPROJECT_ID: selectRealProject.BUSINESSPROJECT_ID,
|
||
STARTDATE: record.StartDate
|
||
}
|
||
console.log('obj', obj)
|
||
setCurrentRow(obj)
|
||
setShowDetail(true)
|
||
}
|
||
}}>
|
||
{`${record?.StartDate}-${record?.EndDate}`}
|
||
</a> :
|
||
<span>{`${record?.PeriodDesc}`}</span>
|
||
}
|
||
// render:(_,record)=>{
|
||
// return record?.IndexStr && record?.IndexDesc!=='合计'?
|
||
// <a onClick={()=>{
|
||
// setCurrentRecord(record)
|
||
// setCurrentRow(selectRealProject)
|
||
// setShowShare(true)
|
||
// }}>{`${record?.StartDate}-${record?.EndDate}` }</a>:
|
||
// <span>{record?.IndexDesc}</span>
|
||
// }
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: '租金信息',
|
||
dataIndex: '',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
|
||
dataIndex: 'MinturnOver',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 170,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.MinturnOver ? numeral(record.MinturnOver).format('0,0.00') : '-'
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>提成比率</div>,
|
||
dataIndex: 'GuaranteeRatio',
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
width: 120,
|
||
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: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.CashAmount ? numeral(record.CashAmount).format('0,0.00') : '-'
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>微支付</div>,
|
||
dataIndex: 'MobilePayAmount',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.MobilePayAmount ? numeral(record.MobilePayAmount).format('0,0.00') : '-'
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>小计</div>,
|
||
dataIndex: 'RevenueAmount',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
const str: any = `微支付(${record.MobilePayAmount || 0}) + 现金(${record.CashAmount || 0})`
|
||
return <Tooltip title={str}>
|
||
<span>{record?.RevenueAmount ? numeral(record.RevenueAmount).format('0,0.00') : '-'}</span>
|
||
</Tooltip>
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>业主收款</div>,
|
||
dataIndex: 'RoyaltyAmount',
|
||
valueType: 'digit',
|
||
width: 100,
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.RoyaltyAmount || record?.RoyaltyAmount === 0 ? numeral(record.RoyaltyAmount).format('0,0.00') : '-'
|
||
}
|
||
},
|
||
{
|
||
title: '应收费用',
|
||
dataIndex: '',
|
||
hideInSearch: true,
|
||
children: [
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>租金</div>,
|
||
dataIndex: 'GuaranteeFee',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
const str: string = record.GuaranteeRatio ?
|
||
(record?.RevenueAmount * (Number(record?.GuaranteeRatio) / 100)) > Number(record?.MinturnOver) ?
|
||
`营业额(${record?.RevenueAmount})*提成比例(${(record?.GuaranteeRatio ? `${record?.GuaranteeRatio}%` : '')})`
|
||
: `保底租金(${record?.MinturnOver})`
|
||
: ''
|
||
return record?.PeriodDesc !== '合计' ? <Tooltip title={str}>
|
||
<a onClick={() => {
|
||
console.log('record', record)
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.GuaranteeFee || record?.GuaranteeFee === 0 ? numeral(record.GuaranteeFee).format('0,0.00') : '-'}
|
||
</a></Tooltip> : <span>{record?.GuaranteeFee || record?.GuaranteeFee === 0 ? numeral(record.GuaranteeFee).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>物业费</div>,
|
||
dataIndex: 'PropertyFee',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.PropertyFee || record?.PropertyFee === 0 ? numeral(record.PropertyFee).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.PropertyFee || record?.PropertyFee === 0 ? numeral(record.PropertyFee).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>房租</div>,
|
||
dataIndex: 'HouseRent',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.HouseRent || record?.HouseRent === 0 ? numeral(record.HouseRent).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.HouseRent || record?.HouseRent === 0 ? numeral(record.HouseRent).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>罚款</div>,
|
||
dataIndex: 'BreachPenalty',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.BreachPenalty || record?.BreachPenalty === 0 ? numeral(record.BreachPenalty).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.BreachPenalty || record?.BreachPenalty === 0 ? numeral(record.BreachPenalty).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>电费</div>,
|
||
dataIndex: 'ElectricityCharge',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.ElectricityCharge || record?.ElectricityCharge === 0 ? numeral(record.ElectricityCharge).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.ElectricityCharge || record?.ElectricityCharge === 0 ? numeral(record.ElectricityCharge).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>水费</div>,
|
||
dataIndex: 'WaterCharge',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.WaterCharge || record?.WaterCharge === 0 ? numeral(record.WaterCharge).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.WaterCharge || record?.WaterCharge === 0 ? numeral(record.WaterCharge).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>其他</div>,
|
||
dataIndex: 'OtherFee',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
return record?.PeriodDesc !== '合计' ? <a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.OtherFee || record?.OtherFee === 0 ? numeral(record.OtherFee).format('0,0.00') : '-'}
|
||
</a> : <span>{record?.OtherFee || record?.OtherFee === 0 ? numeral(record.OtherFee).format('0,0.00') : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>合计</div>,
|
||
dataIndex: 'ReceivableAmount',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
const str: string = `${record?.GuaranteeFee ? `租金(${record?.GuaranteeFee})` : 0}${record?.PropertyFee ? `+物业费(${record?.PropertyFee})` : ''}${record?.HouseRent ? `+房租(${record?.HouseRent})` : ''}${record?.BreachPenalty ? `+罚款(${record?.BreachPenalty})` : ''}${record?.ElectricityCharge ? `+电费(${record?.ElectricityCharge})` : ''}${record?.WaterCharge ? `+水费(${record?.WaterCharge})` : ''}${record?.OtherFee ? `+其他(${record?.OtherFee})` : ''}`
|
||
return record?.PeriodDesc !== '合计' ? <Tooltip title={str}><a onClick={() => {
|
||
setCurrentRow(record)
|
||
setPropertyShow(true)
|
||
}}>
|
||
{record?.ReceivableAmount ? numeral(record.ReceivableAmount).format('0,0.00') : '-'}
|
||
</a></Tooltip> : <Tooltip title={str}><span>{record?.ReceivableAmount ? numeral(record.ReceivableAmount).format('0,0.00') : '-'}</span></Tooltip>
|
||
}
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title: <div style={{ textAlign: 'center' }}>
|
||
<Tooltip title={'业主收款金额-应收费用合计'}>
|
||
退补款
|
||
</Tooltip>
|
||
</div>,
|
||
dataIndex: 'RefundSupplement',
|
||
valueType: 'digit',
|
||
align: 'right',
|
||
width: 100,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
const str: string = record?.PeriodDesc === '合计' ? `${otherObj?.Remark ? otherObj?.Remark : ''}` : `业主收款(${record?.RoyaltyAmount}) - 应收费用(${record?.ReceivableAmount})`
|
||
return record?.RefundSupplement ? <Tooltip title={str}>{numeral(record.RefundSupplement).format('0,0.00')}</Tooltip> : record?.RefundSupplement === 0 ? <Tooltip title={str}>{'0.00'}</Tooltip> : '-'
|
||
}
|
||
},
|
||
// {
|
||
// dataIndex: 'option',
|
||
// title: <div style={{textAlign:'center'}}>操作</div>,
|
||
// width: 120,
|
||
// valueType: 'option',
|
||
// align: 'center',
|
||
// fixed:'right',
|
||
// hideInSearch: true,
|
||
// render: (_,record)=>{
|
||
// return (
|
||
// record.PeriodDesc!=='合计' && new Date(record?.EndDate).getTime()<new Date().getTime() && record?.AllowApply?
|
||
// <Space>
|
||
// <a onClick={()=>{
|
||
// console.log('record',record)
|
||
// setShowDescModal(true)
|
||
// setCurrentRow(record)
|
||
// }}>结算</a>
|
||
// {/* <Popconfirm */}
|
||
// {/* title="确认结算？" */}
|
||
// {/* onConfirm={async()=>{ */}
|
||
// {/* setTableLoading(true) */}
|
||
// {/* const req = { */}
|
||
// {/* OPERATION_TYPE: 11, */}
|
||
// {/* BUSINESSPROCESS_ID:selectRealProject?.BUSINESSPROJECT_ID, */}
|
||
// {/* PROINST_ID:record?.SHOPROYALTY_ID, */}
|
||
// {/* SERVERPART_ID:selectRealProject?.SERVERPART_IDS || '416', */}
|
||
// {/* SERVERPART_IDS:selectRealProject?.SERVERPART_IDS || '416', */}
|
||
// {/* BUSINESSPROCESS_NAME:`${selectRealProject?.BUSINESSPROJECT_NAME}【${record?.IndexDesc}】年度结算`, */}
|
||
// {/* BUSINESS_STARTDATE: moment().format('YYYY-MM-DD'), */}
|
||
// {/* BUSINESSAPPROVAL_STATE:1000 */}
|
||
// {/* } */}
|
||
// {/* const data = await handleCreateSettlement(req) */}
|
||
// {/* if (data.Result_Code===100){ */}
|
||
// {/* message.success(data.Result_Desc) */}
|
||
// {/* }else{ */}
|
||
// {/* message.error(data.Result_Desc) */}
|
||
// {/* } */}
|
||
// {/* setTableLoading(false) */}
|
||
// {/* actionRef.current?.reload() */}
|
||
// {/* }} */}
|
||
// {/* > */}
|
||
// {/* <a>结算</a> */}
|
||
// {/* </Popconfirm> */}
|
||
// </Space>
|
||
// :''
|
||
// )
|
||
// // {
|
||
// // record?.IndexDesc!=='合计'?
|
||
// // return (
|
||
// //
|
||
// // <Space>
|
||
// // <Popconfirm
|
||
// // title="确认结算？"
|
||
// // onConfirm={async()=>{
|
||
// //
|
||
// // }}
|
||
// // >
|
||
// // <a>结算</a>
|
||
// // </Popconfirm>
|
||
// // </Space>:''
|
||
// // }
|
||
// // )
|
||
// }
|
||
// }
|
||
]
|
||
|
||
const columnsModal: any = [
|
||
{
|
||
title: '有效项目',
|
||
dataIndex: 'ProjectStateSearch',
|
||
hideInTable: true,
|
||
valueType: 'select',
|
||
valueEnum: {
|
||
'': { text: '全部' },
|
||
0: { text: '历史项目' },
|
||
1: { text: '在营项目' },
|
||
},
|
||
initialValue: '1'
|
||
},
|
||
{
|
||
title: '项目名称',
|
||
dataIndex: 'BUSINESSPROJECT_NAME',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
onCell: (record) => ({
|
||
style: {
|
||
backgroundColor: new Date(record.PROJECT_ENDDATE).getTime() < new Date().getTime() ? '#fafafa' : '#fff'
|
||
}
|
||
})
|
||
},
|
||
{
|
||
title: '经营商户',
|
||
dataIndex: 'MERCHANTS_NAME',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
onCell: (record) => ({
|
||
style: {
|
||
backgroundColor: new Date(record.PROJECT_ENDDATE).getTime() < new Date().getTime() ? '#fafafa' : '#fff'
|
||
}
|
||
})
|
||
},
|
||
{
|
||
title: '门店名称',
|
||
dataIndex: 'SERVERPARTSHOP_NAME',
|
||
hideInSearch: true,
|
||
ellipsis: true,
|
||
onCell: (record) => ({
|
||
style: {
|
||
backgroundColor: new Date(record.PROJECT_ENDDATE).getTime() < new Date().getTime() ? '#fafafa' : '#fff'
|
||
}
|
||
})
|
||
},
|
||
{
|
||
title: '项目时间',
|
||
dataIndex: '',
|
||
hideInSearch: true,
|
||
sorter: (a, b) => new Date(a.PROJECT_STARTDATE).getTime() - new Date(b.PROJECT_STARTDATE).getTime(),
|
||
render: (_, record) => {
|
||
return `${moment(record?.PROJECT_STARTDATE).format('YYYY-MM-DD')}-${moment(record?.PROJECT_ENDDATE).format('YYYY-MM-DD')}`
|
||
},
|
||
onCell: (record) => ({
|
||
style: {
|
||
backgroundColor: new Date(record.PROJECT_ENDDATE).getTime() < new Date().getTime() ? '#fafafa' : '#fff'
|
||
}
|
||
})
|
||
},
|
||
]
|
||
|
||
// 导出excel方法
|
||
const exportTable = (e) => {
|
||
e.stopPropagation(); // 防止Collapse组件收起
|
||
const main = document.getElementsByClassName('settlementDetailsHideBox')[0]
|
||
|
||
const topBox = main.getElementsByClassName('tableTop')[0]
|
||
const topContent = topBox.querySelector('tbody').cloneNode(true) // 表格头上的东西
|
||
const tempTable = document.createElement('table');
|
||
tempTable.appendChild(topContent);
|
||
|
||
const tableContent = main.getElementsByClassName('ant-table-content')[0]
|
||
const thead = tableContent.querySelector('thead').cloneNode(true); // 深克隆DOM节点
|
||
const tbody = tableContent.querySelector('tbody').cloneNode(true); // 深克隆DOM节点
|
||
const container = document.querySelector('#hiddenBox');
|
||
|
||
tempTable.appendChild(thead);
|
||
tempTable.appendChild(tbody);
|
||
|
||
tempTable.setAttribute('id', 'table-to-xls-settlementDetails'); // 给table添加id，值与按钮上的table字段对应
|
||
|
||
container.appendChild(tempTable); // 把创建的节点添加到页面容器中
|
||
|
||
downloadBtnRef.current.handleDownload();
|
||
tempTable.remove() // 防止重复打印一个内容
|
||
setShowExportTable(false)
|
||
}
|
||
|
||
// 生成左侧菜单
|
||
const getMenuDom = (data: any[], callback: (item: any) => void) => {
|
||
return (data.map((element: any) => {
|
||
// 绑定嵌套树的子节点
|
||
if (element.children && element.children.length > 0) {
|
||
return (
|
||
<SubMenu title={<span>{element.label}</span>}
|
||
icon={element.ico ? <Avatar src={element.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
|
||
key={`${element.key || element.value}`}
|
||
onTitleClick={(item) => {
|
||
// 选中一级菜单
|
||
if (!currenMenu || item.key !== `${currenMenu?.key}`) {
|
||
callback.call(callback, item)
|
||
}
|
||
item.domEvent.stopPropagation();
|
||
}}
|
||
>
|
||
{element.children && element.children.length > 0 && getMenuDom(element.children, callback)}
|
||
</SubMenu>
|
||
)
|
||
}
|
||
return (<Menu.Item icon={element.ico ? <Avatar src={element.ico} size={16} shape="square" /> : null}
|
||
key={`${element.key || element.value}`}>{element.label}</Menu.Item>)
|
||
}))
|
||
}
|
||
|
||
const loadSelectedId = (item: any) => {
|
||
// 选中的子菜单key
|
||
const [type, value] = item.key.split('-')
|
||
if (type === '1') {
|
||
setSelectedId(value)
|
||
setCurrenMenu('')
|
||
actionModalRef?.current?.reload()
|
||
} else {
|
||
setSelectedId('')
|
||
setCurrenMenu('')
|
||
}
|
||
}
|
||
const [propertyShow, setPropertyShow] = useState<boolean>(false)
|
||
// 外面表格的请求数据的方法
|
||
const handleGetTableData = async (id?: any) => {
|
||
if (isFirst) {
|
||
setIsFirst(false)
|
||
return
|
||
}
|
||
if (!selectRealProject && !id) {
|
||
message.error('请选择项目！')
|
||
return []
|
||
}
|
||
setTableLoading(true)
|
||
const req = {
|
||
BUSINESSPROJECT_ID: id
|
||
}
|
||
const data = await handleGetTableMonthlyReconciliation(req)
|
||
console.log('data2', data)
|
||
let res: any = {}
|
||
let list: any = []
|
||
let otherMessage: any = {}
|
||
if (data.List && data.List.length > 0) {
|
||
res = data.List[0]
|
||
console.log('res', res)
|
||
setTableAllData(res)
|
||
if (data.List[0].ProjectPeriodList) {
|
||
otherMessage = data.List[0].ProjectPeriodList.node
|
||
console.log('otherMessage', otherMessage)
|
||
setOtherObj(otherMessage)
|
||
const resObj: any = data.List[0].ProjectPeriodList
|
||
if (resObj.children && resObj.children.length > 0) {
|
||
list = wrapTreeNode(resObj.children)
|
||
console.log('list', list)
|
||
}
|
||
list.forEach((item: any) => {
|
||
item.children = undefined
|
||
})
|
||
}
|
||
}
|
||
|
||
list.unshift({
|
||
PeriodIndexStr: '',
|
||
PeriodDesc: '合计',
|
||
MinturnOver: otherMessage?.MinturnOver,
|
||
GuaranteeRatio: otherMessage?.GuaranteeRatio,
|
||
CashAmount: otherMessage?.CashAmount,
|
||
MobilePayAmount: otherMessage?.MobilePayAmount,
|
||
RevenueAmount: otherMessage?.RevenueAmount,
|
||
RoyaltyAmount: otherMessage?.RoyaltyAmount,
|
||
GuaranteeFee: otherMessage?.GuaranteeFee,
|
||
PropertyFee: otherMessage?.PropertyFee,
|
||
HouseRent: otherMessage?.HouseRent,
|
||
BreachPenalty: otherMessage?.BreachPenalty,
|
||
ElectricityCharge: otherMessage?.ElectricityCharge,
|
||
WaterCharge: otherMessage?.WaterCharge,
|
||
OtherFee: otherMessage?.OtherFee,
|
||
ReceivableAmount: otherMessage?.ReceivableAmount,
|
||
RefundSupplement: otherMessage?.RefundSupplement,
|
||
})
|
||
|
||
console.log('list22222', list)
|
||
setReqDetailList(list)
|
||
setOtherData({
|
||
...data.OtherData,
|
||
Dates: `${moment(data?.OtherData?.PROJECT_STARTDATE).format('YYYY/MM/DD')}-${moment(data?.OtherData?.PROJECT_ENDDATE).format('YYYY/MM/DD')}`
|
||
})
|
||
// setOtherData({
|
||
// SPREGIONTYPE_NAME: res?.SpregionType_Name,
|
||
// SERVERPART_NAME: res?.ServerPart_Name,
|
||
// SERVERPARTSHOP_NAME: res?.ServerPartShop_Name,
|
||
// MERCHANTS_NAME: res?.Merchants_Name,
|
||
// Dates: res?.Dates,
|
||
// })
|
||
setTableLoading(false)
|
||
}
|
||
|
||
const secondColumns: any = [
|
||
{
|
||
title: '开始日期',
|
||
dataIndex: 'STARTDATE',
|
||
valueType: "date",
|
||
width: 110,
|
||
align: 'center',
|
||
sorter: (a, b) => (new Date(a.STARTDATE).getTime() || 0) - (new Date(b.STARTDATE).getTime() || 0),
|
||
defaultSortOrder: 'descend'
|
||
},
|
||
{
|
||
title: '结束日期',
|
||
dataIndex: 'ENDDATE',
|
||
valueType: "date",
|
||
width: 110,
|
||
align: 'center'
|
||
},
|
||
{
|
||
title: '保底租金',
|
||
dataIndex: 'MINTURNOVER',
|
||
valueType: "money",
|
||
width: 140,
|
||
align: "center",
|
||
render: (_, record) => {
|
||
return <span style={{ color: record.MINTURNOVER ? '' : '#faad14' }}>{record.MINTURNOVER ? `¥${fmoney(record.MINTURNOVER, 2)}` : '合同期外'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: '实际营业额',
|
||
dataIndex: 'REVENUE_AMOUNT',
|
||
valueType: "money",
|
||
width: 140,
|
||
align: "right",
|
||
render: (_, record) => {
|
||
return <a onClick={() => { // 点击实际营业额时 打开抽屉 展示每日营收数据
|
||
console.log('record', record)
|
||
setCurrentRow({
|
||
...record,
|
||
ShopRoyalty_Id: record.SHOPROYALTY_ID,
|
||
StartDate: record.STARTDATE
|
||
})
|
||
setShowDetail(true)
|
||
}}>{record.REVENUE_AMOUNT ? fmoney(record.REVENUE_AMOUNT, 2) : '-'}</a>
|
||
},
|
||
},
|
||
{
|
||
title: '合同提成',
|
||
dataIndex: 'GUARANTEERATIO',
|
||
valueType: 'digit',
|
||
align: "center",
|
||
hideInTable: selectRealProject?.BUSINESS_TYPE === 2000,
|
||
width: 110,
|
||
render: (_, record) => {
|
||
return `${record.GUARANTEERATIO || '-'}%`
|
||
},
|
||
},
|
||
{
|
||
title: '真实提成',
|
||
dataIndex: '',
|
||
valueType: 'digit',
|
||
align: "center",
|
||
hideInTable: selectRealProject?.BUSINESS_TYPE === 2000,
|
||
width: 110,
|
||
render: (_, record) => {
|
||
return <span style={{
|
||
color: record.REVENUE_AMOUNT ?
|
||
((record.ROYALTY_THEORY / record.REVENUE_AMOUNT) * 100) >= record.GUARANTEERATIO ? 'red' : 'green'
|
||
: ''
|
||
}}>
|
||
{record.REVENUE_AMOUNT ? `${((record.ROYALTY_THEORY / record.REVENUE_AMOUNT) * 100).toFixed(2)}%` : '-'}
|
||
</span>
|
||
},
|
||
},
|
||
{
|
||
title: '甲方入账',
|
||
dataIndex: 'ROYALTY_THEORY',
|
||
valueType: "money",
|
||
align: "right",
|
||
width: 140,
|
||
render: (_, record) => {
|
||
return <span>{record.ROYALTY_THEORY ? `¥${fmoney(record.ROYALTY_THEORY, 2)}` : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: '乙方入账',
|
||
dataIndex: 'SUBROYALTY_THEORY',
|
||
valueType: "money",
|
||
align: "right",
|
||
width: 140,
|
||
render: (_, record) => {
|
||
return <span>{record.SUBROYALTY_THEORY ? `¥${fmoney(record.SUBROYALTY_THEORY, 2)}` : '-'}</span>
|
||
}
|
||
},
|
||
{
|
||
title: '备注说明',
|
||
dataIndex: 'BIZPSPLITMONTH_DESC',
|
||
ellipsis: true,
|
||
},
|
||
{
|
||
title: '商家欠款',
|
||
dataIndex: '',
|
||
ellipsis: true,
|
||
render: (_, record) => {
|
||
return <span style={{ color: 'red' }}>{record?.SUBROYALTY_PRICE === record?.SUBROYALTY_THEORY ? '-' : fmoney(record?.SUBROYALTY_PRICE - record?.SUBROYALTY_THEORY, 2)}</span>
|
||
}
|
||
},
|
||
{
|
||
title: '操作',
|
||
valueType: 'option',
|
||
width: 80,
|
||
render: (_, record,) => (
|
||
new Date(record?.STARTDATE).getTime() < new Date().getTime() ?
|
||
<Space>
|
||
<a
|
||
key="revenue"
|
||
onClick={async () => {
|
||
// const amount1000 = await handleAddUpdate(1000,
|
||
// record?.SHOPROYALTY_ID ? record?.SHOPROYALTY_ID : 0)
|
||
// if (amount1000) {
|
||
// actionRef.current?.reload()
|
||
// }
|
||
setSecondShowLoading(true)
|
||
|
||
let req = {}
|
||
const yesterday = moment().subtract(1, 'day').startOf('day').format('YYYY-MM-DD')
|
||
if (new Date(yesterday).getTime() < new Date(moment(record.ENDDATE).format('YYYY-MM-DD')).getTime()) {
|
||
req = {
|
||
StartDate: moment(record.STARTDATE).format('YYYY-MM-DD'),
|
||
EndDate: moment(yesterday).format('YYYY-MM-DD'),
|
||
ProjectId: selectRealProject?.BUSINESSPROJECT_ID,
|
||
// OutBusinessType:props.BUSINESS_TYPE
|
||
}
|
||
} else {
|
||
req = {
|
||
StartDate: moment(record.STARTDATE).format('YYYY-MM-DD'),
|
||
EndDate: moment(record.ENDDATE).format('YYYY-MM-DD'),
|
||
ProjectId: selectRealProject?.BUSINESSPROJECT_ID,
|
||
// OutBusinessType:props.BUSINESS_TYPE
|
||
}
|
||
}
|
||
const data = await handleAgain(req)
|
||
console.log('data', data)
|
||
setTableLoading(false)
|
||
if (data.Result_Code === 100) {
|
||
handleSecondTableData(selectRealProject?.BUSINESSPROJECT_ID)
|
||
message.success(data.Result_Desc)
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
setSecondShowLoading(false)
|
||
}}
|
||
>
|
||
重新生成
|
||
</a>
|
||
</Space> : ''
|
||
),
|
||
},
|
||
]
|
||
|
||
const handleSecondTableData = async (id?: any) => {
|
||
if (!id) {
|
||
return
|
||
}
|
||
setSecondShowLoading(true)
|
||
const req = {
|
||
BusinessProjectId: id,
|
||
DataType: 2,
|
||
}
|
||
const data = await handleGetSplitRes(req)
|
||
setSecondTableData(data.data)
|
||
setSecondShowLoading(false)
|
||
}
|
||
|
||
// 新建结算申请
|
||
const handleCreateSettlementApplication = async () => {
|
||
console.log('selectRealProject', selectRealProject)
|
||
console.log('currentRow', currentRow)
|
||
const obj: any = {
|
||
BUSINESSPROJECT_ID: selectRealProject?.BUSINESSPROJECT_ID,
|
||
SHOPROYALTY_ID: currentRow?.ShopRoyalty_Id,
|
||
SERVERPARTSHOP_ID: selectRealProject?.SERVERPARTSHOP_ID,
|
||
BUSINESS_STARTDATE: currentRow?.StartDate,
|
||
BUSINESS_ENDDATE: currentRow?.EndDate,
|
||
GUARANTEE_AMOUNT: currentRow?.MinturnOver,
|
||
GUARANTEERATIO: currentRow?.GuaranteeRatio,
|
||
ACTUAL_REVENUE: currentRow?.RevenueAmount,
|
||
PARTYA_SHAREPROFIT: currentRow?.RoyaltyTheory,
|
||
PARTYB_SHAREPROFIT: currentRow?.SubroyaltyTheory,
|
||
LIQUIDATION_AMOUNT: currentRow?.RefundSupplement,
|
||
ROYALTY_PRICE: currentRow?.RoyaltyAmount,
|
||
SUBROYALTY_PRICE: currentRow?.SubroyaltyAmount,
|
||
MOBILEPAY_AMOUNT: currentRow?.MobilePayAmount,
|
||
CASHPAY_AMOUNT: currentRow?.CashAmount,
|
||
MERCHANTS_ID: tableAllData?.Merchants_Id,
|
||
MERCHANTS_NAME: tableAllData?.Merchants_Name
|
||
}
|
||
|
||
const req = {
|
||
BusinessapprovalModel: {
|
||
OPERATION_TYPE: 11,
|
||
BUSINESSPROCESS_ID: selectRealProject?.BUSINESSPROJECT_ID,
|
||
PROINST_ID: currentRow?.ShopRoyalty_Id,
|
||
SERVERPART_ID: tableAllData?.ServerPart_Ids || '',
|
||
SERVERPART_IDS: tableAllData?.ServerPart_Ids || '',
|
||
BUSINESSPROCESS_NAME: `${selectRealProject?.BusinessProject_Name}【${currentRow?.PeriodDesc}】年度结算`,
|
||
BUSINESS_STARTDATE: moment().format('YYYY-MM-DD'),
|
||
BUSINESSAPPROVAL_STATE: 1000,
|
||
BUSINESSAPPROVAL_DESC: descText || '',
|
||
STAFF_NAME: currentUser.Name,
|
||
STAFF_ID: currentUser?.ID,
|
||
Serverpart_Name: selectRealProject?.SERVERPART_NAME
|
||
},
|
||
RevenueconfirmModel: obj
|
||
}
|
||
|
||
|
||
console.log('req', req)
|
||
const data = await handleCreateSettlement(req)
|
||
console.log('data', data)
|
||
if (data.Result_Code === 100) {
|
||
message.success(data.Result_Desc)
|
||
} else {
|
||
message.error(data.Result_Desc)
|
||
}
|
||
setDescText('')
|
||
setShowDescModal(false)
|
||
handleGetTableData(selectProject?.BUSINESSPROJECT_ID)
|
||
}
|
||
|
||
return (
|
||
<div ref={(el) => {
|
||
// 打印报表
|
||
if (!reqDetailList || reqDetailList.length === 0) return;
|
||
setPrintOut(el);
|
||
}}>
|
||
<div className={'settlementDetailsHideBox'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
|
||
{
|
||
showExportTable && reqDetailList && reqDetailList.length > 0 ?
|
||
<ProTable
|
||
columns={columns}
|
||
dataSource={reqDetailList}
|
||
pagination={false}
|
||
expandable={{
|
||
defaultExpandAllRows: true
|
||
}}
|
||
tableExtraRender={() => {
|
||
return <div className={'tableTop'} style={{ paddingLeft: 24 }}>
|
||
<ProDescriptions column={7} className="commity-sale-description" labelStyle={{ color: "#00000073" }}>
|
||
<ProDescriptions.Item span={1} label="片区">{otherData?.SPREGIONTYPE_NAME}</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={1} label="服务区">{otherData?.SERVERPART_NAME}</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={2} label="门店名称">{otherData?.SERVERPARTSHOP_NAME}</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={2} label="合作单位名称">{otherData?.MERCHANTS_NAME}</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={1} label="合同期">{otherData?.Dates}</ProDescriptions.Item>
|
||
</ProDescriptions>
|
||
</div>
|
||
}}
|
||
/> : ''
|
||
}
|
||
</div>
|
||
<div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />
|
||
<div style={{ backgroundColor: '#fff', display: 'flex' }}>
|
||
<ProCard
|
||
style={{ width: !collapsible ? "300px" : "60px" }}
|
||
className="pageTable-leftnav"
|
||
bodyStyle={{ padding: 0, paddingTop: 20, paddingLeft: 20, width: !collapsible ? "300px" : "60px" }}
|
||
extra={<MenuFoldOutlined onClick={() => {
|
||
setCollapsible(!collapsible)
|
||
}} />}
|
||
colSpan={!collapsible ? "300px" : "60px"}
|
||
title={!collapsible ? "请选择服务区" : ""}
|
||
headerBordered
|
||
collapsed={collapsible}
|
||
>
|
||
{!treeLoading && <Menu
|
||
mode="inline"
|
||
selectedKeys={[`1-${selectedId}`]}
|
||
style={{ width: '100%', height: 'calc(100vh - 300px)', overflowY: 'auto', overflowX: 'hidden' }}
|
||
onSelect={(item: any) => {
|
||
loadSelectedId(item)
|
||
setIsShowModal(true)
|
||
}}
|
||
onClick={(item: any) => {
|
||
const [type, value] = item.key.split('-')
|
||
if (value === selectedId) {
|
||
if (type === '1') {
|
||
setSelectedId(value)
|
||
setCurrenMenu('')
|
||
actionModalRef.current?.reload()
|
||
}
|
||
setIsShowModal(true)
|
||
}
|
||
}}
|
||
>
|
||
{getMenuDom(treeView, loadSelectedId)}
|
||
</Menu>}
|
||
</ProCard>
|
||
|
||
<div style={{
|
||
width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
{/* <ProTable
|
||
rowKey={(record) => {
|
||
return `${record?.SHOPROYALTY_ID}-${record?.PeriodIndexStr}-${record?.PeriodDesc}`
|
||
}}
|
||
actionRef={actionRef}
|
||
formRef={formRef}
|
||
columns={columns}
|
||
bordered
|
||
search={false}
|
||
// search={{
|
||
// span: 12,
|
||
// optionRender: () => {
|
||
// return []
|
||
// }
|
||
// }}
|
||
loading={tableLoading}
|
||
request={async (params: any) => {
|
||
handleGetTableData()
|
||
}}
|
||
scroll={{ x: 1800 }}
|
||
headerTitle={`合作商户合同期结算明细表`} // 列表表头
|
||
dataSource={reqDetailList}
|
||
pagination={false}
|
||
toolbar={{
|
||
actions: [
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-settlementDetails"
|
||
filename={`合作商户合同期结算明细表_${moment().format('YYYY_MM_DD')}`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>,
|
||
<Typography.Text type="secondary">单位：元</Typography.Text>,
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
onClick={(e) => {
|
||
if (reqDetailList && reqDetailList.length > 0) {
|
||
setShowExportTable(true)
|
||
setTimeout(() => {
|
||
exportTable(e)
|
||
}, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出excel
|
||
</Button>
|
||
]
|
||
}}
|
||
tableExtraRender={() => {
|
||
return <div style={{ paddingLeft: 24, paddingTop: 24 }} className={'showTableExtraRender'}>
|
||
<ProDescriptions column={8} className="commity-sale-description" labelStyle={{ color: "#00000073" }}>
|
||
<ProDescriptions.Item span={1} label="片区">
|
||
<Tooltip title={otherData?.SPREGIONTYPE_NAME}>
|
||
{otherData?.SPREGIONTYPE_NAME}
|
||
</Tooltip>
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={1} label="服务区">
|
||
<Tooltip title={otherData?.SERVERPART_NAME}>
|
||
{otherData?.SERVERPART_NAME}
|
||
</Tooltip>
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={2} label="门店名称">
|
||
<Tooltip title={otherData?.SERVERPARTSHOP_NAME}>
|
||
{otherData?.SERVERPARTSHOP_NAME}
|
||
</Tooltip>
|
||
</ProDescriptions.Item>
|
||
<ProDescriptions.Item span={2} label="合作单位名称">
|
||
<Tooltip title={otherData?.MERCHANTS_NAME}>
|
||
{otherData?.MERCHANTS_NAME}
|
||
</Tooltip></ProDescriptions.Item>
|
||
<ProDescriptions.Item span={2} label="合同期">
|
||
<Tooltip title={otherData?.Dates}>
|
||
{otherData?.Dates}
|
||
</Tooltip></ProDescriptions.Item>
|
||
</ProDescriptions>
|
||
</div>
|
||
}}
|
||
>
|
||
</ProTable> */}
|
||
|
||
{/* id={id} */}
|
||
<SettlementDetails onRef={settlementDetailsRef} selectRealProject={selectRealProject} setTableAllData={setTableAllData} setOtherObj={setOtherObj} setReqDetailList={setReqDetailList} toolbar={{
|
||
actions: [
|
||
<span style={{ visibility: 'hidden' }}>
|
||
<ReactHTMLTableToExcel
|
||
buttonText={'导出excel'}
|
||
ref={downloadBtnRef}
|
||
table="table-to-xls-settlementDetails"
|
||
filename={`合作商户合同期结算明细表_${moment().format('YYYY_MM_DD')}`}
|
||
sheet="sheet1"
|
||
/>
|
||
</span>,
|
||
<Typography.Text type="secondary">单位：元</Typography.Text>,
|
||
<Button
|
||
key="new"
|
||
type="primary"
|
||
onClick={(e) => {
|
||
if (reqDetailList && reqDetailList.length > 0) {
|
||
setShowExportTable(true)
|
||
setTimeout(() => {
|
||
exportTable(e)
|
||
}, 100)
|
||
} else {
|
||
message.error('暂无数据可导出！')
|
||
}
|
||
}}
|
||
>
|
||
导出结算表
|
||
</Button>
|
||
]
|
||
}} setOtherData={setOtherData} otherData={otherData} setCurrentRow={setCurrentRow} setShowDetail={setShowDetail} setPropertyShow={setPropertyShow} otherObj={otherObj}
|
||
isFirst={isFirst} setIsFirst={setIsFirst}/>
|
||
|
||
<ProTable
|
||
rowKey="REVENUECONFIRM_ID"
|
||
formRef={formSecondRef}
|
||
loading={secondShowLoading}
|
||
actionRef={actionSecondRef}
|
||
style={{ background: '#fff', paddingTop: '30px' }}
|
||
search={false}
|
||
options={false}
|
||
pagination={false}
|
||
headerTitle={<span style={{ color: "#1890ff", fontSize: 14, fontWeight: 600 }}>{`项目分润拆分表`}</span>} // 列表表头
|
||
columns={secondColumns}
|
||
bordered
|
||
request={async (params) => {
|
||
handleSecondTableData()
|
||
}}
|
||
dataSource={secondTableData}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<Modal
|
||
title="项目列表"
|
||
open={isShowModal}
|
||
width={1300}
|
||
onOk={() => {
|
||
setSelectRealProject(selectProject)
|
||
// handleGetTableData(selectProject?.BUSINESSPROJECT_ID)
|
||
settlementDetailsRef.current?.actionRef.current?.reload()
|
||
handleSecondTableData(selectProject?.BUSINESSPROJECT_ID)
|
||
setIsShowModal(false)
|
||
}}
|
||
onCancel={() => {
|
||
setIsShowModal(false)
|
||
}}>
|
||
<div style={{ display: 'flex', background: '#fff', height: '650px' }}>
|
||
{/* <ProCard */}
|
||
{/* className="pageTable-leftnav pageTable-leftnavs" */}
|
||
{/* bodyStyle={{padding: 0, paddingTop: 20, paddingLeft: 20, height: '100%'}} */}
|
||
{/* extra={<MenuFoldOutlined onClick={() => { */}
|
||
{/* setCollapsible(!collapsible) */}
|
||
{/* }}/>} */}
|
||
{/* colSpan={!collapsible ? "300px" : "60px"} */}
|
||
{/* title={!collapsible ? "请选择服务区" : ""} */}
|
||
{/* headerBordered */}
|
||
{/* collapsed={collapsible} */}
|
||
{/* > */}
|
||
{/* {!treeLoading && <Menu */}
|
||
{/* mode="inline" */}
|
||
{/* selectedKeys={[`2-${selectedId}`]} */}
|
||
{/* style={{width: '100%',height: 'calc(100% - 50px)', overflowY: 'auto', overflowX: 'hidden'}} */}
|
||
{/* onSelect={(item: any)=>{ */}
|
||
{/* loadSelectedId(item) */}
|
||
{/* }} */}
|
||
{/* > */}
|
||
{/* {getMenuDom(treeView, loadSelectedId)} */}
|
||
{/* </Menu>} */}
|
||
{/* </ProCard> */}
|
||
<div style={{
|
||
paddingTop: 0,
|
||
paddingBottom: 0,
|
||
paddingRight: 0
|
||
}}>
|
||
<ProTable
|
||
rowKey={(record) => record?.BUSINESSPROJECT_ID}
|
||
actionRef={actionModalRef}
|
||
formRef={formModalRef}
|
||
columns={columnsModal}
|
||
tableStyle={{
|
||
width: '1200px'
|
||
}}
|
||
bordered
|
||
search={{ span: 6 }}
|
||
scroll={{ y: 470 }}
|
||
pagination={false}
|
||
request={async (params: any) => {
|
||
if (!selectedId) {
|
||
return
|
||
}
|
||
const req = {
|
||
current: 1,
|
||
pageSize: 9999,
|
||
PROJECT_VALID: 1,
|
||
ProjectStateSearch: params.ProjectStateSearch ? Number(params.ProjectStateSearch) : '',
|
||
pagesize: 9999,
|
||
SERVERPART_IDS: selectedId || ''
|
||
}
|
||
const data = await getProjectList(req)
|
||
console.log('data', data)
|
||
return { data: data.data, success: true }
|
||
}}
|
||
tableAlertRender={false}
|
||
rowSelection={{
|
||
type: "radio",
|
||
defaultSelectedRowKeys: selectRealProject,
|
||
onChange: (_, selectedRows) => {
|
||
// setSelectedRowKeys(selectedRowKeys)
|
||
setSelectProject(selectedRows[0])
|
||
}
|
||
}}
|
||
>
|
||
|
||
</ProTable>
|
||
</div>
|
||
</div>
|
||
</Modal>
|
||
|
||
{/* 查看项目详情 右侧弹出的抽屉 */}
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer"
|
||
visible={showDetail} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||
setCurrentRow(undefined);
|
||
setShowDetail(false);
|
||
}}
|
||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||
closable={false}
|
||
>
|
||
{/* 抽屉打开时 加载项目详情组件 */}
|
||
{showDetail && <RevenueList BusinessProjectId={currentRow.BUSINESSPROJECT_ID} propsBP={otherData} propsRC={currentRow}
|
||
ShopRoyaltyId={currentRow?.ShopRoyalty_Id ? currentRow?.ShopRoyalty_Id : 0}
|
||
ShopIds={selectRealProject?.SERVERPARTSHOP_ID ? selectRealProject?.SERVERPARTSHOP_ID : ''}
|
||
StartDate={moment(currentRow?.StartDate).format('YYYY-MM-DD')}
|
||
EndDate={moment(currentRow?.EndDate).format('YYYY-MM-DD')}></RevenueList>}
|
||
</Drawer>
|
||
|
||
{/* 合作分润 右侧弹出的抽屉 */}
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer"
|
||
visible={showShare} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
|
||
setCurrentRow(undefined);
|
||
setCurrentRecord(undefined);
|
||
setShowShare(false);
|
||
}}
|
||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||
closable={false}
|
||
>
|
||
{/* currentRow */}
|
||
{/* 抽屉打开时 加载项目详情组件 */}
|
||
{showShare && <RevenueList BusinessProjectId={currentRow.BUSINESSPROJECT_ID} propsBP={otherData} propsRC={currentRecord}
|
||
ShopRoyaltyId={currentRecord?.ShopRoyalty_Id ? currentRecord?.ShopRoyalty_Id : 0}
|
||
ShopIds={currentRow?.SERVERPARTSHOP_ID ? currentRow?.SERVERPARTSHOP_ID : ''}
|
||
StartDate={moment(currentRecord?.StartDate).format('YYYY-MM-DD')}
|
||
EndDate={moment(currentRecord?.EndDate).format('YYYY-MM-DD')}></RevenueList>}
|
||
</Drawer>
|
||
{/* 显示具体日期的 */}
|
||
<Drawer
|
||
width="83%"
|
||
className="project-drawer2"
|
||
visible={showSmallDetail} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 设置抽屉状态为关闭
|
||
setShowSmallDetail(false);
|
||
setCurrentSmallRow(undefined)
|
||
}}
|
||
closable={false}
|
||
destroyOnClose
|
||
>
|
||
<ProjectSplitShow projectDetail={selectRealProject} isComponents={true} componentsType={true} startDate={currentSmallRow?.StartDate} endDate={currentSmallRow?.EndDate} />
|
||
</Drawer>
|
||
|
||
{/* 结算输入备注说明的悬浮框 */}
|
||
<Modal
|
||
title="备注说明"
|
||
open={showDescModal}
|
||
width={700}
|
||
onOk={() => {
|
||
handleCreateSettlementApplication()
|
||
console.log('descText', descText)
|
||
}}
|
||
onCancel={() => {
|
||
setShowDescModal(false)
|
||
setDescText('')
|
||
}}>
|
||
<TextArea row={4} value={descText} placeholder={'请输入备注说明'} onChange={(e: any) => {
|
||
setDescText(e.target.value)
|
||
}} />
|
||
|
||
</Modal>
|
||
|
||
<Drawer
|
||
width="80%"
|
||
className="project-drawer3"
|
||
visible={propertyShow} // 抽屉弹框是否显示状态
|
||
onClose={() => { // 关闭抽屉 设置抽屉状态为关闭
|
||
setPropertyShow(false);
|
||
setCurrentRow(undefined)
|
||
}}
|
||
destroyOnClose
|
||
closable={false}
|
||
>
|
||
<SHOPEXPENSETable isComponent={true} serviceShopId={selectRealProject?.SERVERPARTSHOP_ID.split(',')[0]} time={[moment(currentRow?.StartDate).format("YYYY-MM-DD"), moment(currentRow?.EndDate).format("YYYY-MM-DD")]} />
|
||
</Drawer>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default connect(({
|
||
user
|
||
}: ConnectState) => ({
|
||
currentUser: user.currentUser
|
||
}))(settlementDetail);
|