현금영수증 리스트
This commit is contained in:
focp212@naver.com
@@ -5,36 +5,44 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { CashReceiptList } from '@/entities/transaction/ui/cash-receipt-list';
|
||||
import { CashReceiptListItem, TransactionCategory, CashReceiptPurposeType, CashReceiptIssueStatus, CashReceiptProcessResult } from '@/entities/transaction/model/types';
|
||||
import { CashReceiptListItem, TransactionCategory, CashReceiptPurposeType, CashReceiptProcessResult, ListItemProps, CashReceiptListParams, CashReceiptTransactionType, CashReceiptSearchNumberType, CashReceiptSummaryParams, CashReceiptListResponse, CashReceiptSummaryResponse } from '@/entities/transaction/model/types';
|
||||
import { useCashReceiptListMutation } from '@/entities/transaction/api/use-cash-receipt-list-mutation';
|
||||
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { CashReceiptFilter } from '@/entities/transaction/ui/filter/cash-receipt-filter';
|
||||
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
|
||||
import { SortTypeKeys, HeaderType } from '@/entities/common/model/types';
|
||||
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetOnBack,
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { CashReceiptIssueStatusBtnGroup } from '@/entities/transaction/model/contant';
|
||||
import { CashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model/contant';
|
||||
import { useStore } from '@/shared/model/store';
|
||||
import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
|
||||
|
||||
export const CashReceiptListPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
const userMid = useStore.getState().UserStore.mid;
|
||||
|
||||
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
|
||||
const [mid, setMid] = useState<string>(userMid);
|
||||
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [startDate, setStartDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
|
||||
const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>(CashReceiptPurposeType.ALL);
|
||||
const [issueStatus, setIssueStatus] = useState<CashReceiptIssueStatus>(CashReceiptIssueStatus.ALL);
|
||||
const [transactionType, setTransactionType] = useState<CashReceiptTransactionType>(CashReceiptTransactionType.ALL);
|
||||
const [processResult, setProcessResult] = useState<CashReceiptProcessResult>(CashReceiptProcessResult.ALL);
|
||||
const [searchNumberType, setSearchNumberType] = useState<CashReceiptSearchNumberType>(CashReceiptSearchNumberType.APPROVAL_NUMBER);
|
||||
const [searchNumber, setSearchNumber] = useState<string>('');
|
||||
const [approvalCount, setApprovalCount] = useState<number>(0);
|
||||
const [approvalAmount, setApprovalAmount] = useState<number>(0);
|
||||
const [cancelCount, setCancelCount] = useState<number>(0);
|
||||
const [cancelAmount, setCancelAmount] = useState<number>(0);
|
||||
const [totalCount, setTotalCount] = useState<number>(0);
|
||||
|
||||
useSetHeaderTitle('현금영수증');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
@@ -44,47 +52,48 @@ export const CashReceiptListPage = () => {
|
||||
useSetFooterMode(false);
|
||||
|
||||
const { mutateAsync: cashReceiptList } = useCashReceiptListMutation();
|
||||
const { mutateAsync: cashReceiptSummary } = useCashReceiptSummaryMutation();
|
||||
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
|
||||
|
||||
const callList = (option?: {
|
||||
sortType?: SortTypeKeys,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortType = (option?.sortType)? option.sortType: sortType;
|
||||
setPageParam(pageParam);
|
||||
let listParams = {
|
||||
let listSummaryParams: CashReceiptSummaryParams = {
|
||||
mid: mid,
|
||||
startDate: startDate,
|
||||
endDate: endDate,
|
||||
purposeType: purposeType,
|
||||
issueStatus: issueStatus,
|
||||
transactionType: transactionType,
|
||||
processResult: processResult,
|
||||
pagination: pageParam
|
||||
searchNumberType: searchNumberType,
|
||||
searchNumber: searchNumber,
|
||||
page: pageParam
|
||||
};
|
||||
let listParams: CashReceiptListParams = {
|
||||
...listSummaryParams,
|
||||
...{
|
||||
page: pageParam
|
||||
}
|
||||
};
|
||||
if(listParams.page){
|
||||
listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
|
||||
setPageParam(listParams.page);
|
||||
}
|
||||
|
||||
cashReceiptList(listParams).then((rs) => {
|
||||
console.log(rs);
|
||||
setListItems(assembleData(rs.content));
|
||||
cashReceiptList(listParams).then((rs: CashReceiptListResponse) => {
|
||||
setListItems(rs.content);
|
||||
});
|
||||
cashReceiptSummary(listSummaryParams).then((rs: CashReceiptSummaryResponse) => {
|
||||
setApprovalCount(rs.approvalCount);
|
||||
setApprovalAmount(rs.approvalAmount);
|
||||
setCancelCount(rs.cancelCount);
|
||||
setCancelAmount(rs.cancelAmount);
|
||||
setTotalCount(rs.totalCount);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
const assembleData = (content: Array<CashReceiptListItem>) => {
|
||||
let data: any = {};
|
||||
if(content && content.length > 0){
|
||||
for (let i=0;i<content?.length;i++){
|
||||
let groupDate = moment(content[i]?.transactionDateTime).format('YYYYMMDD');
|
||||
if(!!groupDate && !data.hasOwnProperty(groupDate)){
|
||||
data[groupDate] = [];
|
||||
}
|
||||
if(!!groupDate && data.hasOwnProperty(groupDate)){
|
||||
data[groupDate].push(content[i]);
|
||||
}
|
||||
}
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
@@ -103,8 +112,8 @@ export const CashReceiptListPage = () => {
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToIssueStatus = (val: CashReceiptIssueStatus) => {
|
||||
setIssueStatus(val);
|
||||
const onClickToTransactionType = (val: CashReceiptTransactionType) => {
|
||||
setTransactionType(val);
|
||||
callList({
|
||||
val: val
|
||||
});
|
||||
@@ -113,6 +122,14 @@ export const CashReceiptListPage = () => {
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, [
|
||||
mid, startDate, endDate,
|
||||
purposeType, transactionType,
|
||||
processResult, searchNumberType,
|
||||
searchNumber
|
||||
]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -149,7 +166,7 @@ export const CashReceiptListPage = () => {
|
||||
<span className="label">승인</span>
|
||||
<strong className="amount22">
|
||||
<NumericFormat
|
||||
value={ 83745200 }
|
||||
value={ approvalAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix='원'
|
||||
@@ -157,7 +174,7 @@ export const CashReceiptListPage = () => {
|
||||
</strong>
|
||||
<span className="count">
|
||||
<NumericFormat
|
||||
value={ 2745 }
|
||||
value={ approvalCount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix='('
|
||||
@@ -169,7 +186,7 @@ export const CashReceiptListPage = () => {
|
||||
<span className="label">취소</span>
|
||||
<strong className="amount19">
|
||||
<NumericFormat
|
||||
value={ 534407 }
|
||||
value={ cancelAmount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
suffix='원'
|
||||
@@ -177,7 +194,7 @@ export const CashReceiptListPage = () => {
|
||||
</strong>
|
||||
<span className="count">
|
||||
<NumericFormat
|
||||
value={ 32 }
|
||||
value={ cancelCount }
|
||||
thousandSeparator
|
||||
displayType="text"
|
||||
prefix='('
|
||||
@@ -196,11 +213,11 @@ export const CashReceiptListPage = () => {
|
||||
<div>
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
CashReceiptIssueStatusBtnGroup.map((value, index) => (
|
||||
CashReceiptTransactionTypeBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(issueStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToIssueStatus(value.value)}
|
||||
className={`keyword-tag ${(transactionType === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToTransactionType(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
@@ -221,14 +238,18 @@ export const CashReceiptListPage = () => {
|
||||
startDate={ startDate }
|
||||
endDate={ endDate }
|
||||
purposeType={ purposeType }
|
||||
issueStatus={ issueStatus }
|
||||
transactionType={ transactionType }
|
||||
processResult={ processResult }
|
||||
searchNumberType={ searchNumberType }
|
||||
searchNumber={ searchNumber }
|
||||
setMid={ setMid }
|
||||
setStartDate={ setStartDate }
|
||||
setEndDate={ setEndDate }
|
||||
setPurposeType={ setPurposeType }
|
||||
setIssueStatus={ setIssueStatus }
|
||||
setTransactionType={ setTransactionType }
|
||||
setProcessResult={ setProcessResult }
|
||||
setSearchNumberType={ setSearchNumberType }
|
||||
setSearchNumber={ setSearchNumber }
|
||||
></CashReceiptFilter>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user