@@ -119,7 +119,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: {xs:0, sm:0, md:1, lg:1} }}> | |||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={3} lg={3} | <Grid item xs={12} md={3} lg={3} | ||||
sx={{ display: 'flex', alignItems: 'center' }}> | sx={{ display: 'flex', alignItems: 'center' }}> | ||||
@@ -147,7 +147,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: {xs:0, sm:0, md:1, lg:1} }}> | |||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={3} lg={3} | <Grid item xs={12} md={3} lg={3} | ||||
sx={{ display: 'flex', alignItems: 'center' }}> | sx={{ display: 'flex', alignItems: 'center' }}> | ||||
@@ -178,29 +178,36 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Grid container direction="row" justifyContent="space-between" | |||||
alignItems="center"> | |||||
<Grid container | |||||
direction="row" | |||||
justifyContent="space-between" | |||||
alignItems="center" | |||||
width="auto" | |||||
> | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}> | |||||
<Grid item xs={12} sm={12} md={6} lg={6} sx={{mb: 1}}> | |||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> | |||||
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ alignItems: 'center',wordBreak: 'break-word' }}> | |||||
<Typography><Typography variant="h5">請下載下列印刷稿檔案,並仔細校對:</Typography></Typography> | <Typography><Typography variant="h5">請下載下列印刷稿檔案,並仔細校對:</Typography></Typography> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'95%', maxWidth: {xs:'70vw', sm:'72vw', md:'75vw',lg:'80vw'}}}> | |||||
<FileList | |||||
lang="ch" | |||||
refId={params.id} | |||||
refType={"proof"} | |||||
dateHideable={true} | |||||
disablePagination | |||||
disableSelectionOnClick | |||||
disableColumnMenu | |||||
disableColumnSelector | |||||
hideFooter | |||||
/> | |||||
</Grid> | |||||
</Grid> | </Grid> | ||||
<FileList | |||||
lang="ch" | |||||
refId={params.id} | |||||
refType={"proof"} | |||||
dateHideable={true} | |||||
disablePagination | |||||
disableSelectionOnClick | |||||
disableColumnMenu | |||||
disableColumnSelector | |||||
hideFooter | |||||
/> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={4} lg={4} sx={{ mb: 1, }}> | |||||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, }}> | |||||
<Grid container alignItems={"center"}> | <Grid container alignItems={"center"}> | ||||
<Grid item xs={12} md={12} lg={12} | <Grid item xs={12} md={12} lg={12} | ||||
sx={{ display: 'flex', alignItems: 'center' }}> | sx={{ display: 'flex', alignItems: 'center' }}> | ||||
@@ -209,17 +216,16 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={12} lg={12} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
<Typography variant="h5"> {DateUtils.datetimeStr_Cht(data.returnBeforeDate)} 前</Typography> | <Typography variant="h5"> {DateUtils.datetimeStr_Cht(data.returnBeforeDate)} 前</Typography> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={3} lg={3} | |||||
<Grid item xs={12} sm={3} md={3} lg={3} | |||||
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | ||||
<Typography variant="h5">應繳費用:</Typography> | <Typography variant="h5">應繳費用:</Typography> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | |||||
<Typography variant="h2" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography> | |||||
<Grid item xs={12} sm={9} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | |||||
<Typography variant="h4" style={{ color: "#0049B8", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={0} md={3} lg={3} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}></Grid> | |||||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ mb: 4, display: 'flex', alignItems: 'center' }}> | ||||
{ | { | ||||
formik.values.groupType == "Private Bill" | |||||
formik.values.groupType === "Private Bill" | |||||
? | ? | ||||
<Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | <Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | ||||
: | : | ||||
@@ -135,7 +135,7 @@ const FormPanel = ({ formData }) => { | |||||
return ( | return ( | ||||
<MainCard xs={12} md={12} lg={12} | |||||
<MainCard xs={12} sm={12} md={12} lg={12} | |||||
border={false} | border={false} | ||||
content={false}> | content={false}> | ||||
@@ -3,7 +3,6 @@ import { | |||||
Grid, | Grid, | ||||
Typography, | Typography, | ||||
Stack, | Stack, | ||||
Box, | |||||
Button | Button | ||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import * as UrlUtils from "utils/ApiPathConst"; | import * as UrlUtils from "utils/ApiPathConst"; | ||||
@@ -20,6 +19,7 @@ const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/Loa | |||||
const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails'))); | const ApplicationDetails = Loadable(React.lazy(() => import('./ApplicationDetails'))); | ||||
const ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); | const ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); | ||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
import MainCard from "../../../components/MainCard"; | |||||
const BackgroundHead = { | const BackgroundHead = { | ||||
backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
width: '100%', | width: '100%', | ||||
@@ -39,22 +39,6 @@ const Index = () => { | |||||
const [record, setRecord] = React.useState(); | const [record, setRecord] = React.useState(); | ||||
const [onReady, setOnReady] = React.useState(false); | const [onReady, setOnReady] = React.useState(false); | ||||
const _sx = { | |||||
padding: "4 2 4 2", | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
'& .MuiDataGrid-cell': { | |||||
borderTop: 1, | |||||
borderBottom: 1, | |||||
borderColor: "#EEE" | |||||
}, | |||||
'& .MuiDataGrid-footerContainer': { | |||||
border: 1, | |||||
borderColor: "#EEE" | |||||
} | |||||
} | |||||
React.useEffect(() => { | React.useEffect(() => { | ||||
loadForm(); | loadForm(); | ||||
}, []); | }, []); | ||||
@@ -98,7 +82,7 @@ const Index = () => { | |||||
<LoadingComponent /> | <LoadingComponent /> | ||||
: | : | ||||
( | ( | ||||
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid container sx={{ width: '100%', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" > | |||||
<Grid item xs={12} width="100%"> | <Grid item xs={12} width="100%"> | ||||
<div style={BackgroundHead} width="100%"> | <div style={BackgroundHead} width="100%"> | ||||
<Stack direction="row" height='70px'> | <Stack direction="row" height='70px'> | ||||
@@ -106,38 +90,44 @@ const Index = () => { | |||||
</Stack> | </Stack> | ||||
</div> | </div> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} width="95%"> | |||||
<Button title="返回" sx={{ ml: 1.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/proof/search") }}> | |||||
<Grid item xs={12} width="100%"> | |||||
<Button title="返回" sx={{ mt: 2.5, ml: 3 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/proof/search") }}> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | ||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*row 1*/} | {/*row 1*/} | ||||
<Grid item xs={12} md={12} > | |||||
<Grid container justifyContent="flex-start" alignItems="center" > | |||||
<center> | |||||
<Grid item xs={12} md={12} sx={{ pt: 2 }}> | |||||
<Box xs={12} md={12} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx }}> | |||||
<ApplicationDetails | |||||
formData={record} | |||||
style={{ | |||||
display: "flex", | |||||
height: "100%", | |||||
flex: 1 | |||||
}} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
<Grid item xs={12} md={12} sx={{ pt: 1, pb: 2 }}> | |||||
<Box xs={12} md={12} sx={{ border: '0px groove grey', borderRadius: '10px', ..._sx }}> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | |||||
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt:2, mb: -3}}> | |||||
<MainCard | |||||
sx={{ | |||||
mr:2, | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
}} | |||||
border= '1px groove grey' | |||||
> | |||||
<ApplicationDetails | |||||
formData={record} | |||||
/> | |||||
</MainCard> | |||||
</Grid> | </Grid> | ||||
{/*row 2*/} | {/*row 2*/} | ||||
<Grid item xs={12} sm={12} md={12} lg={12} sx={{ width:'100%', mt: 2, mb: 2}}> | |||||
<MainCard | |||||
sx={{ | |||||
boxShadow: 1, | |||||
border: 1, | |||||
borderColor: '#DDD', | |||||
}} | |||||
border= '1px groove grey' | |||||
// sx={..._sx} | |||||
> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</MainCard> | |||||
</Grid> | |||||
</Grid > | </Grid > | ||||