@@ -119,7 +119,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||
</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 item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
@@ -147,7 +147,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||
</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 item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
@@ -178,29 +178,36 @@ const ApplicationDetailCard = ({ formData, }) => { | |||
</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 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> | |||
</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> | |||
<FileList | |||
lang="ch" | |||
refId={params.id} | |||
refType={"proof"} | |||
dateHideable={true} | |||
disablePagination | |||
disableSelectionOnClick | |||
disableColumnMenu | |||
disableColumnSelector | |||
hideFooter | |||
/> | |||
</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 item xs={12} md={12} lg={12} | |||
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' }}> | |||
<Typography variant="h5"> {DateUtils.datetimeStr_Cht(data.returnBeforeDate)} 前</Typography> | |||
</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' }}> | |||
<Typography variant="h5">應繳費用:</Typography> | |||
</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 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' }}> | |||
{ | |||
formik.values.groupType == "Private Bill" | |||
formik.values.groupType === "Private Bill" | |||
? | |||
<Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | |||
: | |||
@@ -135,7 +135,7 @@ const FormPanel = ({ formData }) => { | |||
return ( | |||
<MainCard xs={12} md={12} lg={12} | |||
<MainCard xs={12} sm={12} md={12} lg={12} | |||
border={false} | |||
content={false}> | |||
@@ -3,7 +3,6 @@ import { | |||
Grid, | |||
Typography, | |||
Stack, | |||
Box, | |||
Button | |||
} from '@mui/material'; | |||
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 ProofForm = Loadable(React.lazy(() => import('./ProofForm'))); | |||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||
import MainCard from "../../../components/MainCard"; | |||
const BackgroundHead = { | |||
backgroundImage: `url(${titleBackgroundImg})`, | |||
width: '100%', | |||
@@ -39,22 +39,6 @@ const Index = () => { | |||
const [record, setRecord] = React.useState(); | |||
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(() => { | |||
loadForm(); | |||
}, []); | |||
@@ -98,7 +82,7 @@ const Index = () => { | |||
<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%"> | |||
<div style={BackgroundHead} width="100%"> | |||
<Stack direction="row" height='70px'> | |||
@@ -106,38 +90,44 @@ const Index = () => { | |||
</Stack> | |||
</div> | |||
</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)" }} /> | |||
</Button> | |||
</Grid> | |||
{/*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> | |||
{/*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 > | |||