Skip to content

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

refactor: 部分重构结算

parent 01bc2d1c
Hide whitespace changes
Inline Side-by-side
Showing with 472 additions and 1060 deletions
src/components/StatusTag/index.tsx
View file @ 1240f220
......@@ -9,6 +9,8 @@ import React from 'react';
import classNames from 'classnames';
import styles from './index.less';
export const STATUS_TYPE = ['success', 'warning', 'default', 'danger', 'primary', 'nobility']
export type StatusTagProps = {
type: 'success' | 'warning' | 'default' | 'danger' | 'primary' | 'nobility';
title: React.ReactNode;
......@@ -22,4 +24,4 @@ const StatusTag: React.FC<StatusTagProps> = ({ type, title, style }) => {
);
};
export default StatusTag;
\ No newline at end of file
export default StatusTag;
src/components/UploadFiles/UploadFiles.tsx
View file @ 1240f220
......@@ -11,7 +11,12 @@ import { getAuth } from '@/utils/auth';
type PickProps = "headers" | "action" | "accept" | "beforeUpload" | "onChange" | "fileList"
interface PickUploadProps extends Pick<UploadProps, PickProps> {
children?: React.ReactElement,
containerStyle?: React.CSSProperties,
/**
* 表示当前上传组件的order值， 越大越后， 即flex-order
*/
uploadOrder?: number,
children?: React.ReactNode,
disable?: boolean,
mode?: "text" | "link" | "ghost" | "default" | "primary" | "dashed",
buttonText?: string,
......@@ -22,6 +27,8 @@ interface PickUploadProps extends Pick<UploadProps, PickProps> {
const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
const {
uploadOrder,
containerStyle,
headers,
action,
accept,
......@@ -92,7 +99,7 @@ const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
}
const renderFileItem = () => {
return (
<div className={filesContainerCs}>
<div className={filesContainerCs} style={{order: 1}}>
{
files.map((_item: UploadFile, key) => {
return (
......@@ -124,21 +131,23 @@ const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
}
return (
<div>
<div style={containerStyle} >
{
!!customizeItemRender ? customizeItemRender(files, handleRemove) : renderFileItem()
}
{
!disable && (
<Upload {...uploadProps}>
{
children || (
<Button type={mode} icon={<CloudUploadOutlined />}>
{buttonText}
</Button>
)
}
</Upload>
<div style={{order: uploadOrder}}>
<Upload {...uploadProps} >
{
children || (
<Button type={mode} icon={<CloudUploadOutlined />}>
{buttonText}
</Button>
)
}
</Upload>
</div>
)
}
......@@ -147,6 +156,11 @@ const UploadFiles: React.FC<PickUploadProps> = (props: PickUploadProps) => {
}
UploadFiles.defaultProps = {
containerStyle: {
display: "flex",
flexDirection: 'column'
},
uploadOrder: 2,
action: '/api/file/file/upload',
headers: {},
beforeUpload: (file, fileList) => true,
......
src/constants/balance.ts 0 → 100644
View file @ 1240f220
/**
* 结算单状态
*/
/**
* 结算状态 待对账、待付款、待收款、已完成
*/
/**
* 待对账
*/
const PENDING_RECONCILED = 1
/**
* 待付款
*/
const PENDING_PAY = 2;
/**
* 待收款
*/
const PENDING_RECEIVED = 3;
/**
* 已完成
*/
const COMPLETED = 4;
export const STATUS_TEXT = {
[PENDING_RECONCILED]: '待对账',
[PENDING_PAY]: '待付款',
[PENDING_RECEIVED]: '待收款',
[COMPLETED]: '已完成'
}
src/pages/balance/accountsPayable/settlementList/index.tsx
View file @ 1240f220
......@@ -40,6 +40,7 @@ const SettlementList = () => {
const ref = useRef<any>({})
const { columns, manualStatus, payModalVisible, balanceInfo, payModalOnCancel, viewModalonCancel, viewVisible, payVoucherInfo } = useFetchColumns("payable");
const [files, setFiles] = useState<any>([]);
const [uploadSubmitLoading, setUploadSubmitLoading] = useState<boolean>()
/**
* 分页查询
......@@ -89,14 +90,14 @@ const SettlementList = () => {
* 上传凭证
* @param params
*/
const handleUploadVoucher = (params: any) => {
PublicApi.postSettleAccountsMemberSettlementPay({id: params.id, proveList: params.fileList})
.then((data) => {
if(data.code === 1000) {
formActions.submit();
params.onCancel()
}
})
const handleUploadVoucher = async (params: { fileList: {name: string, proveUrl: string}[]}) => {
setUploadSubmitLoading(true)
const { data, code } = await PublicApi.postSettleAccountsMemberSettlementPay({id: balanceInfo.id, proveList: params.fileList})
setUploadSubmitLoading(false)
if(code === 1000) {
payModalOnCancel();
formActions.submit();
}
}
/**
......@@ -138,25 +139,26 @@ const SettlementList = () => {
}}
schema={schema}
onSubmit={handleSearch}
onReset={() => {
formActions.setFieldValue('startTime', null);
formActions.setFieldValue('endTime', null);
}}
// onReset={() => {
// formActions.setFieldValue('startTime', null);
// formActions.setFieldValue('endTime', null);
// }}
/>
}
/>
</Card>
<UploadVoucherModal
visible={payModalVisible}
id={balanceInfo?.id}
// id={balanceInfo?.id}
roleId={balanceInfo?.roleId}
settlementId={balanceInfo?.settlementId}
handleUpload={handleUploadVoucher}
onCancel={payModalOnCancel}
confirmLoading={uploadSubmitLoading}
/>
<Modal width={548} title="查看付款凭证" onCancel={viewModalonCancel} visible={viewVisible} footer={null}>
{/* <WrapVoucher id={props.id} type={props.type} /> */}
<Voucher files={files} />
<Voucher files={files} />
</Modal>
</PageHeaderWrapper>
)
......
src/pages/balance/accountsPayable/settlementList/logisticsDetail.tsx
View file @ 1240f220
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button, DatePicker} from 'antd';
import { history } from 'umi';
......@@ -18,9 +18,11 @@ import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { logisticsDetailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import StatusTag from '../../components/StatusTag';
import { logisticsColumn } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import { GetSettleAccountsMemberSettlementGetPayableDetailResponse } from '@/services/SettleApi';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import CustomizeColumn from '@/components/CustomizeColumn';
const RangePicker = DatePicker.RangePicker
const formActions = createFormActions();
......@@ -40,8 +42,11 @@ interface infoType {
const logisticsDetail: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<infoType>(null);
const { id, preview } = usePageStatus();
const params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsMemberSettlementGetPayableDetailResponse, { id: string }>(PublicApi.getSettleAccountsMemberSettlementGetPayableDetail, params)
const { infoList } = useBalanceInfo(initialValue, { type: "pay" })
const fetchListData = async (params) => {
const postData = {
......@@ -53,16 +58,16 @@ const logisticsDetail: React.FC = () => {
return data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
// useEffect(() => {
// if(id) {
// // 获取详情
// async function fetchDetail() {
// const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
// setInfoDetail(data);
// }
// fetchDetail();
// }
// }, [id])
/**
* 搜索
......@@ -77,73 +82,42 @@ const logisticsDetail: React.FC = () => {
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
tableProps={{
rowKey: 'id',
}}
columns={logisticsColumn}
currentRef={ref}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
components={{RangePicker}}
actions={formActions}
expressionScope={{
exportBtn: (
<div>
<Button>导出</Button>
</div>
)
}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.topLayout.orderNo', FORM_FILTER_PATH);
// useAsyncInitSelect(
// ['innerStatus', 'outerStatus'],
// fetchSelectOptions,
// );
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
schema={logisticsDetailSchema}
onSubmit={handleSearch}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
>
<Card>
<StandardTable
tableProps={{
rowKey: 'id',
}}
columns={logisticsColumn}
currentRef={ref}
fetchTableData={(params: any) => fetchListData(params)}
controlRender={
<NiceForm
components={{RangePicker}}
actions={formActions}
expressionScope={{
exportBtn: (
<div>
<Button>导出</Button>
</div>
)
}}
effects={($, actions) => {
useStateFilterSearchLinkageEffect($, actions, 'megaLayout.topLayout.orderNo', FORM_FILTER_PATH);
// useAsyncInitSelect(
// ['innerStatus', 'outerStatus'],
// fetchSelectOptions,
// );
}}
schema={logisticsDetailSchema}
onSubmit={handleSearch}
/>
}
/>
/>
</Card>
</PageHeaderWrapper>
)
......
src/pages/balance/accountsPayable/settlementList/orderDetail.tsx
View file @ 1240f220
......@@ -18,54 +18,28 @@ 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'
// import StatusTag from '../../components/StatusTag'
import { productNoticecolumns } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import useFetchBillData from '../../hooks/useFetchBillData';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import CustomizeColumn from '@/components/CustomizeColumn';
const RangePicker = DatePicker.RangePicker;
const formActions = createFormActions();
const OrderDetail: React.FC = () => {
const { ref, infoDetail, fetchListData, handleSearch } = useFetchBillData(PublicApi.getSettleAccountsMemberSettlementGetPayableDetail);
const { id } = usePageStatus();
const { ref, infoDetail, fetchListData, handleSearch } = useFetchBillData(PublicApi.getSettleAccountsMemberSettlementGetPayableDetail);
const { infoList } = useBalanceInfo(infoDetail, { type: "pay" })
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${infoDetail?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
tableProps={{
......
src/pages/balance/accountsPayable/settlementList/productNoticeSettlementDetail.tsx
View file @ 1240f220
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState, useEffect, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button, DatePicker} from 'antd';
import { history } from 'umi';
......@@ -18,30 +18,22 @@ 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'
import { productNoticecolumns } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import { GetSettleAccountsMemberSettlementGetPayableDetailResponse } from '@/services/SettleV2Api';
import CustomizeColumn from '@/components/CustomizeColumn';
const RangePicker = DatePicker.RangePicker;
const formActions = createFormActions();
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 params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsMemberSettlementGetPayableDetailResponse, { id: string }>(PublicApi.getSettleAccountsMemberSettlementGetPayableDetail, params)
const { infoList } = useBalanceInfo(initialValue, { type: "pay" })
const fetchListData = async (params) => {
const postData = {
......@@ -52,67 +44,27 @@ const ProductNoticeSettlementDetail: React.FC = () => {
return data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetPayableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
/**
* 搜索
*/
const handleSearch = (values) => {
const format = 'YYYY-MM-DD'
const startTime = values.startTime?.format(format);
const endTime = values.endTime ? values.endTime.format(format) + " 23:59:59" : "";
const endTime = values.endTime ? values.endTime.endOf("day").format(`${format} HH:mm:ss`) : "";
const receiveStartTime = values.receiveStartTime?.format(format);
const receiveEndTime = values.receiveEndTime ? values.receiveEndTime?.format(format) + " 23:59:59" : "";
const receiveEndTime = values.receiveEndTime ? values.receiveEndTime.endOf("day").format(`${format} HH:mm:ss`) : "";
ref.current.reload({...values, startTime, endTime, receiveStartTime, receiveEndTime});
}
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
<StandardTable
tableProps={{
rowKey: 'orderNo',
}}
......
src/pages/balance/accountsReceivable/invoice/index.tsx
View file @ 1240f220
......@@ -16,7 +16,8 @@ import { useAsyncSelect } from '@/formSchema/effects/useAsyncSelect';
import { schema } from './schema';
import InvoiceCreate from '../../components/InvoiceCreate'
import { PublicApi } from '@/services/api'
import StatusTag from '../../components/StatusTag';
// import StatusTag from '../../components/StatusTag';
import StatusTag, { STATUS_TYPE } from '@/components/StatusTag'
import { fetchOptions } from '../../common';
const RangePicker = DatePicker.RangePicker;
......@@ -81,7 +82,7 @@ const SettlementList = () => {
return (
<div>
<p>{record.orderNo}</p>
<StatusTag text={record.settlementOrderTypeName} />
<StatusTag title={record.settlementOrderTypeName} type={STATUS_TYPE[record.settlementOrderType]} />
</div>
)
}
......@@ -132,7 +133,7 @@ const SettlementList = () => {
render: (text, record) => {
return (
<div>
<StatusTag text={record.invoiceStatusName} />
<StatusTag title={record.invoiceStatusName} type={record.invoiceStatus === 0 ? 'danger' : 'success'} />
</div>
)
}
......
src/pages/balance/accountsReceivable/settlementList/logisticsDetail.tsx
View file @ 1240f220
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button, DatePicker} from 'antd';
import { history } from 'umi';
......@@ -18,99 +18,51 @@ import { useAsyncInitSelect } from '@/formSchema/effects/useAsyncInitSelect';
import { logisticsDetailSchema } from './schema'
import { usePageStatus } from '@/hooks/usePageStatus';
import { PublicApi } from '@/services/api';
import StatusTag from '../../components/StatusTag';
import { logisticsColumn } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import { GetSettleAccountsMemberSettlementGetReceivableDetailResponse } from '@/services/SettleV2Api';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import CustomizeColumn from '@/components/CustomizeColumn';
const RangePicker = DatePicker.RangePicker;
const formActions = createFormActions();
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 params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsMemberSettlementGetReceivableDetailResponse, { id: string }>(PublicApi.getSettleAccountsMemberSettlementGetReceivableDetail, params)
const { infoList } = useBalanceInfo(initialValue, { type: "receive" })
const fetchListData = async (params) => {
const postData = {
...params,
settlementId: id,
...params
}
const { data } = await PublicApi.getSettleAccountsMemberSettlementPageReceivableLogisticsSettlement(postData)
return data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetReceivableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
/**
* 搜索
*/
const handleSearch = (values) => {
const format = 'YYYY-MM-DD'
const startTime = values.startTime?.format(format);
const endTime = values.endTime ? values.endTime.format(format) + " 23:59:59" : "";
const endTime = values.endTime ? values.endTime.endOf("day").format(`${format} HH:mm:ss`) : "";
ref.current.reload({...values, startTime, endTime});
}
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
<StandardTable
tableProps={{
rowKey: 'orderNo',
}}
......@@ -137,10 +89,6 @@ const logisticsDetail: React.FC = () => {
}}
schema={logisticsDetailSchema}
onSubmit={handleSearch}
onReset={() => {
formActions.setFieldValue('startTime', null);
formActions.setFieldValue('endTime', null);
}}
/>
}
/>
......
src/pages/balance/accountsReceivable/settlementList/orderDetail.tsx
View file @ 1240f220
......@@ -8,7 +8,6 @@ import React, { useRef, useState, useEffect } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button, DatePicker} from 'antd';
import { history } from 'umi';
import AvatarWrap from '@/components/AvatarWrap';
import NiceForm from '@/components/NiceForm';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { createFormActions } from '@formily/antd';
......@@ -18,67 +17,27 @@ 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'
import { productNoticecolumns } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import useFetchBillData from '../../hooks/useFetchBillData';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import CustomizeColumn from '@/components/CustomizeColumn';
const RangePicker = DatePicker.RangePicker;
const formActions = createFormActions();
interface infoType {
id: number, // 会员结算id
settlementNo: string, // 结算单号
settlementDate: string, // 结算日期
settlementWayName: string, // 结算方式名称
settlementName: string, // 结算方
payName: string, // 付款方
orderTypeName: string, // 结算单据类型名称
totalCount: number, // 总单数
amount: number, // 结算金额
statusName: string // 结算状态名称
}
const OrderDetail: React.FC = () => {
const { ref, infoDetail, fetchListData, handleSearch } = useFetchBillData(PublicApi.getSettleAccountsMemberSettlementGetPayableDetail);
const { id } = usePageStatus();
const { infoList } = useBalanceInfo(infoDetail, { type: "pay" })
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${infoDetail?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
tableProps={{
......
src/pages/balance/accountsReceivable/settlementList/productNoticeSettlementDetail.tsx
View file @ 1240f220
......@@ -4,11 +4,10 @@
* @Description: 积分结算详情页
*/
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState, useEffect, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button, DatePicker} from 'antd';
import { history } from 'umi';
import AvatarWrap from '@/components/AvatarWrap';
import NiceForm from '@/components/NiceForm';
import { FORM_FILTER_PATH } from '@/formSchema/const';
import { createFormActions } from '@formily/antd';
......@@ -18,30 +17,22 @@ 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';
import { productNoticecolumns } from '../../common/columns';
import { priceFormat } from '@/utils/numberFomat';
import { GetSettleAccountsMemberSettlementGetReceivableDetailResponse } from '@/services/SettleV2Api';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import CustomizeColumn from '@/components/CustomizeColumn';
import useBalanceInfo from '../../hooks/useBalanceInfo';
const RangePicker = DatePicker.RangePicker;
const formActions = createFormActions();
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 { id } = usePageStatus();
const params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsMemberSettlementGetReceivableDetailResponse, { id: string }>(PublicApi.getSettleAccountsMemberSettlementGetReceivableDetail, params)
const { infoList } = useBalanceInfo(initialValue, { type: "receive" })
const fetchListData = async (params) => {
const postData = {
......@@ -53,17 +44,6 @@ const ProductNoticeSettlementDetail: React.FC = () => {
return data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data } = await PublicApi.getSettleAccountsMemberSettlementGetReceivableDetail({id})
setInfoDetail(data);
}
fetchDetail();
}
}, [id])
/**
* 搜索
*/
......@@ -71,50 +51,21 @@ const ProductNoticeSettlementDetail: React.FC = () => {
console.log(values);
const format = 'YYYY-MM-DD'
const startTime = values.startTime?.format(format);
const endTime = values.endTime ? values.endTime.format(format) + " 23:59:59" : "";
const endTime = values.endTime ? values.endTime.endOf("day").format(`${format} HH:mm:ss`) : "";
const receiveStartTime = values.receiveStartTime?.format(format);
const receiveEndTime = values.receiveEndTime ? values.receiveEndTime?.format(format) + " 23:59:59" : "";
const receiveEndTime = values.receiveEndTime ? values.receiveEndTime.endOf("day").format(`${format} HH:mm:ss`) : "";
ref.current.reload({...values, startTime, endTime, receiveStartTime, receiveEndTime});
}
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数">{infoDetail?.totalCount}</Descriptions.Item>
<Descriptions.Item label="结算金额">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方">{infoDetail?.settlementName}</Descriptions.Item>
<Descriptions.Item label="结算方式">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="外部状态"><StatusTag text={infoDetail?.statusName}></StatusTag></Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
<StandardTable
tableProps={{
rowKey: (record) => `${record.orderNo}-${record.batch}`,
}}
......@@ -141,12 +92,6 @@ const ProductNoticeSettlementDetail: React.FC = () => {
}}
schema={detailSchema}
onSubmit={handleSearch}
onReset={() => {
formActions.setFieldValue('startTime', null);
formActions.setFieldValue('endTime', null);
formActions.setFieldValue('receiveStartTime', null);
formActions.setFieldValue('receiveEndTime', null);
}}
/>
}
/>
......
src/pages/balance/components/StatusActions/index.less deleted 100644 → 0
View file @ 01bc2d1c
.modalBtn {
color: @main-color;
cursor: pointer;
}
\ No newline at end of file
src/pages/balance/components/StatusActions/index.tsx deleted 100644 → 0
View file @ 01bc2d1c
/*
* @Author: your name
* @Date: 2020-10-23 17:24:23
* @Description: 结算能力列表操作
*/
import React, { useState, useEffect } from 'react';
import ModalContainer from '../ModalContainer';
import { Modal, Space, Button, Popconfirm } from 'antd';
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';
import { PublicApi } from '@/services/api';
interface Iprops {
status: StatusEnum,
id: number, // 应付，应收账款id
settlementDate?: string, // 结算日期
settlementId?: number, // 结算方id
roleId?: number, // 结算方角色id
payName?: string, //付款方
excludes: number[], // 排除数组，比如当应付的时候，只留下查看凭证跟付款， 应收账款的时候保留三个
type?: number, // 1 -> 应付账款结算 2-> 应收账款结算， 用于判断 是否有查看付款凭证
handleReconciledComfirm?: (params: any) => void // 对账确定回调
handleComfirmInCompletePayment?: (params: any) => void, // 确认未到款回调
handleComfirmCompletePayment?: (params:any) => void, //确认到款回调
handleUpload?: (params: any) => void, // 上传凭证
}
// 应付账款 - 付款方查看凭证, 能力中心
const PAYABLE_PAYER = 1;
// 应收账款管理-收款方查看凭证， 能力中心
const RECEIABLE_BENEFICIARY = 2;
// 平台代收账款结算 - 收款方查看凭证 能力中心
const PLATFORM_BENEFICIARY = 3;
// 平台代收账款结算 - 付款方查看凭证 这是平台后台
const PLATFORM_PAYER = 4;
// 平台积分结算-收款方查看凭证， 能力中心
const SCORE_BENEFINCIARY = 5;
// 平台积分结算-付款方查看凭证 ， 这是平台后天
const SCORE_PAYER = 6;
// 显示确认对账
const ConfirmAccountComponent: React.FC<Iprops> = (props) => {
const { settlementDate, payName } = props;
return (
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal
width={400}
title="确认对账完成"
visible={visible}
onCancel={cancel}
onOk={() => props.handleReconciledComfirm({onCancel: cancel, id: props.id})}
>
<ConfirmAccount settlementDate={settlementDate} payName={payName} />
</Modal>
<div className={styles.modalBtn} onClick={show}>确认对账完成</div>
</>
)
}
}
</ModalContainer>
)
}
// 确认付款凭证
const ConfirmCollected = (props) => {
return (
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="确认付款凭证" onCancel={cancel} visible={visible}
footer={(
<Space>
<Button onClick={cancel}>取消</Button>
<Button
danger
onClick={() => props.handleComfirmInCompletePayment({onCancel: cancel, status: 0, id: props.id})}
>确认未到款</Button>
<Button
type={"primary"}
onClick={() => props.handleComfirmCompletePayment({onCancel: cancel, status: 1, id: props.id})}
>确认到款</Button>
</Space>
)}
>
<WrapVoucher id={props.id} type={props.type} />
</Modal>
<div className={styles.modalBtn} onClick={show}>确认付款凭证</div>
</>
)
}
}
</ModalContainer>
)
}
const WrapVoucher = ({ id, type}) => {
const [files, setFiles] = useState([]);
const SERVICES_MAP = {
// /settle/accounts/member/settlement/getPayablePayProve
[PAYABLE_PAYER]: PublicApi.getSettleAccountsMemberSettlementGetPayablePayProve,
[RECEIABLE_BENEFICIARY]: PublicApi.getSettleAccountsMemberSettlementGetReceivablePayProve,
///settle/accounts/platform/settlement/getReceivablePayProve
[PLATFORM_BENEFICIARY]: PublicApi.getSettleAccountsPlatformSettlementGetReceivablePayProve,
[PLATFORM_PAYER]: PublicApi.getSettleAccountsPlatformSettlementGetPayablePayProve,
// /settle/accounts/platform/score/settlement/getReceivablePayProve
[SCORE_BENEFINCIARY]: PublicApi.getSettleAccountsPlatformScoreSettlementGetReceivablePayProve,
[SCORE_PAYER]: PublicApi.getSettleAccountsPlatformScoreSettlementGetPayablePayProve
}
useEffect(() => {
if(id) {
const service = SERVICES_MAP[type];
service({id}).then((data) => {
if(data.code == 1000) {
setFiles(data.data)
}
})
}
}, [id])
return (
<Voucher files={files} />
)
}
// 显示查看付款凭证
const ViewPaymentVoucher = (props) => {
return (
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal width={548} title="查看付款凭证" onCancel={cancel} visible={visible} footer={null}>
<WrapVoucher id={props.id} type={props.type} />
</Modal>
<div className={styles.modalBtn} onClick={show}>查看付款凭证</div>
</>
)
}
}
</ModalContainer>
)
}
interface UploadVocherProps {
settlementId: number,
id: number
roleId: number,
handleUpload: (params: any) => void
}
interface FileType {
name: string,
proveUrl: string
}
// 待付款 状态 上传付款凭证
const UploadVoucher: React.FC<UploadVocherProps> = (props) => {
const { settlementId, roleId, } = props;
const [fileList, setFileList] = useState<FileType[]>([]);
const [isUploading, setIsUploading] = useState(false)
const getFileList = (list: FileType[], status) => {
if(status === 'done') {
setFileList(list);
setIsUploading(false)
} else {
setIsUploading(true);
}
}
const handleComfirm = (params) => {
props.handleUpload({onCancel: params.onCancel, id: params.id, fileList: params.fileList})
}
return (
<ModalContainer>
{
({visible, show, cancel}) => {
return (
<>
<Modal
width={548}
title="上传付款凭证"
onCancel={cancel}
visible={visible}
destroyOnClose
footer={(
<Space>
<Button onClick={cancel}>取消</Button>
{
isUploading
? <Popconfirm title="还有文件正在上传，是否确认提交？" okText="是" cancelText="否" onConfirm={() => handleComfirm({onCancel: cancel, id: props.id, fileList: fileList})}>
<Button type={"primary"}>确认</Button>
</Popconfirm>
: <Button
type={"primary"}
onClick={() => handleComfirm({onCancel: cancel, id: props.id, fileList: fileList})}
>确认</Button>
}
</Space>
)}
>
<UploadPayVoucher roleId={roleId} id={settlementId} getFileList={getFileList} />
</Modal>
<div className={styles.modalBtn} onClick={show}>付款</div>
</>
)
}
}
</ModalContainer>
)
}
// 待对账时显示确认对账， 待付款 什么都不显示， 代收款显示确认付款凭证， 以完成显示 查看付款凭证
const ChildrenComponent = {
[TO_BE_RECONCILED]: ConfirmAccountComponent,
[TO_BE_PAY]: UploadVoucher,
[TO_BE_COLLECTED]: ConfirmCollected,
[COMPLETED]: ViewPaymentVoucher
}
const StatusActions: React.FC<Iprops> = (props: Iprops) => {
const { status, excludes = [] } = props;
const Component = excludes.includes(status) ? null : ChildrenComponent[status];
return (
<>
{Component && <Component {...props} />}
</>
)
}
export default StatusActions
src/pages/balance/components/StatusTag/index.less deleted 100644 → 0
View file @ 01bc2d1c
.tag-out-border {
border: none;
}
\ No newline at end of file
src/pages/balance/components/StatusTag/index.tsx deleted 100644 → 0
View file @ 01bc2d1c
import React from 'react';
import { Tag } from 'antd';
import './index.less';
export const TO_BE_RECONCILED = 1; // 待对账
export const TO_BE_PAY = 2 // 待付款
export const TO_BE_COLLECTED = 3; // 待收款
export const COMPLETED = 4 // 以完成
export enum StatusEnum {
TO_BE_RECONCILED,
TO_BE_PAY,
TO_BE_COLLECTED,
COMPLETED
}
const COLOR = [
"", // 随意给一个
"gold", // 待对账
"red", // 待付款
"blue", // 代收款,
"green", // 以完成
]
/**
* 以下用于 应收账款管理， 应付账款管理 列表页， 以及应收，应付款详情页状态
*/
const STATUS_TEXT = [
"无",
"待对账",
"待付款",
"待收款",
"已完成"
]
const STATUS_TEXT_MAP = {
"待对账": 1,
"待付款": 2,
"待收款": 3,
"已完成": 4
}
/**
* 开票管理， 开票类型, 其中 value 的值对应上面 COLOR 的值
*/
const INVOICE_TYPE = {
"生产通知单": 0,
"积分订单": 1,
"退货申请单": 2,
"订单": 3,
"物流单": 4,
}
/**
* 开票管理， 开票状态
*/
const INVOICE_STATUS = {
"未开票": 3,
"已开票": 4,
}
/**
* 将开票类型跟 应收应付账款管理合并
*/
const ALL_COLOR_MAP = {
...INVOICE_TYPE,
...STATUS_TEXT_MAP,
...INVOICE_STATUS
}
interface Iprops {
status?: StatusEnum,
text?: string
}
const StatusTag: React.FC<Iprops> = (props: Iprops) => {
const { status, text } = props
return (
<Tag
className="tag-out-border"
color={
text
? COLOR[ALL_COLOR_MAP[text]]
: COLOR[status]
}
>
{
text || STATUS_TEXT[status]
}
</Tag>
)
}
// StatusTag.defaultProps = {
// status: 1
// }
export default StatusTag
src/pages/balance/components/UploadPayVoucher/index.less deleted 100644 → 0
View file @ 01bc2d1c
.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 deleted 100644 → 0
View file @ 01bc2d1c
/*
* @Author: Bill
* @Date: 2020-10-21 18:13:06
* @Description: 上传付款凭证
*/
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';
import { PublicApi } from '@/services/api';
import { getAuth } from '@/utils/auth';
interface Iprops {
fileList?: VoucherFileProps[],
id: number, // 结算方id
getFileList: (params: any[], status: string) => void,
roleId: number
}
interface AccountInfo {
bankAccount: string,
name: string,
bankDeposit: string
}
const UploadPayVoucher: React.FC<Iprops> = (props) => {
const [fileList, setFileList] = useState([]);
const [loading, setLoading] = useState(false);
const [accountInfo, setAccountInfo] = useState<AccountInfo>(null)
const auth = getAuth();
// 进来设置fileList
// useEffect(() => {
// setFileList(props.fileList)
// }, [props.fileList])
/**
* 获取账户名称等
*/
useEffect(() => {
async function getAccountInfo() {
const { data, code } = await PublicApi.getSettleAccountsGetMemberAccountConfig({
memberId: props.id.toString(),
roleId: props.roleId.toString(),
});
if(code == 1000) {
setAccountInfo(data);
}
}
getAccountInfo()
}, [props.id])
/***
* 上传前检查
*/
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: {token: auth.token},
data: {
fileType: UPLOAD_TYPE, // 指定类型是本地还是线上，
},
disabled: loading,
showUploadList: false,
onChange(info: UploadChangeParam) {
if (info.file.status === 'uploading') {
props.getFileList(fileList, "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);
props.getFileList(temp, "done")
}
setLoading(false)
}
},
beforeUpload
};
const handleRemove = (value) => {
const list = [...fileList];
const res = list.filter((item) => item.proveUrl !== value.proveUrl);
setFileList(res)
if(props.getFileList) {
props.getFileList(res, "done")
}
}
return (
<div className={styles.container}>
<div className={styles.formItem}>
<span className={styles.label}>账户名称</span>
<span className={styles.value}>{accountInfo?.name}</span>
</div>
<div className={styles.formItem}>
<span className={styles.label}>银行账号</span>
<span className={styles.value}>{accountInfo?.bankAccount}</span>
</div>
<div className={styles.formItem}>
<span className={styles.label}>开户行</span>
<span className={styles.value}>{accountInfo?.bankDeposit}</span>
</div>
<p className={styles.voucherText}>上传支付凭证</p>
<Voucher files={fileList} onRemove={handleRemove} />
<div className={styles.upload}>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />} loading={loading}>上传凭证</Button>
<p className={styles.tips}>单个凭证文件大小不能超过200K</p>
</Upload>
</div>
</div>
)
}
export default UploadPayVoucher;
src/pages/balance/components/UploadVoucherModal/index.less
View file @ 1240f220
.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;
}
}
src/pages/balance/components/UploadVoucherModal/index.tsx
View file @ 1240f220
import React, { useState } from 'react';
import { Space, Modal, Popconfirm, Button, } from 'antd';
import React, { useEffect, useMemo, useState } from 'react';
import { Space, Modal, Popconfirm, Button, message} from 'antd';
import UploadPayVoucher from '../UploadPayVoucher';
import { PublicApi } from '@/services/api';
import UploadFiles from '@/components/UploadFiles/UploadFiles';
import { UploadProps, UploadChangeParam, UploadFile } from 'antd/lib/upload/interface'
import styles from './index.less'
interface FileType {
name: string,
proveUrl: string,
}
export interface AccountInfoType {
bankAccount: string,
name: string,
bankDeposit: string
}
interface UploadVocherProps {
/**
* 结算方id
*/
settlementId: number,
/**
* 结算单id
*/
id: number
// /**
// * 结算单id
// */
// id: number
roleId: number,
confirmLoading: boolean,
handleUpload: (params: any) => void,
visible: boolean,
onCancel: () => void,
}
// 待付款 状态 上传付款凭证
const UploadVoucherModal: React.FC<UploadVocherProps> = (props) => {
const { settlementId, roleId, visible, onCancel} = props;
const [fileList, setFileList] = useState<FileType[]>([]);
const [isUploading, setIsUploading] = useState(false)
const { settlementId, roleId, visible, onCancel, handleUpload, confirmLoading} = props;
const [fileList, setFileList] = useState<UploadFile[]>([]);
// const [isUploading, setIsUploading] = useState(false)
const [accountInfo, setAccountInfo] = useState<AccountInfoType>(null)
const getFileList = (list: FileType[], status) => {
if(status === 'done') {
setFileList(list);
setIsUploading(false)
} else {
setIsUploading(true);
useEffect(() => {
if (!visible) {
/** 当模态框删除时清楚数据 */
setFileList([])
return;
}
async function getAccountInfo() {
const { data, code } = await PublicApi.getSettleAccountsGetMemberAccountConfig({
memberId: settlementId.toString(),
roleId: roleId.toString(),
});
if(code == 1000) {
setAccountInfo(data);
}
}
getAccountInfo()
}, [visible])
const infoList = useMemo(() => {
return [
{
title: '账户名称',
dataIndex: 'name',
},
{
title: '银行账号',
dataIndex: 'bankAccount',
},
{
title: "开户行",
dataIndex: "bankDeposit"
}
]
}, [])
const handleOnFileChange = (info: UploadChangeParam) => {
const fileList = info.fileList;
const newList = fileList.map((file) => {
return {
name: file.name,
url: file.url || file.response?.data,
uid: file.uid,
status: file.status,
percent: file.percent,
size: file.size,
type: file.type,
}
})
setFileList(newList)
}
const onRemove = (fileItem: UploadFile) => {
const list = [...fileList];
const newList = list.filter((_item) => _item.url !== fileItem.url);
setFileList(newList)
}
const handleComfirm = (params) => {
props.handleUpload({onCancel: params.onCancel, id: params.id, fileList: params.fileList})
const isUploading = useMemo(() => {
return fileList.some((_item) => _item.status === 'uploading');
}, [fileList])
/***
* 上传前检查
*/
const fileMaxSize = 200;
const beforeUpload = (file: UploadFile) => {
const isSizeLimit = file.size / 1024 < fileMaxSize;
if (!isSizeLimit) {
message.error(`上传文件大小不超过${fileMaxSize}K!`);
}
return isSizeLimit;
}
const handleComfirm = () => {
const postData = {
// account: accountInfo,
fileList: fileList.map((_item) => ({
name: _item.name,
proveUrl: _item.url
})),
}
handleUpload?.(postData)
// handleUpload?.({onCancel: params.onCancel, id: params.id, fileList: params.fileList})
}
return (
......@@ -47,7 +131,7 @@ const UploadVoucherModal: React.FC<UploadVocherProps> = (props) => {
title="上传付款凭证"
onCancel={onCancel}
visible={visible}
destroyOnClose
confirmLoading={confirmLoading}
footer={(
<Space>
<Button onClick={onCancel}>取消</Button>
......@@ -57,19 +141,41 @@ const UploadVoucherModal: React.FC<UploadVocherProps> = (props) => {
title="还有文件正在上传，是否确认提交？"
okText="是"
cancelText="否"
onConfirm={() => handleComfirm({onCancel: onCancel, id: props.id, fileList: fileList})}
onConfirm={() => handleComfirm()}
>
<Button type={"primary"}>确认</Button>
<Button loading={confirmLoading} type={"primary"}>确认</Button>
</Popconfirm>
: <Button
loading={confirmLoading}
type={"primary"}
onClick={() => handleComfirm({onCancel: onCancel, id: props.id, fileList: fileList})}
>确认</Button>
onClick={() => handleComfirm()}
>
确认
</Button>
}
</Space>
)}
>
<UploadPayVoucher roleId={roleId} id={settlementId} getFileList={getFileList} />
<div className={styles.container}>
{
infoList.map((_item) => {
return (
<div className={styles.formItem}>
<span className={styles.label}>{_item.title}</span>
{/* 可以设置render 自定义 渲染 */}
<span className={styles.value}>{accountInfo?.[_item.dataIndex]}</span>
</div>
)
})
}
</div>
<div className={styles.upload}>
<UploadFiles fileList={fileList} onChange={handleOnFileChange} onRemove={onRemove} beforeUpload={beforeUpload}>
<Button>上传凭证</Button>
<p className={styles.tips}>单个凭证文件大小不能超过200K</p>
</UploadFiles>
</div>
{/* <UploadPayVoucher roleId={roleId} id={settlementId} getFileList={getFileList} /> */}
</Modal>
)
......
src/pages/balance/hooks/useBalanceInfo.tsx 0 → 100644
View file @ 1240f220
import { useMemo } from "react";
import { GetSettleAccountsMemberSettlementGetReceivableDetailResponse } from '@/services/SettleV2Api';
import StatusTag from "@/components/StatusTag";
import React from 'react';
import { priceFormat, numFormat } from '@/utils/numberFomat'
type OptionsType = "pay" | "receive" | 'platform' | 'score'
/**
* 结算单详情信息
*/
function useBalanceInfo<T extends { [key: string]: any }>(initialValue: T, options: { type: OptionsType }) {
const type = options.type;
const list = useMemo(() => {
return [
{
title: "结算日期",
value: initialValue?.settlementDate
},
{
title: '结算单数',
value: numFormat(initialValue?.totalCount)
},
{
title: '结算状态',
value: (
<StatusTag title={initialValue?.statusName} type="primary"></StatusTag>
)
},
{
title: '结算方式',
value: initialValue?.settlementWayName
},
{
title: '结算金额',
value: priceFormat(initialValue?.amount),
},
(type === 'pay' || type === 'receive') ? {
title: type === 'pay' ? '结算方' : "付款方",
value: type === 'pay' ? initialValue?.settlementName : initialValue?.payName
} : null
].filter(Boolean)
}, [initialValue])
return { infoList: list }
}
export default useBalanceInfo
src/pages/balance/hooks/useFetchColumns.tsx
View file @ 1240f220
import EyePreview from '@/components/EyePreview';
import StatusTag from '../components/StatusTag';
// import StatusTag from '../components/StatusTag';
import { TO_BE_RECONCILED, TO_BE_PAY, TO_BE_COLLECTED, COMPLETED, PRODUCT_NOTICE_SETTLEMENT_DETAIL, LOGISTICS_DETAIL, ORDER_DETAIL, CONTRACT_FUND_BILL } from '../common/constants';
import { priceFormat } from '@/utils/numberFomat'
// import StatusTag from '@/components/StatusTag';
import StatusTag from '@/components/StatusTag';
import { STATUS_TEXT } from '@/constants/balance';
import React, { useState } from 'react';
import { payStatus } from '../common';
import moment from 'moment';
......@@ -17,6 +17,8 @@ const URL_MAP = {
[CONTRACT_FUND_BILL]: '',
}
const STATUS_COLOR = ["default", "warning", "primary", "danger", "success"];
function useFetchColumns(mode: 'payable' | 'receiveable') {
/**
* 手动结算状态
......@@ -184,11 +186,11 @@ function useFetchColumns(mode: 'payable' | 'receiveable') {
{ title: '实际付款日期', dataIndex: 'payTime' },
{
title: '结算状态', dataIndex: 'status',
filters: payStatus,
onFilter: (value: number, record: any) => record.status == value,
// filters: payStatus,
// onFilter: (value: number, record: any) => record.status == value,
render: (text: string, record: any) => {
return (
<StatusTag status={record.status as 0 | 1 | 2 | 3} />
<StatusTag type={STATUS_COLOR[record.status] as 'success'} title={STATUS_TEXT[record.status]} />
)
}
},
......
src/pages/balance/platformSettlement/accountReceivable/info.tsx
View file @ 1240f220
......@@ -4,7 +4,7 @@
* @Description: 平台代收账款结算详情
*/
import React, { useRef, useEffect, useState } from 'react';
import React, { useRef, useEffect, useState, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
......@@ -17,13 +17,17 @@ import { useStateFilterSearchLinkageEffect } from '@/formSchema/effects/useFilte
import { detailSchema } from './schema';
import { PublicApi } from '@/services/api';
import { usePageStatus } from '@/hooks/usePageStatus';
import StatusTag from '../../components/StatusTag';
// import StatusTag from '../../components/StatusTag';
import { timeRange } from '@/utils/index';
import moment from 'moment';
import useIsExistsBrokerage from '../../hooks/useIsExistsBrokerage';
import { priceFormat } from '@/utils/numberFomat';
import add from '@/assets/imgs/add.png';
import subtraction from '@/assets/imgs/subtraction.png';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import { GetSettleAccountsPlatformSettlementGetReceivableDetailResponse } from '@/services/SettleV2Api';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import CustomizeColumn from '@/components/CustomizeColumn';
const formActions = createFormActions();
const columns = [
......@@ -98,6 +102,9 @@ const Info: React.FC = () => {
const [infoDetail, setInfoDetail] = useState<any>(null);
const { id, preview } = usePageStatus();
const { retColumn } = useIsExistsBrokerage(columns, ["brokerage", "ratio"])
const params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsPlatformSettlementGetReceivableDetailResponse, { id: string }>(PublicApi.getSettleAccountsPlatformSettlementGetReceivableDetail, params)
const { infoList } = useBalanceInfo(infoDetail, { type: "platform" })
const fetchListData = async (params) => {
const postData = {
......@@ -109,18 +116,18 @@ const Info: React.FC = () => {
return res.data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data, code } = await PublicApi.getSettleAccountsPlatformSettlementGetReceivableDetail({id})
if(code == 1000) {
setInfoDetail(data);
}
}
fetchDetail();
}
}, [id])
// useEffect(() => {
// if(id) {
// // 获取详情
// async function fetchDetail() {
// const { data, code } = await PublicApi.getSettleAccountsPlatformSettlementGetReceivableDetail({id})
// if(code == 1000) {
// setInfoDetail(data);
// }
// }
// fetchDetail();
// }
// }, [id])
/**
* 搜索
......@@ -140,41 +147,11 @@ const Info: React.FC = () => {
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<Descriptions.Item label="结算日期：">{infoDetail?.settlementDate}</Descriptions.Item>
<Descriptions.Item label="结算单数：">{infoDetail?.totalCount }</Descriptions.Item>
<Descriptions.Item label="结算金额：">￥{priceFormat(infoDetail?.amount)}</Descriptions.Item>
<Descriptions.Item label="结算方式：">{infoDetail?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="结算状态：">
<StatusTag text={infoDetail?.statusName} />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
tableProps={{
......
src/pages/balance/platformSettlement/integral/info.tsx
View file @ 1240f220
......@@ -4,7 +4,7 @@
* @Description: 积分结算详情页
*/
import React, { useRef, useState, useEffect } from 'react';
import React, { useRef, useState, useEffect, useMemo } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import { Card, PageHeader, Descriptions, Button} from 'antd';
import { history } from 'umi';
......@@ -19,7 +19,10 @@ import { timeRange } from '@/utils/index';
import moment from 'moment';
import { PublicApi } from '@/services/api';
import { usePageStatus } from '@/hooks/usePageStatus';
import StatusTag from '../../components/StatusTag';
import useInitialValue from '@/pages/member/common/hooks/useInitialValue';
import useBalanceInfo from '../../hooks/useBalanceInfo';
import { GetSettleAccountsPlatformScoreSettlementGetReceivableDetailResponse } from '@/services/SettleV2Api';
import CustomizeColumn from '@/components/CustomizeColumn';
const formActions = createFormActions();
......@@ -44,8 +47,11 @@ const columns = [
const Info: React.FC = () => {
const ref = useRef<any>({});
const [infoDetail, setInfoDetail] = useState<any>(null);
const { id, preview } = usePageStatus();
const params = useMemo(() => { return id ? { id: id.toString() } : null }, [id]);
const { loading, initialValue }= useInitialValue<GetSettleAccountsPlatformScoreSettlementGetReceivableDetailResponse, { id: string }>(PublicApi.getSettleAccountsPlatformScoreSettlementGetReceivableDetail, params)
const { infoList } = useBalanceInfo(initialValue, { type: "score" })
const fetchListData = async (params) => {
const postData = {
settlementId: id,
......@@ -55,19 +61,6 @@ const Info: React.FC = () => {
return res.data
}
useEffect(() => {
if(id) {
// 获取详情
async function fetchDetail() {
const { data, code } = await PublicApi.getSettleAccountsPlatformScoreSettlementGetReceivableDetail({id})
if(code == 1000) {
setInfoDetail(data);
}
}
fetchDetail();
}
}, [id])
/**
* 搜索
*/
......@@ -89,41 +82,11 @@ const Info: React.FC = () => {
return (
<PageHeaderWrapper
title={
<>
<PageHeader
style={{ padding: '0' }}
onBack={() => history.goBack()}
title={
<AvatarWrap
info={{
aloneTxt: '单',
name: ""
}}
extra={(
<span style={{ fontSize: 16, fontWeight: 'bold', color: "#303133" }}>结算单号：{infoDetail?.settlementNo}</span>
)}
/>
}
>
<Descriptions
column={3}
style={{
padding: '0 32px',
}}
>
<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?.settlementWayName}</Descriptions.Item>
<Descriptions.Item label="结算状态：">
<StatusTag text={infoDetail?.statusName} />
</Descriptions.Item>
</Descriptions>
</PageHeader>
</>
}
title={`结算单号: ${initialValue?.settlementNo}`}
>
<div style={{marginBottom: '16px'}}>
<CustomizeColumn data={infoList} title="" column={3} />
</div>
<Card>
<StandardTable
tableProps={{
......
src/pages/member/memberEvaluate/createEvaluate/add.tsx
View file @ 1240f220
......@@ -178,10 +178,6 @@ const EvaluateAdd = (props) => {
const handleEffect = ($, actions) => {
onFieldValueChange$('tabs.tab-2.selectProject').subscribe(({value}) => {
/**
*
* @tofix 修改subMemberId
*/
const tempData = value?.map((_item, index) => ({
name: _item.name,
content: _item.typeDesc,
......@@ -210,7 +206,10 @@ const EvaluateAdd = (props) => {
})
const newDataSource = hasRemoveListRes.concat(newAddProject)
formActions.setFieldValue('tabs.tab-2.items', newDataSource);
formActions.setFieldValue('tabs.tab-2.items', newDataSource.map((_row, _index) => ({
id: _index,
..._row
})));
}),
onFieldValueChange$('items.*.*(grade,scoreWeight)').subscribe(({name, value}) => {
const numberIndex = FormPath.transform(name, /\d/, $1 => {
......@@ -245,12 +244,13 @@ const EvaluateAdd = (props) => {
}
const { appraisalDayEnd, appraisalDayStart, items, ...rest } = initialValue;
const itmesList = items.map((_row) => {
const { appraisalId, id, userId, userName, ...restProps } = _row;
const { id, userId, userName, ...restProps } = _row;
return {
memberName: {
userId: userId,
name: userName,
},
id: id,
...restProps
}
})
......
src/pages/member/memberEvaluate/schema/add.tsx
View file @ 1240f220
import { ISchema } from '@formily/antd';
import { FormPath, ISchema } from '@formily/antd';
import React from 'react';
export const evaluateAddSchema: ISchema = {
type: "object",
......@@ -136,7 +137,14 @@ export const evaluateAddSchema: ISchema = {
properties: {
id: {
title: "序号",
"x-component": 'Text',
type: 'string',
editable: false,
"x-render": (props) => {
const numberIndex = FormPath.transform(props.name, /\d/, $1 => {
return `${$1}`
});
return <div style={{marginBottom: '24px'}}>{+numberIndex + 1}</div>
},
"x-props": {
width: 65,
},
......
src/pages/member/memberQuery/rectificationQuery/common/columns.tsx
View file @ 1240f220
......@@ -13,7 +13,7 @@ export const commonColumns = [
return (
<div style={{ display: 'flex', flexDirection: 'column', }}>
<Link to={`/memberCenter/memberAbility/profile/memberRectification/detail?id=${record.id}`}>{record.id}</Link>
<Link to={`/memberCenter/memberAbility/profile/memberRectification/detail?id=${record.id}`}>{record.rectifyNo}</Link>
<p>{record.subject}</p>
</div>
)
......
src/pages/member/memberQuery/rectificationQuery/index.tsx
View file @ 1240f220
......@@ -51,15 +51,13 @@ const List: React.FC<Iprops> = (props: Iprops) => {
}
const handleSendNotice = useCallback(async(id: number) => {
const newList = [...currentIdIsInLoading];
newList.push(id);
setCurrentIdIsInLoading(newList)
setCurrentIdIsInLoading((prev) => prev.concat(id))
const { data, code } = await PublicApi.postMemberRectifyManageRectify({id: id});
setCurrentIdIsInLoading((prev) => prev.filter((_item) => _item !== id));
if (code === 1000) {
ref.current?.submit();
}
}, [currentIdIsInLoading])
}, [])
return (
<Card>
......
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