Skip to content

J
jinfa-platform
Commit fcbffffd authored by Bill's avatar Bill
Browse files
Options

结算能力对接应付账款，应收账款

parent 932096bb
Hide whitespace changes
Inline Side-by-side
Showing with 465 additions and 182 deletions
src/locales/zh-CN/menu.ts
View file @ fcbffffd
......@@ -4,6 +4,7 @@
<<<<<<< HEAD
* @LastEditors: Please set LastEditors
<<<<<<< HEAD
<<<<<<< HEAD
* @LastEditTime: 2020-10-26 18:20:31
=======
* @LastEditors: Please set LastEditors
......@@ -16,6 +17,9 @@
=======
* @LastEditTime: 2020-10-23 16:07:53
>>>>>>> b7a56747... 结算能力-结算规则配置接口对接完成，剩余部分等接口
=======
* @LastEditTime: 2020-10-26 11:36:19
>>>>>>> 38b99535... 结算能力对接应付账款，应收账款
*/
export default {
......@@ -521,7 +525,7 @@ export default {
'menu.balance.accountsPayable.logisticsDetail': '物流通知单结算明细',
'menu.balance.accountsPayable.productNoticeSettlementDetail': '生产通知单结算明细',
'menu.balance.accountsReceivable': '应收账款结算',
'menu.balance.accountsReceivable.settlementList': '应付账款结算',
'menu.balance.accountsReceivable.settlementList': '应收账款结算',
'menu.balance.accountsReceivable.logisticsDetail': '物流通知单结算明细',
'menu.balance.accountsReceivable.productNoticeSettlementDetail': '生产通知单结算明细',
'menu.balance.accountsReceivable.invoice': '开票管理',
......
src/pages/balance/accountsPayable/settlementList/index.tsx
View file @ fcbffffd
......@@ -14,18 +14,25 @@ import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { schema } from './schema';
import ModalContainer from '../../components/ModalContainer';
import ConfirmAccount from '../../components/ConfirmAccount';
import Voucher from '../../components/Voucher';
import StatusTag from '../../components/StatusTag';
import StatusActions from '../../components/StatusActions';
import { PublicApi } from '@/services/api';
const formActions = createFormActions();
const SettlementList = () => {
const ref = useRef<any>({})
const fetchListData = async (params) => {
const searchParams = {
orderType: 0,
status: 0,
...params,
}
// /settle/accounts/member/settlement/pagePayableSettlement
const { data } = await PublicApi.getSettleAccountsMemberSettlementPagePayableSettlement(searchParams);
return {
data: [{id: 1}],
totalCount: 1
totalCount: 1,
data: [{id: 1, status: 2}]
}
}
const columns = [
......@@ -42,7 +49,7 @@ const SettlementList = () => {
title: '结算状态', dataIndex: 'status',
render: (text, record) => {
return (
<Tag>待对账</Tag>
<StatusTag status={record.status} />
)
}
},
......@@ -50,48 +57,47 @@ const SettlementList = () => {
title: '操作',
render: (text, record) => {
return (
<>
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
<Voucher />
</Modal>
<div onClick={show}>查看付款凭证</div>
</>
)
}
}
</ModalContainer>
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="确认付款凭证" onCancel={cancel} visible={visible}
footer={(
<Space>
<Button>取消</Button>
<Button>确认</Button>
</Space>
)}
>
<Voucher />
</Modal>
<div onClick={show}>确认付款凭证</div>
</>
)
}
}
</ModalContainer>
</>
<StatusActions
status={record.status}
handleReconciledComfirm={handleConfirm}
handleComfirmInCompletePayment={handleComfirmInCompletePayment}
handleComfirmCompletePayment={handleComfirmCompletePayment}
/>
)
}
}
]
/**
* 确认对账
* @param cancel 关闭回调函数
*/
const handleConfirm = (params: any) => {
console.log(123)
params.onCancel();
}
const handleComfirmInCompletePayment = (params: any) => {
console.log(params);
params.onCancel()
}
const handleComfirmCompletePayment = (params: any) => {
params.onCancel();
}
/**
* 搜索
*/
const handleSearch = (values) => {
console.log(values);
const format = 'YYYY-MM-DD'
const startTime = values.startTime?.format(format);
const endTime = values.endTime?.format(format);
console.log(startTime, endTime);
ref.current.reload({startTime, endTime});
}
return (
<PageHeaderWrapper>
<Card>
......@@ -115,7 +121,7 @@ const SettlementList = () => {
// );
}}
schema={schema}
onSubmit={values => ref.current.reload(values)}
onSubmit={handleSearch}
/>
}
/>
......
src/pages/balance/accountsPayable/settlementList/logisticsDetail.tsx
View file @ fcbffffd
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef } from 'react';
import React, { useRef, useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
......@@ -16,7 +16,9 @@ import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { detailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import StatusTag from '../../components/StatusTag';
const formActions = createFormActions();
const columns = [
......@@ -32,12 +34,44 @@ const columns = [
{title: '结算金额', dataIndex: 'payPrice'},
]
interface infoType {
id: number, // 会员结算id
settlementNo: string, // 结算单号
settlementDate: string, // 结算日期
settlementWayName: string, // 结算方式名称
settlementName: string, // 结算方
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
statusName: string // 结算状态名称
}
const logisticsDetail: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<infoType>(null);
const { id, preview } = usePageStatus();
const fetchListData = async (params) => {
return {}
console.log(id);
// const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
return {
totalCount: 0,
data: []
}
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
return (
<PageHeaderWrapper
title={
......@@ -49,7 +83,7 @@ const logisticsDetail: React.FC = () => {
<AvatarWrap
info={{
aloneTxt: '单',
name: "通知单号："
name: "结算单号："
}}
extra={(
<span style={{ fontSize: 12, fontWeight: 'normal' }}>{"TPTY12"}</span>
......@@ -63,12 +97,12 @@ const logisticsDetail: React.FC = () => {
padding: '0 32px',
}}
>
<Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
<Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
<Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
<Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
<Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
<Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
......
src/pages/balance/accountsPayable/settlementList/productNoticeSettlementDetail.tsx
View file @ fcbffffd
......@@ -4,18 +4,20 @@
* @Description: 积分结算详情页
*/
import React, { useRef } from 'react';
import React, { useRef, useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
import AvatarWrap from '@/components/AvatarWrap';
import NiceForm from '@/components/NiceForm';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ISchema, createFormActions } from '@formily/antd';
import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { detailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
const formActions = createFormActions();
......@@ -32,12 +34,39 @@ const columns = [
{title: '结算金额', dataIndex: 'payPrice'},
]
interface infoType {
id: number, // 会员结算id
settlementNo: string, // 结算单号
settlementDate: string, // 结算日期
settlementWayName: string, // 结算方式名称
settlementName: string, // 结算方
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
statusName: string // 结算状态名称
}
const ProductNoticeSettlementDetail: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<infoType>(null);
const { id, preview } = usePageStatus();
const fetchListData = async (params) => {
return {}
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
return (
<PageHeaderWrapper
title={
......@@ -63,12 +92,12 @@ const ProductNoticeSettlementDetail: React.FC = () => {
padding: '0 32px',
}}
>
<Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
<Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
<Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
<Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
<Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
<Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
......
src/pages/balance/accountsPayable/settlementList/schema/index.tsx
View file @ fcbffffd
......@@ -58,15 +58,15 @@ export const schema: ISchema = {
allowClear: true,
},
},
// submit: {
// 'x-component': 'Submit',
// 'x-mega-props': {
// span: 1,
// },
// 'x-component-props': {
// children: '查询',
// },
// },
submit: {
'x-component': 'Submit',
'x-mega-props': {
span: 1,
},
'x-component-props': {
children: '查询',
},
},
},
},
},
......
src/pages/balance/accountsReceivable/settlementList/index.tsx
View file @ fcbffffd
......@@ -6,28 +6,31 @@
import React, { useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, Button, Modal, DatePicker, Tag, Space } from 'antd';
import { Card, DatePicker} from 'antd';
import NiceForm from '@/components/NiceForm';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ISchema, createFormActions } from '@formily/antd';
import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { schema } from './schema';
import ModalContainer from '../../components/ModalContainer';
import ConfirmAccount from '../../components/ConfirmAccount';
import Voucher from '../../components/Voucher';
import { PublicApi } from '@/services/api';
import StatusActions from '../../components/StatusActions';
import StatusTag from '../../components/StatusTag';
const formActions = createFormActions();
const SettlementList = () => {
const ref = useRef<any>({})
const fetchListData = async (params) => {
return {
data: [{id: 1}],
totalCount: 1
const searchParams = {
orderType: 0,
status: 0,
...params,
}
// /settle/accounts/member/settlement/pagePayableSettlement
const { data } = await PublicApi.getSettleAccountsMemberSettlementPageReceivableSettlement(searchParams);
return data
}
const columns = [
{title: '结算单号', dataIndex: 'num'},
......@@ -43,7 +46,7 @@ const SettlementList = () => {
title: '结算状态', dataIndex: 'status',
render: (text, record) => {
return (
<Tag>待对账</Tag>
<StatusTag status={record.status || 1} />
)
}
},
......@@ -51,70 +54,33 @@ const SettlementList = () => {
title: '操作',
render: (text, record) => {
return (
<>
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={400} title="确认对账完成" visible={visible} onCancel={cancel} onOk={() => handleConfirm(cancel)}>
<ConfirmAccount />
</Modal>
<div onClick={show}>确认对账完成</div>
</>
)
}
}
</ModalContainer>
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
<Voucher />
</Modal>
<div onClick={show}>查看付款凭证</div>
</>
)
}
}
</ModalContainer>
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="确认付款凭证" onCancel={cancel} visible={visible}
footer={(
<Space>
<Button>取消</Button>
<Button>确认未到款</Button>
<Button>确认到款</Button>
</Space>
)}
>
<Voucher />
</Modal>
<div onClick={show}>确认付款凭证</div>
</>
)
}
}
</ModalContainer>
</>
<StatusActions
status={record.status || 3}
handleReconciledComfirm={handleConfirm}
handleComfirmInCompletePayment={handleComfirmInCompletePayment}
handleComfirmCompletePayment={handleComfirmCompletePayment}
/>
)
}
}
]
/**
/**
* 确认对账
* @param cancel 关闭回调函数
*/
const handleConfirm = (cancel) => {
const handleConfirm = (params: any) => {
console.log(123)
cancel();
params.onCancel();
}
const handleComfirmInCompletePayment = (params: any) => {
console.log(params);
params.onCancel()
}
const handleComfirmCompletePayment = (params: any) => {
params.onCancel();
}
return (
<PageHeaderWrapper>
......
src/pages/balance/accountsReceivable/settlementList/logisticsDetail.tsx
View file @ fcbffffd
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef } from 'react';
import React, { useRef, useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
......@@ -16,7 +16,9 @@ import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { detailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import StatusTag from '../../components/StatusTag';
const formActions = createFormActions();
const columns = [
......@@ -32,13 +34,44 @@ const columns = [
{title: '结算金额', dataIndex: 'payPrice'},
]
interface infoType {
id: number, // 会员结算id
settlementNo: string, // 结算单号
settlementDate: string, // 结算日期
settlementWayName: string, // 结算方式名称
settlementName: string, // 结算方
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
statusName: string // 结算状态名称
}
const logisticsDetail: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<infoType>(null);
const { id, preview } = usePageStatus();
const fetchListData = async (params) => {
return {}
console.log(id);
// const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
return {
totalCount: 0,
data: []
}
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
return (
<PageHeaderWrapper
title={
......@@ -50,7 +83,7 @@ const logisticsDetail: React.FC = () => {
<AvatarWrap
info={{
aloneTxt: '单',
name: "结算单号:"
name: "结算单号："
}}
extra={(
<span style={{ fontSize: 12, fontWeight: 'normal' }}>{"TPTY12"}</span>
......@@ -64,12 +97,12 @@ const logisticsDetail: React.FC = () => {
padding: '0 32px',
}}
>
<Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
<Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
<Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
<Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
<Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
<Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
......
src/pages/balance/accountsReceivable/settlementList/productNoticeSettlementDetail.tsx
View file @ fcbffffd
......@@ -4,19 +4,23 @@
* @Description: 积分结算详情页
*/
import React, { useRef } from 'react';
import React, { useRef, useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
import AvatarWrap from '@/components/AvatarWrap';
import NiceForm from '@/components/NiceForm';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { ISchema, createFormActions } from '@formily/antd';
import { createFormActions } from '@formily/antd';
import { StandardTable } from 'god';
import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilterSearch';
import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { detailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
const formActions = createFormActions();
const columns = [
{title: '单据号', dataIndex: 'no'},
{title: '单据摘要', dataIndex: 'desc'},
......@@ -30,14 +34,39 @@ const columns = [
{title: '结算金额', dataIndex: 'payPrice'},
]
interface infoType {
id: number, // 会员结算id
settlementNo: string, // 结算单号
settlementDate: string, // 结算日期
settlementWayName: string, // 结算方式名称
settlementName: string, // 结算方
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
statusName: string // 结算状态名称
}
const ProductNoticeSettlementDetail: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<infoType>(null);
const { id, preview } = usePageStatus();
const fetchListData = async (params) => {
return {}
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
return (
<PageHeaderWrapper
title={
......@@ -48,6 +77,7 @@ const ProductNoticeSettlementDetail: React.FC = () => {
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: "通知单号："
}}
extra={(
......@@ -62,12 +92,12 @@ const ProductNoticeSettlementDetail: React.FC = () => {
padding: '0 32px',
}}
>
<Descriptions.Item label="通知单摘要">{"进口头层黄牛皮荔枝纹"}</Descriptions.Item>
<Descriptions.Item label="供应会员：">{"广州白马皮具交易中心"}</Descriptions.Item>
<Descriptions.Item label="单据时间：">{"2020-09-09 12:58:25"}</Descriptions.Item>
<Descriptions.Item label="通知单来源：">{"订单加工"}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{"以完成通知单"}</Descriptions.Item>
<Descriptions.Item label="内部状态：">{"审核通过"}</Descriptions.Item>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数:">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额：">{infoDetail?.amount}</Descriptions.Item>
<Descriptions.Item label="结算方：">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态：">{infoDetail?.statusName}</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
......
src/pages/balance/common/type.d.ts 0 → 100644
View file @ fcbffffd
/*
* @Author: Bill
* @Date: 2020-10-26 15:05:03
* @Description: 结算能力公共类型集合
*/
/**
* 上传凭证类型
*/
export interface VoucherFileProps {
/**
* 文件名
*/
name: string,
/**
* 文件路径
*/
proveUrl: string
}
\ No newline at end of file
src/pages/balance/components/StatusActions/index.tsx
View file @ fcbffffd
......@@ -10,6 +10,7 @@ import ConfirmAccount from '../../components/ConfirmAccount';
import Voucher from '../../components/Voucher';
import { StatusEnum, TO_BE_RECONCILED, TO_BE_PAY, TO_BE_COLLECTED, COMPLETED } from '../../components/StatusTag';
import styles from './index.less';
import UploadPayVoucher from '../../components/UploadPayVoucher';
interface Iprops {
status: StatusEnum,
......@@ -87,7 +88,7 @@ const ViewPaymentVoucher: React.FC = (props) => {
return (
<>
<Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
<Voucher />
<Voucher files={[]} />
</Modal>
<div className={styles.modalBtn} onClick={show}>查看付款凭证</div>
</>
......@@ -98,10 +99,43 @@ const ViewPaymentVoucher: React.FC = (props) => {
)
}
// 待付款 状态 上传付款凭证
const UploadVoucher: React.FC = (props) => {
return (
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal
width={548}
title="上传付款凭证"
onCancel={cancel}
visible={visible}
footer={(
<Space>
<Button onClick={cancel}>取消</Button>
<Button
type={"primary"}
>确认</Button>
</Space>
)}
>
<UploadPayVoucher fileList={[{name: '123', proveUrl: ''}]} />
</Modal>
<div className={styles.modalBtn} onClick={show}>上传付款凭证</div>
</>
)
}
}
</ModalContainer>
)
}
// 待对账时显示确认对账， 待付款 什么都不显示， 代收款显示确认付款凭证， 以完成显示 查看付款凭证
const ChildrenComponent = {
[TO_BE_RECONCILED]: ConfirmAccountComponent,
[TO_BE_PAY]: null,
[TO_BE_PAY]: UploadVoucher,
[TO_BE_COLLECTED]: ConfirmCollected,
[COMPLETED]: ViewPaymentVoucher
}
......
src/pages/balance/components/UploadPayVoucher/index.less 0 → 100644
View file @ fcbffffd
.container {
.formItem {
display: flex;
flex-direction: row;
align-items: center;
font-size: 12px;
margin-bottom: 24px;
.label {
margin-right: 20px;
color: #909399;
width: 70px;
}
}
.voucherText {
color: #909399;
font-size: 14px;
}
.upload {
margin-top: 16px;
.tips {
margin-top: 12px;
font-size: 12px;
color: #909399;
}
}
}
\ No newline at end of file
src/pages/balance/components/UploadPayVoucher/index.tsx
View file @ fcbffffd
......@@ -4,26 +4,99 @@
* @Description: 上传付款凭证
*/
import React from 'react';
import React, { useState, useEffect } from 'react';
import Voucher from '../Voucher';
import styles from './index.less';
import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons'
import { UploadFile, UploadChangeParam } from 'antd/lib/upload/interface';
import { UPLOAD_TYPE } from '@/constants'
import { VoucherFileProps } from '../../common/type';
interface Iprops {
fileList: VoucherFileProps[],
}
const UploadPayVoucher: React.FC<Iprops> = (props) => {
const [fileList, setFileList] = useState([]);
const [loading, setLoading] = useState(false);
// 进来设置fileList
useEffect(() => {
setFileList(props.fileList)
}, [props.fileList])
/***
* 上传前检查
*/
const fileMaxSize = 200;
const beforeUpload = (file: UploadFile) => {
const isSizeLimit = file.size / 1024 < fileMaxSize;
if (!isSizeLimit) {
message.error(`上传文件大小不超过${fileMaxSize}K!`);
}
return isSizeLimit;
}
/**
* 上传配置
*/
const uploadProps = {
name: 'file',
action: '/api/file/file/upload',
headers: {},
data: {
fileType: UPLOAD_TYPE, // 指定类型是本地还是线上，
},
disabled: loading,
showUploadList: false,
onChange(info: UploadChangeParam) {
if (info.file.status === 'uploading') {
setLoading(true)
return;
}
if (info.file.status === 'done') {
// 图片回显
const { code, data } = info.file.response
if (code === 1000) {
console.log('upload success')
// onChange(data)
const temp = [...fileList];
const filename = info.file.name
temp.push({
name: filename,
proveUrl: data
})
setFileList(temp);
}
setLoading(false)
}
},
beforeUpload
};
const UploadPayVoucher = () => {
return (
<div>
<div>
<span>账户名称</span>
<span>温州市隆昌皮具有限公司</span>
<div className={styles.container}>
<div className={styles.formItem}>
<span className={styles.label}>账户名称</span>
<span className={styles.value}>温州市隆昌皮具有限公司</span>
</div>
<div className={styles.formItem}>
<span className={styles.label}>银行账号</span>
<span className={styles.value}>3214 454646 145 46 1231</span>
</div>
<div>
<span>银行账号</span>
<span>3214 454646 145 46 1231</span>
<div className={styles.formItem}>
<span className={styles.label}>开户行</span>
<span className={styles.value}>中国建设银行广州市分行营业部</span>
</div>
<div>
<span>开户行</span>
<span>中国建设银行广州市分行营业部</span>
<p className={styles.voucherText}>上传支付凭证</p>
<Voucher files={fileList} />
<div className={styles.upload}>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>上传凭证</Button>
<p className={styles.tips}>单个凭证文件大小不能超过200K</p>
</Upload>
</div>
<h1>上传支付凭证</h1>
<Voucher />
</div>
)
}
......
src/pages/balance/components/Voucher/index.less
View file @ fcbffffd
......@@ -23,5 +23,10 @@
.view {
margin-left: auto;
cursor: pointer;
}
.text {
cursor: pointer;
}
}
\ No newline at end of file
src/pages/balance/components/Voucher/index.tsx
View file @ fcbffffd
......@@ -7,17 +7,33 @@
import React from 'react';
import styles from './index.less'
import image_icon from '@/assets/imgs/image_icon.png';
import { VoucherFileProps } from '../../common/type';
const Voucher = () => {
interface Iprops {
files: VoucherFileProps[]
}
const Voucher: React.FC<Iprops> = (props) => {
const { files = [] } = props;
return (
<div className={styles.container}>
{/* <div></div>/ */}
<div className={styles.image}>
<img src={image_icon} className={styles.icon} />
</div>
<div className={styles.text}>20187878.jpg</div>
<div className={styles.view}>预览</div>
</div>
<>
{
files.map((item: VoucherFileProps) => {
return (
<div className={styles.container}>
{/* <div></div>/ */}
<div className={styles.image}>
<img src={image_icon} className={styles.icon} />
</div>
<div className={styles.text}>
<a href={item.proveUrl} target={"_blank"}>{item.name}</a>
</div>
<div className={styles.view}>预览</div>
</div>
)
})
}
</>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment