385 lines
16 KiB
TypeScript
385 lines
16 KiB
TypeScript
import { connect } from "umi";
|
|
import type { ConnectState } from "@/models/connect";
|
|
import type { ActionType } from "@ant-design/pro-table";
|
|
import ProTable from "@ant-design/pro-table";
|
|
import { useRef, useState } from "react";
|
|
import { getMoney } from "@/services/options";
|
|
import numeral from 'numeral'
|
|
import type { FormInstance} from "antd";
|
|
import { Tooltip } from "antd";
|
|
import { handleGetTableMonthlyReconciliation } from "../../ShopExpenseDetail/service";
|
|
import { wrapTreeNode } from "@/utils/format";
|
|
|
|
type DetailProps = {
|
|
currentDetail: any
|
|
}
|
|
const YearContentDetail = ({ currentDetail }: DetailProps) => {
|
|
|
|
const actionRef = useRef<ActionType>();
|
|
const formRef = useRef<FormInstance>();
|
|
// 合作商户合同期结算明细表表格的隐藏字段
|
|
const [recordColumnsStateMap, setRecordColumnsStateMap] = useState<any>({
|
|
BreachPenalty: { show: false },
|
|
OtherFee: { show: false },
|
|
SHOPEXPENSE_AMOUNT_1000: { show: false },
|
|
SHOPEXPENSE_AMOUNT_2000: { show: false },
|
|
SHOPEXPENSE_AMOUNT_3000: { show: false },
|
|
SHOPEXPENSE_AMOUNT_5000: { show: false },
|
|
})
|
|
// 展开的行
|
|
const [expandedRowKeys, setExpandedRowKeys] = useState<any>()
|
|
|
|
const detailColumns: any = [
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>期限</div>,
|
|
dataIndex: 'PeriodDesc',
|
|
align: 'left',
|
|
width: 300,
|
|
fixed: 'left',
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return <span>{`${record?.PeriodDesc}`}</span>
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>结算状态</div>,
|
|
dataIndex: 'IsApplySuccess',
|
|
align: 'right',
|
|
width: 100,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.IsApplySuccess ?
|
|
// 子级跳进去
|
|
<span style={{ color: '#faad14', cursor: 'pointer' }}>{'已结算'}</span>
|
|
:
|
|
record?.BusinessApprovalId ?
|
|
<span style={{ color: '#faad14', cursor: 'pointer' }}>结算中</span> :
|
|
<span style={{ color: '#faad14', cursor: 'pointer' }}>{'待结算'}</span>
|
|
}
|
|
},
|
|
{
|
|
title: '租金信息',
|
|
dataIndex: '',
|
|
hideInSearch: true,
|
|
children: [
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
|
|
dataIndex: 'MinturnOver',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 130,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
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,
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>微支付</div>,
|
|
dataIndex: 'MobilePayAmount',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 100,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>小计</div>,
|
|
dataIndex: 'RevenueAmount',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 150,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return <span>{record?.RevenueAmount ? numeral(getMoney(record?.RevenueAmount)).format('0,0.00') : '0'}</span>
|
|
}
|
|
}
|
|
]
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>业主收款</div>,
|
|
dataIndex: 'RoyaltyAmount',
|
|
valueType: 'digit',
|
|
width: 100,
|
|
align: 'right',
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
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>
|
|
{numeral(record?.ReceivableAmount).format('0,0.00')}
|
|
</span>
|
|
</Tooltip>
|
|
: ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>租金</div>,
|
|
dataIndex: 'GuaranteeFee',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 120,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.GuaranteeFee ? numeral(getMoney(record?.GuaranteeFee)).format('0,0.00') : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>物业费</div>,
|
|
dataIndex: 'PropertyFee',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 100,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.PropertyFee ?
|
|
numeral(getMoney(record?.PropertyFee)).format('0,0.00')
|
|
: record?.PropertyFee === 0 ? <span style={{ color: 'red' }}>0</span> : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>房租</div>,
|
|
dataIndex: 'HouseRent',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>罚款</div>,
|
|
dataIndex: 'BreachPenalty',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>电费</div>,
|
|
dataIndex: 'ElectricityCharge',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.ElectricityCharge ?
|
|
numeral(getMoney(record?.ElectricityCharge)).format('0,0.00')
|
|
: record?.ElectricityCharge === 0 ? <span style={{ color: 'red' }}>0</span> : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>水费</div>,
|
|
dataIndex: 'WaterCharge',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.WaterCharge ?
|
|
numeral(getMoney(record?.WaterCharge)).format('0,0.00')
|
|
: record?.WaterCharge === 0 ? <span style={{ color: 'red' }}>0</span> : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>其他</div>,
|
|
dataIndex: 'OtherFee',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
}
|
|
]
|
|
},
|
|
{
|
|
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?.SHOPEXPENSE_AMOUNT_1000).format('0.00')}) + 电费(${numeral(record?.SHOPEXPENSE_AMOUNT_2000).format('0.00')}) + 房租(${numeral(record?.SHOPEXPENSE_AMOUNT_3000).format('0.00')})
|
|
+ 物业费(${numeral(record?.SHOPEXPENSE_AMOUNT_5000).format('0.00')})`
|
|
|
|
return record?.PaidFee
|
|
?
|
|
<Tooltip title={str}>
|
|
<span>{numeral(record?.PaidFee).format('0,0.00')}</span>
|
|
</Tooltip>
|
|
: ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>水费</div>,
|
|
dataIndex: 'SHOPEXPENSE_AMOUNT_1000',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.SHOPEXPENSE_AMOUNT_1000 ?
|
|
numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_1000)).format('0,0.00')
|
|
: record?.SHOPEXPENSE_AMOUNT_1000 === 0 ? <span style={{ color: 'red' }}>0</span> : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>电费</div>,
|
|
dataIndex: 'SHOPEXPENSE_AMOUNT_2000',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.SHOPEXPENSE_AMOUNT_2000 ?
|
|
numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_2000)).format('0,0.00')
|
|
: record?.SHOPEXPENSE_AMOUNT_2000 === 0 ? <span style={{ color: 'red' }}>0</span> : ''
|
|
}
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>房租</div>,
|
|
dataIndex: 'SHOPEXPENSE_AMOUNT_3000',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 80,
|
|
hideInSearch: true,
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>物业费</div>,
|
|
dataIndex: 'SHOPEXPENSE_AMOUNT_5000',
|
|
valueType: 'digit',
|
|
align: 'right',
|
|
width: 100,
|
|
hideInSearch: true,
|
|
render: (_, record) => {
|
|
return record?.SHOPEXPENSE_AMOUNT_5000 ?
|
|
numeral(getMoney(record?.SHOPEXPENSE_AMOUNT_5000)).format('0,0.00')
|
|
: record?.SHOPEXPENSE_AMOUNT_5000 === 0 ? <span style={{ color: 'red' }}>0</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>{numeral(record?.RefundSupplement).format('0,0.00')}</span>
|
|
</Tooltip>
|
|
: ''
|
|
}
|
|
},
|
|
]
|
|
|
|
return (
|
|
<div>
|
|
<ProTable
|
|
rowKey={(record) => {
|
|
return `${record?.ShopRoyalty_Id}-${record?.PeriodIndexStr}-${record?.StartDate}-${record?.EndDate}-${record?.level}`
|
|
}}
|
|
actionRef={actionRef}
|
|
formRef={formRef}
|
|
columns={detailColumns}
|
|
bordered
|
|
search={false}
|
|
className={'detailTable'}
|
|
request={async (params: any) => {
|
|
const req = {
|
|
BUSINESSPROJECT_ID: currentDetail?.BUSINESSPROJECT_ID,
|
|
SHOPROYALTY_ID: currentDetail?.ShopRoyaltyId || currentDetail?.SHOPROYALTY_ID
|
|
}
|
|
const data = await handleGetTableMonthlyReconciliation(req)
|
|
console.log('321312312', data);
|
|
let res: any = {}
|
|
let list: any = []
|
|
let isYearList: any = {}
|
|
if (data.List && data.List.length > 0) {
|
|
res = data.List[0]
|
|
if (data.List[0].ProjectPeriodList) {
|
|
const resObj: any = data.List[0].ProjectPeriodList
|
|
isYearList = wrapTreeNode([data.List[0].ProjectPeriodList])[0]
|
|
if (resObj.children && resObj.children.length > 0) {
|
|
list = wrapTreeNode(resObj.children)
|
|
}
|
|
}
|
|
}
|
|
console.log('list321312312312', list);
|
|
if (list && list.length > 0) {
|
|
const rowList: string[] = []
|
|
list.forEach((item: any) => {
|
|
rowList.push(`${item?.ShopRoyalty_Id}-${item?.PeriodIndexStr}-${item?.StartDate}-${item?.EndDate}-${item?.level}`)
|
|
})
|
|
setExpandedRowKeys(rowList)
|
|
return { data: list, success: true }
|
|
}
|
|
setExpandedRowKeys([])
|
|
return { data: [], success: true }
|
|
}}
|
|
expandable={{
|
|
expandRowByClick: true,
|
|
expandedRowKeys
|
|
}}
|
|
scroll={{ x: 'max-content' }}
|
|
headerTitle={`合作商户合同期结算明细表`} // 列表表头
|
|
pagination={false}
|
|
columnsState={{
|
|
value: recordColumnsStateMap,
|
|
onChange: setRecordColumnsStateMap,
|
|
}}
|
|
>
|
|
</ProTable>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default connect(({ user, }: ConnectState) => ({
|
|
currentUser: user.currentUser,
|
|
}))(YearContentDetail);
|