alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

load payment

master
Anna Ho 1 year ago
parent
73fcf37d96
commit
3dfe086beb
9 changed files with 363 additions and 28 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +64
    -0
      src/pages/Payment/Details_Public/DataGrid.js
  2. +135
    -0
      src/pages/Payment/Details_Public/PaymentDetails.js
  3. +114
    -0
      src/pages/Payment/Details_Public/index.js
  4. +17
    -22
      src/pages/Payment/Search_Public/DataGrid.js
  5. +1
    -5
      src/pages/Payment/Search_Public/SearchForm.js
  6. +1
    -1
      src/pages/Payment/Search_Public/index.js
  7. +5
    -0
      src/routes/PublicUserRoutes.js
  8. +1
    -0
      src/utils/ApiPathConst.js
  9. +25
    -0
      src/utils/statusUtils/PaymentStatus.js

+ 64
- 0
src/pages/Payment/Details_Public/DataGrid.js View File

@@ -0,0 +1,64 @@
// material-ui
import {
Typography,
} from '@mui/material';

import * as React from 'react';
import * as FormatUtils from "utils/FormatUtils"
import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList);
const [total, setTotal] = React.useState(0);

React.useEffect(() => {
setRows(recordList);
let countTotal = 0;
recordList.forEach(item => {
countTotal+=item.fee;
});

setTotal(countTotal)
}, [recordList]);

const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: '申請編號/我的備註',
flex: 1,
renderCell: (params) => {
let appNo = params.row.appNo;
return <div style={{ margin: 4 }}>{appNo}<br/>{params.row.remarks}</div>
},
},
{
id: 'fee',
field: 'fee',
headerName: '費用 (HK$)',
width: 150,
valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
}
},
];

return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
/>

<Typography align="right" variant= "h3">付款總額: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
</div>
);
}

+ 135
- 0
src/pages/Payment/Details_Public/PaymentDetails.js View File

@@ -0,0 +1,135 @@
// material-ui
import {
Grid,
Typography,
FormLabel,
} from '@mui/material';

import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData, }) => {

const [data, setData] = React.useState({});
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
setData(formData);
}
}, [formData]);

React.useEffect(() => {
if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
setOnReady(data != {});
}
}, [data]);


return (
!onReady ?
<LoadingComponent />
:
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
付款詳情
</Typography>
<form>
<Grid container>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
交易號碼:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.payload?.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
交易日期:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.transDateStr + " (DD/MM/YYYY)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
交易時間:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.transTimeStr + " (HH:MI:SS)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
付款參考號碼:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.egisRefNo}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
付款總額:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
付款方式:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ fontSize: "16px", color: "#000000" }}>
{data.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
</FormLabel>
</Grid>
</Grid>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default PaymentDetails;

+ 114
- 0
src/pages/Payment/Details_Public/index.js View File

@@ -0,0 +1,114 @@
// material-ui
import {
Grid,
Typography,
Stack,
Box
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
const DataGrid = Loadable(React.lazy(() => import('./DataGrid')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {
const params = useParams();
const navigate = useNavigate()

const [record, setRecord] = React.useState();
const [itemList, setItemList] = React.useState([]);
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
loadForm();
}, []);

React.useEffect(() => {
setOnReady(true);
}, [record]);


const loadForm = () => {
if (params.id > 0) {

HttpUtils.get({
url: UrlUtils.PAYMENT_LOAD + "/" + params.id,
onSuccess: (responseData) => {
if (!responseData.data?.id) {
navigate("/paymentPage/search");
}
responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY");
responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");
setItemList(responseData.paymentItemList)
setRecord(responseData.data);
}
});
}
}

return (
!onReady ?
<LoadingComponent />
:
(
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>付款詳情</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
<Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid
recordList={itemList}
/>
</Box>
</Grid>
<Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<PaymentDetails
formData={record}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/>
</Box>
</Grid>
</Grid>
</Grid>
{/*row 2*/}
</Grid >


)


);
};

export default Index;

+ 17
- 22
src/pages/Payment/Search_Public/DataGrid.js View File

@@ -5,6 +5,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import * as DateUtils from "utils/DateUtils"; import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils" import * as FormatUtils from "utils/FormatUtils"
import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { FiDataGrid } from "components/FiDataGrid"; import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== // // ==============================|| EVENT TABLE ||============================== //
@@ -18,33 +19,32 @@ export default function SearchPublicNoticeTable({ recordList }) {
}, [recordList]); }, [recordList]);


const handleEditClick = (params) => () => { const handleEditClick = (params) => () => {
navigate('/proof/reply/' + params.row.id);
navigate('/paymentPage/details/' + params.row.id);
}; };



const columns = [ const columns = [
{ {
field: 'actions', field: 'actions',
headerName: '付款編號', headerName: '付款編號',
width: 150,
flex: 1,
cellClassName: 'actions', cellClassName: 'actions',
renderCell: (params) => { renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
}, },
}, },
{ {
id: 'appId',
field: 'appId',
id: 'appNos',
field: 'appNos',
headerName: '申請編號', headerName: '申請編號',
flex: 1, flex: 1,
renderCell: (params) => { renderCell: (params) => {
let appNo = params.row.appNo;
let appNo = params.row.appNos;
return <div style={{ margin: 4 }}>{appNo}</div> return <div style={{ margin: 4 }}>{appNo}</div>
}, },
}, },
{ {
id: 'created',
field: 'created',
id: 'transDateTime',
field: 'transDateTime',
headerName: '付款日期', headerName: '付款日期',
flex: 1, flex: 1,
valueGetter: (params) => { valueGetter: (params) => {
@@ -52,29 +52,24 @@ export default function SearchPublicNoticeTable({ recordList }) {
} }
}, },
{ {
id: 'status',
field: 'status',
field: 'action',
headerName: '付款狀況', headerName: '付款狀況',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params?.value);
width: 150,
renderCell: (params) => {
return PaymentStatus.getStatus_Cht(params);
} }
}, },
{ {
id: 'fee',
field: 'fee',
id: 'payAmount',
field: 'payAmount',
headerName: '費用', headerName: '費用',
flex: 1,
width: 150,
valueGetter: (params) => { valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : ""; return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
} }
}, },
]; ];


function handleRowDoubleClick(params) {
navigate('/proof/reply/' + params.row.id);
}

return ( return (
<div style={{ height: 400, width: '100%' }}> <div style={{ height: 400, width: '100%' }}>


@@ -87,7 +82,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
paginationModel: { page: 0, pageSize: 5 }, paginationModel: { page: 0, pageSize: 5 },
}, },
}} }}
onRowDoubleClick={handleRowDoubleClick}
onRowDoubleClick={handleEditClick}
/> />
</div> </div>
); );


+ 1
- 5
src/pages/Payment/Search_Public/SearchForm.js View File

@@ -20,10 +20,6 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
const { reset, register, handleSubmit } = useForm() const { reset, register, handleSubmit } = useForm()


const onSubmit = (data) => { const onSubmit = (data) => {
let typeArray = [];
for (let i = 0; i < type.length; i++) {
typeArray.push(type[i].label);
}
const temp = { const temp = {
code: data.code, code: data.code,
dateFrom: data.dateFrom, dateFrom: data.dateFrom,
@@ -58,7 +54,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria}) => {
fullWidth fullWidth
{...register("code")} {...register("code")}
id='code' id='code'
label="申請編號:"
label="申請/付款編號:"
defaultValue={searchCriteria.code} defaultValue={searchCriteria.code}
InputLabelProps={{ InputLabelProps={{
shrink: true shrink: true


+ 1
- 1
src/pages/Payment/Search_Public/index.js View File

@@ -47,7 +47,7 @@ const Index = () => {


function loadGrid(){ function loadGrid(){
HttpUtils.get({ HttpUtils.get({
url: UrlUtils.LIST_PROOF,
url: UrlUtils.PAYMENT_LIST,
params: searchCriteria, params: searchCriteria,
onSuccess: function(responseData){ onSuccess: function(responseData){
setRecord(responseData); setRecord(responseData);


+ 5
- 0
src/routes/PublicUserRoutes.js View File

@@ -21,6 +21,7 @@ const Payment_FPS_Ackpage = Loadable(lazy(() => import('pages/Payment/FPS/AckPag
const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card'))); const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback'))); const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback')));
const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public'))); const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public')));
const PaymentDetails_Public = Loadable(lazy(() => import('pages/Payment/Details_Public')));


// ==============================|| MAIN ROUTING ||============================== // // ==============================|| MAIN ROUTING ||============================== //


@@ -95,6 +96,10 @@ const PublicDashboard = {
path: 'paymentPage/search', path: 'paymentPage/search',
element: <PaymentSearch_Public/> element: <PaymentSearch_Public/>
}, },
{
path: 'paymentPage/details/:id',
element: <PaymentDetails_Public/>
},
] ]
}, },
] ]


+ 1
- 0
src/utils/ApiPathConst.js View File

@@ -84,6 +84,7 @@ export const GET_PROOF_PAY = apiPath+'/proof/pay-details';//GET
export const PAYMENT_CREATE = apiPath+'/payment/create';//POST export const PAYMENT_CREATE = apiPath+'/payment/create';//POST
export const PAYMENT_SAVE = apiPath+'/payment/save';//POST export const PAYMENT_SAVE = apiPath+'/payment/save';//POST
export const PAYMENT_LIST = apiPath+'/payment/list';//GET export const PAYMENT_LIST = apiPath+'/payment/list';//GET
export const PAYMENT_LOAD = apiPath+'/payment/load';//GET








+ 25
- 0
src/utils/statusUtils/PaymentStatus.js View File

@@ -0,0 +1,25 @@
import {getStatusTag} from "utils/statusUtils/Base";

const APPR = {color:"#22a13f", eng:"Success", cht:"成功"}
const REJT = {color:"#d9372b", eng:"Reject", cht:"拒絕"}
const CANC = {color:"#8a8784", eng:"Cancelled", cht:"取消"}
const INPR = {color:"#f5a83d", eng:"In Progress", cht:"進行中"}

export function getStatus_Cht(params) {
let status = getStatus(params);
return getStatusTag({color: status.color, text:status.cht })
}

export function getStatus_Eng(params) {
let status = getStatus(params);
return getStatusTag({color: status.color, text:status.eng })
}

function getStatus(params) {
let status = params.row?params.row.status:params;
if(status == "APPR") return APPR;
if(status == "REJT") return REJT;
if(status == "CANC") return CANC;
if(status == "INPR") return INPR;
}


Write Preview
Loading…
Cancel
Save