| @@ -97,7 +97,7 @@ const AuthLoginCustom = () => { | |||||
| submit: null | submit: null | ||||
| }), | }), | ||||
| validationSchema:yup.object().shape({ | validationSchema:yup.object().shape({ | ||||
| username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | |||||
| // username: yup.string().min(6,'用戶名稱最少6位').required('請輸入用戶名稱'), | |||||
| password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') | password: yup.string().min(8,'請輸入最少8位密碼').required('請輸入密碼') | ||||
| .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') | .matches(/^(?=.*[a-z])/, '請包括最少1個小寫字母') | ||||
| .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') | .matches(/^(?=.*[A-Z])/, '請包括最少1個大寫字母') | ||||
| @@ -109,8 +109,8 @@ const AuthLoginCustom = () => { | |||||
| const checkDataField = (data)=> { | const checkDataField = (data)=> { | ||||
| if (data.username !==""&& | if (data.username !==""&& | ||||
| data.password !==""&& | data.password !==""&& | ||||
| handlePassword(data.password)&& | |||||
| handle8Digi(data.username) | |||||
| handlePassword(data.password) | |||||
| // &&handle6Digi(data.username) | |||||
| ) | ) | ||||
| { | { | ||||
| setisValid(true) | setisValid(true) | ||||
| @@ -140,13 +140,13 @@ const AuthLoginCustom = () => { | |||||
| } | } | ||||
| } | } | ||||
| function handle8Digi(value) { | |||||
| if (value.length < 8) { | |||||
| return false; | |||||
| } else { | |||||
| return true; | |||||
| } | |||||
| } | |||||
| // function handle6Digi(value) { | |||||
| // if (value.length < 6) { | |||||
| // return false; | |||||
| // } else { | |||||
| // return true; | |||||
| // } | |||||
| // } | |||||
| const { values } = formik | const { values } = formik | ||||
| useEffect(() => { | useEffect(() => { | ||||
| @@ -147,6 +147,8 @@ const CustomFormWizard = (props) => { | |||||
| const uploadFileList = event.target.files; | const uploadFileList = event.target.files; | ||||
| const saveFileList = []; | const saveFileList = []; | ||||
| var currentIndex = 0; | var currentIndex = 0; | ||||
| // console.log("uploadFileList") | |||||
| // console.log(uploadFileList) | |||||
| if (currentFileList.length!=null){ | if (currentFileList.length!=null){ | ||||
| currentIndex = currentFileList.length; | currentIndex = currentFileList.length; | ||||
| @@ -156,10 +158,14 @@ const CustomFormWizard = (props) => { | |||||
| saveFileList.push(file); | saveFileList.push(file); | ||||
| } | } | ||||
| } | } | ||||
| // console.log("saveFileList") | |||||
| // console.log(saveFileList) | |||||
| for (let i = 0; i < uploadFileList.length && currentIndex>5; i++){ | |||||
| for (let i = 0; i < uploadFileList.length && currentIndex<5; i++){ | |||||
| const file = event.target.files[i] | const file = event.target.files[i] | ||||
| let isDuplicate = false; | let isDuplicate = false; | ||||
| // console.log("file 1") | |||||
| // console.log(file) | |||||
| // Check if the file name already exists in saveFileList | // Check if the file name already exists in saveFileList | ||||
| for (let j = 0; j < saveFileList.length; j++) { | for (let j = 0; j < saveFileList.length; j++) { | ||||
| if (saveFileList[j].name === file.name) { | if (saveFileList[j].name === file.name) { | ||||
| @@ -168,6 +174,8 @@ const CustomFormWizard = (props) => { | |||||
| } | } | ||||
| } | } | ||||
| if (!isDuplicate) { | if (!isDuplicate) { | ||||
| // console.log("file2") | |||||
| // console.log(file) | |||||
| file.id = currentIndex+i | file.id = currentIndex+i | ||||
| saveFileList.push(file) | saveFileList.push(file) | ||||
| updateList.items.add(file); | updateList.items.add(file); | ||||
| @@ -178,6 +186,8 @@ const CustomFormWizard = (props) => { | |||||
| setFileListData(saveFileList) | setFileListData(saveFileList) | ||||
| setFileList(updatedFileList); | setFileList(updatedFileList); | ||||
| // console.log("saveFileList2") | |||||
| // console.log(saveFileList) | |||||
| }; | }; | ||||
| useEffect(() => { | useEffect(() => { | ||||
| @@ -370,7 +380,8 @@ const CustomFormWizard = (props) => { | |||||
| const handleReset = (resetForm) => { | const handleReset = (resetForm) => { | ||||
| resetForm(); | resetForm(); | ||||
| setSelectedAddress4("") | setSelectedAddress4("") | ||||
| setSelectedIdDocType("") | |||||
| setSelectedIdDocType({}) | |||||
| // setSelectedIdDocLabel("") | // setSelectedIdDocLabel("") | ||||
| }; | }; | ||||
| @@ -1254,6 +1265,18 @@ const CustomFormWizard = (props) => { | |||||
| </Stack> | </Stack> | ||||
| </Grid> | </Grid> | ||||
| :null} | :null} | ||||
| <Grid item xs={12} md={12} mt={1} mb={1}> | |||||
| <Grid container> | |||||
| <Grid item xs={12} md={12}> | |||||
| <Stack spacing={1} direction="column" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}> | |||||
| <Typography display="inline" variant="h4" sx={{ color: 'primary.primary'}}>身份證明文件</Typography> | |||||
| {fileList !=null? | |||||
| <UploadFileTable recordList={fileListData} />:null} | |||||
| </Stack> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </Grid> | |||||
| </Grid> | </Grid> | ||||
| </Grid> | </Grid> | ||||
| @@ -2,13 +2,16 @@ | |||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { | import { | ||||
| DataGrid, | DataGrid, | ||||
| // GridActionsCellItem, | |||||
| GridActionsCellItem, | |||||
| } from "@mui/x-data-grid"; | } from "@mui/x-data-grid"; | ||||
| // import EditIcon from '@mui/icons-material/Edit'; | |||||
| import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline'; | |||||
| import {useEffect} from "react"; | import {useEffect} from "react"; | ||||
| // import {useNavigate} from "react-router-dom"; | // import {useNavigate} from "react-router-dom"; | ||||
| // import { useTheme } from '@mui/material/styles'; | // import { useTheme } from '@mui/material/styles'; | ||||
| import {Box} from '@mui/material'; | |||||
| import { | |||||
| // Box, | |||||
| Stack | |||||
| } from '@mui/material'; | |||||
| // ==============================|| EVENT TABLE ||============================== // | // ==============================|| EVENT TABLE ||============================== // | ||||
| export default function UploadFileTable({recordList}) { | export default function UploadFileTable({recordList}) { | ||||
| @@ -22,29 +25,38 @@ export default function UploadFileTable({recordList}) { | |||||
| setRows(recordList); | setRows(recordList); | ||||
| }, [recordList]); | }, [recordList]); | ||||
| // const handleEditClick = (id) => () => { | |||||
| // navigate('/user/'+ id); | |||||
| // }; | |||||
| function NoRowsOverlay() { | |||||
| return ( | |||||
| <Stack height="100%" alignItems="center" justifyContent="center"> | |||||
| 沒有上傳檔案 | |||||
| {/* <pre>(rows={[]})</pre> */} | |||||
| </Stack> | |||||
| ); | |||||
| } | |||||
| const handleEditClick = () => () => { | |||||
| // navigate('/user/'+ id); | |||||
| }; | |||||
| const columns = [ | const columns = [ | ||||
| // { | |||||
| // field: 'actions', | |||||
| // type: 'actions', | |||||
| // headerName: 'Actions', | |||||
| // width: 100, | |||||
| // cellClassName: 'actions', | |||||
| // getActions: ({id}) => { | |||||
| // return [ | |||||
| // <GridActionsCellItem | |||||
| // key="OutSave" | |||||
| // icon={<EditIcon/>} | |||||
| // label="Edit" | |||||
| // className="textPrimary" | |||||
| // onClick={handleEditClick(id)} | |||||
| // color="primary" | |||||
| // />] | |||||
| // }, | |||||
| // }, | |||||
| { | |||||
| field: 'actions', | |||||
| type: 'actions', | |||||
| headerName: '', | |||||
| width: 30, | |||||
| cellClassName: 'actions', | |||||
| getActions: ({id}) => { | |||||
| return [ | |||||
| <GridActionsCellItem | |||||
| key="OutSave" | |||||
| icon={<RemoveCircleOutlineIcon/>} | |||||
| label="delete" | |||||
| className="textPrimary" | |||||
| onClick={handleEditClick(id)} | |||||
| color="error" | |||||
| />] | |||||
| }, | |||||
| }, | |||||
| { | { | ||||
| id: 'name', | id: 'name', | ||||
| field: 'name', | field: 'name', | ||||
| @@ -56,7 +68,7 @@ export default function UploadFileTable({recordList}) { | |||||
| field: 'size', | field: 'size', | ||||
| headerName: '檔案大小', | headerName: '檔案大小', | ||||
| valueGetter: (params) => { | valueGetter: (params) => { | ||||
| console.log(params) | |||||
| // console.log(params) | |||||
| return Math.ceil(params.value/1024)+" KB"; | return Math.ceil(params.value/1024)+" KB"; | ||||
| }, | }, | ||||
| flex: 1, | flex: 1, | ||||
| @@ -64,7 +76,7 @@ export default function UploadFileTable({recordList}) { | |||||
| ]; | ]; | ||||
| return ( | return ( | ||||
| <Box style={{height: '20%', width: '100%',}}> | |||||
| <div style={{ height: 200, width: '100%' }}> | |||||
| <DataGrid | <DataGrid | ||||
| rows={rows} | rows={rows} | ||||
| columns={columns} | columns={columns} | ||||
| @@ -72,14 +84,19 @@ export default function UploadFileTable({recordList}) { | |||||
| sx={{border:1}} | sx={{border:1}} | ||||
| rowModesModel={rowModesModel} | rowModesModel={rowModesModel} | ||||
| disablePagination | disablePagination | ||||
| components={{ NoRowsOverlay, }} | |||||
| initialState={{ | initialState={{ | ||||
| pagination: { | pagination: { | ||||
| paginationModel: {}, | paginationModel: {}, | ||||
| }, | }, | ||||
| }} | }} | ||||
| hideFooterPagination={true} | |||||
| autoHeight = {true} | |||||
| // hideFooterPagination={true} | |||||
| disableSelectionOnClick | |||||
| disableColumnMenu | |||||
| disableColumnSelector | |||||
| hideFooter | |||||
| //autoHeight = {true} | |||||
| /> | /> | ||||
| </Box> | |||||
| </div> | |||||
| ); | ); | ||||
| } | } | ||||