@@ -11,7 +11,7 @@ import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | import { lazy } from 'react'; | ||||
const InfoCard = Loadable(lazy(() => import('./OrganizationCard'))); | const InfoCard = Loadable(lazy(() => import('./OrganizationCard'))); | ||||
const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import { useNavigate } from 'react-router-dom'; | import { useNavigate } from 'react-router-dom'; | ||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
@@ -73,7 +73,7 @@ const OrganizationDetailPage = () => { | |||||
isLoading ? | isLoading ? | ||||
<LoadingComponent /> | <LoadingComponent /> | ||||
: | : | ||||
<Grid container sx={{backgroundColor:"backgroundColor.default"}}> | |||||
<Grid container sx={{ backgroundColor: "backgroundColor.default" }}> | |||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<div style={BackgroundHead}> | <div style={BackgroundHead}> | ||||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | ||||
@@ -83,8 +83,7 @@ const OrganizationDetailPage = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}> | <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/org") }}> | ||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*col 1*/} | {/*col 1*/} | ||||
@@ -95,7 +95,7 @@ const Index = () => { | |||||
variant="contained" | variant="contained" | ||||
size="large" | size="large" | ||||
sx={{ m: 4}} | sx={{ m: 4}} | ||||
>即時網上繳費</Button> | |||||
><Typography variant="h5">即時網上繳費</Typography></Button> | |||||
或 | 或 | ||||
@@ -107,7 +107,7 @@ const Index = () => { | |||||
onClick={()=>{ | onClick={()=>{ | ||||
navigate("/publicNotice"); | navigate("/publicNotice"); | ||||
}} | }} | ||||
>稍後繳費 - 返回「我的公共啟事」</Button> | |||||
><Typography variant="h5">稍後繳費 - 返回「我的公共啟事」</Typography></Button> | |||||
</Typography> | </Typography> | ||||
</Grid> | </Grid> | ||||
</center> | </center> | ||||
@@ -13,7 +13,7 @@ import * as DateUtils from "utils/DateUtils"; | |||||
import * as FormatUtils from "utils/FormatUtils" | import * as FormatUtils from "utils/FormatUtils" | ||||
import { useParams } from "react-router-dom"; | import { useParams } from "react-router-dom"; | ||||
import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | ||||
@@ -54,7 +54,7 @@ const Index = () => { | |||||
HttpUtils.get({ | HttpUtils.get({ | ||||
url: UrlUtils.GET_PROOF + "/" + params.id, | url: UrlUtils.GET_PROOF + "/" + params.id, | ||||
onSuccess: (responseData) => { | onSuccess: (responseData) => { | ||||
if(!responseData.data?.id){ | |||||
if (!responseData.data?.id) { | |||||
navigate("/proof/search"); | navigate("/proof/search"); | ||||
} | } | ||||
responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber; | responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber; | ||||
@@ -90,7 +90,7 @@ const Index = () => { | |||||
// const [backButtonPos, setBackButtonPos] = React.useState() | // const [backButtonPos, setBackButtonPos] = React.useState() | ||||
// const backButtonRef = React.useRef() | // const backButtonRef = React.useRef() | ||||
// React.useLayoutEffect(()=>{ | // React.useLayoutEffect(()=>{ | ||||
// console.log(applicationDetailsRef.current?.getBoundingClientRect()) | |||||
// console.log(applicationDetailsRef.current?.getBoundingClientRect()) | |||||
// if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}` | // if (backButtonRef.current) backButtonRef.current.style.marginLeft = `${backButtonPos}` | ||||
// },[backButtonPos]) | // },[backButtonPos]) | ||||
@@ -103,51 +103,50 @@ const Index = () => { | |||||
<LoadingComponent /> | <LoadingComponent /> | ||||
: | : | ||||
( | ( | ||||
<Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} 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 }}>Proof Record</Typography> | |||||
</Stack> | |||||
</div> | |||||
<Grid container sx={{ minHeight: '110vh', backgroundColor: 'backgroundColor.default' }} 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 }}>Proof Record</Typography> | |||||
</Stack> | |||||
</div> | |||||
</Grid> | |||||
<Grid item xs={12} width="100%"> | |||||
<Button sx={{ ml: 6, mt: 2.5 }} 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" direction="column"> | |||||
<center> | |||||
<Grid item xs={12} md={12} sx={{ pt: 2, ml: 6, mr: 6, }}> | |||||
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||||
<ApplicationDetails | |||||
// setBackButtonPos={setBackButtonPos} | |||||
formData={record} | |||||
style={{ | |||||
display: "flex", | |||||
height: "100%", | |||||
flex: 1 | |||||
}} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
<Grid item xs={12} md={12} sx={{ pt: 3, pb: 2, ml: 6, mr: 6, }}> | |||||
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} width="100%"> | |||||
<Button sx={{ml: 6, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/proof/search")}}> | |||||
<KeyboardBackspaceOutlinedIcon/> | |||||
<Typography variant="h4">Back</Typography> | |||||
</Button> | |||||
</Grid> | |||||
{/*row 1*/} | |||||
<Grid item xs={12} md={12} > | |||||
<Grid container justifyContent="flex-start" alignItems="center" direction="column"> | |||||
<center> | |||||
<Grid item xs={12} md={12} sx={{ pt: 2, ml: 6, mr: 6, }}> | |||||
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||||
<ApplicationDetails | |||||
// setBackButtonPos={setBackButtonPos} | |||||
formData={record} | |||||
style={{ | |||||
display: "flex", | |||||
height: "100%", | |||||
flex: 1 | |||||
}} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
<Grid item xs={12} md={12} sx={{ pt: 3, pb: 2, ml: 6, mr: 6, }}> | |||||
<Box xs={12} md={12} sx={{ p: 4, borderRadius: '10px', backgroundColor: '#ffffff' }}> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
) | ) | ||||
@@ -64,7 +64,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
border={false} | border={false} | ||||
content={false} | content={false} | ||||
> | > | ||||
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||||
<Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||||
公共啟事:校對資料 | 公共啟事:校對資料 | ||||
</Typography> | </Typography> | ||||
<form> | <form> | ||||
@@ -76,7 +76,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<FormLabel>申請編號:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -88,7 +88,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid container alignItems={"left"}> | <Grid container alignItems={"left"}> | ||||
<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' }}> | ||||
<FormLabel>申請狀態:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | ||||
@@ -105,7 +105,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<FormLabel>申請人:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請人:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -123,7 +123,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<FormLabel>憲報期數:</FormLabel> | |||||
<FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -138,7 +138,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<FormLabel>聯絡人:</FormLabel> | |||||
<FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -151,7 +151,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<FormLabel>刊出日期:</FormLabel> | |||||
<FormLabel><Typography variant="h5">刊出日期:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -166,7 +166,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid container alignItems="left"> | <Grid container alignItems="left"> | ||||
<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' }}> | ||||
<FormLabel>我的備注:</FormLabel> | |||||
<FormLabel><Typography variant="h5">我的備注:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -184,7 +184,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<Grid item xs={12} md={6} lg={6} sx={{ mb: 1, }}> | <Grid item xs={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} md={12} lg={12} sx={{ display: 'flex', alignItems: 'center' }}> | ||||
<Typography>請下載下列印刷稿檔案,並仔細校對:</Typography> | |||||
<Typography><Typography variant="h5">請下載下列印刷稿檔案,並仔細校對:</Typography></Typography> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<FileList | <FileList | ||||
@@ -204,25 +204,25 @@ const ApplicationDetailCard = ({ formData, }) => { | |||||
<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' }}> | ||||
<Typography>繳費及返稿最後限期:</Typography> | |||||
<Typography variant="h5">繳費及返稿最後限期:</Typography> | |||||
</Grid> | </Grid> | ||||
<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>{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</Typography> | |||||
<Typography variant="h5">{DateUtils.dateStr_Cht(data.returnBeforeDate)} 下午 2:00前</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={3} lg={3} | <Grid item xs={12} md={3} lg={3} | ||||
sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | ||||
<Typography>應繳費用:</Typography> | |||||
<Typography variant="h5">應繳費用:</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ mb: 1, display: 'flex', alignItems: 'center' }}> | ||||
<Typography style={{ color: "blue", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography> | |||||
<Typography variant="h5" style={{ color: "blue", fontWeight: "bold", }}>{FormatUtils.currencyFormat(data.fee)}</Typography> | |||||
</Grid> | </Grid> | ||||
<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' }}> | ||||
{ | { | ||||
formik.values.groupType == "A" | formik.values.groupType == "A" | ||||
? | ? | ||||
<Typography>( {data.noOfPages} 頁 x $6,552 )</Typography> | |||||
<Typography variant="h5">( {data.noOfPages} 頁 x $6,552 )</Typography> | |||||
: | : | ||||
<Typography>( {data.length} cm x {data.colCount == 2 ? "$364 二格位" : "$182 一格位"} )</Typography> | |||||
<Typography variant="h5">( {data.length} cm x {data.colCount == 2 ? "$364 二格位" : "$182 一格位"} )</Typography> | |||||
} | } | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -78,7 +78,7 @@ const FormPanel = ({ formData }) => { | |||||
onSuccess: function () { | onSuccess: function () { | ||||
if (actionValue) { | if (actionValue) { | ||||
notifyActionSuccess("提交成功!") | notifyActionSuccess("提交成功!") | ||||
navigate("/proof/pay/"+params.id); | |||||
navigate("/proof/pay/" + params.id); | |||||
} else { | } else { | ||||
notifyActionSuccess("提交成功!") | notifyActionSuccess("提交成功!") | ||||
navigate("/proof/search"); | navigate("/proof/search"); | ||||
@@ -138,7 +138,7 @@ const FormPanel = ({ formData }) => { | |||||
border={false} | border={false} | ||||
content={false}> | content={false}> | ||||
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||||
<Typography variant="h4" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}> | |||||
公共啟事:校對回覆 | 公共啟事:校對回覆 | ||||
</Typography> | </Typography> | ||||
@@ -148,10 +148,10 @@ const FormPanel = ({ formData }) => { | |||||
formik.values.replyDate ? | formik.values.replyDate ? | ||||
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)} | |||||
<Typography variant="h5">校對回覆日期: {DateUtils.datetimeStr_Cht(formik.values.replyDate)}</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
校對回覆: {formik.values.action ? (<span style={{color:'green'}}>可以付印(稿件正確)</span>): (<span style={{color:'red'}}>未能付印(需要修改)</span>)} | |||||
<Typography variant="h5">校對回覆: {formik.values.action ? (<span style={{ color: 'green' }}>可以付印(稿件正確)</span>) : (<span style={{ color: 'red' }}>未能付印(需要修改)</span>)}</Typography> | |||||
</Grid> | </Grid> | ||||
{ | { | ||||
formik.values.action ? | formik.values.action ? | ||||
@@ -178,7 +178,7 @@ const FormPanel = ({ formData }) => { | |||||
isOverTime() ? | isOverTime() ? | ||||
<Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
回覆逾時,請重新申請。 | |||||
<Typography variant="h5">回覆逾時,請重新申請。</Typography> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
: | : | ||||
@@ -206,7 +206,7 @@ const FormPanel = ({ formData }) => { | |||||
: | : | ||||
<> | <> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
請上載稿件修改的檔案: | |||||
<Typography variant="h5">請上載稿件修改的檔案:</Typography> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={12} textAlign="left"> | <Grid item xs={12} md={12} textAlign="left"> | ||||
@@ -227,7 +227,9 @@ const FormPanel = ({ formData }) => { | |||||
variant="contained" | variant="contained" | ||||
size="large" | size="large" | ||||
disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | disabled={attachments.length >= (formik.values.groupType == "A" ? 2 : 1)} | ||||
>上載</Button> | |||||
> | |||||
<Typography variant="h5">上載</Typography> | |||||
</Button> | |||||
</label> | </label> | ||||
</Grid> | </Grid> | ||||
@@ -241,7 +243,7 @@ const FormPanel = ({ formData }) => { | |||||
<Grid item xs={12} md={12} lg={12}> | <Grid item xs={12} md={12} lg={12}> | ||||
<Stack direction="row" alignItems="center"> | <Stack direction="row" alignItems="center"> | ||||
<FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}> | <FormLabel sx={{ paddingRight: 2, paddingBottom: 3, textAlign: "center" }}> | ||||
簽署: | |||||
<Typography variant="h5">簽署:</Typography> | |||||
</FormLabel> | </FormLabel> | ||||
<TextField | <TextField | ||||
fullWidth | fullWidth | ||||
@@ -277,7 +279,7 @@ const FormPanel = ({ formData }) => { | |||||
textTransform: 'capitalize', | textTransform: 'capitalize', | ||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
提交回覆 | |||||
<Typography variant="h5">提交回覆</Typography> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
@@ -3,7 +3,8 @@ import { | |||||
Grid, | Grid, | ||||
Typography, | Typography, | ||||
Stack, | Stack, | ||||
Box | |||||
Box, | |||||
Button | |||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import * as UrlUtils from "utils/ApiPathConst"; | import * as UrlUtils from "utils/ApiPathConst"; | ||||
import * as React from "react"; | import * as React from "react"; | ||||
@@ -12,6 +13,7 @@ import * as DateUtils from "utils/DateUtils"; | |||||
import * as FormatUtils from "utils/FormatUtils"; | import * as FormatUtils from "utils/FormatUtils"; | ||||
import { useParams } from "react-router-dom"; | import { useParams } from "react-router-dom"; | ||||
import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import Loadable from 'components/Loadable'; | import Loadable from 'components/Loadable'; | ||||
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); | ||||
@@ -37,6 +39,22 @@ 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(); | ||||
}, []); | }, []); | ||||
@@ -52,7 +70,7 @@ const Index = () => { | |||||
HttpUtils.get({ | HttpUtils.get({ | ||||
url: UrlUtils.GET_PROOF + "/" + params.id, | url: UrlUtils.GET_PROOF + "/" + params.id, | ||||
onSuccess: (responseData) => { | onSuccess: (responseData) => { | ||||
if(!responseData.data?.id){ | |||||
if (!responseData.data?.id) { | |||||
navigate("/proof/search"); | navigate("/proof/search"); | ||||
} | } | ||||
responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber; | responseData.data["phoneNumber"] = JSON.parse(responseData.data.contactTelNo).phoneNumber; | ||||
@@ -80,44 +98,49 @@ const Index = () => { | |||||
<LoadingComponent /> | <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 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> | |||||
<Grid item xs={12} width="95%"> | |||||
<Button sx={{ ml: 1.5, mt: 2.5 }} 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={{ p: 4, 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={{ p: 4, border: '0px groove grey', borderRadius: '10px', ..._sx }}> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | </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={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}> | |||||
<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={{ p: 4, border: '3px groove grey', borderRadius: '10px' }}> | |||||
<ProofForm | |||||
formData={record} | |||||
/> | |||||
</Box> | |||||
</Grid> | |||||
</center> | |||||
</Grid> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
</Grid> | |||||
{/*row 2*/} | |||||
</Grid > | |||||
) | ) | ||||
@@ -13,6 +13,22 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
const [rows, setRows] = React.useState(recordList); | const [rows, setRows] = React.useState(recordList); | ||||
const navigate = useNavigate() | const navigate = useNavigate() | ||||
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(() => { | ||||
setRows(recordList); | setRows(recordList); | ||||
}, [recordList]); | }, [recordList]); | ||||
@@ -119,10 +135,11 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
} | } | ||||
return ( | return ( | ||||
<div style={{ height: 400, width: '100%' }}> | |||||
<div style={{ height: '100%', width: '100%' }}> | |||||
<FiDataGrid | <FiDataGrid | ||||
rowHeight={80} | rowHeight={80} | ||||
sx={_sx} | |||||
rows={rows} | rows={rows} | ||||
columns={columns} | columns={columns} | ||||
initialState={{ | initialState={{ | ||||
@@ -130,6 +147,7 @@ export default function SearchPublicNoticeTable({ recordList }) { | |||||
paginationModel: { page: 0, pageSize: 5 }, | paginationModel: { page: 0, pageSize: 5 }, | ||||
}, | }, | ||||
}} | }} | ||||
getRowHeight={()=>"auto"} | |||||
onRowDoubleClick={handleRowDoubleClick} | onRowDoubleClick={handleRowDoubleClick} | ||||
/> | /> | ||||
</div> | </div> | ||||
@@ -3,7 +3,8 @@ import { | |||||
Button, | Button, | ||||
CardContent, | CardContent, | ||||
Grid, TextField, | Grid, TextField, | ||||
Autocomplete | |||||
Autocomplete, | |||||
Typography | |||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import MainCard from "components/MainCard"; | import MainCard from "components/MainCard"; | ||||
import { useForm } from "react-hook-form"; | import { useForm } from "react-hook-form"; | ||||
@@ -14,8 +15,8 @@ import * as FormatUtils from "utils/FormatUtils"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | // ==============================|| DASHBOARD - DEFAULT ||============================== // | ||||
const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
}) => { | |||||
const SearchPublicNoticeForm = ({ applySearch, searchCriteria, issueComboData | |||||
}) => { | |||||
const [type, setType] = React.useState([]); | const [type, setType] = React.useState([]); | ||||
const [status, setStatus] = React.useState(ComboData.proofStatus[0]); | const [status, setStatus] = React.useState(ComboData.proofStatus[0]); | ||||
@@ -26,6 +27,21 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | ||||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | ||||
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" | |||||
} | |||||
} | |||||
const { reset, register, handleSubmit } = useForm() | const { reset, register, handleSubmit } = useForm() | ||||
const onSubmit = (data) => { | const onSubmit = (data) => { | ||||
@@ -64,24 +80,26 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
reset(); | reset(); | ||||
} | } | ||||
function getIssueLabel(data){ | |||||
if(data=={}) return ""; | |||||
return data.year | |||||
+" Vol. "+FormatUtils.zeroPad(data.volume,3) | |||||
+", No. "+FormatUtils.zeroPad(data.issueNo,2) | |||||
+", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)"); | |||||
function getIssueLabel(data) { | |||||
if (data == {}) return ""; | |||||
return data.year | |||||
+ " Vol. " + FormatUtils.zeroPad(data.volume, 3) | |||||
+ ", No. " + FormatUtils.zeroPad(data.issueNo, 2) | |||||
+ ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)"); | |||||
} | } | ||||
return ( | return ( | ||||
<MainCard xs={12} md={12} lg={12} | <MainCard xs={12} md={12} lg={12} | ||||
border={false} | border={false} | ||||
content={false}> | |||||
content={false} | |||||
sx={_sx} | |||||
> | |||||
<form onSubmit={handleSubmit(onSubmit)}> | <form onSubmit={handleSubmit(onSubmit)}> | ||||
{/*row 1*/} | {/*row 1*/} | ||||
<CardContent sx={{ px: 2.5, pt: 3 }}> | <CardContent sx={{ px: 2.5, pt: 3 }}> | ||||
<Grid item justifyContent="space-between" alignItems="center"> | <Grid item justifyContent="space-between" alignItems="center"> | ||||
搜尋 | |||||
<Typography variant="h4">搜尋</Typography> | |||||
</Grid> | </Grid> | ||||
</CardContent> | </CardContent> | ||||
@@ -121,7 +139,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
options={issueCombo} | options={issueCombo} | ||||
value={issueSelected} | value={issueSelected} | ||||
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | ||||
getOptionLabel={(option)=>getIssueLabel(option)} | |||||
getOptionLabel={(option) => getIssueLabel(option)} | |||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
setIssueSelected(newValue); | setIssueSelected(newValue); | ||||
}} | }} | ||||
@@ -143,8 +161,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
id="gazettGroup" | id="gazettGroup" | ||||
options={ComboData.groupTitle} | options={ComboData.groupTitle} | ||||
value={groupSelected} | value={groupSelected} | ||||
inputValue={(groupSelected?.labelCht)?groupSelected?.labelCht:""} | |||||
getOptionLabel={(option)=>option.labelCht} | |||||
inputValue={(groupSelected?.labelCht) ? groupSelected?.labelCht : ""} | |||||
getOptionLabel={(option) => option.labelCht} | |||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
setGroupSelected(newValue); | setGroupSelected(newValue); | ||||
}} | }} | ||||
@@ -212,13 +230,13 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}> | ||||
<Autocomplete | <Autocomplete | ||||
{...register("status")} | {...register("status")} | ||||
disablePortal | |||||
disablePortal={false} | |||||
id="status" | id="status" | ||||
filterOptions={(options) => options} | filterOptions={(options) => options} | ||||
options={ComboData.proofStatus} | options={ComboData.proofStatus} | ||||
value={status} | value={status} | ||||
getOptionLabel={(option)=>option.labelCht} | |||||
inputValue={status?.labelCht?status?.labelCht:""} | |||||
getOptionLabel={(option) => option.labelCht} | |||||
inputValue={status?.labelCht ? status?.labelCht : ""} | |||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
if (newValue !== null) { | if (newValue !== null) { | ||||
setStatus(newValue); | setStatus(newValue); | ||||
@@ -250,7 +268,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
textTransform: 'capitalize', | textTransform: 'capitalize', | ||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
重置 | |||||
<Typography variant="h5">重置</Typography> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
@@ -263,7 +281,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria,issueComboData | |||||
textTransform: 'capitalize', | textTransform: 'capitalize', | ||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
提交 | |||||
<Typography variant="h5">提交</Typography> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -37,7 +37,7 @@ import { | |||||
const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | ||||
import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction"; | import { notifyActionSuccess, notifySaveSuccess } from "utils/CommonFunction"; | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
// ==============================|| Body - DEFAULT ||============================== // | // ==============================|| Body - DEFAULT ||============================== // | ||||
@@ -84,7 +84,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
backgroundPosition: 'right' | backgroundPosition: 'right' | ||||
} | } | ||||
const title = groupNo != null ? ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum + " , " + groupNo) : ("Application / " + appNo + ", " + gazetteIssue + ", " + issueNum) | |||||
const title = groupNo != null ? (appNo + ", " + gazetteIssue + ", " + issueNum + " , " + groupNo) : (appNo + ", " + gazetteIssue + ", " + issueNum) | |||||
useEffect(() => { | useEffect(() => { | ||||
loadApplicationDetail(); | loadApplicationDetail(); | ||||
@@ -322,16 +322,18 @@ const PublicNoticeDetail_GLD = () => { | |||||
</div> | </div> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ml:3.5, mt:2}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}> | |||||
<KeyboardBackspaceOutlinedIcon/> | |||||
<Typography variant="h4">Back</Typography> | |||||
<Stack direction="row"> | |||||
<Button sx={{ml:3.5, mt:2.5}} style={{ border: '2px solid' }} variant="outlined" onClick={()=>{navigate("/application/search")}}> | |||||
<ForwardIcon style={{height: 30, width: 50, transform : "rotate(180deg)"}}/> | |||||
</Button> | </Button> | ||||
<Typography ml={4} mt={3} variant="h4">{title}</Typography> | |||||
</Stack> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} > | |||||
{/* <Grid item xs={12} > | |||||
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | <Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | ||||
<Typography ml={4} mt={3} variant="h4">{title}</Typography> | <Typography ml={4} mt={3} variant="h4">{title}</Typography> | ||||
</Stack> | </Stack> | ||||
</Grid> | |||||
</Grid> */} | |||||
<Grid item xs={12} > | <Grid item xs={12} > | ||||
<Grid container direction="row"> | <Grid container direction="row"> | ||||
<Grid item xs={12} md={10} lg={10} xl={10}> | <Grid item xs={12} md={10} lg={10} xl={10}> | ||||
@@ -128,7 +128,7 @@ const ApplicationDetailCard = ( | |||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
<EditNoteIcon /> | <EditNoteIcon /> | ||||
<Typography ml={1}> 支付</Typography> | |||||
<Typography ml={1} variant="h5"> 支付</Typography> | |||||
</Button> | </Button> | ||||
: null | : null | ||||
} | } | ||||
@@ -143,12 +143,12 @@ const ApplicationDetailCard = ( | |||||
backgroundColor: '#ffa733' | backgroundColor: '#ffa733' | ||||
}}> | }}> | ||||
<CloseIcon /> | <CloseIcon /> | ||||
<Typography ml={1}> 取消</Typography> | |||||
<Typography ml={1} variant="h5"> 取消</Typography> | |||||
</Button> | </Button> | ||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
<Typography variant="h5" sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||||
<Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}> | |||||
公共啟事申請資料 | 公共啟事申請資料 | ||||
</Typography> | </Typography> | ||||
<form> | <form> | ||||
@@ -160,7 +160,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>申請編號:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請編號:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -188,7 +188,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>申請狀態:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請狀態:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={2} lg={2}> | <Grid item xs={12} md={2} lg={2}> | ||||
@@ -199,7 +199,7 @@ const ApplicationDetailCard = ( | |||||
<Grid item xs={12} md={7} lg={7}> | <Grid item xs={12} md={7} lg={7}> | ||||
<Stack direction="row" justifyContent="flex-start" alignItems="center"> | <Stack direction="row" justifyContent="flex-start" alignItems="center"> | ||||
<FormControl variant="outlined" fullWidth disabled> | <FormControl variant="outlined" fullWidth disabled> | ||||
<Typography id='reason'> | |||||
<Typography id='reason' variant="h5"> | |||||
{currentApplicationDetailData.reason} | {currentApplicationDetailData.reason} | ||||
</Typography> | </Typography> | ||||
</FormControl> | </FormControl> | ||||
@@ -214,7 +214,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>申請人:</FormLabel> | |||||
<FormLabel><Typography variant="h5">申請人:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -259,7 +259,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>憲報期數:</FormLabel> | |||||
<FormLabel><Typography variant="h5">憲報期數:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -291,7 +291,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>聯絡人:</FormLabel> | |||||
<FormLabel><Typography variant="h5">聯絡人:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -319,7 +319,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>發布日期:</FormLabel> | |||||
<FormLabel><Typography variant="h5">發布日期:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -352,7 +352,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>聯絡電話:</FormLabel> | |||||
<FormLabel><Typography variant="h5">聯絡電話:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -399,11 +399,11 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>價錢:</FormLabel> | |||||
<FormLabel><Typography variant="h5">價錢:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
<FormLabel>{FormatUtils.currencyFormat(fee)}</FormLabel> | |||||
<FormLabel><Typography variant="h5">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -416,7 +416,7 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>傳真號碼:</FormLabel> | |||||
<FormLabel><Typography variant="h5">傳真號碼:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
@@ -465,7 +465,7 @@ const ApplicationDetailCard = ( | |||||
<Grid container direction="row"> | <Grid container direction="row"> | ||||
<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' }}> | ||||
<FormLabel>稿件檔案:</FormLabel> | |||||
<FormLabel><Typography variant="h5">稿件檔案:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | <Grid item xs={12} md={9} lg={9} sx={{ display: 'flex', alignItems: 'center' }}> | ||||
<Grid container direction="row" justifyContent="flex-start"> | <Grid container direction="row" justifyContent="flex-start"> | ||||
@@ -474,6 +474,7 @@ const ApplicationDetailCard = ( | |||||
<Typography | <Typography | ||||
fullWidth | fullWidth | ||||
id='fileName' | id='fileName' | ||||
variant="h5" | |||||
> | > | ||||
{fileDetail.filename} | {fileDetail.filename} | ||||
</Typography> | </Typography> | ||||
@@ -502,10 +503,10 @@ const ApplicationDetailCard = ( | |||||
<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' }}> | ||||
<FormLabel>備註:</FormLabel> | |||||
<FormLabel><Typography variant="h5">備註:</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} md={9} lg={9}> | <Grid item xs={12} md={9} lg={9}> | ||||
<FormLabel>{currentApplicationDetailData.remarks}</FormLabel> | |||||
<FormLabel><Typography variant="h5">{currentApplicationDetailData.remarks}</Typography></FormLabel> | |||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -514,15 +515,15 @@ const ApplicationDetailCard = ( | |||||
<div> | <div> | ||||
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} > | <Dialog open={isPopUp} onClose={() => setIsPopUp(false)} > | ||||
<DialogTitle></DialogTitle> | <DialogTitle></DialogTitle> | ||||
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography> | |||||
<Typography variant="h3" style={{ padding: '16px' }}>確認付款</Typography> | |||||
<DialogContent style={{ display: 'flex', }}> | <DialogContent style={{ display: 'flex', }}> | ||||
<Stack direction="column" justifyContent="space-between"> | <Stack direction="column" justifyContent="space-between"> | ||||
總計金額: {FormatUtils.currencyFormat(fee)} | |||||
<Typography variant="h4">總計金額: {FormatUtils.currencyFormat(fee)}</Typography> | |||||
</Stack> | </Stack> | ||||
</DialogContent> | </DialogContent> | ||||
<DialogActions> | <DialogActions> | ||||
<Button onClick={() => setIsPopUp(false)}>Close</Button> | |||||
<Button onClick={() => doPayment()}>確認</Button> | |||||
<Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button> | |||||
<Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button> | |||||
</DialogActions> | </DialogActions> | ||||
</Dialog> | </Dialog> | ||||
</div> | </div> | ||||
@@ -73,9 +73,9 @@ const StatusChangeDialog = (props) => { | |||||
<DialogContent> | <DialogContent> | ||||
<DialogContentText> | <DialogContentText> | ||||
<Grid container direction="row" justifyContent="center" alignItems="center"> | <Grid container direction="row" justifyContent="center" alignItems="center"> | ||||
<Grid item xs={12} md={5} lg={5} sx={{mb: 5,}}> | |||||
<Grid item xs={12} md={8} lg={8} sx={{mb: 5,}}> | |||||
<FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}> | <FormLabel sx={{fontSize: "18px", color:"#000000",textAlign:"center"}}> | ||||
確定{status}公共啟事? | |||||
<Typography variant="h5">確定{status}公共啟事?</Typography> | |||||
</FormLabel> | </FormLabel> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -86,12 +86,12 @@ const StatusChangeDialog = (props) => { | |||||
<Stack direction="row" justifyContent="space-around"> | <Stack direction="row" justifyContent="space-around"> | ||||
<DialogActions> | <DialogActions> | ||||
<Button variant="contained" onClick={props.handleClose} autoFocus> | <Button variant="contained" onClick={props.handleClose} autoFocus> | ||||
取消 | |||||
<Typography variant="h5">取消</Typography> | |||||
</Button> | </Button> | ||||
</DialogActions> | </DialogActions> | ||||
<DialogActions> | <DialogActions> | ||||
<Button variant="contained" color="error" onClick={acceptedHandle()} autoFocus > | <Button variant="contained" color="error" onClick={acceptedHandle()} autoFocus > | ||||
確定 | |||||
<Typography variant="h5">確定</Typography> | |||||
</Button> | </Button> | ||||
</DialogActions> | </DialogActions> | ||||
</Stack> | </Stack> | ||||
@@ -28,7 +28,8 @@ import { | |||||
} from "utils/ApiPathConst"; | } from "utils/ApiPathConst"; | ||||
import { useNavigate } from "react-router-dom"; | import { useNavigate } from "react-router-dom"; | ||||
const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import { notifyActionSuccess } from "utils/CommonFunction"; | |||||
// ==============================|| Body - DEFAULT ||============================== // | // ==============================|| Body - DEFAULT ||============================== // | ||||
@@ -36,6 +37,8 @@ const DashboardDefault = () => { | |||||
const params = useParams(); | const params = useParams(); | ||||
const [applicationDetailData, setApplicationDetailData] = useState({}); | const [applicationDetailData, setApplicationDetailData] = useState({}); | ||||
const [appNo, setAapNo] = useState(""); | const [appNo, setAapNo] = useState(""); | ||||
const [gazetteIssue, setGazetteIssue] = useState(""); | |||||
const [issueNum, setIssueNum] = useState(""); | |||||
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | // const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({}); | ||||
const navigate = useNavigate() | const navigate = useNavigate() | ||||
@@ -44,6 +47,24 @@ const DashboardDefault = () => { | |||||
const [getStatus, setStatus] = useState(""); | const [getStatus, setStatus] = useState(""); | ||||
const [statusWindowAccepted, setStatusWindowAccepted] = useState(false); | const [statusWindowAccepted, setStatusWindowAccepted] = useState(false); | ||||
const title = appNo + ", " + gazetteIssue + ", " + issueNum | |||||
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" | |||||
} | |||||
} | |||||
const BackgroundHead = { | const BackgroundHead = { | ||||
backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
width: '100%', | width: '100%', | ||||
@@ -65,7 +86,10 @@ const DashboardDefault = () => { | |||||
.then((response) => { | .then((response) => { | ||||
if (response.status === 200) { | if (response.status === 200) { | ||||
setApplicationDetailData(response.data); | setApplicationDetailData(response.data); | ||||
const gazetteIssueDetail = response.data.gazetteIssueDetail; | |||||
setAapNo(response.data.data.appNo); | setAapNo(response.data.data.appNo); | ||||
setGazetteIssue(gazetteIssueDetail.year + " Vol " + gazetteIssueDetail.volume); | |||||
setIssueNum(" No. " + gazetteIssueDetail.issueNo); | |||||
} | } | ||||
}) | }) | ||||
.catch(error => { | .catch(error => { | ||||
@@ -107,6 +131,7 @@ const DashboardDefault = () => { | |||||
axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`) | axios.get(`${SET_PUBLIC_NOTICE_STATUS_CANCELLED}/${params.id}`) | ||||
.then((response) => { | .then((response) => { | ||||
if (response.status === 204) { | if (response.status === 204) { | ||||
notifyActionSuccess("取消成功!") | |||||
setOpen(false); | setOpen(false); | ||||
handleClose(); | handleClose(); | ||||
loadApplicationDetail() | loadApplicationDetail() | ||||
@@ -129,24 +154,20 @@ const DashboardDefault = () => { | |||||
</Stack> | </Stack> | ||||
</div> | </div> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} > | |||||
<Stack direction="row" height='20px' justifyContent="flex-start" alignItems="center"> | |||||
<Typography ml={3} mt={3} variant="h4">我的公共啟事 / {appNo}</Typography> | |||||
</Stack> | |||||
</Grid> | |||||
<Grid item xs={12} md={12}> | <Grid item xs={12} md={12}> | ||||
<Grid container direction="column" justifyContent="flex-start" alignItems="center"> | <Grid container direction="column" justifyContent="flex-start" alignItems="center"> | ||||
<Grid item xs={12} width="75%"> | <Grid item xs={12} width="75%"> | ||||
<Button sx={{ mt: 4 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}> | |||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
</Button> | |||||
<Stack direction="row"> | |||||
<Button sx={{ ml: 0, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/publicNotice") }}> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | |||||
<Typography ml={3} mt={3} variant="h4">{title}</Typography> | |||||
</Stack> | |||||
</Grid> | </Grid> | ||||
{/* <Grid item xs={12} md={12} > */} | {/* <Grid item xs={12} md={12} > */} | ||||
{/* <Grid container direction="column" alignItems="center"> */} | {/* <Grid container direction="column" alignItems="center"> */} | ||||
<Grid item width="75%"> | <Grid item width="75%"> | ||||
<Box xs={12} mt={3} sx={{ p: 2, border: '3px groove grey', borderRadius: '10px' }}> | |||||
<Box xs={12} mt={3} sx={{ p: 2, border: '0px groove grey', borderRadius: '10px', ..._sx }}> | |||||
<ApplicationDetailCard | <ApplicationDetailCard | ||||
setStatus={setStatus} | setStatus={setStatus} | ||||
applicationDetailData={applicationDetailData} | applicationDetailData={applicationDetailData} | ||||
@@ -16,6 +16,7 @@ export default function BaseGrid({rows}) { | |||||
const handleDetailClick = (params) => () => { | const handleDetailClick = (params) => () => { | ||||
navigate('/publicNotice/'+ params.id); | navigate('/publicNotice/'+ params.id); | ||||
}; | }; | ||||
const columns = [ | const columns = [ | ||||
{ | { | ||||
id: 'appNo', | id: 'appNo', | ||||
@@ -76,7 +77,7 @@ export default function BaseGrid({rows}) { | |||||
{ | { | ||||
field: 'actions', | field: 'actions', | ||||
headerName: '', | headerName: '', | ||||
width: 80, | |||||
width: 160, | |||||
cellClassName: 'actions', | cellClassName: 'actions', | ||||
renderCell: (params) => { | renderCell: (params) => { | ||||
return <Button onClick={handleDetailClick(params)}>查看詳細</Button>; | return <Button onClick={handleDetailClick(params)}>查看詳細</Button>; | ||||
@@ -99,6 +100,7 @@ export default function BaseGrid({rows}) { | |||||
}, | }, | ||||
}} | }} | ||||
onRowDoubleClick={handleRowDoubleClick} | onRowDoubleClick={handleRowDoubleClick} | ||||
getRowHeight={() => 'auto'} | |||||
/> | /> | ||||
</div> | </div> | ||||
); | ); | ||||
@@ -117,9 +117,9 @@ export default function SubmittedTab({ rows }) { | |||||
totalAmount += datas[i].fee; | totalAmount += datas[i].fee; | ||||
} | } | ||||
content.push(<> | |||||
content.push(<Typography variant="h5"> | |||||
總計金額: {totalAmount} <br /><br /> | 總計金額: {totalAmount} <br /><br /> | ||||
</>); | |||||
</Typography>); | |||||
//setAmount(totalAmount); | //setAmount(totalAmount); | ||||
return content; | return content; | ||||
} | } | ||||
@@ -131,7 +131,7 @@ export default function SubmittedTab({ rows }) { | |||||
function doPayment() { | function doPayment() { | ||||
setIsPopUp(false); | setIsPopUp(false); | ||||
let totalAmount = 0; | let totalAmount = 0; | ||||
let appIdList =[]; | |||||
let appIdList = []; | |||||
const datas = rows?.filter((row) => | const datas = rows?.filter((row) => | ||||
selectedRowItems.includes(row.id) | selectedRowItems.includes(row.id) | ||||
); | ); | ||||
@@ -139,7 +139,7 @@ export default function SubmittedTab({ rows }) { | |||||
totalAmount += datas[i].fee; | totalAmount += datas[i].fee; | ||||
appIdList.push(datas[i].id); | appIdList.push(datas[i].id); | ||||
} | } | ||||
navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList} }); | |||||
navigate('/paymentPage', { state: { amount: totalAmount, appIdList: appIdList } }); | |||||
} | } | ||||
return ( | return ( | ||||
@@ -159,8 +159,10 @@ export default function SubmittedTab({ rows }) { | |||||
setSelectedRowItems(newSelection); | setSelectedRowItems(newSelection); | ||||
}} | }} | ||||
onRowDoubleClick={handleRowDoubleClick} | onRowDoubleClick={handleRowDoubleClick} | ||||
getRowHeight={() => 'auto'} | |||||
/> | /> | ||||
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button> | |||||
<br/> | |||||
<Button variant="contained" onClick={() => { setIsPopUp(true) }}><Typography variant="h5">付款</Typography></Button> | |||||
</div> | </div> | ||||
<div> | <div> | ||||
@@ -173,8 +175,8 @@ export default function SubmittedTab({ rows }) { | |||||
</Stack> | </Stack> | ||||
</DialogContent> | </DialogContent> | ||||
<DialogActions> | <DialogActions> | ||||
<Button onClick={() => setIsPopUp(false)}>Close</Button> | |||||
<Button onClick={() => doPayment()}>確認</Button> | |||||
<Button onClick={() => setIsPopUp(false)}><Typography variant="h5">Close</Typography></Button> | |||||
<Button onClick={() => doPayment()}><Typography variant="h5">確認</Typography></Button> | |||||
</DialogActions> | </DialogActions> | ||||
</Dialog> | </Dialog> | ||||
</div> | </div> | ||||
@@ -3,7 +3,8 @@ import { | |||||
Button, | Button, | ||||
CardContent, | CardContent, | ||||
Grid, TextField, | Grid, TextField, | ||||
Autocomplete | |||||
Autocomplete, | |||||
Typography | |||||
} from '@mui/material'; | } from '@mui/material'; | ||||
import MainCard from "components/MainCard"; | import MainCard from "components/MainCard"; | ||||
import { useForm } from "react-hook-form"; | import { useForm } from "react-hook-form"; | ||||
@@ -16,7 +17,7 @@ import * as DateUtils from "utils/DateUtils"; | |||||
const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | ||||
const [type, setType] = React.useState([]); | const [type, setType] = React.useState([]); | ||||
const [status, setStatus] = React.useState([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]); | |||||
const [status, setStatus] = React.useState([{ key: 0, label: 'All', labelCht: "全部", type: 'all' }]); | |||||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | ||||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | ||||
@@ -43,7 +44,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
function resetForm() { | function resetForm() { | ||||
setType([]); | setType([]); | ||||
setStatus({ key: 0, label: 'All', labelCht: "全部", type: 'all' }); | |||||
setStatus({ key: 0, label: 'All', labelCht: "全部", type: 'all' }); | |||||
reset(); | reset(); | ||||
} | } | ||||
@@ -56,7 +57,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
{/*row 1*/} | {/*row 1*/} | ||||
<CardContent sx={{ px: 2.5, pt: 3 }}> | <CardContent sx={{ px: 2.5, pt: 3 }}> | ||||
<Grid item justifyContent="space-between" alignItems="center"> | <Grid item justifyContent="space-between" alignItems="center"> | ||||
搜尋 | |||||
<Typography variant="h4">搜尋</Typography> | |||||
</Grid> | </Grid> | ||||
</CardContent> | </CardContent> | ||||
@@ -83,8 +84,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
type="date" | type="date" | ||||
label="提交日期(從)" | label="提交日期(從)" | ||||
defaultValue={searchCriteria.dateFrom} | defaultValue={searchCriteria.dateFrom} | ||||
InputProps={{inputProps: { max: maxDate} }} | |||||
onChange={(newValue)=>{ | |||||
InputProps={{ inputProps: { max: maxDate } }} | |||||
onChange={(newValue) => { | |||||
setMinDate(DateUtils.dateStr(newValue)); | setMinDate(DateUtils.dateStr(newValue)); | ||||
}} | }} | ||||
InputLabelProps={{ | InputLabelProps={{ | ||||
@@ -104,8 +105,8 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
type="date" | type="date" | ||||
label="提交日期(到)" | label="提交日期(到)" | ||||
defaultValue={searchCriteria.dateTo} | defaultValue={searchCriteria.dateTo} | ||||
InputProps={{inputProps: { min: minDate} }} | |||||
onChange={(newValue)=>{ | |||||
InputProps={{ inputProps: { min: minDate } }} | |||||
onChange={(newValue) => { | |||||
setMaxDate(DateUtils.dateStr(newValue)); | setMaxDate(DateUtils.dateStr(newValue)); | ||||
}} | }} | ||||
/> | /> | ||||
@@ -131,13 +132,13 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
id="status" | id="status" | ||||
// filterOptions={(options)=>options} | // filterOptions={(options)=>options} | ||||
options={ | options={ | ||||
localStorage.getItem('userData').creditor? | |||||
ComboData.publicNoticeStatic_Creditor: | |||||
ComboData.publicNoticeStatic | |||||
localStorage.getItem('userData').creditor ? | |||||
ComboData.publicNoticeStatic_Creditor : | |||||
ComboData.publicNoticeStatic | |||||
} | } | ||||
values={status} | |||||
value={status} | |||||
// inputValue={status?.labelCht} | // inputValue={status?.labelCht} | ||||
getOptionLabel={(option)=>option.labelCht} | |||||
getOptionLabel={(option) => option.labelCht} | |||||
onChange={(event, newValue) => { | onChange={(event, newValue) => { | ||||
console.log(newValue) | console.log(newValue) | ||||
const findAllIndex = newValue.findIndex((ele) => { | const findAllIndex = newValue.findIndex((ele) => { | ||||
@@ -150,7 +151,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
} else { | } else { | ||||
const selectedLabels = newValue.map(option => option.type); | const selectedLabels = newValue.map(option => option.type); | ||||
const selectedLabelsString = `${selectedLabels.join(',')}`; | const selectedLabelsString = `${selectedLabels.join(',')}`; | ||||
setStatus(newValue); | |||||
setStatus(newValue); | |||||
console.log(newValue) | console.log(newValue) | ||||
setSelectedLabelsString(selectedLabelsString); | setSelectedLabelsString(selectedLabelsString); | ||||
} | } | ||||
@@ -160,11 +161,14 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
renderInput={(params) => ( | renderInput={(params) => ( | ||||
<TextField {...params} | <TextField {...params} | ||||
label="狀態" | label="狀態" | ||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | /> | ||||
)} | )} | ||||
// InputLabelProps={{ | |||||
// shrink: true | |||||
// }} | |||||
// InputLabelProps={{ | |||||
// shrink: true | |||||
// }} | |||||
/> | /> | ||||
</Grid> | </Grid> | ||||
{/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/} | ||||
@@ -191,7 +195,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
textTransform: 'capitalize', | textTransform: 'capitalize', | ||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
重置 | |||||
<Typography variant="h5">重置</Typography> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
@@ -204,7 +208,7 @@ const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => { | |||||
textTransform: 'capitalize', | textTransform: 'capitalize', | ||||
alignItems: 'end' | alignItems: 'end' | ||||
}}> | }}> | ||||
搜尋 | |||||
<Typography variant="h5">搜尋</Typography> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
</Grid> | </Grid> | ||||
@@ -35,11 +35,27 @@ const PublicNotice = () => { | |||||
const [selectedTab, setSelectedTab] = useState("1"); | const [selectedTab, setSelectedTab] = useState("1"); | ||||
const navigate = useNavigate(); | const navigate = useNavigate(); | ||||
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" | |||||
} | |||||
} | |||||
const BackgroundHead = { | const BackgroundHead = { | ||||
backgroundImage: `url(${titleBackgroundImg})`, | backgroundImage: `url(${titleBackgroundImg})`, | ||||
width: '100%', | width: '100%', | ||||
height: '100%', | height: '100%', | ||||
backgroundSize:'contain', | |||||
backgroundSize: 'contain', | |||||
backgroundRepeat: 'no-repeat', | backgroundRepeat: 'no-repeat', | ||||
backgroundColor: '#0C489E', | backgroundColor: '#0C489E', | ||||
backgroundPosition: 'right' | backgroundPosition: 'right' | ||||
@@ -81,7 +97,7 @@ const PublicNotice = () => { | |||||
isLoading ? | isLoading ? | ||||
<LoadingComponent /> | <LoadingComponent /> | ||||
: | : | ||||
<Grid container > | |||||
<Grid container> | |||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<div style={BackgroundHead}> | <div style={BackgroundHead}> | ||||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | ||||
@@ -89,10 +105,10 @@ const PublicNotice = () => { | |||||
</Stack> | </Stack> | ||||
</div> | </div> | ||||
</Grid> | </Grid> | ||||
<Grid item xs={12} mt={1} > | |||||
<Grid item xs={12} mt={1} sx={{ mt: 3 }} > | |||||
<Stack direction="row" justifyContent="flex-end" alignItems="center"> | <Stack direction="row" justifyContent="flex-end" alignItems="center"> | ||||
<Box sx={{ mr: { md: "47px" } }}> | <Box sx={{ mr: { md: "47px" } }}> | ||||
<Button variant="contained" onClick={() => { onBtnClick() }}>申請公共啟事</Button> | |||||
<Button variant="contained" onClick={() => { onBtnClick() }}><Typography variant="h5">申請公共啟事</Typography></Button> | |||||
</Box> | </Box> | ||||
</Stack> | </Stack> | ||||
</Grid> | </Grid> | ||||
@@ -100,7 +116,7 @@ const PublicNotice = () => { | |||||
{ | { | ||||
JSON.parse(localStorage.getItem('userData')).creditor ? ( | JSON.parse(localStorage.getItem('userData')).creditor ? ( | ||||
<Grid item xs={12} sx={{ minHeight: '75vh' }}> | |||||
<Grid item xs={12} sx={{ minHeight: '75vh', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}> | |||||
<TabContext value={selectedTab}> | <TabContext value={selectedTab}> | ||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | <TabList onChange={handleChange} aria-label="lab API tabs example"> | ||||
@@ -137,7 +153,7 @@ const PublicNotice = () => { | |||||
</TabContext> | </TabContext> | ||||
</Grid> | </Grid> | ||||
) : ( | ) : ( | ||||
<Grid item xs={12} sx={{ minHeight: '75vh' }}> | |||||
<Grid item xs={12} sx={{ minHeight: '75vh', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}> | |||||
<TabContext value={selectedTab}> | <TabContext value={selectedTab}> | ||||
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | ||||
<TabList onChange={handleChange} aria-label="lab API tabs example"> | <TabList onChange={handleChange} aria-label="lab API tabs example"> | ||||
@@ -24,7 +24,7 @@ import { | |||||
notifyDeleteSuccess, | notifyDeleteSuccess, | ||||
notifySaveSuccess, | notifySaveSuccess, | ||||
} from "../../../utils/CommonFunction"; | } from "../../../utils/CommonFunction"; | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
const BackgroundHead = { | const BackgroundHead = { | ||||
@@ -214,8 +214,7 @@ const UserMaintainPage = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/userSearchview") }}> | <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/userSearchview") }}> | ||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*col 1*/} | {/*col 1*/} | ||||
@@ -8,7 +8,7 @@ import * as HttpUtils from "../../../utils/HttpUtils"; | |||||
import { useParams } from "react-router-dom"; | import { useParams } from "react-router-dom"; | ||||
import * as UrlUtils from "../../../utils/ApiPathConst"; | import * as UrlUtils from "../../../utils/ApiPathConst"; | ||||
import * as DateUtils from '../../../utils/DateUtils'; | import * as DateUtils from '../../../utils/DateUtils'; | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
const BackgroundHead = { | const BackgroundHead = { | ||||
@@ -112,8 +112,7 @@ const UserMaintainPage_Individual = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/indUser") }}> | <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/indUser") }}> | ||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*col 1*/} | {/*col 1*/} | ||||
@@ -14,7 +14,7 @@ import Loadable from 'components/Loadable'; | |||||
import { lazy } from 'react'; | import { lazy } from 'react'; | ||||
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | ||||
const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization'))); | const UserInformationCard = Loadable(lazy(() => import('./UserInformationCard_Organization'))); | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
import { useNavigate } from 'react-router-dom'; | import { useNavigate } from 'react-router-dom'; | ||||
@@ -139,8 +139,7 @@ const UserMaintainPage_Organization = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/orgUser") }}> | <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/orgUser") }}> | ||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*col 1*/} | {/*col 1*/} | ||||
@@ -21,7 +21,7 @@ const DashboardDefault = () => { | |||||
backgroundPosition: 'right' | backgroundPosition: 'right' | ||||
} | } | ||||
return ( | return ( | ||||
<Grid container sx={{minHeight: '90vh'}} direction="column"> | |||||
<Grid container sx={{minHeight: '90vh', backgroundColor: "backgroundColor.default"}} direction="column"> | |||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<div style={BackgroundHead}> | <div style={BackgroundHead}> | ||||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | <Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | ||||
@@ -25,7 +25,7 @@ const GroupAuthCard = Loadable(lazy(() => import('./GroupAuthCard'))); | |||||
const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard'))); | const UserGroupInfoCard = Loadable(lazy(() => import('./UserGroupInfoCard'))); | ||||
const UserAddCard = Loadable(lazy(() => import('./UserAddCard'))); | const UserAddCard = Loadable(lazy(() => import('./UserAddCard'))); | ||||
import { useNavigate } from "react-router"; | import { useNavigate } from "react-router"; | ||||
import KeyboardBackspaceOutlinedIcon from '@mui/icons-material/KeyboardBackspaceOutlined'; | |||||
import ForwardIcon from '@mui/icons-material/Forward'; | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | ||||
const BackgroundHead = { | const BackgroundHead = { | ||||
@@ -179,8 +179,7 @@ const UserMaintainPage = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12}> | <Grid item xs={12}> | ||||
<Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/usergroupSearchview") }}> | <Button sx={{ ml: 3.5, mt: 2 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/usergroupSearchview") }}> | ||||
<KeyboardBackspaceOutlinedIcon /> | |||||
<Typography variant="h4">Back</Typography> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | |||||
</Button> | </Button> | ||||
</Grid> | </Grid> | ||||
{/*col 1*/} | {/*col 1*/} | ||||