928 lines
46 KiB
TypeScript
928 lines
46 KiB
TypeScript
/*
|
||
* @Author: cclu
|
||
* @Date: 2022-04-28 10:47:35
|
||
* @LastEditTime: 2023-08-30 15:10:35
|
||
* @LastEditors: zzy 411037547@qq.com
|
||
* @Description: 商户欠款详情
|
||
* @FilePath: \cloud-platform\src\pages\busniess\PaymentConfirm\detail.tsx
|
||
*/
|
||
import { connect, history } from "umi";
|
||
import useRequest from '@ahooksjs/use-request';
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { PageContainer } from "@ant-design/pro-layout";
|
||
import ProTable from "@ant-design/pro-table";
|
||
import { PictureTwoTone, PlusOutlined } from "@ant-design/icons";
|
||
import { Button, Card, Col, Descriptions, Empty, message, Row, Space, Statistic, Tag, Typography, Image, Drawer, List, Avatar, Result } from "antd";
|
||
import { ModalForm, ProFormDatePicker, ProFormDigit, ProFormSelect, ProFormTextArea, ProFormUploadButton } from "@ant-design/pro-form";
|
||
import ProjectDetail from "@/pages/BussinessProject/detail";
|
||
import IconFont from "@/components/IconFont";
|
||
import ProjectItem from "./components/ProjectItem";
|
||
|
||
import type { ConnectState } from "@/models/connect";
|
||
import type { ProFormInstance } from '@ant-design/pro-form'
|
||
import type { ProColumns, ActionType } from "@ant-design/pro-table";
|
||
import type { AccountReceivablesModel, PaymentConfirmModel, RemarksModel } from "./data";
|
||
|
||
import { getFieldEnum } from "@/services/options";
|
||
import {
|
||
getPaymentConfirmList, getMerchantsReceivables, updatePaymentConfirm, uploadFile,
|
||
savePaymentRecord, getRemarksList, updateSynchroRemarks, delPaymentConfirm,
|
||
uploadAHYDFile
|
||
} from "./service";
|
||
|
||
import EditPaymentTable from "./components/EditPaymentTable";
|
||
import PaymentRecord from "@/pages/BussinessProject/components/PaymentRecord";
|
||
import numeral from "numeral";
|
||
import moment from "moment";
|
||
import { transferImg } from "@/utils/format";
|
||
import './style.less';
|
||
|
||
const { Title, Text } = Typography
|
||
|
||
// 更新回款信息
|
||
const handleAddUpdate = async (fields: PaymentConfirmModel, remark?: RemarksModel) => {
|
||
|
||
const hide = message.loading('正在提交...');
|
||
|
||
const result = await updatePaymentConfirm(fields);
|
||
hide();
|
||
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Desc}` || `${result.Result_Code}:提交失败`);
|
||
return false;
|
||
}
|
||
if (remark) await updateSynchroRemarks({ ...remark, TABLE_ID: fields?.PAYMENTCONFIRM_ID || result.Result_Data.PAYMENTCONFIRM_ID })
|
||
message.success("提交成功！")
|
||
return result.Result_Data;
|
||
};
|
||
|
||
// 删除回款信息
|
||
const handleDelete = async (id: number) => {
|
||
|
||
const hide = message.loading('正在删除...');
|
||
const result = await delPaymentConfirm(id)
|
||
hide();
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Desc}` || `${result.Result_Code}:删除失败`);
|
||
return false;
|
||
}
|
||
|
||
message.success("删除成功！")
|
||
return true;
|
||
};
|
||
|
||
// 保存拆分记录
|
||
const handleSavePament = async (fields: PaymentConfirmModel[]) => {
|
||
const hide = message.loading('正在提交...');
|
||
const result = await savePaymentRecord(fields);
|
||
hide();
|
||
|
||
if (result.Result_Code !== 100) {
|
||
message.error(`${result.Result_Desc}` || `${result.Result_Code}:提交失败`);
|
||
return false;
|
||
}
|
||
message.success("提交成功！")
|
||
return true;
|
||
};
|
||
|
||
// 校验图片大小
|
||
const beforeUpload = (file: any) => {
|
||
const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
|
||
if (!isJpgOrPng) {
|
||
message.error('You can only upload JPG/PNG file!');
|
||
}
|
||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
if (!isLt2M) {
|
||
message.error('图片大小不超过 2MB!');
|
||
}
|
||
return isJpgOrPng && isLt2M;
|
||
}
|
||
|
||
const MerchartsPayment: React.FC = (props: any) => {
|
||
const formRef = useRef<ProFormInstance>();
|
||
const actionRef = useRef<ActionType>();
|
||
const [tabActiveIndex, setTabActiveIndex] = useState<string>('1')
|
||
const [currentProject, setProject] = useState<any>(undefined)
|
||
|
||
const [fileList, setFileList] = useState<any[]>([])
|
||
const [fieldEnumIcon, setFieldEnumIcon] = useState<any>() // 款项类型图标
|
||
|
||
const [myRemark, setMyRemark] = useState<RemarksModel>({}) // 备注
|
||
const [step, setStep] = useState<number>(1) // 步骤 1 填写回款信息 2.拆分回款金额到不同项目
|
||
const [imagePreviewVisible, setImagePreviewVisible] = useState<boolean>(false) // 预览图片
|
||
|
||
const [currentRow, setCurrentRow] = useState<any>()
|
||
const [editFilds, setEditFilds] = useState<any>()
|
||
const [paymentList, setPaymentList] = useState<PaymentConfirmModel[]>() // 欠款项目
|
||
const [brandImages, setBrandImages] = useState<string[]>() // 品牌图片
|
||
const [accountReceivablesList, setAccountReceivablesList] = useState<[]>() // 应收款项目
|
||
|
||
const [modalVisible, handleModalVisible] = useState<boolean>(false)
|
||
|
||
const pageid = props.match.params.id
|
||
const currentUser = props?.currentUser
|
||
|
||
// 根据用户的类型 拼接请求参数 商户访问则使用门店ids 业主访问则直接查询商户id
|
||
const userDataParams = currentUser && currentUser.UserPattern === 1000 ?
|
||
{ MerchantsId: pageid, MERCHANTS_ID: pageid, ShowRevenueSplit: false } :
|
||
{ ServerpartShopIds: currentUser.ServerpartShopIds, ShowRevenueSplit: false }
|
||
|
||
// 欠款商户
|
||
const { run: refreshPage, loading: merchartsLoading, data: merchartsData } = useRequest(() => { return getMerchantsReceivables(userDataParams) })
|
||
|
||
const { run: getRemark, loading: remarkLoading, data: remarkList = [] } = useRequest((params) => {
|
||
return getRemarksList({ ...params, TABLE_NAME: 'T_PAYMENTCONFIRM' })
|
||
}, { manual: true })
|
||
|
||
// 生成账款类型状态枚举
|
||
const { loading: fieldLoading, data: FieldEnum } = useRequest(async () => {
|
||
const data = await getFieldEnum({ FieldExplainField: "ACCOUNT_TYPE" })
|
||
const opt = {}
|
||
const iconOpt = {}
|
||
|
||
data?.forEach(n => {
|
||
iconOpt[`${n.value}`] = {
|
||
text: <IconFont name={`icon-payment-${n.value}`} size="18" style={{ fontSize: 18, verticalAlign: "middle" }}></IconFont>,
|
||
status: n.value === 9000 ? 'Processing' : 'error'
|
||
}
|
||
opt[n.value] = {
|
||
text: n.label,
|
||
// status: n.value === "9000" ? 'Processing' : 'error'
|
||
}
|
||
})
|
||
setFieldEnumIcon(iconOpt)
|
||
return opt
|
||
})
|
||
|
||
useEffect(() => {
|
||
if (!merchartsLoading && merchartsData && !brandImages) {
|
||
if (merchartsData?.AccountReceivablesList) {
|
||
// 生成品牌图列表
|
||
const brandImage = merchartsData?.AccountReceivablesList.filter((n: AccountReceivablesModel) =>
|
||
n.BUSINESSPROJECT_ICO
|
||
).map((item: AccountReceivablesModel) => item.BUSINESSPROJECT_ICO)
|
||
|
||
setBrandImages(Array.from(new Set(brandImage)))
|
||
// 生成应收款项目列表数据 按照时间排序
|
||
setAccountReceivablesList(merchartsData?.AccountReceivablesList.sort(
|
||
(a: { ACCOUNT_DATE: string | number | Date; }, b: { ACCOUNT_DATE: string | number | Date; }) => new Date(a.ACCOUNT_DATE).getTime() - new Date(b.ACCOUNT_DATE).getTime()))
|
||
return
|
||
}
|
||
setBrandImages([])
|
||
setAccountReceivablesList([])
|
||
}
|
||
}, [merchartsLoading, merchartsData, brandImages])
|
||
|
||
/* 校验回款数据拆分数据并提交 */
|
||
const checkAmountAndUpdate = async () => {
|
||
// 回款拆分
|
||
if (editFilds.length === 0) {
|
||
message.warning("请选择需要返款的数据")
|
||
return false
|
||
}
|
||
const endPayments = editFilds.map((n: PaymentConfirmModel) => {
|
||
return {
|
||
...n, PAYMENTCONFIRM_PID: currentRow.PAYMENTCONFIRM_ID,
|
||
PAYMENTDATE: currentRow.PAYMENTDATE,
|
||
ACTUAL_PAYMENT: numeral(n.ACTUAL_PAYMENT).multiply(10000).value(),
|
||
STAFF_ID: currentUser?.ID, // 操作人内码
|
||
STAFF_NAME: currentUser?.Name, // 操作人员
|
||
}
|
||
})
|
||
const paymentPrice = endPayments.reduce((pre: any, item: any) => pre + item.ACTUAL_PAYMENT, 0,)
|
||
if (paymentPrice <= numeral(currentRow.CURRENTBALANCE).multiply(10000).value()) {
|
||
return await handleSavePament(endPayments)
|
||
}
|
||
|
||
message.warning("返款金额应小于总回款金额")
|
||
return false
|
||
}
|
||
/* 页面头部信息描述 */
|
||
const descirption = (
|
||
<>
|
||
<Title level={3} >
|
||
{merchartsData?.COOPMERCHANTS_NAME}
|
||
</Title>
|
||
<Row>
|
||
<Col span={6} style={{ marginTop: 10 }}>
|
||
|
||
<Descriptions
|
||
labelStyle={{ color: '#000' }}
|
||
contentStyle={{ color: '#595959' }}
|
||
column={1}>
|
||
<Descriptions.Item label="法人">
|
||
{merchartsData?.COOPMERCHANTS_LEGALPERSON && <Tag color="#DFEBF7" className="header-tag">{merchartsData?.COOPMERCHANTS_LEGALPERSON}</Tag>}
|
||
{merchartsData?.COOPMERCHANTS_LEGALMOBILE || "-"}
|
||
</Descriptions.Item>
|
||
<Descriptions.Item label="联系人">
|
||
{merchartsData?.COOPMERCHANTS_LINKMAN && <Tag color="#DFEBF7" className="header-tag">{merchartsData?.COOPMERCHANTS_LINKMAN}</Tag>}
|
||
{merchartsData?.COOPMERCHANTS_MOBILEPHONE || "-"}
|
||
</Descriptions.Item>
|
||
|
||
</Descriptions>
|
||
</Col>
|
||
<Col span={18} style={{ display: "flex", justifyContent: "flex-start" }}>
|
||
{!merchartsLoading && brandImages && brandImages.map(img =>
|
||
<div style={{
|
||
width: 78, height: 70, borderRadius: 3,
|
||
boxShadow: "0px 2px 10px 0px rgba(241,241,241,0.84)", overflow: "hidden", marginLeft: 10, display: "flex", alignItems: "center"
|
||
}} key={img}>
|
||
|
||
<Avatar shape="square" size={78} src={img} ></Avatar>
|
||
</div>
|
||
)
|
||
}
|
||
</Col>
|
||
</Row>
|
||
</>
|
||
)
|
||
// 标题金额拆分小数点前后显示大小
|
||
const amountDom = (value: any) => {
|
||
const stringValue = `${value}`
|
||
const [intValue, floatValue] = stringValue.split(".")
|
||
return floatValue ?
|
||
<><Text type="warning">{numeral(intValue).format("0,0")}</Text>
|
||
<Text type="warning" style={{ fontSize: 22 }}>.{floatValue}</Text>
|
||
<Text type="warning" style={{ fontSize: 14 }}>(万元)</Text></> : <>
|
||
<Text type="warning">{intValue}</Text><Text type="warning" style={{ fontSize: 14 }}>(万元)</Text></>
|
||
}
|
||
// 往来款表格头部设置
|
||
const columns: ProColumns<PaymentConfirmModel>[] = [
|
||
{
|
||
title: "",
|
||
width: 68,
|
||
dataIndex: 'ACCOUNT_TYPE',
|
||
hideInSearch: true,
|
||
valueType: "select",
|
||
valueEnum: !fieldLoading ? fieldEnumIcon : {},
|
||
},
|
||
{
|
||
|
||
title: "款项类型",
|
||
dataIndex: 'ACCOUNT_TYPE',
|
||
width: 120,
|
||
// align: "center",
|
||
hideInSearch: true,
|
||
valueType: "select",
|
||
valueEnum: !fieldLoading ? FieldEnum : {},
|
||
filters: true,
|
||
onFilter: true,
|
||
// request: async ()=>{
|
||
// return await getFieldEnum({ FieldExplainField: "ACCOUNT_TYPE" })
|
||
// },
|
||
|
||
},
|
||
{
|
||
title: () => <div style={{ textAlign: "center" }}>项目</div>,
|
||
dataIndex: 'BUSINESSPROJECT_NAME',
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
sorter: (a, b) => (a.BUSINESSPROJECT_NAME || "").localeCompare((b.BUSINESSPROJECT_NAME || "")),
|
||
render: (_, record) => {
|
||
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text style={{ paddingRight: 16 }} type="secondary">{record.BUSINESSPROJECT_NAME}</Text>
|
||
}
|
||
return _
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'PAYMENTCONFIRM_DESC',
|
||
title: () => <div style={{ textAlign: "center" }}>款项说明</div>,
|
||
ellipsis: true,
|
||
hideInSearch: true,
|
||
render: (_, record) => {
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text style={{ paddingRight: 16 }} type="secondary">{record.PAYMENTCONFIRM_DESC}</Text>
|
||
}
|
||
return _
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'ACCOUNT_DATE',
|
||
title: '应缴日期',
|
||
valueType: "date",
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
width: 120,
|
||
sorter: (a, b) => new Date(a.ACCOUNT_DATE || '').getTime() - new Date(b.ACCOUNT_DATE || '').getTime(),
|
||
render: (_, record) => {
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text type="secondary">{record?.ACCOUNT_DATE}</Text>
|
||
}
|
||
return _
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'ACCOUNT_AMOUNT',
|
||
title: '应缴金额',
|
||
align: 'right',
|
||
hideInSearch: true,
|
||
width: 120,
|
||
sorter: (a, b) => a.ACCOUNT_AMOUNT - b.ACCOUNT_AMOUNT,
|
||
render: (_, record) => {
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text style={{ paddingRight: 16 }} type="secondary">{record.ACCOUNT_AMOUNT || 0}</Text>
|
||
}
|
||
return <Text style={{ paddingRight: 16 }} type={record.ACCOUNT_TYPE === "9000" ? "success" : undefined}>{record?.ACCOUNT_AMOUNT || '-'}</Text>
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'ACTUAL_PAYMENT',
|
||
title: '已缴金额',
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
width: 120,
|
||
sorter: (a, b) => a.ACTUAL_PAYMENT - b.ACTUAL_PAYMENT,
|
||
render: (_, record) => {
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text style={{ paddingRight: 16 }} type="secondary">{record.ACTUAL_PAYMENT}</Text>
|
||
}
|
||
return <Text style={{ paddingRight: 16 }} type={record.ACCOUNT_TYPE === "9000" ? "success" : undefined}>{record?.ACTUAL_PAYMENT || '-'}</Text>
|
||
}
|
||
},
|
||
{
|
||
dataIndex: 'CURRENTBALANCE',
|
||
title: '剩余未缴',
|
||
hideInSearch: true,
|
||
align: 'right',
|
||
width: 120,
|
||
sorter: (a, b) => a.CURRENTBALANCE - b.CURRENTBALANCE,
|
||
render: (_, record) => {
|
||
if (record.CURRENTBALANCE === 0) {
|
||
return <Text style={{ paddingRight: 16 }} type="secondary">{record.CURRENTBALANCE || 0}</Text>
|
||
}
|
||
return <Text style={{ paddingRight: 16 }} type={record.ACCOUNT_TYPE === "9000" ? "danger" : undefined}>{record?.CURRENTBALANCE || '-'}</Text>
|
||
},
|
||
filters: [
|
||
{
|
||
text: '未清缴',
|
||
value: 0
|
||
}
|
||
],
|
||
onFilter: (value, record) => record.CURRENTBALANCE !== value,
|
||
// onFilter: true,
|
||
},
|
||
{
|
||
dataIndex: 'option',
|
||
title: '操作',
|
||
valueType: 'option',
|
||
width: "10%",
|
||
align: 'center',
|
||
hideInSearch: true,
|
||
hideInTable: currentUser?.UserPattern === 2000,
|
||
render: (_, record) => {
|
||
return <Space>
|
||
{
|
||
(record.ACCOUNT_TYPE !== "9000" || (record.ACCOUNT_TYPE === "9000" && !record.ACTUAL_PAYMENT)) &&
|
||
<a
|
||
onClick={() => {
|
||
getRemark({ TABLE_ID: record.PAYMENTCONFIRM_ID }).then(res => {
|
||
|
||
if (res) {
|
||
const mine = res.find((n: any) => n.STAFF_ID === currentUser.ID)
|
||
if (mine) {
|
||
setMyRemark(mine)
|
||
formRef.current?.setFieldsValue({ userDesc: mine.REMARKS_CONTENT || "" })
|
||
}
|
||
}
|
||
})
|
||
// console.log(data)
|
||
const imagesPath = record.ATTACHMENT_FILES
|
||
const images = transferImg(imagesPath ? imagesPath.split(',') : [])
|
||
setFileList(images)
|
||
setCurrentRow({ ...record });
|
||
setStep(1)
|
||
// setModelType(record.ACCOUNT_TYPE === "9000" && record.ACTUAL_PAYMENT === 0 ? 3 : 2)
|
||
|
||
handleModalVisible(true);
|
||
}}
|
||
>编辑</a>
|
||
}
|
||
{!record.ACTUAL_PAYMENT && <a onClick={async () => {
|
||
const suceess = await handleDelete(record?.PAYMENTCONFIRM_ID)
|
||
if (suceess) {
|
||
actionRef.current?.reload()
|
||
}
|
||
}}>删除</a>}
|
||
{record.ACCOUNT_TYPE === "9000" && record.CURRENTBALANCE !== 0 &&
|
||
<a onClick={() => {
|
||
setCurrentRow({ ...record });
|
||
setStep(2)
|
||
handleModalVisible(true);
|
||
}}>
|
||
返款
|
||
</a>
|
||
}
|
||
{
|
||
record.ATTACHMENT_FILES && <a onClick={() => {
|
||
const imagesPath = record.ATTACHMENT_FILES
|
||
const images = transferImg(imagesPath ? imagesPath.split(',') : [])
|
||
setFileList(images)
|
||
setImagePreviewVisible(true)
|
||
}}><PictureTwoTone /></a>
|
||
}
|
||
</Space>;
|
||
},
|
||
},
|
||
|
||
];
|
||
// 删除图片
|
||
const handleChange = async (info: any) => {
|
||
if (info.file.status === 'removed') {
|
||
const deleteLoading = message.loading('正在删除...')
|
||
|
||
try {
|
||
const deleteIndex = fileList?.findIndex((n: any) => n.uid === info.file.uid)
|
||
if (deleteIndex !== -1) {
|
||
const files = [...fileList]
|
||
files.splice(deleteIndex, 1)
|
||
setFileList(files)
|
||
}
|
||
|
||
deleteLoading()
|
||
return true
|
||
} catch (error) {
|
||
deleteLoading()
|
||
message.error("删除失败")
|
||
return false
|
||
}
|
||
}
|
||
return true
|
||
};
|
||
// 预览上传后的图片
|
||
const handlePreview = async () => {
|
||
|
||
setFileList(fileList)
|
||
setImagePreviewVisible(true)
|
||
|
||
};
|
||
// 弹出框标题
|
||
const getModelTitle = () => {
|
||
const type = currentRow ? '修改' : '新建'
|
||
const name = currentRow && currentRow.ACCOUNT_TYPE !== "9000" ? '欠款记录' : '回款记录'
|
||
return step === 2 ? '租金拆分日志' : type + name
|
||
}
|
||
|
||
return (
|
||
<PageContainer header={{ title: "" }}
|
||
loading={merchartsLoading}
|
||
content={
|
||
merchartsData && merchartsData.COOPMERCHANTS_ID && <Row align="middle">
|
||
<Col span={17}>
|
||
{descirption}
|
||
</Col>
|
||
<Col span={4}>
|
||
<Statistic className="payment-amount-card" title={merchartsData?.CURRENTBALANCE ? amountDom(merchartsData?.CURRENTBALANCE) : ""}
|
||
valueStyle={{ color: "#00000075", fontSize: 14 }}
|
||
value={"本期欠款"}
|
||
/>
|
||
</Col>
|
||
<Col span={3}>
|
||
<Statistic className="payment-amount-card" title={<span style={{ fontSize: 30, color: "#595959" }}>{moment().format('YYYY/MM/DD')}</span>}
|
||
valueStyle={{ color: "#00000075", fontSize: 14 }}
|
||
value={'应缴日期'}
|
||
// merchartsData?.ACCOUNT_DATE
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
}
|
||
>
|
||
{merchartsData && merchartsData.COOPMERCHANTS_ID ?
|
||
<>
|
||
{/* 应收款项目 */}
|
||
<Card
|
||
loading={merchartsLoading}
|
||
tabList={[{ key: "1", tab: '应收款项目' }, { key: "2", tab: '商家往来款' }, { key: "3", tab: '租金拆分日志' }]}
|
||
activeTabKey={tabActiveIndex}
|
||
onTabChange={(value) => {
|
||
setTabActiveIndex(value)
|
||
}}
|
||
|
||
bordered={false}
|
||
tabBarExtraContent={
|
||
<Space>
|
||
{/* <Text>查询时间：{moment().format('YYYY/MM/DD hh:mm:ss')}</Text> */}
|
||
{merchartsData?.UNDISTRIBUTED_AMOUNT && merchartsData?.UNDISTRIBUTED_AMOUNT !== 0 ?
|
||
<Text style={{ color: "#faad14", textAlign: "left" }}>未分配金额：{merchartsData?.UNDISTRIBUTED_AMOUNT}</Text> : ''}
|
||
<Text type="secondary">单位：万元</Text>
|
||
{/* 商户不能进行还款操作 */}
|
||
{currentUser.UserPattern === 1000 &&
|
||
<Button
|
||
key="new"
|
||
icon={<PlusOutlined />}
|
||
type="primary"
|
||
onClick={() => {
|
||
setStep(1)
|
||
// setModelType(3)
|
||
handleModalVisible(true);
|
||
}}
|
||
>
|
||
商家来款
|
||
</Button>
|
||
}
|
||
</Space>
|
||
}
|
||
>
|
||
{tabActiveIndex === '1' && (accountReceivablesList ?
|
||
accountReceivablesList.map((n: AccountReceivablesModel) =>
|
||
<div key={n.BUSINESSPROJECT_ID}>
|
||
<ProjectItem project={n} selectProject={(item: any) => {
|
||
setProject(item)
|
||
}} />
|
||
</div>
|
||
)
|
||
: <Empty />)
|
||
}
|
||
{/* 商家往来款 */}
|
||
{tabActiveIndex === '2' && <>
|
||
<ProTable
|
||
rowKey="PAYMENTCONFIRM_ID"
|
||
actionRef={actionRef}
|
||
request={async (pramas) => {
|
||
const data = await getPaymentConfirmList({ ...pramas, ...userDataParams, AccountDate: moment().format("YYYYMMDD"), })
|
||
|
||
const list = data.data.map((n: any) => {
|
||
return {
|
||
...n,
|
||
ACCOUNT_AMOUNT: n.ACCOUNT_AMOUNT ? numeral(n.ACCOUNT_AMOUNT).divide(10000).value() : n.ACCOUNT_AMOUNT,
|
||
ACTUAL_PAYMENT: n.ACTUAL_PAYMENT ? numeral(n.ACTUAL_PAYMENT).divide(10000).value() : n.ACTUAL_PAYMENT,
|
||
CURRENTBALANCE: n.CURRENTBALANCE ? numeral(n.CURRENTBALANCE).divide(10000).value() : n.CURRENTBALANCE
|
||
}
|
||
});
|
||
setPaymentList([...list].reverse())
|
||
|
||
return { ...data, data: list }
|
||
}}
|
||
columns={columns}
|
||
search={false}
|
||
pagination={{ defaultPageSize: 10 }}
|
||
toolBarRender={false}
|
||
/>
|
||
</>
|
||
}
|
||
{/* 租金拆分日志 */}
|
||
{tabActiveIndex === '3' && <PaymentRecord MERCHANTS_ID={merchartsData?.COOPMERCHANTS_ID_Encrypted} />}
|
||
</Card>
|
||
{/* 编辑回款数据弹出 */}
|
||
<ModalForm<PaymentConfirmModel | any>
|
||
title={<span>{getModelTitle()}</span>}
|
||
width={1024}
|
||
|
||
layout={'horizontal'}
|
||
wrapperCol={{ span: 16 }}
|
||
labelCol={{ span: 6 }}
|
||
formRef={formRef}
|
||
visible={modalVisible}
|
||
autoFocusFirstInput
|
||
modalProps={{
|
||
onCancel: () => {
|
||
},
|
||
}}
|
||
onVisibleChange={(value) => {
|
||
handleModalVisible(value);
|
||
if (value) {
|
||
formRef.current?.setFieldsValue(currentRow)
|
||
} else {
|
||
formRef.current?.resetFields();
|
||
setCurrentRow(undefined);
|
||
setFileList([])
|
||
setEditFilds([])
|
||
|
||
}
|
||
}}
|
||
onFinish={async (values) => {
|
||
let success: boolean | PaymentConfirmModel = false
|
||
|
||
if (step === 1) { // 更新回款/欠款记录
|
||
let newValue: PaymentConfirmModel = { ...values, MERCHANTS_ID: merchartsData?.COOPMERCHANTS_ID };
|
||
|
||
if (currentRow) {
|
||
// 编辑数据
|
||
newValue = {
|
||
...currentRow,
|
||
...newValue,
|
||
ACCOUNT_AMOUNT: numeral(newValue.ACCOUNT_AMOUNT).multiply(10000).value(),
|
||
ACTUAL_PAYMENT: numeral(newValue.ACTUAL_PAYMENT).multiply(10000).value(),
|
||
CURRENTBALANCE: numeral(currentRow.ACCOUNT_TYPE === "9000" ? newValue.ACCOUNT_AMOUNT : newValue.CURRENTBALANCE).multiply(10000).value(),
|
||
ACCOUNT_DATE: currentRow.ACCOUNT_TYPE === "9000" ? newValue.PAYMENTDATE : newValue.ACCOUNT_DATE
|
||
};
|
||
} else {
|
||
newValue = {
|
||
...newValue,
|
||
ACCOUNT_TYPE: "9000",
|
||
MERCHANTS_NAME: merchartsData?.COOPMERCHANTS_NAME,
|
||
ACCOUNT_AMOUNT: numeral(newValue.ACCOUNT_AMOUNT).multiply(10000).value()
|
||
}
|
||
|
||
}
|
||
newValue.ATTACHMENT_FILES = fileList.map(n => n.url).toString()
|
||
const remark = { ...myRemark, TABLE_NAME: 'T_PAYMENTCONFIRM', REMARKS_CONTENT: values.userDesc }
|
||
|
||
success = await handleAddUpdate({ ...newValue }, (myRemark?.REMARKS_ID || values.userDesc) ? remark : undefined);
|
||
|
||
|
||
} else {
|
||
success = await checkAmountAndUpdate() // 校验及提交拆分数据
|
||
}
|
||
|
||
if (success) {
|
||
if (actionRef.current) {
|
||
actionRef.current.reload();
|
||
refreshPage()
|
||
}
|
||
return true;
|
||
}
|
||
return false;
|
||
}}
|
||
|
||
>
|
||
{step === 1 && <div style={{ height: 500 }}>
|
||
<Title level={4} style={{ textAlign: "center", marginBottom: 40 }}>{currentRow?.BUSINESSPROJECT_NAME || merchartsData?.COOPMERCHANTS_NAME}</Title>
|
||
{
|
||
currentRow && currentRow?.ACCOUNT_TYPE !== "9000"
|
||
?
|
||
<>
|
||
<Row>
|
||
<Col span={8}>
|
||
<ProFormSelect
|
||
name="ACCOUNT_TYPE"
|
||
label="款项类型"
|
||
// width="md"
|
||
readonly
|
||
request={async () => {
|
||
return await getFieldEnum({ FieldExplainField: "ACCOUNT_TYPE" })
|
||
}}
|
||
labelCol={{ span: 12 }}
|
||
/>
|
||
</Col>
|
||
<Col span={10}>
|
||
<ProFormDatePicker
|
||
readonly
|
||
name="PAYMENTDATE"
|
||
label="回款日期"
|
||
|
||
labelCol={{ span: 10 }}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
<Row>
|
||
<Col span={8}>
|
||
|
||
<ProFormDigit
|
||
readonly
|
||
name="ACTUAL_PAYMENT"
|
||
label="回款金额"
|
||
fieldProps={{
|
||
formatter: value => `${value}万元`
|
||
}}
|
||
labelCol={{ span: 12 }}
|
||
|
||
/>
|
||
</Col>
|
||
<Col span={10}>
|
||
<ProFormDigit
|
||
name="ACCOUNT_AMOUNT"
|
||
label="应缴金额"
|
||
labelCol={{ span: 10 }}
|
||
fieldProps={{
|
||
formatter: value => `${value}万元`
|
||
}}
|
||
readonly
|
||
/></Col>
|
||
<Col span={6}>
|
||
|
||
<ProFormDigit
|
||
name="CURRENTBALANCE"
|
||
label="本期差额"
|
||
fieldProps={{
|
||
formatter: value => `${value}万元`
|
||
}}
|
||
labelCol={{ span: 10 }}
|
||
readonly
|
||
/>
|
||
</Col>
|
||
<Col span={24}>
|
||
<ProFormTextArea
|
||
name="userDesc"
|
||
label="备注说明"
|
||
wrapperCol={{ span: 18 }}
|
||
labelCol={{ span: 4 }}
|
||
|
||
/>
|
||
{!remarkLoading && remarkList.length > 0 &&
|
||
|
||
<List
|
||
itemLayout="horizontal"
|
||
dataSource={remarkList.filter((item: any) => item.STAFF_ID !== currentUser.ID)}
|
||
style={{ paddingLeft: 115.22, paddingRight: 85 }}
|
||
renderItem={(item: RemarksModel) => (
|
||
<List.Item>
|
||
<List.Item.Meta
|
||
avatar={<IconFont name="icon-touxiang" size="36"></IconFont>}
|
||
title={<div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}><Typography.Text>{item.STAFF_NAME}:</Typography.Text> <Typography.Text style={{ color: "#BBBFC7", fontWeight: 400 }}>{item.OPERATE_DATE}</Typography.Text></div>}
|
||
description={<Typography.Text type="secondary">{item.REMARKS_CONTENT}</Typography.Text>}
|
||
/>
|
||
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
}
|
||
</Col>
|
||
</Row>
|
||
</> :
|
||
<>
|
||
<Row>
|
||
<Col span={12}>
|
||
<ProFormDigit
|
||
name="ACCOUNT_AMOUNT"
|
||
label="回款金额"
|
||
|
||
width="md"
|
||
fieldProps={{
|
||
formatter: value => value ? `${value}万元` : ''
|
||
}}
|
||
|
||
rules={[
|
||
|
||
{
|
||
validator: (_, value) => {
|
||
if (!value) {
|
||
return Promise.reject(new Error('请输入回款金额'))
|
||
}
|
||
if (value && value > 0) {
|
||
return Promise.resolve()
|
||
}
|
||
return Promise.reject(new Error('回款金额需大于0'))
|
||
},
|
||
|
||
},
|
||
]}
|
||
/>
|
||
</Col>
|
||
<Col span={12}>
|
||
<ProFormDatePicker
|
||
|
||
name="PAYMENTDATE"
|
||
label="回款日期"
|
||
width="md"
|
||
rules={[
|
||
{
|
||
required: true,
|
||
message: '请选择回款日期',
|
||
},
|
||
]}
|
||
fieldProps={{
|
||
disabledDate: (current) => current && current > moment().endOf('day')
|
||
}}
|
||
/>
|
||
</Col>
|
||
|
||
|
||
<Col span={24}>
|
||
<ProFormUploadButton
|
||
labelCol={{ span: 3 }}
|
||
wrapperCol={{ span: 20 }}
|
||
name="files"
|
||
label="回款凭证"
|
||
fileList={fileList}
|
||
onChange={handleChange}
|
||
listType="picture-card"
|
||
|
||
fieldProps={{
|
||
beforeUpload,
|
||
onPreview: handlePreview,
|
||
customRequest: async (info) => {
|
||
const formData = new FormData();
|
||
formData.append('files', info.file);
|
||
formData.append('TableName', 'PAYMENTCONFIRM');
|
||
formData.append('ImageName', typeof info.file !== 'string' ? info.file?.name : '');
|
||
if (info.filename) {
|
||
// const success = await uploadFile(formData)
|
||
const success = await uploadAHYDFile(formData)
|
||
|
||
if (success) {
|
||
|
||
const list = [...fileList, {
|
||
uid: `${success.ImageId}`, // 注意，这个uid一定不能少，否则上传失败
|
||
name: success.ImageName,
|
||
status: 'done',
|
||
url: success.ImageUrl, // url 是展示在页面上的绝对链接
|
||
imgUrl: success.ImagePath // + success.ImageUrl,
|
||
}]
|
||
setFileList(list)
|
||
|
||
}
|
||
} else {
|
||
|
||
message.error("您上传的图片不存在.")
|
||
}
|
||
|
||
}
|
||
}}
|
||
|
||
/>
|
||
</Col>
|
||
<Col span={24}>
|
||
<ProFormTextArea
|
||
disabled={currentRow?.ACTUAL_PAYMENT}
|
||
name="userDesc"
|
||
label="备注说明"
|
||
// width="md"
|
||
labelCol={{ span: 3 }}
|
||
wrapperCol={{ span: 20 }}
|
||
/>
|
||
</Col>
|
||
</Row>
|
||
{currentRow && !remarkLoading && remarkList.length > 0 &&
|
||
|
||
<List
|
||
itemLayout="horizontal"
|
||
dataSource={remarkList.filter((item: any) => item.STAFF_ID !== currentUser.ID)}
|
||
style={{ paddingLeft: 115.22, paddingRight: 85 }}
|
||
renderItem={(item: RemarksModel) => (
|
||
<List.Item>
|
||
<List.Item.Meta
|
||
avatar={<IconFont name="icon-touxiang" size="36"></IconFont>}
|
||
title={<div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}><Typography.Text>{item.STAFF_NAME}:</Typography.Text> <Typography.Text style={{ color: "#BBBFC7" }}>{item.OPERATE_DATE}</Typography.Text></div>}
|
||
description={<Typography.Text type="secondary">{item.REMARKS_CONTENT}</Typography.Text>}
|
||
/>
|
||
|
||
</List.Item>
|
||
)}
|
||
/>
|
||
}
|
||
</>
|
||
|
||
}
|
||
</div>}
|
||
{step === 2 && paymentList &&
|
||
|
||
<EditPaymentTable
|
||
list={paymentList.filter((n: any) => n.ACCOUNT_TYPE !== "9000" && n.CURRENTBALANCE)}
|
||
paymentInfo={currentRow}
|
||
FieldEnum={FieldEnum}
|
||
amount={currentRow?.CURRENTBALANCE || 0}
|
||
onChange={setEditFilds}
|
||
/>
|
||
|
||
}
|
||
|
||
</ModalForm>
|
||
{/* 图片预览组件 */}
|
||
{fileList.length > 0 && <div style={{ display: 'none' }}>
|
||
|
||
<Image.PreviewGroup
|
||
|
||
preview={{
|
||
visible: imagePreviewVisible,
|
||
onVisibleChange: vis => {
|
||
if (!vis) {
|
||
setFileList([])
|
||
}
|
||
setImagePreviewVisible(vis)
|
||
}
|
||
|
||
}}>
|
||
{
|
||
fileList.map((n) =>
|
||
<Image src={n.url} key={n.url} />
|
||
)
|
||
}
|
||
|
||
</Image.PreviewGroup>
|
||
</div>}
|
||
{/* 抽屉弹出：欠款的项目详情 */}
|
||
<Drawer
|
||
visible={currentProject !== undefined}
|
||
width={"73%"}
|
||
onClose={() => {
|
||
setProject(undefined)
|
||
}}
|
||
closable={false}
|
||
className="project-drawer"
|
||
bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
|
||
>
|
||
{currentProject !== undefined &&
|
||
<ProjectDetail {...{
|
||
id: currentProject?.BUSINESSPROJECT_ID, showTabs: [2, 1, 3],
|
||
tabActive: "2", isPayment: true, price: currentProject.PAYABLE_AMOUNT || 0, date: currentProject.ACCOUNT_DATE
|
||
}}></ProjectDetail>}
|
||
</Drawer>
|
||
</> : <Card>
|
||
<Result title="查询失败"
|
||
subTitle="没有合同信息,无法查询到相关的租金情况。"
|
||
extra={[
|
||
<Button type="primary" key="console" onClick={() => history.push('/merchantManagement/workplace')}>
|
||
返回工作台
|
||
</Button>]}
|
||
/>
|
||
</Card>}
|
||
</PageContainer >
|
||
);
|
||
}
|
||
|
||
export default connect(({ user, }: ConnectState) => ({
|
||
currentUser: user.currentUser,
|
||
}))(MerchartsPayment);
|