/*
|
* @Company: hugeInfo
|
* @Author: lwh
|
* @Date: 2022-03-11 17:01:10
|
* @LastEditTime: 2022-04-11 08:46:13
|
* @LastEditors: lwh
|
* @Version: 1.0.0
|
* @Description:客户管理-收款记录
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate, useParams } from 'react-router-dom';
|
import PageHead from '../../../components/PageHead';
|
import { Card, Descriptions, Input, message, Divider, Form, Select, DatePicker, Button, Spin } from 'antd';
|
import * as $$ from '../../../utils/utility';
|
import './index.less';
|
import moment from 'moment';
|
const { Option } = Select;
|
// 收款记录详情
|
function getByIdCustPay(id) {
|
return $$.ax.request({ url: 'v1/custPay/getById', type: 'get', data: { id }, service: 'oper' });
|
}
|
// 保存修改版本和增强包
|
function saveCustPay(data) {
|
return $$.ax.request({ url: 'v1/custPay/saveCustPay', type: 'POST', data, service: 'oper' });
|
}
|
|
const AddPayee = () => {
|
const [form] = Form.useForm();
|
const [formData, setFormData] = useState({});
|
const [loading, setLoading] = useState(false);
|
const navigate = useNavigate();
|
const params = useParams();
|
|
//初始化组件回显
|
useEffect(() => {
|
getOrganization();
|
}, []);
|
|
const getOrganization = async () => {
|
const requestObj = await getByIdCustPay(params.id);
|
setFormData(requestObj.data);
|
};
|
|
const save = async () => {
|
setLoading(true);
|
const row = await form.validateFields();
|
const tableData = form.getFieldValue();
|
const res = await saveCustPay({ ...tableData, custId: params.id });
|
setLoading(false);
|
if (res.type) {
|
form.resetFields();
|
message.success('提交成功！');
|
navigate(-1);
|
}
|
};
|
|
const reset = () => {
|
form.resetFields();
|
};
|
|
const back = () => {
|
navigate(-1);
|
};
|
|
return (
|
<div className="add-Payee-main">
|
<PageHead
|
breadcrumbData={[{ title: '客户管理', url: '/operation/customer' }, { title: '新增收款记录' }]}
|
title={params.title ? params.title : '新增收款记录'}
|
/>
|
<Descriptions column={4} style={{ width: '100%', backgroundColor: '#ffffff', padding: '0 24px' }}>
|
<Descriptions.Item label="累计应收">
|
<span style={{ fontWeight: '600' }}>￥{formData.planPrice}元</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="累计实收">
|
<span style={{ fontWeight: '600' }}>￥{formData.payPrice}元</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="剩余未收">
|
<span style={{ fontWeight: '600' }}>￥{formData.notPrice}元</span>
|
</Descriptions.Item>
|
<Descriptions.Item label="累计收款次数">{formData.priceCount}次</Descriptions.Item>
|
</Descriptions>
|
<div style={{ backgroundColor: '#fff', minHeight: '74vh', margin: '24px', display: 'flex' }}>
|
<div style={{ width: '320px', padding: '24px 12px' }}>
|
{formData.custVerHis &&
|
formData.custVerHis.map((item, index) => (
|
<div style={{ padding: '12px' }}>
|
<span style={{ display: 'inline-block', width: '80px' }}>{item.verName}</span>
|
<span style={{ paddingLeft: '6px' }}>{item.openTime ? moment(item.openTime).format('YYYY-MM-DD') : ''}开通</span>
|
</div>
|
))}
|
{formData.mealhis &&
|
formData.mealhis.map((item, index) => (
|
<div style={{ padding: '12px' }}>
|
<span style={{ display: 'inline-block', width: '80px' }}>{item.mealName}</span>
|
<span style={{ paddingLeft: '6px' }}>{item.createTime ? moment(item.createTime).format('YYYY-MM-DD') : ''}开通</span>
|
</div>
|
))}
|
</div>
|
<Divider style={{ color: '#e8e8e8', minHeight: '70vh', margin: '24px 0' }} type="vertical" />
|
{/* <div style={{ margin: '24px', width: '320px' }}>试用版</div> */}
|
<Spin spinning={loading}>
|
<Card bordered={false} style={{ margin: '24px', width: '100%', paddingLeft: '23vh' }}>
|
<Form form={form} labelCol={{ style: { width: '100%', textAlign: 'left' } }} layout="vertical" component={false}>
|
<Form.Item label="收款金额" name="payPrice" rules={[{ required: false, message: `请输入收款金额` }]}>
|
<Input type={'number'} prefix={'￥'} suffix={'元'} placeholder={`请输入收款金额`} style={{ width: '320px' }} />
|
</Form.Item>
|
<Form.Item label="收款日期" name="payTime" rules={[{ required: false, message: `请选择收款日期` }]}>
|
<DatePicker
|
format="YYYY-MM-DD"
|
placeholder={`请选择收款日期`}
|
disabledDate={(current) => current < moment().startOf('day')}
|
style={{ width: '320px' }}
|
/>
|
</Form.Item>
|
<Form.Item label="付款单位" name="payUnit" rules={[{ required: false, message: `请输入付款单位` }]}>
|
<Input placeholder={`请输入付款单位`} style={{ width: '320px' }} />
|
</Form.Item>
|
<Form.Item label="付款账号" name="payNum" rules={[{ required: false, message: `请输入付款账号` }]}>
|
<Input placeholder={`请输入付款账号`} style={{ width: '320px' }} />
|
</Form.Item>
|
<Form.Item label="税号" name="dutyNum" rules={[{ required: false, message: `请输入税号` }]}>
|
<Input placeholder={`请输入税号`} style={{ width: '320px' }} />
|
</Form.Item>
|
<Form.Item label="开票类型" name="billType" rules={[{ required: false, message: `请选择开票类型` }]}>
|
<Select fieldNames={{ label: 'name', key: 'id' }} placeholder="请选择开票类型" style={{ width: '320px' }} allowClear>
|
{[
|
{ name: '增值税专用发票', id: '增值税专用发票' },
|
{ name: '普通发票', id: '普通发票' },
|
{ name: '机动车专用发票', id: '机动车专用发票' },
|
{ name: '机打发票', id: '机打发票' },
|
{ name: '定额发票', id: '定额发票' },
|
{ name: '剪口发票', id: '剪口发票' },
|
].map((item, index) => (
|
<Option key={index} value={item.name}>
|
{item.name}
|
</Option>
|
))}
|
</Select>
|
</Form.Item>
|
<Form.Item label="备注" name="remake" rules={[{ required: false, message: `请输入备注` }]}>
|
<Input placeholder={`请输入备注`} style={{ width: '320px' }} />
|
</Form.Item>
|
</Form>
|
<div className="add-payee-foot-buttton">
|
<Button onClick={save} type="primary">
|
提交
|
</Button>
|
<Button onClick={reset}>重置</Button>
|
<Button onClick={back}>返回</Button>
|
</div>
|
</Card>
|
</Spin>
|
</div>
|
</div>
|
);
|
};
|
|
export default AddPayee;
|
