| @@ -0,0 +1,177 @@ | |||||
| // material-ui | |||||
| import { | |||||
| Grid, | |||||
| Typography, | |||||
| Button | |||||
| } from '@mui/material'; | |||||
| import { useFormik } from 'formik'; | |||||
| import * as yup from 'yup'; | |||||
| import * as React from "react"; | |||||
| import * as HttpUtils from "../../../utils/HttpUtils"; | |||||
| import * as UrlUtils from "../../../utils/ApiPathConst"; | |||||
| import * as FieldUtils from "../../../utils/FieldUtils"; | |||||
| import Loadable from 'components/Loadable'; | |||||
| import { lazy } from 'react'; | |||||
| const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
| const PublicNoticeApplyForm = () => { | |||||
| const [userData, setUserData] = React.useState([]); | |||||
| const [isLoading, setLoding] = React.useState(true); | |||||
| const [attachment, setAttachment] = React.useState({}); | |||||
| const formik = useFormik({ | |||||
| enableReinitialize:true, | |||||
| initialValues:userData, | |||||
| validationSchema:yup.object().shape({ | |||||
| group: yup.string().max(255), | |||||
| groupTitle: yup.string().max(255), | |||||
| groupNo: yup.string().max(255), | |||||
| issueId: yup.string().max(255).nullable(), | |||||
| contactPerson: yup.string().max(40).nullable(), | |||||
| tel_countryCode: yup.string().min(3,'請輸入3位數字').required('請輸入國際區號'), | |||||
| fax_countryCode: yup.string().min(3,'請輸入3位數字'), | |||||
| phoneNumber: yup.string().min(8,'請輸入8位數字').required('請輸入聯絡電話'), | |||||
| faxNumber: yup.string().min(8,'請輸入8位數字').required('請輸入8位數字'), | |||||
| remarks: yup.string().max(255).nullable(), | |||||
| }), | |||||
| onSubmit:values=>{ | |||||
| console.log(values); | |||||
| HttpUtils.post({ | |||||
| url: UrlUtils.POST_PUBLIC_NOTICE_SAVE, | |||||
| params: { | |||||
| id: 0, | |||||
| group: values.chName, | |||||
| groupTitle: values.groupTitle, | |||||
| groupNo: values.groupNo, | |||||
| issueId: values.issueId, | |||||
| contactPerson: values.contactPerson, | |||||
| contactTelNo: { | |||||
| countryCode: values.tel_countryCode, | |||||
| phoneNumber: values.phoneNumber | |||||
| }, | |||||
| contactFaxNo:{ | |||||
| countryCode: values.fax_countryCode, | |||||
| faxNumber: values.faxNumber | |||||
| }, | |||||
| remarks:values.remarks, | |||||
| file: attachment | |||||
| }, | |||||
| onSuccess: function(){ | |||||
| loadDataFun(); | |||||
| } | |||||
| }); | |||||
| } | |||||
| }); | |||||
| React.useEffect(()=>{ | |||||
| loadUserData(); | |||||
| },[]); | |||||
| const loadUserData = ()=>{ | |||||
| setLoding(true); | |||||
| HttpUtils.get({ | |||||
| url: `${UrlUtils.GET_PUBLIC_NOTICE_getApplyUser}`, | |||||
| onSuccess: function(response){ | |||||
| response["tel_countryCode"] = response?.contactTelNo?.countryCode; | |||||
| response["phoneNumber"] = response?.contactTelNo?.phoneNumber; | |||||
| response["fax_countryCode"] = response?.contactFaxNo?.countryCode; | |||||
| response["faxNumber"] = response?.contactFaxNo?.faxNumber; | |||||
| setUserData(response); | |||||
| } | |||||
| }); | |||||
| }; | |||||
| React.useEffect(() => { | |||||
| setLoding(false); | |||||
| }, [userData]); | |||||
| // const onUploadClick=()=>{ | |||||
| // document.getElementById('uploadFileBtn').click(); | |||||
| // } | |||||
| const readFile=(event)=>{ | |||||
| setAttachment(event.target.files[0]); | |||||
| } | |||||
| return ( | |||||
| isLoading ? | |||||
| <LoadingComponent/> | |||||
| : | |||||
| <Grid container style={{ padding: 24}} rowSpacing={4.5} columnSpacing={2.75}> | |||||
| <Grid item xs={12}> | |||||
| <Typography variant="h5">申請公共啟事</Typography> | |||||
| </Grid> | |||||
| <form style={{ width: "100%"}} onSubmit={formik.handleSubmit} > | |||||
| <Grid container spacing={1}> | |||||
| <Grid item lg={4}></Grid> | |||||
| {FieldUtils.getTextField({ | |||||
| label:"聯絡人:", | |||||
| valueName:"contactPerson", | |||||
| form: formik | |||||
| })} | |||||
| <Grid item lg={4}></Grid> | |||||
| <Grid item lg={4}></Grid> | |||||
| {FieldUtils.getPhoneField({ | |||||
| label:"聯繫電話:", | |||||
| valueName:{ | |||||
| code: "tel_countryCode", | |||||
| num:"phoneNumber" | |||||
| }, | |||||
| form: formik | |||||
| })} | |||||
| <Grid item lg={4}></Grid> | |||||
| <Grid item lg={4}></Grid> | |||||
| {FieldUtils.getPhoneField({ | |||||
| label:"聯繫傳真:", | |||||
| valueName:{ | |||||
| code: "fax_countryCode", | |||||
| num:"faxNumber" | |||||
| }, | |||||
| form: formik | |||||
| })} | |||||
| <Grid item lg={4}></Grid> | |||||
| <Grid item lg={12}> | |||||
| <center> | |||||
| <input | |||||
| id="uploadFileBtn" | |||||
| name="file" | |||||
| type="file" | |||||
| accept="image/png, image/jpeg" | |||||
| onChange={(event)=> { | |||||
| readFile(event) | |||||
| }} | |||||
| /> | |||||
| {/* <Button | |||||
| variant="contained" | |||||
| size="large" | |||||
| onClick={()=>{ | |||||
| onUploadClick(); | |||||
| }} | |||||
| >上傳文件</Button> */} | |||||
| </center> | |||||
| </Grid> | |||||
| <Grid item lg={12}> | |||||
| <center> | |||||
| <Button | |||||
| variant="contained" | |||||
| type="submit" | |||||
| size="large" | |||||
| >申請公共啟事</Button> | |||||
| </center> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </form> | |||||
| </Grid> | |||||
| ); | |||||
| }; | |||||
| export default PublicNoticeApplyForm; | |||||
| @@ -0,0 +1,85 @@ | |||||
| // material-ui | |||||
| import * as React from 'react'; | |||||
| import { | |||||
| DataGrid, | |||||
| GridActionsCellItem, | |||||
| } from "@mui/x-data-grid"; | |||||
| import * as Icon from '../../../utils/IconUtils'; | |||||
| import * as DateUtils from "../../../utils/DateUtils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | |||||
| export default function SubmittedTab({rows}) { | |||||
| const [rowModesModel] = React.useState({}); | |||||
| const columns = [ | |||||
| { | |||||
| id: 'appNo', | |||||
| field: 'appNo', | |||||
| headerName: '申請編號', | |||||
| flex: 1, | |||||
| }, | |||||
| { | |||||
| id: 'created', | |||||
| field: 'created', | |||||
| headerName: '提交日期', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'remarks', | |||||
| field: 'remarks', | |||||
| headerName: '我的備註', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'status', | |||||
| field: 'status', | |||||
| headerName: '狀態', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| field: 'actions', | |||||
| type: 'actions', | |||||
| headerName: '', | |||||
| width: 50, | |||||
| cellClassName: 'actions', | |||||
| getActions: (params) => { | |||||
| return [ | |||||
| <GridActionsCellItem | |||||
| key="OutSave" | |||||
| icon={<Icon.Download/>} | |||||
| label="查看詳細" | |||||
| className="textPrimary" | |||||
| onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||||
| color="primary" | |||||
| />] | |||||
| }, | |||||
| } | |||||
| ]; | |||||
| return ( | |||||
| <div style={{height: 400, width: '100%'}}> | |||||
| <DataGrid | |||||
| rows={rows} | |||||
| columns={columns} | |||||
| editMode="row" | |||||
| rowModesModel={rowModesModel} | |||||
| initialState={{ | |||||
| pagination: { | |||||
| paginationModel: {page: 0, pageSize: 5}, | |||||
| }, | |||||
| }} | |||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight = {true} | |||||
| /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| @@ -0,0 +1,93 @@ | |||||
| // material-ui | |||||
| import * as React from 'react'; | |||||
| import { | |||||
| DataGrid, | |||||
| GridActionsCellItem, | |||||
| } from "@mui/x-data-grid"; | |||||
| import { | |||||
| Button | |||||
| } from '@mui/material'; | |||||
| import * as Icon from 'utils/IconUtils'; | |||||
| import * as DateUtils from "utils/DateUtils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | |||||
| export default function SubmittedTab({rows}) { | |||||
| const [rowModesModel] = React.useState({}); | |||||
| const columns = [ | |||||
| { | |||||
| id: 'appNo', | |||||
| field: 'appNo', | |||||
| headerName: '申請編號', | |||||
| flex: 1, | |||||
| }, | |||||
| { | |||||
| id: 'created', | |||||
| field: 'created', | |||||
| headerName: '提交日期', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'remarks', | |||||
| field: 'remarks', | |||||
| headerName: '我的備註', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'status', | |||||
| field: 'status', | |||||
| headerName: '狀態', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| field: 'actions', | |||||
| type: 'actions', | |||||
| headerName: '', | |||||
| width: 50, | |||||
| cellClassName: 'actions', | |||||
| getActions: (params) => { | |||||
| return [ | |||||
| <GridActionsCellItem | |||||
| key="OutSave" | |||||
| icon={<Icon.Download/>} | |||||
| label="查看詳細" | |||||
| className="textPrimary" | |||||
| onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||||
| color="primary" | |||||
| />] | |||||
| }, | |||||
| } | |||||
| ]; | |||||
| const onPaymentClick=()=>{ | |||||
| } | |||||
| return ( | |||||
| <div style={{height: 400, width: '100%'}}> | |||||
| <DataGrid | |||||
| rows={rows} | |||||
| columns={columns} | |||||
| editMode="row" | |||||
| rowModesModel={rowModesModel} | |||||
| initialState={{ | |||||
| pagination: { | |||||
| paginationModel: {page: 0, pageSize: 5}, | |||||
| }, | |||||
| }} | |||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight = {true} | |||||
| /> | |||||
| <Button variant="contained" onClick={()=>{onPaymentClick()}}>付款</Button> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| @@ -0,0 +1,85 @@ | |||||
| // material-ui | |||||
| import * as React from 'react'; | |||||
| import { | |||||
| DataGrid, | |||||
| GridActionsCellItem, | |||||
| } from "@mui/x-data-grid"; | |||||
| import * as Icon from 'utils/IconUtils'; | |||||
| import * as DateUtils from "utils/DateUtils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | |||||
| export default function SubmittedTab({rows}) { | |||||
| const [rowModesModel] = React.useState({}); | |||||
| const columns = [ | |||||
| { | |||||
| id: 'appNo', | |||||
| field: 'appNo', | |||||
| headerName: '申請編號', | |||||
| flex: 1, | |||||
| }, | |||||
| { | |||||
| id: 'created', | |||||
| field: 'created', | |||||
| headerName: '提交日期', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'remarks', | |||||
| field: 'remarks', | |||||
| headerName: '我的備註', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'status', | |||||
| field: 'status', | |||||
| headerName: '狀態', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| field: 'actions', | |||||
| type: 'actions', | |||||
| headerName: '', | |||||
| width: 50, | |||||
| cellClassName: 'actions', | |||||
| getActions: (params) => { | |||||
| return [ | |||||
| <GridActionsCellItem | |||||
| key="OutSave" | |||||
| icon={<Icon.Download/>} | |||||
| label="查看詳細" | |||||
| className="textPrimary" | |||||
| onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||||
| color="primary" | |||||
| />] | |||||
| }, | |||||
| } | |||||
| ]; | |||||
| return ( | |||||
| <div style={{height: 400, width: '100%'}}> | |||||
| <DataGrid | |||||
| rows={rows} | |||||
| columns={columns} | |||||
| editMode="row" | |||||
| rowModesModel={rowModesModel} | |||||
| initialState={{ | |||||
| pagination: { | |||||
| paginationModel: {page: 0, pageSize: 5}, | |||||
| }, | |||||
| }} | |||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight = {true} | |||||
| /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| @@ -0,0 +1,107 @@ | |||||
| // material-ui | |||||
| import * as React from 'react'; | |||||
| import { | |||||
| OutlinedInput, | |||||
| Button | |||||
| } from '@mui/material'; | |||||
| import { | |||||
| DataGrid, | |||||
| GridActionsCellItem, | |||||
| } from "@mui/x-data-grid"; | |||||
| import * as Icon from '../../../utils/IconUtils'; | |||||
| import * as DateUtils from "../../../utils/DateUtils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | |||||
| export default function SubmittedTab({rows}) { | |||||
| const [rowModesModel] = React.useState({}); | |||||
| const columns = [ | |||||
| { | |||||
| id: 'appNo', | |||||
| field: 'appNo', | |||||
| headerName: '申請編號', | |||||
| flex: 1, | |||||
| }, | |||||
| { | |||||
| id: 'created', | |||||
| field: 'created', | |||||
| headerName: '提交日期', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'remarks', | |||||
| field: 'remarks', | |||||
| headerName: '我的備註', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| id: 'status', | |||||
| field: 'status', | |||||
| headerName: '狀態', | |||||
| flex: 1, | |||||
| valueGetter:(params)=>{ | |||||
| return DateUtils.datetimeStr(params.value); | |||||
| } | |||||
| }, | |||||
| { | |||||
| field: 'actions', | |||||
| type: 'actions', | |||||
| headerName: '', | |||||
| width: 50, | |||||
| cellClassName: 'actions', | |||||
| getActions: (params) => { | |||||
| return [ | |||||
| <GridActionsCellItem | |||||
| key="OutSave" | |||||
| icon={<Icon.Download/>} | |||||
| label="查看詳細" | |||||
| className="textPrimary" | |||||
| onClick={onDownloadClick(params.id, params.row.skey, params.row.filename)} | |||||
| color="primary" | |||||
| />] | |||||
| }, | |||||
| } | |||||
| ]; | |||||
| const doSearch=()=>{ | |||||
| } | |||||
| return ( | |||||
| <div style={{height: 400, width: '100%'}}> | |||||
| <center> | |||||
| <div> | |||||
| <OutlinedInput | |||||
| style={{width: 400}} | |||||
| id="chName-signup" | |||||
| type="text" | |||||
| name="chName" | |||||
| placeholder="搜尋..." | |||||
| /> | |||||
| <Button variant="contained" onClick={()=>{doSearch()}}>搜尋</Button> | |||||
| </div> | |||||
| </center> | |||||
| <DataGrid | |||||
| rows={rows} | |||||
| columns={columns} | |||||
| editMode="row" | |||||
| rowModesModel={rowModesModel} | |||||
| initialState={{ | |||||
| pagination: { | |||||
| paginationModel: {page: 0, pageSize: 5}, | |||||
| }, | |||||
| }} | |||||
| pageSizeOptions={[5, 10]} | |||||
| autoHeight = {true} | |||||
| /> | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| @@ -4,8 +4,8 @@ import { | |||||
| DataGrid, | DataGrid, | ||||
| GridActionsCellItem, | GridActionsCellItem, | ||||
| } from "@mui/x-data-grid"; | } from "@mui/x-data-grid"; | ||||
| import * as Icon from '../../utils/IconUtils'; | |||||
| import * as DateUtils from "../../utils/DateUtils" | |||||
| import * as Icon from '../../../utils/IconUtils'; | |||||
| import * as DateUtils from "../../../utils/DateUtils" | |||||
| // ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
| export default function SubmittedTab({rows}) { | export default function SubmittedTab({rows}) { | ||||
| @@ -68,7 +68,6 @@ export default function SubmittedTab({rows}) { | |||||
| return ( | return ( | ||||
| <div style={{height: 400, width: '100%'}}> | <div style={{height: 400, width: '100%'}}> | ||||
| <DataGrid | <DataGrid | ||||
| sx={sx} | |||||
| rows={rows} | rows={rows} | ||||
| columns={columns} | columns={columns} | ||||
| editMode="row" | editMode="row" | ||||
| @@ -0,0 +1,132 @@ | |||||
| // material-ui | |||||
| import { | |||||
| Grid, | |||||
| Typography, | |||||
| Tab, | |||||
| Box, | |||||
| Button | |||||
| } from '@mui/material'; | |||||
| import {TabPanel, TabContext, TabList } from '@mui/lab'; | |||||
| import {useEffect, useState} from "react"; | |||||
| import {useNavigate} from "react-router-dom"; | |||||
| import * as React from "react"; | |||||
| import * as HttpUtils from "../../../utils/HttpUtils"; | |||||
| import * as UrlUtils from "../../../utils/ApiPathConst"; | |||||
| import Loadable from 'components/Loadable'; | |||||
| import { lazy } from 'react'; | |||||
| const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab'))); | |||||
| const InProgressTab = Loadable(lazy(() => import('./InProgressTab'))); | |||||
| const PendingPaymentTab = Loadable(lazy(() => import('./PendingPaymentTab'))); | |||||
| const PendingPublishTab = Loadable(lazy(() => import('./PendingPublishTab'))); | |||||
| const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent'))); | |||||
| const SearchTab = Loadable(lazy(() => import('./SearchTab'))); | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
| const PublicNotice = () => { | |||||
| const [submittedList, setSubmittedList] = useState([]); | |||||
| const [inProgressList, setInProgressList] = useState([]); | |||||
| const [pendingPaymentList, setPendingPaymentList] = useState([]); | |||||
| const [pendingPublishList, setPendingPublishList] = useState([]); | |||||
| const [isLoading, setLoding] = useState(true); | |||||
| const [selectedTab, setSelectedTab] = useState("1"); | |||||
| const navigate=useNavigate(); | |||||
| useEffect(()=>{ | |||||
| loadData(); | |||||
| },[]); | |||||
| const reloadPage=()=>{ | |||||
| window.location.reload(false); | |||||
| } | |||||
| const loadData = ()=>{ | |||||
| setLoding(true); | |||||
| HttpUtils.get({ | |||||
| url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST}`, | |||||
| onSuccess: function(response){ | |||||
| setSubmittedList(response.data["submitted"]); | |||||
| setInProgressList(response.data["inProgress"]); | |||||
| setPendingPaymentList(response.data["pendingPayment"]); | |||||
| setPendingPublishList(response.data["pendingPublish"]); | |||||
| } | |||||
| }); | |||||
| }; | |||||
| useEffect(() => { | |||||
| setLoding(false); | |||||
| }, [submittedList]); | |||||
| const handleChange = (event, newValue)=>{ | |||||
| setSelectedTab(newValue); | |||||
| } | |||||
| const onBtnClick=()=>{ | |||||
| navigate('/publicNotice/apply') | |||||
| } | |||||
| return ( | |||||
| isLoading ? | |||||
| <LoadingComponent/> | |||||
| : | |||||
| <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||||
| <Typography variant="h5">我的公共啟事</Typography> | |||||
| </Grid> | |||||
| <Grid item xs={12} sx={{mb: -2.25}}> | |||||
| <Button variant="contained" onClick={()=>{onBtnClick()}}>申請公共啟事</Button> | |||||
| </Grid> | |||||
| {/*col 2*/} | |||||
| <Grid item xs={12}> | |||||
| <TabContext value={selectedTab}> | |||||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||||
| <TabList onChange={handleChange} aria-label="lab API tabs example"> | |||||
| <Tab label="已提交" value="1" /> | |||||
| <Tab label="處理中" value="2" /> | |||||
| <Tab label="待付款" value="3" /> | |||||
| <Tab label="待發佈" value="4" /> | |||||
| <Tab label="搜尋申請記錄" value="5" /> | |||||
| </TabList> | |||||
| </Box> | |||||
| <TabPanel value="1"> | |||||
| <SubmittedTab | |||||
| rows={submittedList} | |||||
| reloadFunction={reloadPage} | |||||
| /> | |||||
| </TabPanel> | |||||
| <TabPanel value="2"> | |||||
| <InProgressTab | |||||
| rows={inProgressList} | |||||
| reloadFunction={reloadPage} | |||||
| /> | |||||
| </TabPanel> | |||||
| <TabPanel value="3"> | |||||
| <PendingPaymentTab | |||||
| rows={pendingPaymentList} | |||||
| reloadFunction={reloadPage} | |||||
| /> | |||||
| </TabPanel> | |||||
| <TabPanel value="4"> | |||||
| <PendingPublishTab | |||||
| rows={pendingPublishList} | |||||
| reloadFunction={reloadPage} | |||||
| /> | |||||
| </TabPanel> | |||||
| <TabPanel value="5"> | |||||
| <SearchTab | |||||
| rows={pendingPublishList} | |||||
| reloadFunction={reloadPage} | |||||
| /> | |||||
| </TabPanel> | |||||
| </TabContext> | |||||
| </Grid> | |||||
| </Grid> | |||||
| ); | |||||
| }; | |||||
| export default PublicNotice; | |||||
| @@ -1,166 +0,0 @@ | |||||
| // material-ui | |||||
| import { | |||||
| // Grid, | |||||
| Typography, | |||||
| Tabs, | |||||
| Tab, | |||||
| Box | |||||
| } from '@mui/material'; | |||||
| // import {TabPanel, TabContext, TabList } from '@mui/lab'; | |||||
| // import {useEffect, useState} from "react"; | |||||
| import * as React from "react"; | |||||
| // import * as HttpUtils from "../../utils/HttpUtils"; | |||||
| // import * as UrlUtils from "../../utils/ApiPathConst"; | |||||
| // import Loadable from 'components/Loadable'; | |||||
| // import { lazy } from 'react'; | |||||
| // const SubmittedTab = Loadable(lazy(() => import('./SubmittedTab'))); | |||||
| // const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent'))); | |||||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
| function a11yProps(index) { | |||||
| return { | |||||
| id: `simple-tab-${index}`, | |||||
| 'aria-controls': `simple-tabpanel-${index}`, | |||||
| }; | |||||
| } | |||||
| function CustomTabPanel(props) { | |||||
| const { children, value, index, ...other } = props; | |||||
| return ( | |||||
| <div | |||||
| role="tabpanel" | |||||
| hidden={value !== index} | |||||
| id={`simple-tabpanel-${index}`} | |||||
| aria-labelledby={`simple-tab-${index}`} | |||||
| {...other} | |||||
| > | |||||
| {value === index && ( | |||||
| <Box sx={{ p: 3 }}> | |||||
| <Typography>{children}</Typography> | |||||
| </Box> | |||||
| )} | |||||
| </div> | |||||
| ); | |||||
| } | |||||
| export default function BasicTabs() { | |||||
| const [value, setValue] = React.useState(0); | |||||
| const handleChange = (event, newValue) => { | |||||
| setValue(newValue); | |||||
| }; | |||||
| return ( | |||||
| <> | |||||
| <Box sx={{ p: 3 }}> | |||||
| <Typography>123</Typography> | |||||
| </Box> | |||||
| <Box sx={{ width: '100%' }}> | |||||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||||
| <Tabs value={value} onChange={handleChange} aria-label="basic tabs example"> | |||||
| <Tab label="Item One" {...a11yProps(0)} /> | |||||
| <Tab label="Item Two" {...a11yProps(1)} /> | |||||
| <Tab label="Item Three" {...a11yProps(2)} /> | |||||
| </Tabs> | |||||
| </Box> | |||||
| <CustomTabPanel value={value} index={0}> | |||||
| Item One | |||||
| </CustomTabPanel> | |||||
| <CustomTabPanel value={value} index={1}> | |||||
| Item Two | |||||
| </CustomTabPanel> | |||||
| <CustomTabPanel value={value} index={2}> | |||||
| Item Three | |||||
| </CustomTabPanel> | |||||
| </Box> | |||||
| </> | |||||
| ); | |||||
| } | |||||
| // const PublicNotice = () => { | |||||
| // const [submittedList, setSubmittedList] = useState([]); | |||||
| // // const [inProgressList, setInProgressList] = useState([]); | |||||
| // // const [pendingPaymentList, setPendingPaymentList] = useState([]); | |||||
| // // const [pendingPublishList, setPendingPublishList] = useState([]); | |||||
| // const [isLoading, setLoding] = useState(true); | |||||
| // const [selectedTab, setSelectedTab] = useState("1"); | |||||
| // useEffect(()=>{ | |||||
| // loadData(); | |||||
| // },[]); | |||||
| // const reloadPage=()=>{ | |||||
| // window.location.reload(false); | |||||
| // } | |||||
| // const loadData = ()=>{ | |||||
| // setLoding(true); | |||||
| // HttpUtils.get({ | |||||
| // url: `${UrlUtils.GET_PUBLIC_NOTICE_LIST}`, | |||||
| // onSuccess: function(response){ | |||||
| // setSubmittedList(response.data["submitted"]); | |||||
| // // setInProgressList(response.data["inProgress"]); | |||||
| // // setPendingPaymentList(response.data["pendingPayment"]); | |||||
| // // setPendingPublishList(response.data["pendingPublish"]); | |||||
| // } | |||||
| // }); | |||||
| // }; | |||||
| // useEffect(() => { | |||||
| // setLoding(false); | |||||
| // }, [submittedList]); | |||||
| // const handleChange = (event, newValue)=>{ | |||||
| // setSelectedTab(newValue); | |||||
| // } | |||||
| // return ( | |||||
| // isLoading ? | |||||
| // <LoadingComponent/> | |||||
| // : | |||||
| // <Grid container rowSpacing={4.5} columnSpacing={2.75}> | |||||
| // <Grid item xs={12} sx={{mb: -2.25}}> | |||||
| // <Typography variant="h5">我的公共啟事</Typography> | |||||
| // </Grid> | |||||
| // {/*col 2*/} | |||||
| // <Grid item xs={12}> | |||||
| // <TabContext value={selectedTab}> | |||||
| // <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||||
| // <TabList onChange={handleChange} aria-label="lab API tabs example"> | |||||
| // <Tab label="已提交" value="1" /> | |||||
| // <Tab label="處理中" value="2" /> | |||||
| // <Tab label="待付款" value="3" /> | |||||
| // <Tab label="待發佈" value="4" /> | |||||
| // <Tab label="搜尋申請記錄" value="5" /> | |||||
| // </TabList> | |||||
| // </Box> | |||||
| // <TabPanel value="1"> | |||||
| // <SubmittedTab | |||||
| // rows={submittedList} | |||||
| // reloadFunction={reloadPage} | |||||
| // /> | |||||
| // </TabPanel> | |||||
| // <TabPanel value="2"> | |||||
| // TODO | |||||
| // </TabPanel> | |||||
| // <TabPanel value="3"> | |||||
| // TODO | |||||
| // </TabPanel> | |||||
| // <TabPanel value="4"> | |||||
| // TODO | |||||
| // </TabPanel> | |||||
| // <TabPanel value="5">TODO</TabPanel> | |||||
| // </TabContext> | |||||
| // </Grid> | |||||
| // </Grid> | |||||
| // ); | |||||
| // }; | |||||
| // export default PublicNotice; | |||||
| @@ -8,7 +8,8 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout'))); | |||||
| // render - dashboard | // render - dashboard | ||||
| const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard'))); | const DashboardDefault = Loadable(lazy(() => import('pages/publicDashboard'))); | ||||
| const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage'))); | const ManageOrgUser = Loadable(lazy(() => import('pages/ManageOrgUserPage'))); | ||||
| const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice'))); | |||||
| const PublicNotice = Loadable(lazy(() => import('pages/PublicNotice/ListPanel'))); | |||||
| const PublicNoticeApplyForm = Loadable(lazy(() => import('pages/PublicNotice/ApplyForm'))); | |||||
| // ==============================|| MAIN ROUTING ||============================== // | // ==============================|| MAIN ROUTING ||============================== // | ||||
| @@ -34,6 +35,10 @@ const PublicDashboard = { | |||||
| { | { | ||||
| path: 'publicNotice', | path: 'publicNotice', | ||||
| element: <PublicNotice/> | element: <PublicNotice/> | ||||
| }, | |||||
| { | |||||
| path: 'publicNotice/apply', | |||||
| element: <PublicNoticeApplyForm/> | |||||
| } | } | ||||
| ] | ] | ||||
| }, | }, | ||||
| @@ -49,6 +49,8 @@ export const GET_SET_UN_PRIMARY_USER = apiPath+'/user/un-primary'; | |||||
| export const GET_PUBLIC_NOTICE_LIST = apiPath+'/application/list'; | export const GET_PUBLIC_NOTICE_LIST = apiPath+'/application/list'; | ||||
| export const GET_PUBLIC_NOTICE_LIST_ListByStatus = apiPath+'/application/status-list'; | export const GET_PUBLIC_NOTICE_LIST_ListByStatus = apiPath+'/application/status-list'; | ||||
| export const GET_PUBLIC_NOTICE_getApplyUser = apiPath+'/application/get-apply-user'; | |||||
| export const POST_PUBLIC_NOTICE_SAVE = apiPath+'/application/save'; | |||||
| //GLD User | //GLD User | ||||
| export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | ||||
| @@ -177,4 +177,4 @@ export const initField=({type, valueName, form, disabled, placeholder, inputProp | |||||
| }, | }, | ||||
| }} | }} | ||||
| /> | /> | ||||
| } | |||||
| } | |||||
| @@ -20,12 +20,14 @@ export const put = ({url,params, onSuccess, onFail, onError}) =>{ | |||||
| }); | }); | ||||
| }; | }; | ||||
| export const post = ({url, params, onSuccess, onFail, onError}) =>{ | |||||
| export const post = ({url, params, onSuccess, onFail, onError, headers}) =>{ | |||||
| headers = headers?headers:{ | |||||
| "Content-Type":"application/json" | |||||
| }; | |||||
| axios.post(url,params, | axios.post(url,params, | ||||
| { | { | ||||
| headers: { | |||||
| "Content-Type":"application/json" | |||||
| } | |||||
| headers:headers | |||||
| }).then( | }).then( | ||||
| (response)=>{onResponse(response, onSuccess, onFail);} | (response)=>{onResponse(response, onSuccess, onFail);} | ||||
| ).catch(error => { | ).catch(error => { | ||||